/* ═════════════════════════════════════════════════════════════════
   Overview section — first content panel on the home page

   Two-column layout: heading across the top, justified text on the
   left, image slideshow on the right.
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* ── Overview layout ─────────────────────────
       All values in vw so the entire section scales
       uniformly with the viewport width.           */
    --overview-card-gap:   1.6vw; /* gap between the text card and video card */
    --overview-col-padding: 2.2vw;  /* horizontal padding inside each column */
    --overview-para-gap:    1vw;    /* space between paragraphs */
    --overview-actions-gap: 0.7vw;  /* space above button row */
    --overview-heading-gap: 2.0vw;  /* space below the h1 heading */
    --overview-heading-size: 2.5vw; /* heading font size */

}

/* ── Heading ──────────────────────────────────────────── */
.stage-tile .content-panel .overview-heading {
    font-size: clamp(10px, var(--overview-heading-size), 36px);
    font-weight: 800;
    margin: 0 0 var(--overview-heading-gap);
    text-align: center;
    pointer-events: auto;
    flex-shrink: 0;
}

/* ── Two-column body ────────────────────────────────────
   Grid with minmax(0, 1fr) columns: the two cards are always
   exactly equal width, and content can never force them
   wider (responsive groundwork). */
.stage-tile .content-panel .overview-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: var(--overview-card-gap);
    flex: 1;
    min-height: 0;
}

/* ── Card visuals shared by text and video cards ────────
   Same background/border/radius as the part category cards. */
.stage-tile .content-panel .overview-text,
.stage-tile .content-panel .overview-slideshow {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(107, 63, 105, 0.04);
    border: 1px solid rgba(107, 63, 105, 0.12);
    border-radius: 4px;
    pointer-events: auto;
}

/* ── Text column (left card) ──────────────────────────── */
.stage-tile .content-panel .overview-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;     /* text starts at top of card */
    padding: var(--overview-col-padding);
    text-align: justify;
    /* Container queries: lets text size track the card's width */
    container-type: inline-size;
}

.stage-tile .content-panel .overview-text p {
    /* Same size as the category/community card body text */
    font-size: var(--card-text-size);
    line-height: 1.4;
    margin: 0 0 var(--overview-para-gap);
    pointer-events: auto;
}

.stage-tile .content-panel .overview-text p:last-child {
    margin-bottom: 0;
}

/* ── Button row ──────────────────────────────────────── */
.stage-tile .content-panel .overview-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--prpol-button-gap);
    /* Centre the buttons in the leftover space between the text
       and the bottom of the card: no dead gap above them, none
       concentrated below either. */
    margin-top: auto;
    margin-bottom: auto;
    padding-top: var(--overview-actions-gap);
}

/* ── Slideshow column (right card): rotating media ──
   Arrows sit beside the stage; the stage fades between
   slides, each carrying its own caption.             */
.stage-tile .content-panel .overview-slideshow {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    overflow: hidden;
    /* Wide side gutters hold the arrows between the card edge
       and the media; tight top/bottom padding keeps the media
       off the card edges. */
    padding: 0.75rem 5rem;
}

.overview-slideshow__stage {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 6px;
    /* Slides are absolutely positioned, so the stage needs its own
       height when the card isn't given one.  Above the breakpoint
       the card has a fixed height and flex-stretch wins; below it,
       this ratio gives the stage its height. */
    aspect-ratio: 16 / 9;
}

.slideshow-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* Vertical gap between the media and the caption's top line */
    row-gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.slideshow-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.slideshow-slide video,
.slideshow-slide img {
    flex: 1;
    width: 100%;
    min-height: 0;
    object-fit: contain;
}

.slideshow-slide__caption {
    flex-shrink: 0;
    align-self: stretch;
    padding: 0.7em 1em;
    background: var(--grey-lightest);
    border-top: 1px solid var(--purple-light);
    /* Same size as the overview text card */
    font-size: var(--card-text-size);
    color: var(--purple-dark);
    text-align: center;
}

/* ── Arrows ────────────────────────────────────────
   Outline style: transparent fill, prpol-dark border and
   icon.  Above the breakpoint each arrow's centre sits
   halfway between the card edge and the media edge.   */
.slideshow-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 1.8vw, 32px);
    height: clamp(24px, 1.8vw, 32px);
    padding: 0;
    border: 1px solid var(--purple-dark);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.slideshow-arrow svg {
    width: 60%;
    height: 60%;
    fill: var(--purple-dark);
}

.slideshow-arrow--prev {
    left: 2.5rem;                    /* halfway across the 3rem gutter */
    transform: translate(-50%, -50%);
}

.slideshow-arrow--next {
    right: 2.5rem;
    transform: translate(50%, -50%);
}

.slideshow-arrow:hover {
    background: rgba(107, 63, 105, 0.08);
}