/* =============================================================================
 * Shared hero styles for the KL landing-page heroes (all templates that render
 * the light-band "Show more" hero — the three best-coworking-space pages plus
 * the coworking-space feature, meeting-room, event-space, office-space and
 * flexible/serviced-office pages).
 *
 * Each page renders the same light-band hero shell (image left, copy right) with
 * a "Show more" collapse on mobile. The CSS + JS used to be pasted inline into
 * each template and had already drifted apart (only one page handled the floating
 * menu bar, only one dropped the fade gradient). It now lives here and in
 * hero-expand.js. These landing templates use a custom header/footer that never
 * calls wp_footer() and drops head-enqueued styles, so the two files are loaded
 * as plain <link>/<script defer> tags (with a filemtime cache-bust) hardcoded in
 * each template — not via wp_enqueue — so every hero stays in sync.
 *
 * Contract with hero-expand.js (do not rename without updating the JS):
 *   .kl-hero-light          — root band class, scopes every rule below
 *   .kl-hero-expand-wrap    — the collapsible block (page decides its contents)
 *   .kl-hero-expand-toggle  — the Show more / Show less <button>
 *   #kl-hero-cta-row        — the CTA row the JS scrolls into view on expand
 *   .is-collapsible / .is-expanded — state classes the JS toggles on the wrap
 * The JS sets the wrap's max-height inline; the CSS only supplies the transition,
 * the clip, and the fade. With JS off, no state class is added, so the wrap stays
 * fully visible and the toggle stays hidden — everything is readable.
 * ========================================================================== */

/* Band colour, shared by the hero background and the collapse fade gradient. */
.kl-hero-light {
    --kl-hero-band: #f7f5ef;
    /* AA-compliant subtitle accent: the brand --worq-orange is only 2.37:1 on the
       cream band, which fails WCAG AA (the subtitle renders at 16px on mobile, so
       it needs 4.5:1, not the 3:1 large-text bar). This darker burnt-orange is
       4.62:1 while staying in the orange family. */
    --kl-hero-accent: #a25f01;
}

/* --- Light hero band (image left, copy right) ------------------------------- */
.kl-hero-light.outer-product-title-container {
    background: var(--kl-hero-band);
}
.kl-hero-light .product-title {
    color: var(--worq-navy);
}
.kl-hero-light .product-subtitle {
    color: var(--kl-hero-accent);
}
.kl-hero-light .product-hero-title p {
    color: var(--worq-grey);
}
/* Breadcrumb "/" separators default to #ccc (1.47:1 on the cream band — fails AA).
   Use the navy-tinted body grey (6.15:1) so the separators are legible. */
.kl-hero-light .breadcrumb-separator {
    color: var(--worq-grey);
}

/* Some of these heroes sit inside a .kl-24h-landing wrapper (coworking-space
   feature pages), which has its own subtitle/paragraph colour rule
   (wc-style-addon.css) tuned for a dark hero band. That rule is as specific as
   the ones above, so re-assert the light-band colours here, scoped the same
   way and loaded after wc-style-addon.css, so it wins on source order. */
.kl-24h-landing .kl-hero-light .product-hero-title .product-subtitle {
    color: var(--kl-hero-accent);
}
.kl-24h-landing .kl-hero-light .product-hero-title p {
    color: var(--worq-grey);
}

/* Same problem for the 4.7 Rating / 500+ Reviews pills (.hero-rating-pill,
   wc-style-addon.css, white-on-translucent) and the meeting-room hero trust
   badges (.hero-trust-badge, page inline style, --worq-yellow): both are tuned
   for a dark hero band and turn near-invisible on the light band. Re-colour to
   navy for EVERY light hero — not just the .kl-24h-landing ones — so the
   serviced-office, flexible-office and meeting-room heroes are readable too. */
.kl-hero-light .hero-rating-pill,
.kl-hero-light .hero-trust-badge {
    color: var(--worq-navy);
}

/* The shared theme rule (scud-style.css) caps .product-subtitle and
   .product-hero-title p at max-width: 30rem below 48em, leaving unused space on
   the right and wrapping the copy into more lines than the screen needs. Lift
   that cap here so the subtitle, paragraph and proof-points use the full
   text-column width on mobile and take less vertical room. */
@media screen and (max-width: 47.99em) {
    .kl-hero-light .product-subtitle,
    .kl-hero-light .product-hero-title p,
    .kl-hero-light .kl-hero-proof-points {
        max-width: none;
    }
}

/* Breadcrumb: the sitewide white override (wc-style-addon.css) is scoped
   `.product-hero-title .breadcrumb-item`. The breadcrumb here is a SIBLING of
   .product-hero-title (pulled out so it can be pinned to the column top — see
   below), so that white rule never matches it and the base dark breadcrumb
   colours already apply. No colour restore rule is needed. */
/* .product-hero-title becomes position:absolute + translate(-50%,-50%)
   (vertically centred) at 64em in scud-style.css, which would drag an inline
   breadcrumb into the vertical middle of the column. Pulling the breadcrumb out
   as a sibling and pinning it to the column's own top-left corner keeps it
   anchored at the top wherever the centred title block lands. */
@media screen and (min-width: 64em) {
    .kl-hero-breadcrumb {
        position: absolute;
        top: 3rem;
        padding-left: 50px;
        margin-bottom: 0;
        z-index: 2;
    }
}

/* On mobile the hero image is stacked above the copy. scud-style.css sets it to
   a fixed 30rem (~300px), which alone eats most of a phone screen and pushes the
   CTA below the fold before the copy even starts. Cap it so there is guaranteed
   room for the collapsed copy + CTA above the fold; clamp keeps it from becoming
   a thin strip on short screens or oversized on tall ones. dvh tracks the mobile
   browser chrome; the plain vh line is a fallback for browsers without dvh. */
@media screen and (max-width: 47.99em) {
    .kl-hero-light .product-hero-img-container > img {
        height: 40vh;
        height: clamp(14rem, 24dvh, 22rem);
    }
}

/* --- Secondary text-link CTA ("View Pricing / Book a Tour ↗") --------------- */
.kl-hero-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-left: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--worq-navy);
    text-decoration: none !important;
    white-space: nowrap;
}
.kl-hero-link-cta:hover {
    color: var(--worq-orange);
}
.kl-hero-link-cta-arrow {
    transition: transform 0.25s ease;
}
.kl-hero-link-cta:hover .kl-hero-link-cta-arrow {
    transform: translate(3px, -3px);
}

/* --- Hero proof points ------------------------------------------------------ */
.kl-hero-proof-points {
    list-style: none;
    margin: 2.4rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem 2.4rem;
}
.kl-hero-proof-points li {
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 1.45rem;
    line-height: 1.55;
    color: var(--worq-navy);
    padding-left: 3rem;
    position: relative;
}
.kl-hero-proof-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 2rem;
    height: 2rem;
    background: var(--worq-orange);
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
}
@media screen and (max-width: 48em) {
    .kl-hero-proof-points {
        grid-template-columns: 1fr;
    }
}

/* --- Collapse mechanism ----------------------------------------------------- *
 * The wrap is only clipped when hero-expand.js decides the content overflows the
 * mobile viewport; it then adds .is-collapsible (and sets max-height inline). On
 * expand it adds .is-expanded. Everything here is inert until those classes land,
 * so desktop and no-JS render the wrap in full. */
.kl-hero-expand-wrap.is-collapsible {
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}
/* Fade the clipped bottom edge into the band so the cut-off copy reads as
   "there's more", not as a hard truncation mid-line. */
.kl-hero-expand-wrap.is-collapsible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.8rem;
    background: linear-gradient(to bottom, rgba(247, 245, 239, 0), var(--kl-hero-band));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.kl-hero-expand-wrap.is-collapsible.is-expanded::after {
    opacity: 0;
}

/* Toggle button — carries `hidden` in the markup; the JS removes it only when a
   collapse is actually active, so it never shows on desktop or with JS off. */
.kl-hero-expand-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0.6rem 0 0;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--worq-navy);
    cursor: pointer;
}
.kl-hero-expand-toggle[hidden] {
    display: none;
}
.kl-hero-expand-toggle:not([hidden]) {
    display: inline-flex;
}
.kl-hero-expand-toggle-arrow {
    transition: transform 0.25s ease;
}
.kl-hero-expand-toggle[aria-expanded="true"] .kl-hero-expand-toggle-arrow {
    transform: rotate(180deg);
}
/* Label swaps with the expanded state; Show less is hidden until then. */
.kl-hero-expand-toggle-less {
    display: none;
}
.kl-hero-expand-toggle[aria-expanded="true"] .kl-hero-expand-toggle-more {
    display: none;
}
.kl-hero-expand-toggle[aria-expanded="true"] .kl-hero-expand-toggle-less {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .kl-hero-expand-wrap.is-collapsible,
    .kl-hero-expand-wrap.is-collapsible::after,
    .kl-hero-expand-toggle-arrow,
    .kl-hero-link-cta-arrow {
        transition: none;
    }
}