/* ═══════════════════════════════════════════════════════════════════════════
   Studio Hero v2 — studio-hero-v2.css
   ───────────────────────────────────────────────────────────────────────────
   Accordion and modal styling are carried over from the original
   .studio-details-accordion / .modal-window rules in block-styles.css —
   same rose-gold dividers, no outer border or panel background, same "+"
   toggle rotating 45° on open, same max-height reveal, same centred panel
   content with a full-width CTA.

   Heading sizing matches .hero-text-container h1 from the Full Height Hero.

   NOTE ON FONT SIZES: this sheet deliberately never uses
   --global-kb-font-size-*. Those variables are injected via wp_head, which
   does not run inside the block editor iframe, so any rule depending on them
   collapses in the editor and the browser falls back to the theme.json h1
   size (up to 14rem) — which is why the heading looked huge there. Explicit
   clamps are used instead so the editor and front end agree.

   LAYOUT
     MOBILE (< 900px)   image is a standalone full-bleed landscape element at
                        the top; content stacks beneath in DOM order —
                        heading → accordion → text → CTAs.
     DESKTOP (>= 900px) image becomes the section background; heading / text /
                        CTAs sit left, accordion right, sharing a centre line.

   The section is NOT full viewport height in either case.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────────────────── */

.shv2-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--forest-green);
    isolation: isolate;
    /* Clears the fixed 90px site header so the image is never behind it.
       Full Height Hero achieves the same with padding-top:90px, but that
       would leave the image under the header, so it is a margin here. */
    margin-top: var(--shv2-header-offset, 90px);
}

.shv2-media {
    line-height: 0;
    z-index: 0;
}

.shv2-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shv2-hero > .shv2-heading,
.shv2-hero > .shv2-text,
.shv2-hero > .shv2-cta-row,
.shv2-hero > .shv2-accordion {
    position: relative;
    z-index: 2;
}

/* Editor placeholder when no image is set yet */
.shv2-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--shv2-media-ratio, 16 / 10);
    background-color: rgba(245, 242, 238, 0.08);
    border: 1px dashed rgba(245, 242, 238, 0.35);
    color: rgba(245, 242, 238, 0.7);
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    padding: 1rem;
}

/* ── Heading and text — matched to .hero-text-container ─────────────────── */

/* Matches .hero-text-container h1.

   NOTE ON SPECIFICITY: block-styles.css carries
   `h1:not(.components-truncate) { font-size: clamp(4.95rem … 14rem) }`,
   which is specificity 0,1,1 — a bare `.shv2-heading` (0,1,0) loses to it,
   which is why the heading rendered huge. Scoping through `.shv2-hero`
   gives 0,2,0 so it wins regardless of load order. */
.shv2-hero .shv2-heading {
    font-size: clamp(2.8rem, calc(2.7rem + (100 - 50) * (100vw - 400px) / (2000 - 400)), 9.5rem);
    color: var(--shv2-leaf-color, var(--shv2-text, var(--light-beige)));
    align-self: flex-start;
    padding-left: 0;
    margin: 0;
    max-width: 18ch;
    line-height: 1;
}

/* Matches .hero-text-container h1 em, keeping the orange accent. The serif
   italic face and letter-spacing come from the global h1 em rule; the same
   specificity problem applies (that rule is 0,1,2), hence the .shv2-hero
   scope here too. */
.shv2-hero .shv2-heading em,
.shv2-hero .shv2-heading i {
    font-size: 1.14em;
    color: var(--orange);
}

.shv2-hero .shv2-text {
    color: var(--shv2-leaf-color, var(--shv2-text, #dcd5cb));
    max-width: 52ch;
    margin: 0;
}

.shv2-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--thin-gutter);
}

/* block-styles.css sets white-space:nowrap !important on .cta — allow the
   label to wrap on narrow screens (this sheet loads after, so it wins). */
.shv2-cta-row .cta { white-space: normal !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCORDION — carried over from .studio-details-accordion
   No outer border, no background, no radius. Rows divided by rose-gold.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The frosted panel comes from the original .studio-hero-info wrapper that
   sat around the accordion — the accordion element itself carried no
   background. Padding is tightened from var(--medium-gutter) to
   var(--thin-gutter) for the more compact feel. */
.shv2-accordion {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--shv2-acc-width, 480px);
    padding: var(--extra-thin-gutter) var(--thin-gutter);
    border-radius: var(--rounded-corners);
    background: var(--shv2-acc-bg, rgba(255, 255, 255, 0.8));
    -webkit-backdrop-filter: blur(24px) contrast(1.2);
    backdrop-filter: blur(24px) contrast(1.2);
    color: var(--shv2-acc-text, var(--forest-green));
    /* Must be explicit. Setting only overflow-y:auto (as the desktop rule
       does) forces the computed overflow-x to auto as well, which produced a
       horizontal scrollbar and pushed the toggle icons out of view. */
    overflow-x: hidden;
}

/* .studio-details:not(:last-of-type) */
.shv2-acc-item:not(:last-child) {
    border-bottom: 1px solid var(--rose-gold);
}

/* .detail-item p — the clickable row label */
.shv2-acc-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    overflow-wrap: break-word;
    box-sizing: border-box;
    gap: 3%;
    font-family: inherit;
    font-size: clamp(1.4rem, calc(1.4rem + (70 - 61) * (100vw - 400px) / (2000 - 400)), 1.9rem);
    font-weight: 550;
    padding: 17px 38px 17px 2%;
    color: var(--shv2-acc-text, var(--forest-green));
    transition: color 0.2s ease;
}

/* Small icon beside the row label — .detail-item img / figure in the
   original (16px wide, spaced off the label). */
.shv2-acc-item-icon {
    flex: 0 0 auto;
    width: 16px;
    height: auto;
    display: block;
}

.shv2-acc-header:hover,
.shv2-acc-header:focus-visible {
    color: var(--orange);
}

.shv2-acc-label { flex: 1; }

/* .detail-item p:after — "+" rotating 45° when the row is open */
.shv2-acc-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 400;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: 0.2s;
}

.shv2-acc-item.is-open .shv2-acc-icon {
    transform: translateY(-50%) rotate(45deg);
}

/* .detail-content — max-height reveal. The inline max-height is set by
   studio-hero-v2-frontend.js from the panel's own scrollHeight. */
.shv2-acc-panel {
    max-height: 0;
    overflow: hidden;
    /* max-height is named explicitly rather than using the `all` shorthand:
       with `all`, the visibility change below also fires a transitionend,
       and the JS listener that lifts the max-height cap could run against
       that event and cut the slide short. Visibility is switched instantly
       on open and held until the slide finishes on close. */
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
    /* Without this, links and buttons inside a collapsed panel stay in the
       tab order and remain clickable even though they are clipped. */
    visibility: hidden;
}

.shv2-acc-item.is-open > .shv2-acc-panel {
    transition: max-height 0.3s ease, visibility 0s linear 0s;
}

.shv2-acc-item.is-open > .shv2-acc-panel {
    visibility: visible;
}

/* .detail — panel content. Centred by default, matching the original;
   alignment is set per row via the Text alignment control. Row LABELS are
   always left-aligned and deliberately not configurable — see
   .shv2-acc-header above, which sets text-align:left explicitly so it never
   inherits from here. */
.shv2-acc-panel-inner {
    padding: 0 1rem 2rem;
    color: var(--shv2-acc-text, var(--forest-green));
}

.shv2-align-left   { text-align: left; }
.shv2-align-center { text-align: center; }
.shv2-align-right  { text-align: right; }

.shv2-acc-panel-inner p {
    margin: 1.2rem 0;
}

.shv2-acc-panel-inner ul,
.shv2-acc-panel-inner ol {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
}

.shv2-acc-panel-inner li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .detail .cta { width: 100% } — the original full-width button. Turning
   "Full-width button" off lets it shrink to its label; because .cta is a
   block-level element with its own width, text-align cannot move it, so it
   is positioned with auto margins instead. */
.shv2-acc-panel-inner .cta {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

/* The editor adds wrapper elements around each inner block; without these
   the buttons overflowed their column in the canvas while rendering
   correctly on the front end. */
.shv2-acc-panel-inner .wp-block,
.shv2-acc-panel-inner .block-editor-block-list__block,
.shv2-cta-row .wp-block,
.shv2-cta-row .block-editor-block-list__block {
    max-width: 100%;
    box-sizing: border-box;
}

.shv2-hero .cta {
    box-sizing: border-box;
    max-width: 100%;
}

.shv2-acc-panel-inner.shv2-cta-auto .cta {
    width: fit-content;
}

.shv2-acc-panel-inner.shv2-cta-auto.shv2-align-left .cta {
    margin-left: 0;
    margin-right: auto;
}

.shv2-acc-panel-inner.shv2-cta-auto.shv2-align-center .cta {
    margin-left: auto;
    margin-right: auto;
}

.shv2-acc-panel-inner.shv2-cta-auto.shv2-align-right .cta {
    margin-left: auto;
    margin-right: 0;
}

.shv2-acc-panel-inner a:hover {
    color: var(--orange);
}

.shv2-acc-panel-inner img {
    width: 16px;
    height: auto;
}

/* Editor: the panel stays mounted whether open or closed, so the max-height
   clip that drives the front-end animation is released and visibility is
   handled by the collapsed modifier instead. */
.shv2-acc-panel-editor {
    max-height: none;
    overflow: visible;
}

.shv2-acc-panel-collapsed {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS — carried over from .modal-window
   ═══════════════════════════════════════════════════════════════════════════ */

.shv2-modal-window {
    position: fixed;
    inset: 0;
    z-index: 10003;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--thin-gutter);
}

.shv2-modal-window.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.shv2-modal-backdrop {
    position: fixed;
    inset: 0;
    margin: 0;
    background-color: rgba(58, 71, 66, 0.8);
    cursor: pointer;
}

.shv2-modal {
    position: relative;
    padding: var(--medium-gutter);
    background: var(--shv2-modal-bg, var(--off-white));
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
    border-radius: var(--rounded-corners);
    text-align: center;
    width: min(92rem, 100%);
    max-height: 88svh;
    overflow-y: auto;
}

.shv2-modal-title {
    margin: 0 0 5rem;
}

.shv2-modal-title em {
    font-size: clamp(3rem, calc(3.4rem + (100 - 80) * (100vw - 400px) / (2000 - 400)), 6rem);
    display: inline-block;
    letter-spacing: clamp(-0.6rem, calc(-0.36vw + (100 - 96) * (100vw - 400px) / (2000 - 400)), -0.1rem);
}

.shv2-modal a {
    transition: color 0.3s ease;
}

.shv2-modal a img {
    margin-right: 1rem;
}

.shv2-modal a:hover {
    color: var(--orange);
}

.shv2-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    padding: 1rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: #aaa;
    font-size: 80%;
    text-align: center;
    text-decoration: none;
}

.shv2-modal-close:hover { color: var(--orange); }

.shv2-modal-body > *:last-child { margin-bottom: 0; }

/* Stop the page scrolling behind an open modal */
html.shv2-modal-lock,
html.shv2-modal-lock body { overflow: hidden; }

/* ── Modals (editor) ────────────────────────────────────────────────────── */
/* Shown inline and always open so their contents stay directly editable. */

.shv2-modal-edit {
    position: relative;
    background: var(--shv2-modal-bg, var(--off-white));
    color: var(--forest-green);
    border: 1px dashed var(--dun);
    border-radius: var(--rounded-corners);
    padding: var(--thin-gutter);
    margin-top: var(--thin-gutter);
}

.shv2-modal-edit-bar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dun);
}

.shv2-modal-edit-tag {
    flex-shrink: 0;
    padding: 0.3rem 1rem;
    border-radius: 10rem;
    background-color: var(--orange);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shv2-modal-edit-title {
    font-family: var(--DM-Sans);
    font-size: 1.9rem;
    font-weight: 520;
    color: var(--forest-green);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENT + PROGRESSIVE BLUR — ported from .gradient-container /
   .gradient-blur used by the Full Height Hero. Replaces the old flat scrim
   and the image-overlay setting entirely.

   The ladder is shifted left of the original: the strongest layer is fully
   opaque from 0%, so the left edge is fully blurred, and the fade completes
   by ~87.5% instead of running the full width.

   Desktop only: on mobile the image is a standalone element with no text
   over it, so neither layer is needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.shv2-gradient,
.shv2-gradient-blur { display: none; }

@media (min-width: 900px) {

    /* .gradient-container — darkens the left half behind the text */
    .shv2-gradient {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 50%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 100%);
    }

    /* .gradient-blur — a ladder of masked backdrop-filter layers giving a
       blur that fades out to the right rather than stopping abruptly. */
    .shv2-gradient-blur {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .shv2-gradient-blur > div,
    .shv2-gradient-blur::before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .shv2-gradient-blur::before {
        content: "";
        z-index: 1;
        -webkit-backdrop-filter: blur(32px);
        backdrop-filter: blur(32px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,0) 25%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,0) 25%);
    }

    .shv2-gradient-blur > div:nth-of-type(1) {
        z-index: 2;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
    }

    .shv2-gradient-blur > div:nth-of-type(2) {
        z-index: 3;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
    }

    .shv2-gradient-blur > div:nth-of-type(3) {
        z-index: 4;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
    }

    .shv2-gradient-blur > div:nth-of-type(4) {
        z-index: 5;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
    }

    .shv2-gradient-blur > div:nth-of-type(5) {
        z-index: 6;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
        mask-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — image stacked above the content, full bleed
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

    .shv2-hero {
        display: flex;
        flex-direction: column;
        gap: var(--shv2-gap, var(--thin-gutter));
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--medium-gutter);
    }

    /* Standalone landscape image, not a background */
    .shv2-media {
        position: static;
        width: 100%;
        aspect-ratio: var(--shv2-media-ratio, 16 / 10);
        margin-bottom: var(--extra-thin-gutter);
    }

    /* Inset everything except the full-bleed image */
    .shv2-hero > .shv2-heading,
    .shv2-hero > .shv2-text,
    .shv2-hero > .shv2-cta-row,
    .shv2-hero > .shv2-accordion,
    .shv2-hero > .shv2-modal-edit {
        margin-left: var(--medium-gutter);
        margin-right: var(--medium-gutter);
        width: auto;
    }

    .shv2-heading { max-width: none; }

    .shv2-hero > .shv2-accordion { max-width: none; }

    .shv2-modal { padding: var(--thin-gutter); }
    .shv2-modal-title { padding-right: 4rem; margin-bottom: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — image as background, accordion in the right column
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

    .shv2-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--shv2-acc-width, 480px);
        /* Centres the left-hand stack vertically in the section, so it lines
           up with the accordion. */
        align-content: center;
        column-gap: var(--medium-gutter);
        row-gap: var(--shv2-gap, var(--thin-gutter));
        padding: var(--large-gutter) var(--medium-gutter);
        min-height: 62svh;
    }

    /* Optional "Desktop section ratio". Applied as a MINIMUM height rather
       than aspect-ratio, so it pins the band at the chosen landscape ratio
       when content is short but still lets the section grow when content is
       long — aspect-ratio would have fixed the height and clipped the
       overflow. Assumes a full-bleed hero; if yours sits inside a constrained
       container, set --shv2-section-width to that width. */
    .shv2-hero.shv2-has-ratio {
        min-height: max(
            62svh,
            calc( var(--shv2-section-width, 100vw) / ( var(--shv2-desktop-ratio) ) )
        );
    }

    /* Image fills the section behind the content */
    .shv2-media {
        position: absolute;
        inset: 0;
        z-index: 0;
    }


    /* Left column, in source order */
    .shv2-hero > .shv2-heading,
    .shv2-hero > .shv2-text,
    .shv2-hero > .shv2-cta-row,
    .shv2-hero > .shv2-modal-edit {
        grid-column: 1;
        max-width: var(--shv2-content-width, 62rem);
    }

    /* The accordion is second in the DOM (so it stacks under the heading on
       mobile) but belongs on the right on desktop. It is taken out of the
       grid flow and centred against the section, which is what lets the
       left-hand stack centre itself independently — while it was a grid item
       its height inflated the row tracks and pinned the left column to the
       top. Column 2 is still reserved in the template so the left content
       can never run underneath it.

       max-height + scroll is a safety valve only: it engages if every panel
       is open at once on a short section, instead of clipping. */
    .shv2-hero > .shv2-accordion {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: var(--medium-gutter);
        transform: translateY(-50%);
        width: var(--shv2-acc-width, 480px);
        max-height: calc(100% - (2 * var(--thin-gutter)));
        overflow-y: auto;
    }
}