/* =================================================================
   PROJECT OVERLAY — Case Study View
   ================================================================= */

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.project-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: calc(var(--page-padding) + var(--sidebar-width) + var(--grid-gap));
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: #ffffff;
    background-color: var(--bg-page);
}

[data-theme="dark"] .project-overlay {
    background-color: #111111;
}

@media (max-width: 768px) {
    .project-overlay {
        left: 0;
    }
}

.project-overlay.is-open {
    display: block;
    animation: overlayIn 0.3s ease forwards;
}

/* ---- Scroll progress bar ---- */
.overlay-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--study-accent, #60a5fa);
    z-index: 10001;
    border-radius: 0 2px 2px 0;
    transition: width 0.08s linear;
    pointer-events: none;
}

/* ---- Back to top button ---- */
.overlay-back-top {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.2);
    border: 1px solid rgba(128, 128, 128, 0.25);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s;
    z-index: 10001;
    pointer-events: none;
}

.overlay-back-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.overlay-back-top:hover {
    background: rgba(128, 128, 128, 0.35);
}

/* ---- Close button ---- */
.project-overlay__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10000;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.2);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s;
}

.project-overlay__close:hover {
    background: rgba(128, 128, 128, 0.35);
}

/* ---- Scroll container ---- */
.project-overlay__scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Hero ---- */
.project-overlay__hero {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .project-overlay__hero { height: 240px; }
}

.project-overlay__hero-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.project-overlay__hero-gradient {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, #ffffff 0%, transparent 55%);
    pointer-events: none;
}

[data-theme="dark"] .project-overlay__hero-gradient {
    background: linear-gradient(to top, #111111 0%, transparent 55%);
}

/* ---- Body ---- */
.project-overlay__body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px 80px;
}

@media (min-width: 768px) {
    .project-overlay__body { padding: 32px 48px 80px; }
}

/* ---- Tag ---- */
.project-overlay__tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    margin-right: 6px;
}

.project-overlay__tag--project    { background: var(--tag-project-bg);    color: var(--tag-project-text); }
.project-overlay__tag--personal   { background: var(--tag-personal-bg);   color: var(--tag-personal-text); }
.project-overlay__tag--experience { background: var(--tag-experience-bg); color: var(--tag-experience-text); }
.project-overlay__tag--experiment { background: var(--tag-experiment-bg); color: var(--tag-experiment-text); }
.project-overlay__tag--case-study { background: var(--tag-case-study-bg); color: var(--tag-case-study-text); }

/* ---- Title & Summary ---- */
.project-overlay__title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .project-overlay__title { font-size: 42px; }
}

.project-overlay__summary {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Sections ---- */
.project-overlay__sections {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 48px;
}

.overlay-section__heading {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 10px;
    margin: 0 0 20px;
}

.overlay-section__body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.overlay-section__body p + p { margin-top: 16px; }

.overlay-section__body-with-image {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.overlay-section__image-aside img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .overlay-section__body-with-image {
        grid-template-columns: 1fr;
    }
    .overlay-section__image-aside {
        display: none;
    }
}

/* ---- 2-up image grid (landscape/mockup images) ---- */
.overlay-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.overlay-image-grid__item {
    background: var(--bg-card-image);
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.overlay-image-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Phone screenshot grid ---- */
.overlay-phone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.overlay-phone-grid__img {
    width: 100%;
    border-radius: 12px;
    display: block;
    background: var(--bg-card-image);
}

/* ---- At-a-glance metadata grid ---- */
.overlay-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 16px;
    margin-bottom: 0;
}

.overlay-meta__label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.overlay-meta__value {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.overlay-meta__logos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.overlay-meta__logo-img {
    height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* Light/dark logo swapping */
.overlay-meta__logo-img--light { display: none; }

[data-theme="light"] .overlay-meta__logo-img--dark  { display: none; }
[data-theme="light"] .overlay-meta__logo-img--light { display: inline; }

/* ---- Full-width image gallery (graphic design / portfolio work) ---- */
.overlay-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.overlay-gallery-grid img {
    width: 100%;
    display: block;
    border-radius: 8px;
    background: var(--bg-card-image);
}

@media (max-width: 600px) {
    .overlay-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Logo showcase grid ---- */
.overlay-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.overlay-logo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overlay-logo-grid__item {
    background: var(--bg-card-image);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.overlay-logo-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.overlay-logo-caption__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
}

.overlay-logo-caption__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .overlay-logo-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Logo entry list (Education / Experience) ---- */
.overlay-entry-list {
    display: flex;
    flex-direction: column;
}

.overlay-entry {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider);
}

.overlay-entry:first-child {
    padding-top: 0;
}

.overlay-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.overlay-entry__logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: contain;
}

.overlay-entry__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.overlay-entry__title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.3;
}

.overlay-entry__subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.overlay-entry__date {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    font-family: 'IBM Plex Mono', monospace;
}

/* ---- Key insight callout ---- */
.overlay-callout {
    border-left: 3px solid var(--text-primary);
    padding: 14px 20px;
    font-size: 18px;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-card-image);
    border-radius: 0 8px 8px 0;
    margin: 0;
}

/* ---- Design principles grid ---- */
.overlay-principles-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.overlay-principle {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-card-image);
    border-radius: 8px;
    padding: 16px 18px;
}

.overlay-principle__step {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 1px;
}

.overlay-principle__content {
    flex: 1;
}

.overlay-principle__title {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.overlay-principle__body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ---- Screen rows (image + text side by side) ---- */
.overlay-screen-rows {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 28px;
}

.overlay-screen-row {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 32px;
    align-items: center;
}

.overlay-screen-row--slim {
    grid-template-columns: 1fr 3fr;
}

.overlay-screen-row--flip {
    direction: rtl;
}

.overlay-screen-row--flip > * {
    direction: ltr;
}

.overlay-screen-row__img img {
    width: 100%;
    border-radius: 10px;
    display: block;
    background: var(--bg-card-image);
}

.overlay-screen-row__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}

.overlay-screen-row__desc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .overlay-screen-row,
    .overlay-screen-row--flip {
        grid-template-columns: 1fr;
        direction: ltr;
    }
}

/* ---- Full-width landscape image ---- */
.overlay-full-image {
    margin-top: 16px;
    border-radius: 10px;
    overflow: hidden;
}

.overlay-full-image img {
    width: 100%;
    display: block;
    max-height: 320px;
    object-fit: cover;
}

/* ---- Single centered phone screenshot ---- */
.overlay-phone-image {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.overlay-phone-image img {
    width: 220px;
    border-radius: 16px;
    display: block;
}

/* ---- Prototype CTA link ---- */
.overlay-prototype-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--text-primary);
    color: var(--bg-page);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: opacity 0.15s ease;
    margin-top: 4px;
}

.overlay-prototype-link:hover {
    opacity: 0.7;
}

/* ---- Results stat row ---- */
.overlay-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.overlay-stat {
    background: var(--bg-card-image);
    border-radius: 4px;
    padding: 16px;
}

.overlay-stat__value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.overlay-stat__label {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* =================================================================
   PER-STUDY ACCENT COLORS
   ================================================================= */
[data-study="yohocare"]   { --study-accent: #7C3AED; --study-accent-rgb: 124,58,237; }
[data-theme="dark"] [data-study="yohocare"] { --study-accent: #A78BFA; --study-accent-rgb: 167,139,250; }
[data-study="songswipe"]  { --study-accent: #1DB954; --study-accent-rgb: 29,185,84; }
[data-theme="dark"] [data-study="songswipe"] { --study-accent: #4ade80; --study-accent-rgb: 74,222,128; }
[data-study="nufit"]      { --study-accent: #B45309; --study-accent-rgb: 180,83,9; }
[data-theme="dark"] [data-study="nufit"] { --study-accent: #FCD34D; --study-accent-rgb: 252,211,77; }
[data-study="sportsense"] { --study-accent: #2563eb; --study-accent-rgb: 37,99,235; }
[data-theme="dark"] [data-study="sportsense"] { --study-accent: #93c5fd; --study-accent-rgb: 147,197,253; }

/* =================================================================
   CASE STUDY GLOBAL OVERRIDES
   Rachel Yhe / Perry W / Wenjing-inspired layout system
   ================================================================= */

/* Much larger section gap — breathing room like the reference sites */
[data-study] .project-overlay__sections {
    gap: 84px;
}

/* Section headings: from 13px mono → 28px bold display, accent colored */
[data-study] .overlay-section__heading {
    font-family: var(--font-family-sans);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-transform: none;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
    line-height: 1.15;
    color: var(--study-accent);
}

/* Phase label above numbered sections (NuFit / Perry W style) */
.overlay-section__header {
    margin-bottom: 20px;
}

.overlay-section__header .overlay-section__heading {
    margin-bottom: 0;
}

.overlay-section__phase {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--study-accent);
    opacity: 0.6;
    margin-bottom: 8px;
}

/* Body text: slightly larger, more generous line-height */
[data-study] .overlay-section__body {
    font-size: 16px;
    line-height: 1.85;
}

/* Full-bleed images — break out of body padding entirely */
[data-study] .overlay-full-image {
    margin-left: -48px;
    margin-right: -48px;
    border-radius: 0;
    margin-top: 20px;
}

[data-study] .overlay-full-image img {
    max-height: none;
    border-radius: 0;
}

@media (max-width: 768px) {
    [data-study] .overlay-full-image {
        margin-left: -32px;
        margin-right: -32px;
    }
}

/* Screen rows: much bigger image column (was 1fr 3fr, now 2fr 3fr) */
[data-study] .overlay-screen-row--slim {
    grid-template-columns: 2fr 3fr;
}

/* Yohocare, SongSwipe, NuFit: consistent image column size */
[data-study="yohocare"] .overlay-screen-row--slim,
[data-study="songswipe"] .overlay-screen-row--slim,
[data-study="nufit"] .overlay-screen-row--slim {
    grid-template-columns: 1.4fr 3fr;
}

/* SportSense: wider image column for desktop screenshots */
[data-study="sportsense"] .overlay-screen-row {
    grid-template-columns: 3fr 2fr;
}

[data-study="sportsense"] .overlay-screen-rows {
    gap: 72px;
}

/* Phone mockup corner clip — prevents gray anti-alias fringe on rounded PNG corners */
[data-study="yohocare"] .overlay-screen-row__img img,
[data-study="nufit"] .overlay-screen-row__img img,
[data-study="songswipe"] .overlay-screen-row__img img {
    border-radius: 16% / 7.9%;
}

/* Results stats: strip background, use accent color, bigger numbers */
[data-study] .overlay-stat-row {
    gap: 0;
    border-top: 1px solid var(--color-divider);
}

[data-study] .overlay-stat {
    background: transparent;
    border-radius: 0;
    padding: 28px 0;
    border-bottom: 1px solid var(--color-divider);
    border-right: 1px solid var(--color-divider);
}

[data-study] .overlay-stat:last-child {
    border-right: none;
}

[data-study] .overlay-stat__value {
    font-size: 36px;
    color: var(--study-accent);
    margin-bottom: 6px;
}

[data-study] .overlay-stat__label {
    font-size: 13px;
    line-height: 1.5;
}

/* Callout blockquote: larger, no border-left box */
[data-study] .overlay-callout {
    border-left: none;
    border-radius: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1.6;
    padding: 8px 0;
    font-style: normal;
    font-weight: 600;
    color: var(--study-accent);
    margin: 0;
    border-top: 3px solid var(--study-accent);
    padding-top: 24px;
}

/* =================================================================
   YOHOCARE — Wenjing-inspired lavender personality
   ================================================================= */
[data-study="yohocare"] .overlay-section__heading {
    color: #5B21B6;
}

[data-theme="dark"] [data-study="yohocare"] .overlay-section__heading {
    color: #A78BFA;
}

/* Bolder, full-bleed color band — the showpiece element */
[data-study="yohocare"] .overlay-color-band {
    margin-left: -48px;
    margin-right: -48px;
    padding: 52px 64px;
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
    border-left: none;
}

[data-theme="dark"] [data-study="yohocare"] .overlay-color-band {
    background: linear-gradient(135deg, rgba(109,40,217,0.22) 0%, rgba(124,58,237,0.14) 100%);
}

[data-study="yohocare"] .overlay-color-band__quote {
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    color: #4C1D95;
    line-height: 1.4;
}

[data-theme="dark"] [data-study="yohocare"] .overlay-color-band__quote {
    color: #C4B5FD;
}

[data-study="yohocare"] .overlay-color-band__body {
    font-size: 16px;
    color: #5B21B6;
    opacity: 1;
}

[data-theme="dark"] [data-study="yohocare"] .overlay-color-band__body {
    color: #A78BFA;
}

@media (max-width: 768px) {
    [data-study="yohocare"] .overlay-color-band {
        margin-left: -32px;
        margin-right: -32px;
        padding: 36px 32px;
    }
}

/* Persona card quote bar: lavender */
[data-study="yohocare"] .overlay-persona-card__quote {
    border-left-color: #7C3AED;
}

/* =================================================================
   SONG SWIPE — Spotify dark / Rachel Yhe bold personality
   ================================================================= */
[data-study="songswipe"] .overlay-section__heading {
    font-size: 32px;
    color: #16a34a;
}

[data-theme="dark"] [data-study="songswipe"] .overlay-section__heading {
    color: #4ADE80;
}

/* Dark full-bleed section for "The Solution" — Spotify immersion */
.overlay-section-item--dark {
    margin-left: -48px;
    margin-right: -48px;
    padding: 56px 48px;
    background: #0a0a0a;
}

.overlay-section-item--dark .overlay-section__heading {
    color: #1DB954;
}

.overlay-section-item--dark .overlay-section__body {
    color: rgba(255,255,255,0.72);
}

.overlay-section-item--dark .overlay-screen-row__title {
    color: #ffffff;
}

.overlay-section-item--dark .overlay-screen-row__desc {
    color: rgba(255,255,255,0.65);
}

.overlay-section-item--dark .overlay-screen-row__img img {
    background: #1a1a1a;
}

.overlay-section-item--dark .overlay-proto-cta {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.1);
}

.overlay-section-item--dark .overlay-proto-cta__desc {
    color: rgba(255,255,255,0.6);
}

.overlay-section-item--dark .overlay-proto-cta__link {
    background: #1DB954;
    color: #000000;
}

@media (max-width: 768px) {
    .overlay-section-item--dark {
        margin-left: -32px;
        margin-right: -32px;
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* Song Swipe stat callout numbers: Spotify green */
[data-study="songswipe"] .overlay-stat-callout {
    border-top-color: #1DB954;
}

[data-study="songswipe"] .overlay-stat-callout__value {
    color: #1DB954;
    font-size: 56px;
}

/* =================================================================
   NUFIT — Perry W Stadia numbered / structured personality
   ================================================================= */
[data-study="nufit"] .overlay-section__heading {
    color: #B45309;
}

[data-theme="dark"] [data-study="nufit"] .overlay-section__heading {
    color: #FCD34D;
}

/* Reframe banner: bold left border, big headline */
[data-study="nufit"] .overlay-reframe-banner {
    border-radius: 0;
    border-left-width: 5px;
    padding: 32px 36px;
}

[data-study="nufit"] .overlay-reframe-banner__headline {
    font-size: 36px;
}

/* Persona card accent: yellow */
[data-study="nufit"] .overlay-persona-card__quote {
    border-left-color: #B45309;
}

[data-theme="dark"] [data-study="nufit"] .overlay-persona-card__quote {
    border-left-color: #FCD34D;
}

/* =================================================================
   SPORTSENSE — Rachel Yhe Coursera clean, bold portal personality
   ================================================================= */
[data-study="sportsense"] .overlay-section__heading {
    color: #1d4ed8;
}

[data-theme="dark"] [data-study="sportsense"] .overlay-section__heading {
    color: #93c5fd;
}

/* Portal cards: larger tagline, more generous padding */
[data-study="sportsense"] .overlay-portal-cards {
    margin-top: 40px;
    margin-bottom: 40px;
}

[data-study="sportsense"] .overlay-portal-card {
    padding: 30px 24px;
}

[data-study="sportsense"] .overlay-portal-card__tagline {
    font-size: 32px;
    margin-bottom: 14px;
}

/* Persona cards: green accent quote bar */
[data-study="sportsense"] .overlay-persona-card__quote {
    border-left-color: #2563eb;
}

/* Three-persona row: allow 3 columns at wider viewports */
[data-study="sportsense"] .overlay-persona-row {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
    [data-study="sportsense"] .overlay-persona-row {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   COLOR BAND — lavender full-width quote strip (Yohocare)
   ================================================================= */
.overlay-color-band {
    margin-left: -48px;
    margin-right: -48px;
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 36px 48px;
    background: rgba(109, 40, 217, 0.07);
    border-left: 3px solid var(--study-accent, #7C3AED);
}

[data-theme="dark"] .overlay-color-band {
    background: rgba(109, 40, 217, 0.14);
}

.overlay-color-band__quote {
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.55;
    color: var(--study-accent, #7C3AED);
    margin: 0;
    max-width: 680px;
}

.overlay-color-band__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 12px 0 0;
    max-width: 620px;
}

@media (max-width: 768px) {
    .overlay-color-band {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* =================================================================
   REFRAME BANNER — bold left-bordered insight callout (NuFit)
   ================================================================= */
.overlay-reframe-banner {
    border-radius: 10px;
    padding: 28px 32px;
    background: var(--bg-card-image);
    border-left: 4px solid var(--study-accent, var(--text-primary));
}

.overlay-reframe-banner__label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--study-accent, var(--text-muted));
    margin-bottom: 10px;
}

.overlay-reframe-banner__headline {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0 0 14px;
}

.overlay-reframe-banner__body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    max-width: 580px;
}

/* =================================================================
   STAT CALLOUTS — large display stats (Song Swipe)
   ================================================================= */
.overlay-stat-callouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 32px 0 4px;
}

.overlay-stat-callout {
    background: var(--bg-card-image);
    border-radius: 10px;
    padding: 22px 18px;
    text-align: center;
    border-top: 3px solid var(--study-accent, var(--text-primary));
}

.overlay-stat-callout__value {
    display: block;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--study-accent, var(--text-primary));
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.overlay-stat-callout__label {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.overlay-stat-callout__context {
    display: block;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .overlay-stat-callouts { grid-template-columns: 1fr; }
}

/* ── Column bar chart ─────────────────────────────────────────── */
.overlay-bar-chart {
    margin-top: 32px;
}

.overlay-bar-chart__question {
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 28px;
}

.overlay-bar-chart__columns {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.overlay-bar-chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.overlay-bar-chart__pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
}

.overlay-bar-chart__bar {
    width: 100%;
    background: var(--study-accent);
    border-radius: 4px 4px 0 0;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.overlay-bar-chart__bar:hover {
    opacity: 1;
}

.overlay-bar-chart__name {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
    margin: 10px 0 0;
    min-height: 44px;
}

@media (max-width: 600px) {
    .overlay-bar-chart__columns { gap: 8px; }
    .overlay-bar-chart__name { font-size: 10px; }
}

/* =================================================================
   COMPARISON CARDS — rejected / survived grid (Song Swipe, NuFit)
   ================================================================= */
.overlay-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 28px 0 4px;
}

.overlay-comparison-card {
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overlay-comparison-card--rejected {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.04);
}

.overlay-comparison-card--survived {
    border-color: rgba(22, 163, 74, 0.3);
    background: rgba(22, 163, 74, 0.05);
}

[data-theme="dark"] .overlay-comparison-card--rejected {
    background: rgba(220, 38, 38, 0.08);
}

[data-theme="dark"] .overlay-comparison-card--survived {
    background: rgba(22, 163, 74, 0.1);
}

.overlay-comparison-card__tag {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.overlay-comparison-card--rejected .overlay-comparison-card__tag { color: #DC2626; }
.overlay-comparison-card--survived .overlay-comparison-card__tag { color: #16a34a; }

.overlay-comparison-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.overlay-comparison-card__body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .overlay-comparison-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   PERSONA CARDS — name / role / quote / needs (Yohocare, NuFit, SportSense)
   ================================================================= */
.overlay-persona-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 28px 0 4px;
}

.overlay-persona-card {
    border-radius: 10px;
    padding: 20px;
    background: var(--bg-card-image);
    border: 1px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.overlay-persona-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}

.overlay-persona-card__role {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
    line-height: 1.4;
}

.overlay-persona-card__quote {
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    border-left: 2px solid var(--study-accent, var(--text-muted));
    padding-left: 12px;
    margin: 0 0 16px;
}

.overlay-persona-card__needs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.overlay-persona-card__needs li {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    padding-left: 14px;
    position: relative;
}

.overlay-persona-card__needs li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-size: 11px;
}

/* =================================================================
   PORTAL CARDS — tri-audience showcase (SportSense)
   ================================================================= */
.overlay-portal-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0 4px;
}

.overlay-portal-card {
    border-radius: 10px;
    padding: 24px 20px;
    background: var(--bg-card-image);
    border-top: 3px solid var(--portal-color, var(--text-muted));
    display: flex;
    flex-direction: column;
    gap: 0;
}

.overlay-portal-card__audience {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--portal-color, var(--text-muted));
    margin: 0 0 6px;
}

.overlay-portal-card__tagline {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.overlay-portal-card__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .overlay-portal-cards { grid-template-columns: 1fr; }
}

/* =================================================================
   PROTOTYPE CTA — live link block (NuFit, SportSense)
   ================================================================= */
.overlay-proto-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    background: var(--bg-card-image);
    border-radius: 10px;
    border: 1px solid var(--color-divider);
    margin: 16px 0 4px;
}

.overlay-proto-cta__label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--study-accent, var(--text-muted));
    margin: 0 0 4px;
}

.overlay-proto-cta__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.overlay-proto-cta__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--text-primary);
    color: var(--bg-page);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.overlay-proto-cta__link:hover { opacity: 0.72; }

@media (max-width: 600px) {
    .overlay-proto-cta { flex-direction: column; align-items: flex-start; }
}

.overlay-footer-banner {
    margin-top: 48px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.overlay-footer-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* =================================================================
   CASE STUDY NAVIGATION — prev/next buttons at bottom of overlay
   ================================================================= */
.overlay-case-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 48px;
}

.overlay-case-nav__btn {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    background: var(--bg-card-image);
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.24s,
                box-shadow 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    padding: 0;
}

.overlay-case-nav__btn:hover {
    transform: scale(1.04) translateY(-4px);
    border-color: transparent;
    box-shadow: 0 20px 48px rgba(0,0,0,0.32), 0 8px 16px rgba(0,0,0,0.18);
}

.overlay-case-nav__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.overlay-case-nav__btn:hover .overlay-case-nav__img {
    transform: scale(1.06);
}

.overlay-case-nav__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
}

.overlay-case-nav__text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.overlay-case-nav__btn--next .overlay-case-nav__text {
    text-align: right;
    align-items: flex-end;
}

.overlay-case-nav__dir {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}

.overlay-case-nav__title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}