@charset "UTF-8";
/* Block: speakers-grid - Accessible expandable speaker cards on a geometric background */

.htc-speakers {
    position: relative;
    padding: 2rem 1rem 3rem;
    background: #ffffff;
    /* Enforce a single, consistent avatar size across all cards */
    --htc-speaker-size: 180px;
}

.htc-speakers::before { content: none; }

.htc-speakers .htc-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.htc-speakers__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.htc-speaker-card {
    background: #ffffff;
    border: 1px solid #e6eef5;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 200ms ease, transform 160ms ease;
    background-image: linear-gradient(rgba(255, 255, 255, 0.425), rgb(255, 255, 255)), url(/wp-content/themes/bricks/assets/images/speaker_background.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.htc-speaker-card > summary {
    list-style: none;
    cursor: pointer;
}

.htc-speaker-card > summary::-webkit-details-marker { display: none; }

.htc-speaker-card__summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem 1rem;
}

.htc-speaker-card__figure {
    position: relative;
    inline-size: var(--htc-speaker-size);
    block-size: var(--htc-speaker-size);
    min-inline-size: var(--htc-speaker-size);
    min-block-size: var(--htc-speaker-size);
    flex: 0 0 var(--htc-speaker-size);
    aspect-ratio: 1 / 1; /* guarantee perfect circle */
    border-radius: 50%;
    margin: 0 0 1.25rem 0;
    background: radial-gradient(circle at 30% 30%, #f8fafc, #eef2f7);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}

.htc-speaker-card__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid #ffffff; /* inner white ring */
    box-shadow: inset 0 0 0 2px #007cba; /* soft blue outer ring */
    pointer-events: none;
}

.htc-speaker-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Default face bias: slightly above center */
    object-position: var(--focus-x, 50%) var(--focus-y, 38%);
    border-radius: 50%;
    display: block;
}

/* Name below the photo */
.htc-speaker-card__name {
    margin: 0.25rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
    text-align: center;
}

.htc-speaker-card__bio {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #ecf0f4;
    color: #334155;
    line-height: 1.6;
    height: 0; /* JS sets to pixel height during animation, then auto */
    opacity: 0;
    overflow: hidden;
    /* Include height so JS-driven pixel height changes animate smoothly */
    transition: height 220ms ease, opacity 220ms ease, transform 180ms ease;
    transform-origin: top;
    contain: layout paint;
}

/* Apply will-change only while animating to avoid long-term memory costs */
.htc-speaker-card__bio.is-animating { will-change: height, opacity, transform; }

details.htc-speaker-card[open] .htc-speaker-card__bio { opacity: 1; }

/* Open-state visual emphasis */
details.htc-speaker-card[open] {
    border-color: #007cba;
    box-shadow: 0 10px 26px rgba(0, 124, 186, 0.22);
}
details.htc-speaker-card[open] .htc-speaker-card__ring {
    box-shadow: inset 0 0 0 3px #007cba;
}

/* Reduce transform jank on mobile; only transform at >=576px */
@media (min-width: 576px) {
    details.htc-speaker-card[open] { transform: translateY(-2px) scale(1.01); }
}

.htc-speaker-card__subtitle {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #0f172a; /* slate-900 */
}

.htc-speaker-card__bio-text {
    margin: 0.25rem 0 0 0;
}

/* Focus styles */
.htc-speaker-card > summary:focus-visible { outline: none; }
.htc-speaker-card__summary:focus-visible {
    outline: 3px solid #007cba;
    outline-offset: 4px;
    border-radius: 14px;
}

/* Responsive */
@media (min-width: 576px) and (max-width: 1023.98px) {
    .htc-speakers { padding: 2.5rem 1rem 3.25rem; }
    .htc-speakers__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
    /* When a card is open, let it span the whole row to avoid
       empty neighboring columns in 2-up layouts */
    details.htc-speaker-card[open] { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .htc-speakers { padding: 3rem 1rem 4rem; }
    .htc-speakers__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    /* In 3-up layouts, expand the opened card to full width
       so the row doesn’t show empty columns */
    details.htc-speaker-card[open] { grid-column: 1 / -1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .htc-speaker-card__bio { transition: none; }
    /* Disable card transform animation & all transitions when user prefers reduced motion */
    .htc-speaker-card { transition: none; }
    details.htc-speaker-card[open] { transform: none; }
}

/* While closing inline (mobile), fade out concurrently with height animation */
details.htc-speaker-card.is-closing .htc-speaker-card__bio { 
    opacity: 0; 
    transform: translateY(-2px) scaleY(0.96); 
}

/* Modal overlay for non-mobile (>=576px) interactions */
body.htc-no-scroll { overflow: hidden; }

.htc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7); /* slate-900 @ 70% */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none; /* keep visible for fade-out, block clicks when closed */
    transition: opacity 220ms ease;
    z-index: 10000;
}

.htc-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.htc-modal {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.35);
    width: min(92vw, 820px);
    max-height: min(86vh, 880px);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
    position: relative;
}

.htc-modal-overlay.is-open .htc-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.htc-modal__header {
    padding: 1rem 1.25rem 0.25rem;
}

.htc-modal__content {
    padding: 0 1.25rem 1.25rem;
    overflow: auto;
    max-height: calc(min(86vh, 880px) - 3rem);
}

.htc-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
}

/* Maintain hover background; provide an accessible focus-visible ring */
.htc-modal__close:hover { background: #eef2f7; }
.htc-modal__close:focus-visible {
    background: #eef2f7; /* keep same visual affordance */
    /* Dual ring: inner matches modal background to create separation, outer is high-contrast brand color */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007cba; /* respects border-radius */
    outline: none; /* box-shadow provides the visible focus indicator */
}

/* Reuse card visuals inside modal */
.htc-modal .htc-speaker-card__figure {
    --htc-speaker-size: 200px;
    margin: 1rem auto 0.75rem;
}

.htc-modal__name {
    margin: 0 0 0.5rem;
    text-align: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: #0f172a;
}

.htc-modal__bio .htc-speaker-card__subtitle { 
    margin-top: 0.5rem; 
}

@media (prefers-reduced-motion: reduce) {
    .htc-modal-overlay { transition: none; }
    .htc-modal { transition: none; }
    /* Mirror reduced-motion handling for cards here (duplicated block for clarity near modal styles) */
    .htc-speaker-card { transition: none; }
    details.htc-speaker-card[open] { transform: none; }
}