/* ---------------------------------------------------------------------------
   Cover story page — app/Views/website/story/index.php.

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

   Prefix is gq-st- 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-st-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 999;
    pointer-events: none;
    background: transparent;
}

.gqv2 .gq-st-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-st-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(74vh, 660px);
    padding: 120px 0 56px;
    overflow: hidden;
    background: var(--gq-navy-dark);
    isolation: isolate;
}

.gqv2 .gq-st-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.gqv2 .gq-st-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A photo chosen for a homepage panel is not composed for text over it, so
       it is pushed back rather than trusted to be dark enough on its own. */
    transform: scale(1.03);
    filter: saturate(1.05);
}

/* Two stops, not one: the deep foot keeps the headline legible while the
   thinner top wash stops the sticky white header floating on a bright sky. */
.gqv2 .gq-st-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(9, 26, 45, .92) 0%, rgba(9, 26, 45, .72) 34%, rgba(9, 26, 45, .12) 72%, rgba(9, 26, 45, .38) 100%);
}

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

.gqv2 .gq-st-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-st-crumbs a:hover {
    color: #fff;
}

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

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

.gqv2 .gq-st-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-st-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.gqv2 .gq-st-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-st-meta i {
    font-size: 13px;
    color: var(--gq-gold);
}


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

.gqv2 .gq-st-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-st-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 64px;
    position: relative;
    margin-top: -46px;
}

.gqv2 .gq-st-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-st-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-st-prose {
    max-width: var(--gq-st-measure);
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.78;
    color: #3b434c;
    letter-spacing: .002em;
}

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

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

.gqv2 .gq-st-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-st-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-st-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-st-prose h2,
.gqv2 .gq-st-prose h3,
.gqv2 .gq-st-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-st-prose h2 { font-size: 28px; }
.gqv2 .gq-st-prose h3 { font-size: 22px; }
.gqv2 .gq-st-prose h4 { font-size: 18px; }

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

.gqv2 .gq-st-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-st-prose a:hover {
    color: var(--gq-navy);
    text-decoration-color: currentColor;
}

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

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

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

.gqv2 .gq-st-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-st-prose blockquote p:last-child {
    margin-bottom: 0;
}

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

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

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

.gqv2 .gq-st-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-st-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 16px;
}

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

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


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

.gqv2 .gq-st-share {
    max-width: var(--gq-st-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-st-share-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

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

.gqv2 .gq-st-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-st-share-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
}

.gqv2 .gq-st-share-btn.facebook:hover  { background: #1877F2; }
.gqv2 .gq-st-share-btn.x:hover         { background: #000; }
.gqv2 .gq-st-share-btn.pinterest:hover { background: #E60023; }
.gqv2 .gq-st-share-btn.email:hover     { background: var(--gq-blue); }
.gqv2 .gq-st-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-st-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-st-share-btn.is-copied .gq-st-copy-said {
    opacity: 1;
    transform: translate(-50%, 0);
}


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

.gqv2 .gq-st-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-st-card {
    background: #fff;
    border: 1px solid var(--gq-line);
    border-radius: var(--gq-radius);
    overflow: hidden;
    box-shadow: var(--gq-shadow-sm);
}

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

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

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

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

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

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

.gqv2 .gq-st-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-st-card-place i {
    color: var(--gq-blue);
    font-size: 12px;
}

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

.gqv2 .gq-st-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-st-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gqv2 .gq-st-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-st-more-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gq-shadow);
}

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

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

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

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

.gqv2 .gq-st-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-st-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-st-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-st-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-st-more-card:hover .gq-st-more-link i {
    transform: translateX(3px);
}

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


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

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

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

@media (max-width: 900px) {
    .gqv2 .gq-st-hero {
        min-height: 0;
        padding: 84px 0 44px;
    }

    /* 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-st-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        margin-top: -32px;
    }

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .gqv2 .gq-st-progress-fill,
    .gqv2 .gq-st-card-media img,
    .gqv2 .gq-st-more-card,
    .gqv2 .gq-st-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-st-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-st-note > i {
    font-size: 19px;
    color: var(--gq-gold-dark);
    margin-top: 2px;
}

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

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

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