/* =============================================================
   ACC Speaker Series — Front-end Styles
   ============================================================= */

.acc-speakers {
    background-color: var(--wp--preset--color--surface, #f6f8f6);
    padding: clamp(2.5rem, 3rem + 0.5vw, 3.5rem) var(--wp--preset--spacing--40, 1.5rem);
    position: relative;
    overflow: hidden;
}

.acc-speakers::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2026/03/concrete-wall.png');
    background-repeat: repeat;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.acc-speakers > * {
    position: relative;
    z-index: 1;
}

.acc-speakers__header {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.acc-speakers__title {
    font-family: var(--wp--preset--font-family--serif, 'Lora', Georgia, serif);
    font-size: var(--wp--preset--font-size--4xl, clamp(1.875rem, 1.8rem + 0.38vw, 2.25rem));
    font-weight: 700;
    line-height: 1.2;
    color: var(--wp--preset--color--primary, #0d2b12);
    margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
}


/* Cards stack — right side */
.acc-speakers__cards-stack {
    flex: 0 0 calc(50% - var(--wp--preset--spacing--60, 3rem));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30, 1rem);
}

/* Speaker card — horizontal to match video cards */
.acc-speakers__card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

/* Avatar — photo */
.acc-speakers__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.acc-speakers__avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar — initials fallback */
.acc-speakers__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--wp--preset--font-family--sans-serif, 'Lexend', sans-serif);
}

.acc-speakers__card-body {
    flex: 1;
    min-width: 0;
}

/* Name */
.acc-speakers__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary, #0d2b12);
    margin: 0;
    text-decoration: none;
}

a.acc-speakers__name:hover {
    text-decoration: underline;
}

/* Association */
.acc-speakers__association {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.125rem 0 0;
}

/* Presentation badge */
.acc-speakers__badge {
    display: inline-block;
    padding: 0.35em 1em;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--primary, #0d2b12);
    background-color: rgba(19, 236, 19, 0.15);
    margin-top: 0.25rem;
}

/* Date */
.acc-speakers__date {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0.25rem 0 0;
}

/* Description */
.acc-speakers__description {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0.25rem 0 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Add to Calendar button */
.acc-speakers__cal-wrap {
    margin-left: auto;
    flex-shrink: 0;
}

.acc-speakers__cal-wrap {
    position: relative;
}

.acc-speakers__cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1.5em;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--wp--preset--color--primary, #0d2b12);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    animation: cal-pulse 4s ease-in-out infinite;
    box-shadow: 0 2px 10px rgba(13, 43, 18, 0.3);
}

.acc-speakers__cal-btn:hover {
    background: #1a4a22;
    box-shadow: 0 4px 16px rgba(13, 43, 18, 0.4);
}

@keyframes cal-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(13, 43, 18, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 4px 20px rgba(13, 43, 18, 0.5); }
}

.acc-speakers__cal-btn svg {
    flex-shrink: 0;
}

.acc-speakers__cal-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.4rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
    min-width: 160px;
}

.acc-speakers__cal-wrap.is-open .acc-speakers__cal-dropdown {
    display: block;
}

.acc-speakers__cal-option {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #0d2b12);
    text-decoration: none;
    transition: background 0.15s ease;
}

.acc-speakers__cal-option:hover {
    background: #f1f5f9;
    text-decoration: none;
    color: var(--wp--preset--color--primary, #0d2b12);
}

.acc-speakers__cal-option + .acc-speakers__cal-option {
    border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 900px) {
}

@media (max-width: 600px) {

    .acc-speakers__card {
        flex-direction: column;
        text-align: center;
    }

    /* `margin-left: auto` beats align-items in a column flex container, so the
       button alone jumped to the right edge of an otherwise centered stack —
       taking its upward dropdown past the card padding with it. */
    .acc-speakers__cal-wrap {
        margin-left: 0;
        align-self: center;
    }

    .acc-speakers__cal-dropdown {
        left: 50%;
        max-width: min(100%, 15rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-speakers__cal-btn { animation: none; }
}

/* ------------------------------------------------------------------
   Wide promo art instead of a headshot
   ------------------------------------------------------------------
   Speakers send whatever they have. This card was built around a 64px
   circular portrait, and a 684x367 promo banner cropped into that circle
   is an illegible smear. When the picture is markedly wider than it is
   tall it runs full width across the top of the card instead.
   ------------------------------------------------------------------ */
.acc-speakers__card--banner {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    gap: 0;
}

.acc-speakers__banner img {
    display: block;
    width: 100%;
    height: auto;
}

.acc-speakers__card--banner .acc-speakers__card-body {
    padding: 1rem 1.25rem 0;
}

.acc-speakers__card--banner .acc-speakers__cal-wrap {
    padding: 0.75rem 1.25rem 1.25rem;
}

/* ------------------------------------------------------------------
   "Coming up next", side by side on a wide screen
   ------------------------------------------------------------------
   Stacked, this card is most of a screen tall before the details begin:
   a 1.9:1 title card at full width is ~600px of picture, and the name,
   date and buttons all sit below the fold of the card. Beside it they
   are read together, and the card stops dwarfing the video grid under
   it.

   Only the "next" card changes. The same banner treatment appears in
   narrower places elsewhere, where two columns would leave neither half
   readable.
   ------------------------------------------------------------------ */
/* The stack is flex: 0 0 calc(50% - 3rem) so it can sit beside the heading and
   illustration in the full Speaker Series band. Standing on its own that halves
   the card — and halving the card halves the picture, which is why the banner
   read as a thumbnail with the details floating beside it. Alone, it takes the
   width it is given. */
.acc-speakers--next .acc-speakers__cards-stack {
    flex: 1 1 auto;
    width: 100%;
}

/* White was the right colour when a card was a small white tile on a white
   band. Against the page's warm ground it reads as a paper rectangle laid on
   top, and the join between picture and details becomes the most visible thing
   on the card. The site's own surface colour makes the two halves one panel. */
.acc-speakers--next .acc-speakers__card {
    background: var(--wp--preset--color--surface, #efe8d6);
    border-color: var(--wp--preset--color--border, #c9c2ad);
}

@media (min-width: 48rem) {
    .acc-speakers--next .acc-speakers__card--banner {
        flex-direction: row;
        /* Centred rather than stretched: these banners carry printed type,
           so the picture keeps its own proportions instead of being cropped
           to whatever height the details column happens to be. */
        align-items: center;
        gap: 0;
    }

    /* Equal halves via flex-basis 0 on both, so the split stays 50/50 rather
       than the image column being sized by the picture inside it. At full
       width each half is ~575px, where a 1.86:1 banner stands ~310px tall —
       taller than the details, so the row takes its height from the picture
       and no bars appear above or below it. */
    .acc-speakers--next .acc-speakers__card--banner .acc-speakers__banner {
        flex: 1 1 0;
        min-width: 0;
        align-self: stretch;
        display: flex;
        align-items: center;
        /* No colour of its own: any sliver left when a long speaker name makes
           the details the taller column should read as card, not as a seam. */
    }

    .acc-speakers--next .acc-speakers__card--banner .acc-speakers__card-body {
        flex: 1 1 0;
        min-width: 0;
        padding: 1.75rem 1.75rem 0.5rem;
    }

    .acc-speakers--next .acc-speakers__card--banner .acc-speakers__cal-wrap {
        padding: 0 1.75rem 1.75rem;
    }
}

/* The clamped description needs somewhere to go — the speaker page carries
   it in full. */
.acc-speakers__more {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

.acc-speakers__more a {
    color: var(--wp--preset--color--primary, #0d2b12);
    font-weight: 600;
}

/* The Zoom link is the one thing somebody actually needs on the night. */
.acc-speakers__join {
    margin: 0.75rem 0 0;
}

.acc-speakers__join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.6em 1.4em;
    border-radius: 999px;
    background: var(--wp--preset--color--primary, #0d2b12);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.acc-speakers__join-btn:hover,
.acc-speakers__join-btn:focus {
    background: var(--wp--preset--color--primary-light, #164a1e);
    color: #ffffff;
}

/* ------------------------------------------------------------------
   Standalone "Coming up next"
   ------------------------------------------------------------------
   The base .acc-speakers band paints a surface background and 1.5rem of
   side padding, which suits the full section it was written for — heading,
   illustration, video list, card. Used on its own for a single card it
   just draws a second box around the first and steals width from it,
   which on a phone is the width that matters.

   The card already reads as a card against the page. Drop the band.
   ------------------------------------------------------------------ */
.acc-speakers--next {
    background: none;
    padding: 0;
    /* The base rule clips with overflow:hidden; the Add to Calendar menu
       opens upward and out of the card, so it must not be clipped here. */
    overflow: visible;

    /* Line up with the video archive directly beneath it. Both are children of
       the same is-layout-constrained group, which holds its children to the
       theme's content size; the archive escapes that in the theme's own CSS
       with width:100%; max-width:1280px; margin:0 auto. Without the same three
       lines the next-talk card sat visibly narrower than the grid under it,
       which reads as a mistake rather than as a difference. Kept identical on
       purpose: if one of the two ever moves, they should move together. */
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.acc-speakers--next .acc-speakers__header {
    margin-bottom: 1rem;
}

/* No underlines on the controls.
   The theme underlines .wp-block-post-content a on purpose -- WCAG 1.4.1,
   a link must be tellable from body text without relying on colour. That
   is right for a link inside a sentence and wrong for a filled pill, where
   the shape already says "button" and the underline reads as a mistake.
   So the underline goes, and Full details becomes a control too rather
   than a bare link that now has nothing marking it out.
   The selectors carry the section class because .wp-block-post-content a
   is (0,1,1) and a lone class would lose to it. */
.acc-speakers a.acc-speakers__join-btn,
.acc-speakers a.acc-speakers__join-btn:hover,
.acc-speakers a.acc-speakers__join-btn:focus,
.acc-speakers a.acc-speakers__more-btn,
.acc-speakers a.acc-speakers__more-btn:hover,
.acc-speakers a.acc-speakers__more-btn:focus,
.acc-speakers .acc-speakers__cal-btn,
.acc-speakers a.acc-speakers__cal-option {
    text-decoration: none;
}

/* Ghost pill: quieter than the Zoom button, which is the thing somebody
   actually needs on the night. */
.acc-speakers a.acc-speakers__more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55em 1.4em;
    border: 1.5px solid var(--wp--preset--color--primary, #0d2b12);
    border-radius: 999px;
    color: var(--wp--preset--color--primary, #0d2b12);
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.acc-speakers a.acc-speakers__more-btn:hover,
.acc-speakers a.acc-speakers__more-btn:focus {
    background: var(--wp--preset--color--primary, #0d2b12);
    color: #ffffff;
}

/* Shown instead of the join button before the 24-hour window opens. */
.acc-speakers__zoom-note {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}