/**
 * page-award-release.css
 *
 * Press-release / award-announcement components for PAGES that use the
 * single.php blog template (currently only /best-company-to-work-for/, ID 41847).
 *
 * Loaded by vs_enqueue_single_template_page_assets() in functions.php, which
 * fires ONLY on is_page() + is_page_template('single.php'). Real blog posts
 * (is_singular('post')) never load this file, so nothing here can bleed into
 * the blog design.
 *
 * Depends on css/blog-post-styles.css (or blog-template-styles.css) for the
 * hero / metadata / .content-wrapper prose base, and on style.css for the
 * --vs-* design tokens.
 *
 * SPECIFICITY NOTE: every component rule below is prefixed with
 * .content-wrapper on purpose. The base blog stylesheet styles descendants of
 * .content-wrapper by element (p, blockquote, img, a), which outranks a bare
 * single class. Dropping the prefix silently loses margins and font sizes.
 *
 * Style guide compliance: Lato display type, forest-green accent only (zero
 * blue), zero border-radius, weight 900 uppercase display type, no italic
 * headings, prefers-reduced-motion respected.
 */

/* ---------------------------------------------------------------------------
 * 1. HERO TITLE CAP (scoped to pages on this template)
 *
 * blog-post-styles.css sizes .article-title at clamp(2rem, 5.5vw, 5.25rem).
 * Award-announcement headlines run 90+ characters, which at 84px wraps to four
 * uppercase lines and overflows the 50vh hero (overflow:hidden = clipped text)
 * on any laptop shorter than ~900px. Capping at 3.5rem keeps a long headline to
 * three lines inside the hero at every viewport. Blog posts are untouched.
 * ------------------------------------------------------------------------- */
body.page .article-title {
    font-size: clamp(1.6rem, 4vw, 3.5rem);
    letter-spacing: -0.005em;
    max-width: 38ch;
    margin: 0 auto;
}

@media (max-width: 767px) {
    body.page .article-title {
        max-width: none;
    }
}

/* ---------------------------------------------------------------------------
 * 2. AWARD BADGE -- the recognition claim, stated once, at the top
 * ------------------------------------------------------------------------- */
.content-wrapper .vsbc-badge {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.75rem;
    margin: 0 0 2.5rem;
    padding: 1.75rem 2rem;
    background: var(--vs-gray-light, #f9f9f9);
    border-left: 5px solid var(--vs-blue, #15803d);
}

.content-wrapper .vsbc-badge__count {
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 4.75rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: var(--vs-blue-dark, #14532d);
}

.content-wrapper .vsbc-badge__label {
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: 0.72rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--vs-blue, #15803d);
    margin: 0 0 0.35rem;
}

.content-wrapper .vsbc-badge__text {
    font-family: var(--vs-font);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--vs-gray-dark, #1a1a1a);
    margin: 0;
}

@media (max-width: 640px) {
    .content-wrapper .vsbc-badge {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1.5rem;
    }
}

/* ---------------------------------------------------------------------------
 * 3. LEDE
 * ------------------------------------------------------------------------- */
.content-wrapper p.vsbc-lede {
    font-size: 1.3125rem;
    line-height: 1.6;
    color: var(--vs-gray-dark, #1a1a1a);
    margin: 0 0 1.75rem;
}

@media (max-width: 767px) {
    .content-wrapper p.vsbc-lede {
        font-size: 1.1875rem;
    }
}

/* ---------------------------------------------------------------------------
 * 4. FACTS STRIP -- when / where / our role
 * ------------------------------------------------------------------------- */
.content-wrapper .vsbc-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2.5rem 0 3rem;
    border: 1px solid var(--vs-border, #e5e7eb);
    border-top: 3px solid var(--vs-blue, #15803d);
}

.content-wrapper .vsbc-facts__item {
    padding: 1.5rem;
    border-right: 1px solid var(--vs-border, #e5e7eb);
}

.content-wrapper .vsbc-facts__item:last-child {
    border-right: 0;
}

.content-wrapper .vsbc-facts__key {
    display: block;
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--vs-blue, #15803d);
    margin-bottom: 0.5rem;
}

.content-wrapper .vsbc-facts__val {
    display: block;
    font-family: var(--vs-font);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--vs-gray-dark, #1a1a1a);
}

@media (max-width: 767px) {
    .content-wrapper .vsbc-facts {
        grid-template-columns: 1fr;
    }
    .content-wrapper .vsbc-facts__item {
        border-right: 0;
        border-bottom: 1px solid var(--vs-border, #e5e7eb);
    }
    .content-wrapper .vsbc-facts__item:last-child {
        border-bottom: 0;
    }
}

/* ---------------------------------------------------------------------------
 * 5. PULL QUOTE
 *
 * Overrides the base .content-wrapper blockquote (italic, 4px rule): a 60-word
 * attributed quote reads poorly fully italicised at 1.25rem.
 * ------------------------------------------------------------------------- */
.content-wrapper blockquote.vsbc-quote {
    margin: 2.75rem 0;
    padding: 0 0 0 2rem;
    border-left: 5px solid var(--vs-blue, #15803d);
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--vs-gray-dark, #1a1a1a);
}

.content-wrapper blockquote.vsbc-quote p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 1rem;
}

.content-wrapper blockquote.vsbc-quote p:last-of-type {
    margin-bottom: 0;
}

.content-wrapper .vsbc-quote__cite {
    display: block;
    margin-top: 1.125rem;
    font-family: var(--vs-font);
    font-style: normal;
    font-weight: 900;
    font-size: 0.72rem;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--vs-blue, #15803d);
}

.content-wrapper .vsbc-quote__cite a {
    color: inherit;
}

@media (max-width: 767px) {
    .content-wrapper blockquote.vsbc-quote {
        font-size: 1.125rem;
        padding-left: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------
 * 6. FIGURE
 *
 * The 2026 award creative is artwork on a white background, so it needs a
 * border to sit on a white page instead of floating.
 * ------------------------------------------------------------------------- */
/* width:fit-content shrinks the frame to the image's natural width and centres
   it, so a smaller-than-column asset is never upscaled and a larger one is
   still capped by max-width. */
.content-wrapper figure.vsbc-figure {
    width: fit-content;
    max-width: 100%;
    margin: 3rem auto;
    padding: 0;
    border: 1px solid var(--vs-border, #e5e7eb);
    background: var(--vs-white, #fff);
}

.content-wrapper figure.vsbc-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.content-wrapper figure.vsbc-figure figcaption {
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--vs-border, #e5e7eb);
    background: var(--vs-gray-light, #f9f9f9);
    font-family: var(--vs-font);
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    max-width: none;
    color: var(--vs-gray-mid, #6b7280);
    text-align: left;
    /* width:0 + min-width:100% keeps the caption out of the figure's intrinsic
       width calculation, so width:fit-content above hugs the image, not the text. */
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 7. CLOSING CAREERS BAND
 *
 * The eyebrow and headline are divs, not <p>/<h2>, on purpose: <p> would be
 * outranked by .content-wrapper .vsbc-cta p below, and an <h2> would put a
 * promotional line into the template's auto-generated dot TOC.
 * ------------------------------------------------------------------------- */
.content-wrapper .vsbc-cta {
    margin: 3.5rem 0 0;
    padding: 3rem 2.5rem;
    background: var(--vs-grad-cta, linear-gradient(135deg, #15803d 0%, #166534 50%, #14532d 100%));
    color: var(--vs-white, #fff);
    text-align: center;
}

.content-wrapper .vsbc-cta__eyebrow {
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: 0.7rem;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 0.85rem;
}

.content-wrapper .vsbc-cta__head {
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: clamp(1.5rem, 3.4vw, 2.25rem);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--vs-white, #fff);
    margin: 0 0 0.9rem;
}

.content-wrapper .vsbc-cta p {
    max-width: 46rem;
    margin: 0 auto 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.content-wrapper a.vsbc-cta__btn {
    display: inline-block;
    padding: 1rem 2.25rem;
    background: var(--vs-white, #fff);
    background-image: none;
    color: var(--vs-blue-dark, #14532d);
    font-family: var(--vs-font);
    font-weight: 900;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-decoration: none;
    border: 2px solid var(--vs-white, #fff);
    transition: background-color 0.3s var(--vs-ease), color 0.3s var(--vs-ease);
}

.content-wrapper a.vsbc-cta__btn:hover,
.content-wrapper a.vsbc-cta__btn:focus-visible {
    background: transparent;
    background-image: none;
    background-size: auto;
    color: var(--vs-white, #fff);
}

.content-wrapper a.vsbc-cta__btn:focus-visible {
    outline: 3px solid var(--vs-white, #fff);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .content-wrapper .vsbc-cta {
        padding: 2.25rem 1.35rem;
    }
    .content-wrapper a.vsbc-cta__btn {
        display: block;
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-wrapper a.vsbc-cta__btn {
        transition: none;
    }
}