/* ---------------------------------------------------------------------------
   Hero article page — app/Views/website/hero/index.php.

   Copied from story.css (the cover-story page) and kept separate so the two
   can part ways; the notes below still speak of "a story" from there.

   Pairs with site.css, which supplies the tokens, buttons, section shell,
   header, footer and request tray. Nothing here restates them.

   Prefix is gq-ha- rather than gqv2-, matching vibe.css (gq-vb-) and
   guides.css: gqv2- is the design system carried over from the mockup, and a
   page built after it does not pretend to have come from it.

   The page is designed around what a cover story actually is — 100 to 150
   words of editorial. It cannot rely on length, so the photograph carries the
   top of the page, the prose is set large in a narrow measure, and the
   destination card holds the rail beside it instead of waiting below the fold.
   --------------------------------------------------------------------------- */

/* ==================== READING PROGRESS ==================== */

/* Sits under the sticky header (z-index 1000 in site.css) rather than over it. */
.gqv2 .gq-ha-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 999;
    pointer-events: none;
    background: transparent;
}

.gqv2 .gq-ha-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gq-blue), var(--gq-gold));
    transform-origin: left center;
    transition: width .12s linear;
}


/* ==================== HERO ==================== */

.gqv2 .gq-ha-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(70vh, 620px);
    padding: 110px 0 60px;
    overflow: hidden;
    background: var(--gq-navy-dark);
    isolation: isolate;
}

/* The photograph keeps to the right of the band rather than filling it: the
   band is far wider than it is tall, and a picture stretched across all of it
   is a letterbox of one. */
.gqv2 .gq-ha-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    /* The band's height and a 3:2 frame decide the width, rather than a share
       of the page, so the picture is the same shape whatever the viewport is.
       Capped so it cannot reach across the copy on a narrow desktop. */
    width: auto;
    max-width: 78%;
    aspect-ratio: 3 / 2;
    z-index: -2;
}

/* Cover, not contain, and the reason is the fade rather than the framing: the
   cover files are square, and a contained square leaves a third of the 3:2
   frame empty — the third the mask then dissolves, which spends the fade on
   navy and leaves the picture a hard edge mid-band. Filling the frame puts the
   fade on the photograph itself. */
.gqv2 .gq-ha-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.05);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 9%, rgba(0, 0, 0, .82) 15%, #000 20%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .45) 9%, rgba(0, 0, 0, .82) 15%, #000 20%);
}

/* Opaque navy under the headline, thinning to nothing across the picture. The
   foot keeps its own wash: the meta row sits low enough to cross the photo on
   a short viewport. */
.gqv2 .gq-ha-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(9, 26, 45, .55) 0%, rgba(9, 26, 45, .12) 30%, rgba(9, 26, 45, 0) 62%),
        linear-gradient(to right, var(--gq-navy-dark) 0%, rgba(9, 26, 45, .9) 34%, rgba(9, 26, 45, .45) 48%, rgba(9, 26, 45, 0) 62%);
}

.gqv2 .gq-ha-hero-inner {
    position: relative;
    width: 100%;
    color: #fff;
}

/* The copy stays out of the picture's half — the title's own ch cap is about
   the measure, not about where the photograph starts. */
.gqv2 .gq-ha-hero-inner > * {
    max-width: 46%;
}

.gqv2 .gq-ha-hero-inner > .gq-ha-title {
    max-width: min(46%, 22ch);
}

.gqv2 .gq-ha-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 22px;
}

.gqv2 .gq-ha-crumbs a:hover {
    color: #fff;
}

.gqv2 .gq-ha-crumbs i {
    font-size: 9px;
    opacity: .6;
}

.gqv2 .gq-ha-kicker {
    display: block;
    font-size: 38px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(9, 26, 45, .5);
}

.gqv2 .gq-ha-title {
    /* Capped in ch rather than px: the measure is what keeps a long headline
       from running to four lines on a wide screen, and that is a character
       count, not a pixel width. */
    max-width: 22ch;
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(30px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 4px 30px rgba(9, 26, 45, .45);
}

.gqv2 .gq-ha-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.gqv2 .gq-ha-meta li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .9);
}

.gqv2 .gq-ha-meta i {
    font-size: 13px;
    color: var(--gq-gold);
}


/* ==================== BODY LAYOUT ==================== */

.gqv2 .gq-ha-main {
    padding: 0 0 78px;
}

/* The article is pulled up over the foot of the hero so the two read as one
   spread rather than as a photo with a page under it. */
.gqv2 .gq-ha-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 64px;
    position: relative;
    margin-top: -46px;
}

.gqv2 .gq-ha-article {
    /* The reading measure, shared by the prose and the share row under it so
       the two line up. Fixed rather than expressed in ch: the two blocks are
       set at different sizes, and ch resolves against each element's own font,
       so 66ch on both would visibly disagree. */
    --gq-ha-measure: 46rem;

    /* The grid aligns to start, so on a short story the article card would
       stop well above the rail beside it. Stretching this one item makes it
       fill the row, which is already as tall as the taller column — so the
       two bottoms meet without a height being guessed at. Only this item:
       the rail stays start-aligned or it has no room left to stick in. */
    align-self: stretch;

    background: #fff;
    border-radius: var(--gq-radius);
    box-shadow: var(--gq-shadow);
    padding: 54px clamp(24px, 4vw, 64px) 44px;
}


/* ==================== PROSE ==================== */

/* Everything below targets tags rather than classes: the markup is whatever
   the admin's editor emitted, filtered by web_rich_text(), so there are no
   classes to hook. */
.gqv2 .gq-ha-prose {
    max-width: var(--gq-ha-measure);
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.78;
    color: #3b434c;
    letter-spacing: .002em;
}

.gqv2 .gq-ha-prose > *:first-child {
    margin-top: 0;
}

.gqv2 .gq-ha-prose > *:last-child {
    margin-bottom: 0;
}

.gqv2 .gq-ha-prose p {
    margin: 0 0 1.35em;
}

/* The opening line carries the page, so it is set a size up. Scoped to the
   first paragraph only — an editor who starts with a heading gets no lead. */
.gqv2 .gq-ha-prose > p:first-child {
    font-size: 21px;
    line-height: 1.7;
    color: #2f373f;
}

/* Drop cap on the opening paragraph. ::first-letter is ignored where the
   paragraph starts with an element, which is the correct outcome: a story
   opening on a bolded label should not have that label's B enlarged. */
.gqv2 .gq-ha-prose > p:first-child::first-letter {
    float: left;
    font-family: var(--gq-head-font);
    font-size: 68px;
    line-height: .82;
    font-weight: 800;
    color: var(--gq-navy);
    margin: 6px 12px 0 0;
}

.gqv2 .gq-ha-prose h2,
.gqv2 .gq-ha-prose h3,
.gqv2 .gq-ha-prose h4 {
    font-family: var(--gq-head-font);
    color: var(--gq-navy);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 1.9em 0 .6em;
}

.gqv2 .gq-ha-prose h2 { font-size: 28px; }
.gqv2 .gq-ha-prose h3 { font-size: 22px; }
.gqv2 .gq-ha-prose h4 { font-size: 18px; }

.gqv2 .gq-ha-prose strong,
.gqv2 .gq-ha-prose b {
    color: var(--gq-navy);
    font-weight: 700;
}

.gqv2 .gq-ha-prose a {
    color: var(--gq-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(36, 116, 166, .38);
}

.gqv2 .gq-ha-prose a:hover {
    color: var(--gq-navy);
    text-decoration-color: currentColor;
}

.gqv2 .gq-ha-prose ul,
.gqv2 .gq-ha-prose ol {
    margin: 0 0 1.35em;
    padding-left: 1.35em;
}

.gqv2 .gq-ha-prose li {
    margin-bottom: .5em;
}

.gqv2 .gq-ha-prose li::marker {
    color: var(--gq-gold);
}

.gqv2 .gq-ha-prose blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--gq-gold);
    font-family: var(--gq-head-font);
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
    font-style: italic;
    color: var(--gq-navy);
}

.gqv2 .gq-ha-prose blockquote p:last-child {
    margin-bottom: 0;
}

.gqv2 .gq-ha-prose img {
    border-radius: 12px;
    margin: 1.8em 0;
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-ha-prose figure {
    margin: 1.8em 0;
}

.gqv2 .gq-ha-prose figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--gq-mist);
    text-align: center;
}

.gqv2 .gq-ha-prose hr {
    border: 0;
    height: 1px;
    background: var(--gq-line);
    margin: 2.4em 0;
}

/* A pasted table has no widths of its own, so it gets a readable default and
   is allowed to scroll rather than forcing the column wider. */
.gqv2 .gq-ha-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 16px;
}

.gqv2 .gq-ha-prose th,
.gqv2 .gq-ha-prose td {
    border: 1px solid var(--gq-line);
    padding: 10px 14px;
    text-align: left;
}

.gqv2 .gq-ha-prose th {
    background: var(--gq-cloud);
    color: var(--gq-navy);
    font-weight: 700;
}


/* ==================== SHARE ==================== */

.gqv2 .gq-ha-share {
    max-width: var(--gq-ha-measure);
    margin: 46px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--gq-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.gqv2 .gq-ha-share-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

.gqv2 .gq-ha-share-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gqv2 .gq-ha-share-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--gq-line);
    background: #fff;
    color: var(--gq-navy);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.gqv2 .gq-ha-share-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
}

.gqv2 .gq-ha-share-btn.facebook:hover  { background: #1877F2; }
.gqv2 .gq-ha-share-btn.x:hover         { background: #000; }
.gqv2 .gq-ha-share-btn.pinterest:hover { background: #E60023; }
.gqv2 .gq-ha-share-btn.email:hover     { background: var(--gq-blue); }
.gqv2 .gq-ha-share-btn.copy:hover      { background: var(--gq-navy); }

/* The confirmation is a tooltip above the button rather than a swapped icon —
   the icon is how the reader finds the button again. */
.gqv2 .gq-ha-copy-said {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    background: var(--gq-navy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 6px 11px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.gqv2 .gq-ha-share-btn.is-copied .gq-ha-copy-said {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* ==================== RAIL ==================== */

.gqv2 .gq-ha-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Clears the sticky header with room to breathe. */
    position: sticky;
    top: calc(var(--gq-header-h) + 20px);
}

.gqv2 .gq-ha-card {
    background: #fff;
    border: 1px solid var(--gq-line);
    border-radius: var(--gq-radius);
    overflow: hidden;
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-ha-card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.gqv2 .gq-ha-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gqv2 .gq-ha-card:hover .gq-ha-card-media img {
    transform: scale(1.05);
}

.gqv2 .gq-ha-card-body {
    padding: var(--gq-card-gap-top) 22px 24px;
}

.gqv2 .gq-ha-card-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-gold-dark);
}

.gqv2 .gq-ha-card-title {
    margin: 8px 0 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--gq-navy);
}

.gqv2 .gq-ha-card-place {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gq-mist);
}

.gqv2 .gq-ha-card-place i {
    color: var(--gq-blue);
    font-size: 12px;
}

.gqv2 .gq-ha-card-desc {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--gq-slate);
}

.gqv2 .gq-ha-card-btn {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 12px;
    text-align: center;
    line-height: 1.3;
}


/* ==================== MORE STORIES ==================== */

.gqv2 .gq-ha-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gqv2 .gq-ha-more-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--gq-radius);
    overflow: hidden;
    box-shadow: var(--gq-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease;
}

.gqv2 .gq-ha-more-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gq-shadow);
}

.gqv2 .gq-ha-more-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.gqv2 .gq-ha-more-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gqv2 .gq-ha-more-card:hover .gq-ha-more-media img {
    transform: scale(1.06);
}

.gqv2 .gq-ha-more-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--gq-card-gap-top) 22px 22px;
}

.gqv2 .gq-ha-more-place {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gq-blue);
}

.gqv2 .gq-ha-more-title {
    display: block;
    margin: 10px 0 0;
    font-family: var(--gq-head-font);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.32;
    color: var(--gq-navy);
}

.gqv2 .gq-ha-more-excerpt {
    display: block;
    margin: 10px 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gq-mist);
}

/* Pushed to the foot so the link sits on one line across all three cards
   however uneven the excerpts are. */
.gqv2 .gq-ha-more-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gq-gold-dark);
}

.gqv2 .gq-ha-more-card:hover .gq-ha-more-link i {
    transform: translateX(3px);
}

.gqv2 .gq-ha-more-link i {
    font-size: 11px;
    transition: transform .2s ease;
}


/* ==================== RESPONSIVE ==================== */

@media (max-width: 1100px) {
    .gqv2 .gq-ha-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 40px;
    }

    .gqv2 .gq-ha-more-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    /* No room for two halves: the picture takes the top of the band, still 3:2
       but full width, and fades downward into the navy the words sit on. */
    .gqv2 .gq-ha-hero {
        display: block;
        min-height: 0;
        padding: 76px 0 44px;
    }

    .gqv2 .gq-ha-hero-bg {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        aspect-ratio: 3 / 2;
        max-height: 46vh;
        margin-bottom: 22px;
    }

    .gqv2 .gq-ha-hero-bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-position: center;
        -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    }

    .gqv2 .gq-ha-hero::before {
        background: linear-gradient(to top, rgba(9, 26, 45, .35) 0%, rgba(9, 26, 45, 0) 45%);
    }

    .gqv2 .gq-ha-hero-inner > *,
    .gqv2 .gq-ha-hero-inner > .gq-ha-title {
        max-width: none;
    }

    /* The rail becomes the end of the article, so it stops sticking — a sticky
       block in a single column just pins itself to the top of its own space. */
    .gqv2 .gq-ha-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        margin-top: -32px;
    }

    .gqv2 .gq-ha-rail {
        position: static;
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .gqv2 .gq-ha-article {
        padding: 38px clamp(20px, 5vw, 40px) 34px;
    }
}

@media (max-width: 620px) {
    .gqv2 .gq-ha-kicker {
        font-size: 30px;
    }

    .gqv2 .gq-ha-title {
        max-width: none;
    }

    .gqv2 .gq-ha-meta {
        gap: 8px 18px;
        margin-top: 20px;
    }

    .gqv2 .gq-ha-prose {
        font-size: 17px;
        line-height: 1.72;
    }

    .gqv2 .gq-ha-prose > p:first-child {
        font-size: 18px;
    }

    .gqv2 .gq-ha-prose > p:first-child::first-letter {
        font-size: 54px;
        margin-right: 9px;
    }

    .gqv2 .gq-ha-share {
        justify-content: center;
    }

    .gqv2 .gq-ha-more-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gq-ha-progress-fill,
    .gqv2 .gq-ha-card-media img,
    .gqv2 .gq-ha-more-card,
    .gqv2 .gq-ha-more-media img {
        transition: none;
    }
}

/* The rail's note. Removed with the "Want it in the post?" wording and back
   with the client's, which says what the + does rather than how anything
   travels — see the note beside it in website/story/index.php. */
.gqv2 .gq-ha-note {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--gq-radius);
    background: var(--gq-sand);
    border: 1px solid rgba(217, 108, 71, .18);
}

.gqv2 .gq-ha-note > i {
    font-size: 19px;
    color: var(--gq-gold-dark);
    margin-top: 2px;
}

.gqv2 .gq-ha-note strong {
    display: block;
    font-size: 14.5px;
    color: var(--gq-navy);
    margin-bottom: 5px;
}

.gqv2 .gq-ha-note p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gq-slate);
}

.gqv2 .gq-ha-note p i {
    font-size: 10px;
    color: var(--gq-gold-dark);
}