/* =============================================
   CASE STUDY PAGES — shared styles
   Every individual case study page uses this file.
   Change a style here and it changes on all of them.
   You should not need to edit this file to add content.
   ============================================= */

/* ---------- HERO ---------- */
.cs-hero { background: var(--black); display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; position: relative; overflow: hidden; }
.cs-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(36,143,159,0.18) 1.5px, transparent 1.5px); background-size: 32px 32px; pointer-events: none; }
.cs-hero-img { background: var(--near-black); position: relative; overflow: hidden; }
.cs-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-img-fill { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #1e1d1d, #1e1d1d 2px, #252525 2px, #252525 14px); }
.cs-img-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: var(--teal); }
.cs-hero-info { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.cs-back { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); text-decoration: none; display: flex; align-items: center; gap: 8px; margin-bottom: 28px; transition: color 0.2s; }
.cs-back::before { content: '←'; }
.cs-back:hover { color: var(--teal-light); }
.cs-tag { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 12px; }
.cs-title { font-family: var(--font-display); font-size: 64px; line-height: 0.88; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.cs-title span { color: var(--teal-light); display: block; font-size: 36px; margin-top: 6px; }
.cs-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.cs-meta-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.cs-meta-value { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; color: var(--white); }

/* Core value tags in the hero (hidden automatically if none are switched on) */
.cs-values { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.cs-values:not(:has(a)) { display: none; }
.cs-value-tag { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border: 1.5px solid rgba(36,143,159,0.5); color: var(--teal-light); text-decoration: none; transition: all 0.2s; }
.cs-value-tag:hover { border-color: var(--teal-light); background: rgba(36,143,159,0.15); }

/* ---------- VIDEO (plays in the hero photo box) ---------- */
/* The .cs-video divs only hold the links; case-study.js builds the player. */
.cs-video { display: none; }
.cs-player { position: absolute; top: 0; left: 0; right: 0; bottom: 6px; z-index: 3; background: var(--black); display: flex; justify-content: center; align-items: center; }
.cs-player iframe, .cs-player video { width: 100%; height: 100%; border: 0; display: block; }
.cs-player.is-vertical iframe, .cs-player.is-vertical video { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.cs-player-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 24px; text-align: center; }
.cs-hero-img.has-video::before { display: none; }

/* Row of buttons under the hero, only when a page has 2+ videos */
.cs-video-strip { background: var(--near-black); padding: 14px 40px; display: flex; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cs-strip-btn { display: flex; align-items: center; gap: 12px; background: transparent; border: 1.5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); padding: 6px 16px 6px 6px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.2s, color 0.2s; }
.cs-strip-btn:hover { border-color: var(--teal-light); color: var(--white); }
.cs-strip-btn.active { border-color: var(--teal); color: var(--white); }
.cs-strip-thumb { position: relative; width: 72px; height: 40px; flex-shrink: 0; background: var(--black) center / cover no-repeat; }
.cs-strip-thumb::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-left: 10px solid var(--white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }

/* ---------- THE CHALLENGE / OUR APPROACH / THE RESULT ---------- */
.cs-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--gray-light); }
.cs-section { background: var(--white); padding: 48px 40px; }
.cs-section-num { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--teal); opacity: 0.35; margin-bottom: 8px; }
.cs-section-label { font-family: var(--font-display); font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--black); margin-bottom: 20px; border-bottom: 2px solid var(--teal); padding-bottom: 16px; }
.cs-section-body { font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--black); }
.cs-section-body + .cs-section-body { margin-top: 14px; }
.cs-section-body strong { font-weight: 500; color: var(--teal-dim); letter-spacing: 0.02em; }
.cs-result-stat { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--gray-light); }
.cs-result-num { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--teal-dim); }
.cs-result-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin-top: 6px; }

/* ---------- PHONE / TABLET ---------- */
@media (max-width: 900px) {
  .cs-hero { grid-template-columns: 1fr; }
  .cs-hero-img { min-height: 240px; }
  .cs-hero-img.has-video { min-height: 0; aspect-ratio: 16 / 9; }
  .cs-hero-img.has-video.is-vertical { aspect-ratio: auto; height: min(80vh, calc(100vw * 16 / 9)); }
  .cs-video-strip { padding: 12px 16px; }
  .cs-hero-info { padding: 40px 24px; }
  .cs-title { font-size: 48px; }
  .cs-title span { font-size: 26px; }
  .cs-sections { grid-template-columns: 1fr; }
  .cs-section { padding: 40px 24px; }
}

/* ---------- PREVIOUS / NEXT ARROWS ---------- */
/* Phones: a two-button bar under the story. Wide screens: fixed arrows at the screen edges. */
.cs-pager { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); border-top: 3px solid var(--teal); }
.cs-pager-link { display: flex; align-items: center; gap: 14px; padding: 22px 20px; text-decoration: none; color: var(--white); min-width: 0; }
.cs-pager-next { justify-content: flex-end; text-align: right; border-left: 1px solid rgba(255,255,255,0.12); }
.cs-pager-arrow { font-size: 22px; line-height: 1; color: var(--teal-light); flex-shrink: 0; }
.cs-pager-next .cs-pager-arrow { order: 2; }
.cs-pager-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-pager-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.cs-pager-name { font-family: var(--font-display); font-size: 17px; line-height: 1.05; text-transform: uppercase; color: var(--white); }
.cs-pager-link:hover .cs-pager-arrow, .cs-pager-link:focus-visible .cs-pager-arrow { color: var(--white); }

@media (min-width: 901px) {
  .cs-pager { display: contents; }
  .cs-pager-link { position: fixed; top: 50%; z-index: 60; transform: translateY(-50%); padding: 0; gap: 0; background: var(--black); border: 1.5px solid var(--teal); height: 64px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
  .cs-pager-prev { left: 0; border-left: 0; }
  .cs-pager-next { right: 0; border-right: 0; border-left: 1.5px solid var(--teal); }
  .cs-pager-arrow { width: 34px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .cs-pager-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cs-pager-text { max-width: 0; opacity: 0; transition: max-width 0.4s var(--ease-out, ease), opacity 0.25s, padding 0.4s var(--ease-out, ease); padding: 0; white-space: nowrap; }
  .cs-pager-link:hover .cs-pager-text, .cs-pager-link:focus-visible .cs-pager-text { max-width: 320px; opacity: 1; padding: 0 18px; }
  .cs-pager-link:hover, .cs-pager-link:focus-visible { background: var(--near-black); }
  .cs-pager-link:hover .cs-pager-arrow { background: var(--teal); color: var(--white); }
}