/* =============================================
   NASSCO CASE STUDY — page CSS
   Pulls in GLightbox (standard case-study lightbox) plus the
   Component Lab pieces this page uses, then adds page-scoped
   adjustments under .page-cs-nassco.
   Lab components: #13 vertical-autoplay-tabs, #10 comparison-panel,
   #7 dark-bento-grid, #29 gradient-wash-statement.
   ============================================= */
@import url("/css/glightbox.min.css");
@import url("/css/lab/vertical-autoplay-tabs.css");
@import url("/css/lab/comparison-panel.css");
@import url("/css/lab/dark-bento-grid.css");
@import url("/css/lab/gradient-wash-statement.css");

/* Comparison title flows as one line-wrapping sentence pair — the lab
   default stacks the accent span on its own line */
.page-cs-nassco .cmp__header h2 span { display: inline; }

/* Comparison panel: keep the two pathways framed as a choice, not a
   winner/loser — the footnote carries the "ILT remains valued" nuance. */
.page-cs-nassco .cmp__footnote {
    max-width: 46rem;
    margin: var(--space-xl) auto 0;
    text-align: center;
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

/* Pathway price line inside each comparison side */
/* Half the default title-to-price gap (collapsed margins: 16px wins) */
.page-cs-nassco .cmp-side__title { margin-bottom: var(--space-md); }

.page-cs-nassco .cmp-side__price {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--space-xl);
}

.page-cs-nassco .cmp-side--us .cmp-side__price { color: var(--color-accent-primary); }

.page-cs-nassco .cmp-side__price small {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
}

/* Gradient wash statement: the b-roll banner above bleeds 6rem into
   this section, so top padding compensates to restore full section
   spacing; bottom gets explicit section spacing too */
.page-cs-nassco .gws {
    padding-top: calc(var(--space-section-y) + 6rem);
    padding-bottom: var(--space-section-y);
}

/* Gradient wash statement: headshot + attribution row under the quote */
.page-cs-nassco .gws__attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.page-cs-nassco .gws__headshot {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-strong);
}

.page-cs-nassco .gws__cite {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-style: normal;
    color: var(--color-text-secondary);
}

/* Dark bento: big stat value cells (reuses the points-card language) */
.page-cs-nassco .gdb-stat__value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: #fff;
    margin-bottom: var(--space-sm);
}

/* Dark bento: chips without avatar images need symmetric padding */
.page-cs-nassco .gdb-chip--text { padding-left: var(--space-md); }

/* VAT media panel at tablet: 75% taller stage so the course screenshot
   reads clearly, scaling back down as the viewport narrows */
@media (max-width: 991px) {
    .page-cs-nassco .vat__media { min-height: 38.5rem; }
}

@media (max-width: 767px) {
    .page-cs-nassco .vat__media { min-height: 28rem; }
}

@media (max-width: 479px) {
    .page-cs-nassco .vat__media { min-height: 20rem; }
}

/* VAT media panel: real course screenshots fill the stage */
.page-cs-nassco .vat-scene img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

/* Seamless dark band: testimonial adopts the bento's exact layered
   background so #8 (impact) flows into #9 (testimonial) with no seam */
.page-cs-nassco .cs-testimonial-section,
.page-cs-nassco .cs-testimonial-section::before {
    background: linear-gradient(rgba(10, 10, 16, 0.55), rgba(10, 10, 16, 0.55)), var(--color-card-dark);
}

/* =============================================
   Challenge data story — narrative and charts woven per row,
   alternating sides. Bars grow and the line draws when scrolled
   into view (case-study-nassco.js adds .is-inview via
   IntersectionObserver)
   ============================================= */
.page-cs-nassco .ncs-story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    margin-top: var(--space-2xl);
}

.page-cs-nassco .ncs-story-row--flip .ncs-story-text { order: 2; }
.page-cs-nassco .ncs-story-row--flip .ncs-chart-card { order: 1; }

.page-cs-nassco .ncs-story-text p:last-child { margin-bottom: 0; }

.page-cs-nassco .ncs-chart-card {
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

.page-cs-nassco .ncs-chart-card h3 {
    font-size: var(--text-h6);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-xs);
}

.page-cs-nassco .ncs-chart-sub {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

.page-cs-nassco .ncs-chart-note {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-top: var(--space-lg);
}

/* Bar chart */
.page-cs-nassco .ncs-bar-row {
    display: grid;
    grid-template-columns: 9.5rem 1fr 4.5rem;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
}

.page-cs-nassco .ncs-bar-label {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.page-cs-nassco .ncs-bar-track { min-width: 0; }

.page-cs-nassco .ncs-bar {
    height: 22px;
    width: 0;
    border-radius: 0 4px 4px 0;
    transition: width 900ms var(--easing-smooth);
}

.page-cs-nassco .ncs-bar--demand { background: var(--color-accent-primary); }
.page-cs-nassco .ncs-bar--capacity { background: var(--color-accent-tertiary); transition-delay: 250ms; }

.page-cs-nassco [data-ncs-chart].is-inview .ncs-bar { width: var(--ncs-w); }

.page-cs-nassco .ncs-bar-value {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-body);
    color: var(--color-text-primary);
}

/* Line chart */
.page-cs-nassco .ncs-line-svg { width: 100%; height: auto; display: block; }

.page-cs-nassco .ncs-grid {
    stroke: var(--color-grey-200);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.page-cs-nassco .ncs-axis {
    font-family: var(--font-body);
    font-size: 11px;
    fill: var(--color-text-muted);
}

.page-cs-nassco .ncs-value {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    fill: var(--color-text-primary);
}

.page-cs-nassco .ncs-line {
    stroke: var(--color-accent-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    transition: stroke-dashoffset 1400ms var(--easing-smooth) 200ms;
}

.page-cs-nassco .ncs-dot {
    fill: var(--color-accent-primary);
    stroke: var(--color-surface);
    stroke-width: 2;
    opacity: 0;
    transition: opacity 300ms var(--easing-default) 1400ms;
}

.page-cs-nassco [data-ncs-chart].is-inview .ncs-line { stroke-dashoffset: 0; }
.page-cs-nassco [data-ncs-chart].is-inview .ncs-dot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .page-cs-nassco .ncs-bar,
    .page-cs-nassco .ncs-line,
    .page-cs-nassco .ncs-dot { transition: none; }
    .page-cs-nassco .ncs-bar { width: var(--ncs-w); }
    .page-cs-nassco .ncs-line { stroke-dashoffset: 0; }
    .page-cs-nassco .ncs-dot { opacity: 1; }
}

@media (max-width: 991px) {
    .page-cs-nassco .ncs-story-row { grid-template-columns: 1fr; gap: var(--space-xl); }
    .page-cs-nassco .ncs-story-row--flip .ncs-story-text { order: 0; }
    .page-cs-nassco .ncs-story-row--flip .ncs-chart-card { order: 0; }
}

@media (max-width: 479px) {
    .page-cs-nassco .ncs-bar-row { grid-template-columns: 7rem 1fr 4rem; }
}

/* =============================================
   Work showcase 65/35 — 2-col gallery + trainer quote card
   ============================================= */
.page-cs-nassco .ncs-showcase-layout {
    /* gallery keeps 65%; the doubled gutter comes out of the quote column */
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.page-cs-nassco .ncs-gallery--2col {
    grid-template-columns: repeat(2, 1fr);
}

.page-cs-nassco .ncs-quote-col {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.page-cs-nassco .ncs-quote-col-heading {
    font-size: var(--text-h6);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
    margin-bottom: calc(-1 * (6rem - var(--space-xl)));
}

.page-cs-nassco .ncs-quote-card-mark {
    display: block;
    font-size: 4rem;
    line-height: 1;
    color: var(--color-accent-primary);
    opacity: 0.35;
    margin: -0.5rem 0 var(--space-md) -0.25rem;
}

.page-cs-nassco .ncs-quote-card blockquote {
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xl);
}

.page-cs-nassco .ncs-quote-card-attribution {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-cs-nassco .ncs-quote-card-headshot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.page-cs-nassco .ncs-quote-card-attribution cite {
    display: block;
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.page-cs-nassco .ncs-quote-card-attribution span {
    display: block;
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

@media (max-width: 991px) {
    .page-cs-nassco .ncs-showcase-layout { grid-template-columns: 1fr; }
    .page-cs-nassco .ncs-quote-col { position: static; }
}

/* =============================================
   Impact bento — animated learner-survey bars + blinking checks
   ============================================= */
/* Survey bars grow on scroll to their near-full endpoints
   (10px / 25px from the track's right edge) */
.page-cs-nassco .gdb-points .gdb-points__fill {
    width: 0;
    transition: width 900ms var(--easing-smooth) 200ms;
}

.page-cs-nassco .gdb-points.is-inview .ncs-fill--strong { width: calc(100% - 10px); }
.page-cs-nassco .gdb-points.is-inview .ncs-fill--agree {
    width: calc(100% - 25px);
    transition-delay: 450ms;
}

/* Checkmarks blink subtly, in step with the ring's existing glow pulse */
.page-cs-nassco .gdb-wcag .gdb-check::after {
    animation: ncs-check-blink 7s ease-in-out infinite;
    animation-delay: inherit;
}

@keyframes ncs-check-blink {
    0%, 8%, 100% { opacity: 1; }
    4% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .page-cs-nassco .gdb-points .gdb-points__fill { transition: none; }
    .page-cs-nassco .ncs-fill--strong { width: calc(100% - 10px); }
    .page-cs-nassco .ncs-fill--agree { width: calc(100% - 25px); }
    .page-cs-nassco .gdb-wcag .gdb-check::after { animation: none; }
}