/* Transamerica Workplace Experience Case Study Styles */

/* Case hero: white background, grid like index hero */
.case-hero { padding: 120px 20px 80px; min-height: 100vh; background: var(--color-white); display: grid; place-items: center; }
.case-hero .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-20); align-items: center; }
.case-hero .hero-content { grid-column: span 7; padding: 0; max-width: 870px; text-align: left; }
.case-hero .hero-media { grid-column: span 5 / -1; display: flex; justify-content: center; align-items: center; }
.hero-placeholder { width: 100%; height: 420px; background: var(--color-white); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Nudge hero image down slightly for better visual alignment with title */
.case-hero .hero-media .hero-placeholder { margin-top: 40px; }
.hero-placeholder img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.launch-badge { display: inline-block; background: var(--color-off-black); color: var(--color-white); padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-24); }

/* Overview section: fire-50 background */
.case-overview { background: var(--color-fire-50); padding: var(--space-64) 0; }
.case-overview .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: start; }
.case-content { grid-column: span 6; }
.case-details { grid-column: span 5 / -1; margin-top: 48px; }
.case-content h3 { margin: 0 0 var(--space-8); }
.case-content .content-section { margin-bottom: var(--space-32); }
.case-details h4 { margin: 0 0 var(--space-2); }
.case-details p { margin: 0 0 var(--space-24); }
.case-details ul { list-style: none; padding: 0; margin: 0 0 var(--space-20); }
.case-details li { margin-bottom: var(--space-8); padding-left: var(--space-16); position: relative; }
.case-details li:before { content: "•"; position: absolute; left: 0; color: var(--text-body); }

/* Tablet/mobile: image above header, details below */
@media (max-width: 1024px) {
    .case-hero .container { grid-template-columns: 1fr; align-items: start; }
    .case-hero .container { margin: 0 var(--space-40); }
    .case-hero .hero-media { grid-column: 1 / -1; order: 1; }
    .case-hero .hero-content { grid-column: 1 / -1; order: 2; max-width: 100%; padding: 0; }
    .case-overview .container { grid-template-columns: 1fr; gap: var(--space-48); margin: 0 var(--space-40); }
    .case-content { order: 1; }
    .case-details { order: 2; margin-top: 0; }
}
@media (max-width: 640px) {
    .case-hero .container, .case-overview .container { margin: 0 var(--space-40); }
}

/* Discovery */
.case-metrics { padding: var(--space-64) 0; background: var(--color-white); }
.case-metrics .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: start; }
.case-metrics h3 { margin: 0 0 var(--space-20); }
.metrics-left { grid-column: span 6; }
.metrics-right { grid-column: span 5 / -1; }
.metrics-left p { margin: 0 0 var(--space-12); }
.metrics-list { display: grid; gap: var(--space-24); }
.metrics-item h2 { color: var(--text-accent); margin: 0 0 var(--space-0); }
.metrics-item p { margin: 0; }
.metrics-left ul { list-style: none; padding-left: 0; margin: 0 0 var(--space-20); }
.metrics-left li { display: block; position: relative; padding-left: var(--space-20); margin: 0 0 var(--space-8); }
.metrics-left li::before { content: "•"; position: absolute; left: 0; top: 0.2em; color: var(--text-body); }
.metrics-right { margin-top: 54px; }
@media (max-width: 1024px) {
    .case-metrics .container { grid-template-columns: 1fr; gap: var(--space-40); margin: 0 var(--space-40); }
    .metrics-left, .metrics-right { grid-column: 1 / -1; }
}

/* Discovery media: collage + full-width images */
.discovery-media { padding: var(--space-64) 0; background: var(--color-white); }
.discovery-media .container { max-width: 1920px; margin: 0 80px; }
.img-60-center { width: 60% !important; margin-left: auto; margin-right: auto; display: block; }
/* Carousel */
.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; gap: 0; scroll-snap-type: x mandatory; overflow-x: auto; padding-bottom: var(--space-12); scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { min-width: 100%; scroll-snap-align: start; }
.carousel-media { width: 100%; height: auto; min-height: 420px; background: var(--color-white); border-radius: 16px; display: grid; place-items: center; overflow: hidden; position: relative; }
.carousel-media img { width: 100%; height: auto; max-height: 820px; display: block; border-radius: 16px; object-fit: contain; }
.carousel-nav { position: absolute; top: calc(50% + var(--space-12)); left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; pointer-events: none; padding: 0 var(--space-20); }
.carousel-btn { pointer-events: all; background: transparent; color: var(--color-fire-500); border: 0; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; font-size: 48px; line-height: 1; }
@media (max-width: 640px) { .carousel-btn { font-size: 36px; width: 36px; height: 36px; } }
@media (max-width: 1024px) { .discovery-media .container { margin: 0 var(--space-40); } }
@media (max-width: 640px) { .discovery-media .container { margin: 0 var(--space-40); } }
.collage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); }
.collage-item { height: 420px; background: var(--color-grey); border-radius: 16px; }
@media (max-width: 1024px) { .collage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .collage-grid { grid-template-columns: 1fr; } }

.metrics-images,.discovery-images, .solution-images{ padding: var(--space-48) 0 var(--space-64); background: var(--color-white); }
/* Ensure image sections span the same full width as other content */
.metrics-images .container, .discovery-images .container, .solution-images .container { max-width: 1920px; margin: 0 80px; }
@media (max-width: 1024px) { .metrics-images .container, .discovery-images .container, .solution-images .container { margin: 0 var(--space-40); } }
@media (max-width: 640px) { .metrics-images .container, .discovery-images .container, .solution-images .container { margin: 0 var(--space-40); } }
.metrics-image, .discovery-image, .solution-image{ margin: 0 0 var(--space-48); }
.metrics-caption, .discovery-caption, .solution-caption{ text-align: center; color: var(--color-grey); margin: 0 0 var(--space-12); }
.metrics-placeholder, .discovery-placeholder, .solution-placeholder{ width: 100%; background: var(--color-grey); border-radius: 16px; }
/* Let images define height based on width for all image sections */
.metrics-placeholder, .discovery-placeholder, .solution-placeholder { height: auto; background: transparent; }
.metrics-placeholder img, .discovery-placeholder img, .solution-placeholder img { width: 100%; height: auto; object-fit: contain; border-radius: 16px; display: block; }

/* Full-height quote section (matches hero height) */
.case-quote { min-height: 100vh; background: var(--color-white); display: grid; place-items: center; padding: var(--space-64) 0; }
.case-quote .container { max-width: 1920px; margin: 0 80px; }
.case-quote .quote-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.case-quote .quote-kicker { margin: 0 0 var(--space-16); color: var(--color-grey); }
.case-quote .quote-text { color: var(--color-fire-500); }
@media (max-width: 640px) { .case-quote .container { margin: 0 var(--space-40); } }

/* Solution right-column list style mirrors case-details */
.solution-section .metrics-right ul { list-style: none; padding: 0; margin: 0 0 var(--space-8); }
.solution-section .metrics-right li { margin-bottom: var(--space-8); padding-left: var(--space-16); position: relative; }
.solution-section .metrics-right li:before { content: "•"; position: absolute; left: 0; color: var(--text-body); }

/* Design section */
.design-section { padding: var(--space-64) 0; background: var(--color-white); }
.design-section .container { max-width: 1920px; margin: 0 80px; }
.design-section h3 { margin: 0 0 var(--space-32); }
.design-placeholder { width: 100%; height: auto; background: transparent; border-radius: 16px; }
.design-placeholder img { width: 100%; height: auto; display: block; border-radius: 16px; }
.design-stack { display: grid; gap: var(--space-24); justify-items: center; }
/* Ensure inline images in design stack are centered and respect gutters */
.design-stack img { width: 100%; max-width: 100%; height: auto; border-radius: 16px; display: block; }
.design-cta { display: flex; justify-content: center; margin-top: var(--space-24); }
.design-cta .cta-button { background: var(--color-fire-500); color: var(--color-white); border: none; padding: var(--space-12) var(--space-20); border-radius: var(--radius-sm); text-decoration: none; box-shadow: var(--shadow-sm); display: inline-block; }
.design-cta .cta-button:hover { background: var(--text-accent); text-decoration: none; }
.design-cta .cta-button:active { background: var(--text-accent); }
@media (max-width: 640px) { .design-cta .cta-button { display: block; width: 100%; text-align: center; } }
@media (max-width: 1024px) { .design-section .container { margin: 0 var(--space-40); } }

/* Impact stats row */
.impact-stats { padding: var(--space-0) 0; background: var(--color-white); }
.impact-stats .container { max-width: 1920px; margin: 0 80px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-54); }
.stats-item h2 { color: var(--text-accent); margin: 0 0 var(--space-0); }
.stats-item p { margin: 0; }
@media (max-width: 1024px) {
    .impact-stats .container { margin: 0 var(--space-40); }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-40); }
}
@media (max-width: 640px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
}

/* Impact spacing tweaks */
.impact-intro { padding-bottom: var(--space-40); }
.impact-next { padding-top: var(--space-40); }

/* Project navigation (bottom of page) */
.project-nav { padding: calc(var(--space-64) * 2) 0; background: var(--color-fire-50); }
.project-nav .container { max-width: 1920px; margin: 0 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-64); align-items: end; }
.project-nav .nav-left { grid-column: span 6; }
.project-nav .nav-right { grid-column: span 5 / -1; display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--space-4); }
.prev-project-label, .next-project-label { color: var(--text-body); display: block; margin-bottom: var(--space-8); }
.prev-project-link, .next-project-link { max-width: 400px; display: block; text-decoration: none; text-decoration-color: #232323; text-decoration-thickness: 2px; }
.prev-project-link { text-align: left; }
.next-project-link { text-align: right; }
.nav-next { text-align: right; }
.prev-project-link:hover, .next-project-link:hover { text-decoration: underline; text-underline-offset: 25%; text-decoration-thickness: 17%; }
@media (max-width: 1024px) {
    .project-nav .container { grid-template-columns: 1fr; gap: var(--space-40); margin: 0 var(--space-40); }
    .project-nav .nav-right { justify-content: flex-start; }
    .nav-next { text-align: left; }
    .next-project-link { text-align: left; }
}