/* =============================================================================
   master-talk.css — the Master Talk Series page (/master-talk). Semantic HTML on
   tokens + the shared gallery/lightbox component. Mirrors the original Elementor
   design: Montserrat 50/600 uppercase #45ACAF hero heading over the MASTER-TALK
   photo, a #B98E7F rule, an image gallery, then a responsive grid of speaker
   cards (white, 25px radius, #DDDDDD border, soft shadow) each led by a 16:9
   YouTube embed. Fixed pixel sizes replaced with clamp()/aspect-ratio; no
   horizontal overflow at any width.
   ============================================================================= */
.kk-mastertalk {
    --kk-mt-accent: #45ACAF;              /* teal — main heading / links          */
    --kk-mt-name: #1C1C1C;                /* speaker name                         */
    --kk-mt-role: #777777;                /* speaker role / subtitle              */
    --kk-mt-text: #2A2A2A;                /* body copy                            */
    --kk-mt-rule: #B98E7F;                /* divider under the hero heading       */
    --kk-mt-card-border: #DDDDDD;
    --kk-mt-card-shadow: 0 2px 10px rgba(0, 0, 0, .19);
    --kk-mt-card-radius: 25px;
    --kk-mt-font: "Montserrat", var(--kk-font-heading);
    --kk-mt-wide: 1300px;                 /* speaker rows use the wider container  */
    --kk-mt-card-gap: 20px;               /* gutter between the two card columns   */
    --kk-mt-slide-gap: 26px;              /* carousel image_spacing (Elementor)    */
    --kk-mt-slide-radius: 10px;           /* carousel slide corners                */
    font-family: var(--kk-mt-font);
    color: var(--kk-mt-text);
}
.kk-mastertalk img { max-width: 100%; height: auto; }
.kk-mastertalk :focus-visible { outline: 2px solid var(--kk-mt-accent); outline-offset: 2px; }

/* -- Hero / intro ----------------------------------------------------------- */
.kk-mastertalk__hero {
    position: relative;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .82) 45%, rgba(255, 255, 255, .5) 100%),
        url("/wp-content/uploads/2024/11/MASTER-TALK-21.webp");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    padding: clamp(40px, 6vw, 60px) var(--kk-space-sm) clamp(48px, 8vw, 90px);
}
.kk-mastertalk__hero-inner {
    max-width: var(--kk-content-max);
    margin: 0 auto;
}
.kk-mastertalk__title {
    font-size: clamp(25px, 6vw, 50px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--kk-mt-accent);
    text-align: center;
    margin: 0 0 6px;
    overflow-wrap: break-word;
}
.kk-mastertalk__rule {
    width: 33%;
    min-width: 120px;
    height: 0;
    border: 0;
    border-top: 2px solid var(--kk-mt-rule);
    margin: 0 auto clamp(16px, 3vw, 24px);
}
.kk-mastertalk__intro {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .2px;
    color: var(--kk-mt-text);
    /* Same 1140px box as the carousel below, so their left edges line up. */
    max-width: var(--kk-content-max);
    margin: 0 auto clamp(24px, 4vw, 40px);
    text-align: justify;
}
.kk-mastertalk__intro p { margin: 0 0 14px; overflow-wrap: break-word; }
.kk-mastertalk__intro p:last-child { margin-bottom: 0; }

/* Hero carousel — the shared .kk-carousel, configured like the Elementor
   image-carousel it replaces: 3 slides up (1 on mobile), 26px spacing, dots,
   5s autoplay (data-autoplay in the view). Slides open the lightbox. */
.kk-mastertalk__carousel {
    --kk-carousel-gap: var(--kk-mt-slide-gap);
    max-width: var(--kk-content-max);
    margin: 0 auto;
}
.kk-mastertalk__carousel .kk-gallery__item img { border-radius: var(--kk-mt-slide-radius); }

/* -- Speaker cards ---------------------------------------------------------- */
/* Two equal columns in a 1300px content box (so each card lands at 640px, as on
   the original). The max-width carries the side padding so the *content* box —
   not the border box — is the 1300px the original used. */
.kk-mastertalk__talks {
    max-width: calc(var(--kk-mt-wide) + 2 * var(--kk-space-sm));
    margin: 0 auto;
    padding: clamp(32px, 6vw, 60px) var(--kk-space-sm);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kk-mt-card-gap);
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .kk-mastertalk__talks { grid-template-columns: minmax(0, 1fr); }
}

.kk-mastertalk__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--kk-mt-card-border);
    border-radius: var(--kk-mt-card-radius);
    box-shadow: var(--kk-mt-card-shadow);
    overflow: hidden;
    padding-bottom: 16px;
}
.kk-mastertalk__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}
.kk-mastertalk__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.kk-mastertalk__name {
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 700;
    color: var(--kk-mt-name);
    margin: 16px 20px 0;
}
.kk-mastertalk__role {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 500;
    color: var(--kk-mt-role);
    margin: 4px 20px 0;
}
.kk-mastertalk__body {
    font-size: clamp(14px, 2vw, 16px);
    font-weight: 500;
    line-height: 27px;
    letter-spacing: .2px;
    word-spacing: 2px;
    color: var(--kk-mt-text);
    margin: 12px 0 0;
    padding: 0 20px;
    overflow-wrap: break-word;
}
.kk-mastertalk__body p { margin: 0 0 12px; }
.kk-mastertalk__body p:last-child { margin-bottom: 0; }
.kk-mastertalk__body strong { font-weight: 700; color: var(--kk-mt-name); }

/* Read more/less — native <details>, styled like the original text button.
   margin-top:auto pins the toggle to the bottom of the card, so paired cards in a
   row (which stretch to equal height) line their "Read More" up along the same
   baseline instead of floating right under the shorter body. On mobile the card
   sizes to its content, so there is no free space and the auto margin resolves
   to 0 — the toggle stays right after the text.
   The <details> is a flex column with the summary ordered LAST, so when expanded
   the continuation copy flows straight after the intro and the "Read Less" toggle
   stays at the bottom instead of being wedged between the two halves of the body. */
.kk-mastertalk__more {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 12px 20px 0;
}
.kk-mastertalk__more > summary {
    order: 1;                 /* keep the toggle below the expanded body copy   */
    align-self: flex-start;   /* underline hugs the text, not the full column   */
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: #44ACAF;
    border-bottom: 1px solid #44ACAF;
    padding: 2px 0;
    cursor: pointer;
    min-height: 44px;
    line-height: 40px;
}
.kk-mastertalk__more > summary::-webkit-details-marker { display: none; }
.kk-mastertalk__more > summary .kk-mastertalk__more-close { display: none; }
.kk-mastertalk__more[open] > summary .kk-mastertalk__more-open { display: none; }
.kk-mastertalk__more[open] > summary .kk-mastertalk__more-close { display: inline; }
.kk-mastertalk__more .kk-mastertalk__body { padding: 0; margin: 0 0 12px; }