/**
 * Accordion cards: a row of image cards where one card is open and shows its
 * content, the others are narrow and show only a label. Clicking (or
 * focusing and pressing Enter on) a narrow card opens it and closes the
 * previous one. Replaces the applari-accordion-slider component: the layout
 * is CSS (flex-basis transition), the script only moves the is-active class.
 *
 * globalClass: accordion-cards   (the row)
 *   accordion-card               each card; the open one carries is-active
 *
 * Structure:
 *   .accordion-cards.gb-container
 *     .accordion-card.gb-container[.is-active]
 *       figure > img.accordion-card-media          (first child, fills the card)
 *       button.gb-button.accordion-card-toggle     (the label; GB button, buttonType button)
 *       .accordion-card-content.gb-container       (label, title, text, buttons)
 *         p.cover-label, h1|h2.cover-title, p.cover-text, buttons row
 *     .accordion-card.gb-container …
 *
 * Layout: below 990px a vertical accordion: the cards stack full width, a
 * closed card is a photo strip (--accordion-strip high) with its name, the
 * open card grows to its content (grid-template-rows 0fr → 1fr transition,
 * no height math in JS) and is scrolled into view once it has grown. From 990px one row with the aspect ratio
 * --accordion-ratio: widths come from flex-grow (animatable), the open card
 * --accordion-active-grow parts and every closed card one part; the label
 * runs bottom to top. The content fades in after the size transition so the
 * text never reflows while it appears.
 *
 * Tuning: --accordion-radius (12px, like the other cards), --accordion-active-grow (6: the open
 *         card is 6 parts, every closed card 1 part, so 75 / 12.5 / 12.5 % with
 *         three cards), --accordion-gap (16px), --accordion-ratio (3 / 2),
 *         --accordion-strip (120px, closed card height below 990px),
 *         --accordion-max-height (max(520px, 80vh): from 990px the row's
 *         height comes from the ratio but never exceeds this, so the hero
 *         fits the screen on a laptop; 520px keeps the open card's content
 *         inside on very short windows. The default lives in the var()
 *         fallback below, not in :root, so a project can set the variable
 *         in base.css, which loads before this file),
 *         --accordion-duration (0.6s)
 *
 * Chain animations: put chainAnimation on the open card's content children
 * (label 1, title 2, text 3, buttons 4) and on the closed cards (1, 2) in
 * the row. Never animate the open card or its media.
 *
 * Editor: GB renders the inner blocks straight inside the container, which
 * then carries block-editor-block-list__layout; that class on the block is
 * the editor hook. Every card shows its content and the toggle, three per row.
 */

:root {
    --accordion-radius: 12px;
    --accordion-active-grow: 6;
    --accordion-gap: 16px;
    --accordion-ratio: 3 / 2;
    --accordion-strip: 120px;
    --accordion-pad: clamp(24px, 5vw, 72px);
    --accordion-duration: 0.6s;
}

/* Row */
.accordion-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--accordion-gap);
    align-items: stretch;
}

/* Card. Below 990px a two-row grid: the name strip and the content row,
   which is 0fr when closed and 1fr when open (the fr transition animates
   the height without knowing it). */
.accordion-card {
    position: relative;
    display: grid;
    grid-template-rows: var(--accordion-strip) 0fr;
    align-items: end;
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--accordion-radius);
    background-color: var(--media-bg-clr);
    color: var(--on-media-clr);
    cursor: pointer;
    transition: grid-template-rows var(--accordion-duration) var(--transition-timing-function),
                flex-grow var(--accordion-duration) var(--transition-timing-function);
}

.accordion-card.is-active {
    grid-template-rows: var(--accordion-strip) 1fr;
    cursor: default;
    /* the script scrolls the opened card into view below 990px; keep it clear of the sticky header */
    scroll-margin-top: calc(var(--header-height, 0px) + 16px);
}

/* Media: the figure fills the card, the image never sets the height */
.accordion-card figure:has(> img.accordion-card-media),
.accordion-card [data-type="generateblocks/image"]:has(img.accordion-card-media) {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}

.accordion-card img.accordion-card-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--transition-timing-function);
}

/* Darkening so the label and the text stay readable: the open card darkens
   the lower half for the content, a closed card only the bottom for its label */
.accordion-card figure:has(> img.accordion-card-media)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--media-bg-clr) 50%, transparent) 50%, color-mix(in srgb, var(--media-bg-clr) 75%, transparent) 100%);
    transition: background var(--accordion-duration) var(--transition-timing-function);
}

.accordion-card:not(.is-active) figure:has(> img.accordion-card-media)::after {
    background: linear-gradient(0deg, color-mix(in srgb, var(--media-bg-clr) 60%, transparent) 0%, transparent 60%);
}

/* Toggle: the card's name. A GB button rendered as <button>. Below 990px it
   is the strip (visible open and closed), from 990px only on closed cards.
   The toggle and the content are placed in their grid rows explicitly, so
   an extra element in the card (a project's decoration) cannot push them
   into implicit rows. */
.accordion-card .gb-button.accordion-card-toggle {
    grid-row: 1;
    position: relative;
    z-index: 2;
    align-self: end;
    justify-self: start;
    padding: 20px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--on-media-clr);
    font-size: clamp(1.05rem, 0.7rem + 1.4vw, 1.6rem);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    cursor: pointer;
}

.accordion-card .gb-button.accordion-card-toggle:hover,
.accordion-card .gb-button.accordion-card-toggle:focus-visible {
    background: none;
    color: var(--on-media-clr);
}

.accordion-card .gb-button.accordion-card-toggle:focus-visible {
    outline: 3px solid var(--on-media-clr);
    outline-offset: -6px;
}

/* The toggle's ::before covers the whole closed card as the click target */
.accordion-card:not(.is-active) .gb-button.accordion-card-toggle::before {
    content: '';
    position: absolute;
    inset: -2000px; /* clipped by the card's overflow */
}

/* Content of the open card. The content is a GB container and would take
   the section's text color; everything on the photo is the on-media color. */
.accordion-card .accordion-card-content {
    grid-row: 2;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-height: 0; /* lets the 0fr row collapse … */
    overflow: hidden; /* … and the padding is made of inner margins, so it collapses too */
    color: var(--on-media-clr);
}

.accordion-card .accordion-card-content :is(p, h1, h2, h3), .accordion-card .accordion-card-toggle {
    color: inherit;
    text-shadow: 0 2px 12px color-mix(in srgb, var(--media-bg-clr) 45%, transparent);
}

.accordion-card .accordion-card-content > * {
    margin-left: var(--accordion-pad);
    margin-right: var(--accordion-pad);
}

/* Room for the image between the strip and the text, and the bottom padding */
.accordion-card .accordion-card-content::before {
    content: '';
    display: block;
    padding-top: 32%;
}

.accordion-card .accordion-card-content::after {
    content: '';
    display: block;
    height: var(--accordion-pad);
}

.accordion-card .accordion-card-content {
    /* appears only after the size transition has settled */
    transition: opacity 0.4s var(--transition-timing-function) var(--accordion-duration),
                visibility 0s var(--accordion-duration);
}

.accordion-card:not(.is-active) .accordion-card-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s var(--transition-timing-function), visibility 0s 0.15s;
}

/* The name is already in the strip below 990px */
.accordion-card .cover-label {
    display: none;
}

.accordion-card .cover-label {
    margin-block: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.accordion-card .cover-title {
    margin-block: 0;
    color: var(--on-media-clr);
}

.accordion-card .cover-text {
    margin-block: 0;
    max-width: min(100%, 520px);
    font-size: 15px;
    font-weight: 600;
}

.accordion-card .gb-button.btn-no-bg {
    color: var(--on-media-clr);
}
@media (hover: hover) {
    .accordion-card:not(.is-active):hover img.accordion-card-media {
        transform: scale(1.05);
    }
}

@media only screen and (min-width: 768px) {
    .accordion-card .cover-text {
        font-size: inherit;
    }
}

@media only screen and (min-width: 990px) {
    /* Height from the ratio, capped by --accordion-max-height (a max-height
       wins over aspect-ratio) so the row never grows past the screen. The
       explicit width keeps the ratio from solving for width instead when the
       cap applies. */
    .accordion-cards {
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        aspect-ratio: var(--accordion-ratio);
        max-height: var(--accordion-max-height, max(520px, 80vh));
    }

    /* One row: back to a flex column inside the card, widths from flex-grow */
    .accordion-card,
    .accordion-card.is-active {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        grid-template-rows: none;
    }

    .accordion-card.is-active .gb-button.accordion-card-toggle {
        display: none;
    }

    /* A closed card's content leaves the flow, so it cannot squeeze the label */
    .accordion-card:not(.is-active) .accordion-card-content {
        position: absolute;
        inset: 0;
    }

    .accordion-card .cover-label {
        display: block;
    }

    /* The content uses real padding again (no collapsing row here) */
    .accordion-card .accordion-card-content {
        padding: var(--accordion-pad);
        overflow: visible;
    }

    .accordion-card .accordion-card-content > * {
        margin-left: 0;
        margin-right: 0;
    }

    .accordion-card .accordion-card-content::before,
    .accordion-card .accordion-card-content::after {
        display: none;
    }

    /* Closed cards: the name runs bottom to top on one line. A transformed
       element is its own containing block, so the click area comes from the
       card instead. */
    .accordion-card .gb-button.accordion-card-toggle {
        display: block; /* not GB's inline-flex: a flex button misreads its height in vertical writing */
        max-height: 100%;
        padding: 28px 26px;
        overflow: hidden;
        writing-mode: vertical-rl;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-shadow: 0 2px 12px color-mix(in srgb, var(--media-bg-clr) 45%, transparent);
        transform: rotate(180deg);
    }

    .accordion-card:not(.is-active) .gb-button.accordion-card-toggle {
        position: static;
    }

    .accordion-card:not(.is-active) .gb-button.accordion-card-toggle::before {
        inset: 0;
    }

    /* Widths from flex-grow (animatable): closed 1 part, open N parts */
    .accordion-card {
        flex: 1 1 0%;
    }

    .accordion-card.is-active {
        flex: var(--accordion-active-grow) 1 0%;
    }

    .accordion-card .accordion-card-content {
        max-width: 720px;
        gap: 18px;
    }
}

/* Editor: three cards per row, every content and toggle visible, no motion */
.accordion-cards.block-editor-block-list__layout {
    flex-wrap: wrap;
    aspect-ratio: auto;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 1 calc((100% - 2 * var(--accordion-gap)) / 3);
    grid-template-rows: none;
    aspect-ratio: 3 / 4;
    cursor: default;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .accordion-card-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    padding: 24px;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .accordion-card-content > * {
    margin-left: 0;
    margin-right: 0;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .accordion-card-content::before,
.accordion-cards.block-editor-block-list__layout > .accordion-card .accordion-card-content::after {
    display: none;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .cover-label {
    display: block;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .gb-button.accordion-card-toggle {
    display: inline-flex;
    position: relative;
    writing-mode: horizontal-tb;
    transform: none;
}

.accordion-cards.block-editor-block-list__layout > .accordion-card .gb-button.accordion-card-toggle::before {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-card,
    .accordion-card img.accordion-card-media,
    .accordion-card .accordion-card-content,
    .accordion-card figure:has(> img.accordion-card-media)::after {
        transition: none;
    }
}