/* Case Study detail page styles (inherits from style.css) */
:root {
  --cs-accent: #D7FF3F; /* same neon accent used sitewide */
}

/* Override global overflow:hidden set in style.css for case study pages */
html, body.case-study{
  height: auto;
}
body.case-study{
  overflow: auto;
  overflow-x: hidden; /* prevent accidental horizontal scroll */
  background-attachment: scroll; /* avoid fixed artifacts from base */
}

body.case-study .left-menu a.active {
  color: #fff;
}

/* Keep content clear of the fixed left menu (matches .viewport padding on site) */
body.case-study main{
  padding-left: 84px;
}

.case-hero {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  background: #111 center/cover no-repeat;
}
.case-hero::after{ /* subtle overlay for legibility */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.case-hero__inner{ position: relative; z-index: 1; text-align: center; padding: 4rem 1.5rem; }
.case-hero__logo { 
  max-width: 440px; width: 80vw; 
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); 
  opacity: 0; transform: translateY(10px) scale(0.98);
  animation: heroIn 680ms cubic-bezier(0.16, 1, 0.3, 1) .08s forwards;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.case-hero__caption{
  margin-top: .75rem; color: rgba(255,255,255,.8); font-family:'Inter', system-ui; 
  font-size: .95rem; letter-spacing:.02em;
  opacity: 0; transform: translateY(6px);
  animation: captionIn 620ms cubic-bezier(0.16, 1, 0.3, 1) .18s forwards;
}
@keyframes captionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.case-hero__title{ margin-top: 1.5rem; font-size: clamp(40px, 8vw, 64px); color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-family:'Aileron','Poppins',system-ui; }
.no-hero-title .case-hero__title{ display:none; }
.case-hero__tag{ display:inline-block; margin-top: .5rem; padding: .35rem .6rem; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; font-size: .8rem; letter-spacing: .08em; }

.case-intro{ padding: clamp(30px,5vw,80px) 20px; max-width: 1200px; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: 1.2fr .8fr; align-items: start; }
.case-intro.single{ grid-template-columns: 1fr; max-width: 980px; }
.case-intro.single p{ line-height: 1.8; margin: 0 0 16px; }
.case-intro.single p:last-child{ margin-bottom: 0; }
.case-intro.single > div{ max-width: none; }
.brand-label{ font-family:'Aileron','Poppins',system-ui; font-weight:800; color: var(--ink); letter-spacing:-0.02em; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.05; display:block; margin-bottom:6px; }
.case-intro h2{ font-size: clamp(28px,3.8vw,48px); line-height: 1.05; font-weight: 800; color: var(--ink); font-family:'Aileron','Poppins',system-ui; }
.case-intro h2 em{ font-family: "Playfair Display", serif; font-style: italic; color: var(--ink); }
.case-intro p{ font-size: clamp(16px,1.2vw,18px); color: var(--muted); font-family:'Poppins',system-ui; }
@media (max-width: 900px){ .case-intro{ grid-template-columns: 1fr; } }

.case-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 8px; }
.case-metrics .metric{ background: #1a1a1a; border:1px solid var(--line); border-radius: 14px; padding: 18px 16px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.metric b{ font-size: 1.8rem; display:block; color: var(--ink); font-family:'Aileron','Poppins',system-ui; }
.metric span{ color: var(--muted); font-size: .9rem; font-family:'Inter', system-ui; }
@media (max-width: 800px){ .case-metrics{ grid-template-columns: 1fr 1fr; } }

.case-gallery{ padding: 40px 20px 80px; max-width: 1280px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }
.case-gallery img{ width: 100%; border-radius: 16px; display:block; }
.case-gallery .tall{ grid-row: span 2; object-fit: cover; height: 100%; }
@media (max-width: 1000px){ .case-gallery{ grid-template-columns: 1fr; } .case-gallery .tall{ grid-row: auto; height: auto; } }

.case-media{ padding: 40px 20px 20px; max-width: 1280px; margin: 0 auto; }
.case-media .media-grid{ column-count: 3; column-gap: 16px; }
.case-media .media-item{ position:relative; break-inside: avoid; margin-bottom:16px; display:block }
.case-media video, .case-media img{ width:100%; height:auto; object-fit:cover; display:block; border-radius:16px; background:#333 }
@media (max-width: 1000px){ .case-media .media-grid{ column-count: 2 } }
@media (max-width: 640px){ .case-media .media-grid{ column-count: 1 } }

/* Square composition: left tall + two stacked right */
.case-media .media-square{ display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap:16px; align-items:stretch; position:relative; overflow:hidden; }
.case-media .media-square .media-item{ margin:0; break-inside:auto; height:100%; min-height:0; overflow:hidden; display:block; }
.case-media .media-square .media-tall{ grid-row: 1 / span 2; }
.case-media .media-square video, .case-media .media-square img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }
/* Keep square aspect on the whole block */
.case-media .media-square{ aspect-ratio: 1 / 1; }
@supports not (aspect-ratio: 1 / 1){
  .case-media .media-square{ height: min(70vw, 720px); }
}

/* Reverse layout: tall piece on the right, stacked items left */
.case-media .media-square.reverse{ grid-template-columns: 1fr 2fr; }
.case-media .media-square.reverse .media-tall{ grid-column: 2; grid-row: 1 / span 2; }

/* Four-up square: 2x2 grid */
.case-media .media-square.four{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:16px; }
.case-media .media-square.four .media-item{ margin:0; height:100%; min-height:0; overflow:hidden; }
.case-media .media-square.four video, .case-media .media-square.four img{ width:100%; height:100%; object-fit:cover; border-radius:16px }

/* Sound toggle borrowed from portfolio styles (simplified) */
.case-media .sound-toggle{ position:absolute; bottom:16px; right:16px; width:40px; height:40px; background:rgba(255,255,255,.95); border-radius:50%; border:2px solid rgba(255,255,255,.3); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer; display:flex; align-items:center; justify-content:center }
.case-media .sound-toggle::before{ content:""; width:18px; height:18px; display:block; background-size:contain; background-repeat:no-repeat; background-position:center }
.case-media .sound-toggle.muted::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23292929'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E"); }

.case-cta{ padding: 60px 20px 100px; display:flex; gap:12px; align-items:center; justify-content:center; }

.breadcrumb{ position: fixed; right: 18px; bottom: 18px; z-index: 4; }
.breadcrumb a{ background:#000; color:#fff; border-radius:999px; padding:10px 14px; text-decoration:none; font-size:.9rem }

/* ---------------------------------------------------------
   Sported (right-text layout) — previously in case-study-sported-right.css
   Scoped to body.sported-right so it only affects that page.
   Moved here to consolidate case study CSS into one file.
--------------------------------------------------------- */
/* Hero tweaks (optional) */
body.sported-right .case-hero{
  min-height: 68vh;
  margin-bottom: clamp(20px, 4vw, 48px);
}

/* Split section: media left, text right */
body.sported-right .case-split{
  display: grid;
  grid-template-columns: minmax(360px, min(48vw, 680px)) 1fr;
  align-items: center;
  column-gap: clamp(24px, 4vw, 60px);
  row-gap: clamp(16px, 3vw, 28px);
  padding-inline: clamp(20px, 4vw, 56px);
  padding-block: clamp(16px, 4vw, 40px);
}

/* Media block (image) */
body.sported-right .case-split figure.split-media{
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
body.sported-right .case-split figure.split-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text block */
body.sported-right .case-split .split-text{
  max-width: 68ch; /* comfortable reading measure */
  padding-right: clamp(8px, 1.5vw, 16px);
}
body.sported-right .case-split .split-text h2{ margin-top: 0; }
/* Use Inter for paragraph copy to match site tone */
body.sported-right .case-split .split-text p{
  font-family: 'Inter', system-ui;
  line-height: 1.8;
  margin: 0 0 16px; /* clear paragraph separation */
}
body.sported-right .case-split .split-text p:last-child{ margin-bottom: 0 }
/* Accent font for emphasized word in heading (match case-study.css intro style) */
body.sported-right .case-split .split-text h2 em{
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--ink);
}

/* Bottom video section */
body.sported-right .case-bottom-video{
  margin-top: clamp(10px, 7vw, 22px);
  padding-bottom: clamp(16px, 4vw, 40px);
  padding-inline: clamp(16px, 4vw, 56px); /* align with split section padding */
}
body.sported-right .case-bottom-video .video-wrap{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto; /* center within padding */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
body.sported-right .case-bottom-video .video-wrap video{
  width: 100%;
  height: auto;
  display: block;
}

/* Small sound toggle button matching other pages */
body.sported-right .sound-toggle{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff6;
  background: #0008;
  color: #fff;
  display: grid;
  place-items: center;
}
body.sported-right .sound-toggle::after{ content: '🔊'; font-size: 18px; }
body.sported-right .sound-toggle.muted::after{ content: '🔇'; }

/* Responsive stacking */
@media (max-width: 980px){
  body.sported-right .case-split{
    grid-template-columns: 1fr;
    padding-inline: clamp(14px, 4vw, 22px);
    padding-block: clamp(12px, 4vw, 28px);
  }
  body.sported-right .case-split figure.split-media{
    aspect-ratio: 16 / 9;
  }
}

/* ---------------------------------------------
   Mobile responsiveness (fits viewport)
   Applies to all case-study pages, with Sported-specific tweaks
---------------------------------------------- */
@media (max-width: 700px){
  /* Remove left gutter on mobile so content fits */
  body.case-study main{ padding-left: 0; padding-right: 0; }

  /* Hero becomes shorter and logo scales down */
  .case-hero{ min-height: 56vh; }
  .case-hero__inner{ padding: 56px 16px; }
  .case-hero__logo{ width: 64vw; max-width: 320px; }

  /* Sported split section padding/margins tightened */
  body.sported-right .case-split{ padding-inline: 16px; padding-block: 16px; row-gap: 16px }
  body.sported-right .case-split .split-text{ padding-right: 0; max-width: 100%; margin-top: 15px;}
  body.sported-right .case-split figure.split-media{ width: 100%; border-radius: 14px }
  body.sported-right .case-split figure.split-media img{ width: 100%; height: auto; object-fit: cover }

  /* Bottom video fills width with comfortable margins */
  body.sported-right .case-bottom-video{ margin-top: 12px; padding-bottom: 24px; padding-inline: 16px }
  body.sported-right .case-bottom-video .video-wrap{ border-radius: 14px; margin: 0 } /* use section padding for alignment */
  body.sported-right .case-bottom-video .video-wrap video{ width: 100%; height: auto }

  /* CTA stack vertically on small screens */
  .case-cta{ padding: 40px 16px 80px; flex-direction: column }
}

/* ---------------------------------------------------------
   ASGC-specific overrides
   - Let the split-media card follow the video's intrinsic aspect ratio
   - Ensure the video sizes itself without enforced cropping/letterboxing
--------------------------------------------------------- */
body.asgc .case-split figure.split-media{
  aspect-ratio: auto;            /* remove fixed ratio */
  display: flex;                 /* center media while constraining height */
  align-items: center;
  justify-content: center;
  background: transparent;       /* no black letterbox background */
  width: 100%;
  max-height: min(56vw, 86vh);   /* fit to viewport width cap to avoid over-tall media */
}
body.asgc .case-split figure.split-media video{
  width: auto;                   /* let height drive scaling to cap tallness */
  height: 100%;                  /* fill figure height within cap */
  max-width: 100%;               /* never overflow column width */
  display: block;                
  object-fit: contain;           /* avoid cropping; no letterbox once container follows video */
  background: transparent;       /* no extra black background */
}

@media (max-width: 900px){
  body.asgc .case-split figure.split-media{ max-height: 72vw; }
}

/* Narrower left column for ASGC so tall video fits fully without cropping */
body.asgc .case-split{
  grid-template-columns: minmax(220px, min(26vw, 420px)) 1fr;
  /* Match Sported spacing */
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: clamp(16px, 3vw, 28px);
  padding-inline: clamp(20px, 4vw, 56px);
  padding-block: clamp(16px, 4vw, 40px);
  padding-left: 15vw;
  padding-bottom: 6vw;
  padding-top: 5vw;
}

/* Make media card a bit shorter and narrower overall */
body.asgc .case-split figure.split-media{
  max-height: min(46vw, 68vh);
  overflow: visible;             /* allow video-card to define boundaries */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Granular control wrapper for video card edges */
body.asgc .case-split figure.split-media .video-card{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;                    /* no extra spacing around the card */
  border-radius: 18px;           /* rounded corners */
  overflow: hidden;              /* clip video to rounded corners */
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  background: transparent;
  display: block;
}

body.asgc .case-split figure.split-media .video-card video{
  display: block;
  width: 100%;
  height: auto;                  /* let video define card height */
  object-fit: contain;           /* show all content */
  background: transparent;
}

@media (max-width: 900px){
  body.asgc .case-split figure.split-media{
    max-height: 72vw;
  }
}

/* Match Sported bottom section spacing */
body.asgc .case-bottom-video{
  margin-top: clamp(10px, 7vw, 22px);
  padding-bottom: clamp(16px, 4vw, 40px);
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ---------------------------------------------
   ASGC mobile layout — stack Media (video), Text, Media (image)
---------------------------------------------- */
@media (max-width: 800px){
  body.asgc .case-split{
    grid-template-columns: 1fr;         /* stack */
    padding-inline: 16px;               /* tight gutters */
    padding-block: 16px;
    row-gap: 20px;                      /* a bit more spacing between media and text */
    padding-left: 16px;                 /* override desktop left pad */
    padding-top: 16px;                  /* override top pad */
    padding-bottom: 16px;               /* override bottom pad */
  }
  body.asgc .case-split figure.split-media{ 
    width: 100%; max-width: 100%; margin: 0; 
    max-height: none;                     /* allow natural video height */
  }
  body.asgc .case-split figure.split-media .video-card{ 
    width: 100%; max-width: 100%; border-radius: 14px; 
  }
  body.asgc .case-split figure.split-media .video-card video{ 
    width: 100%; height: auto;           /* scale to viewport width */
  }
  body.asgc .case-bottom-video{ 
    padding-inline: 16px; padding-bottom: 24px; 
  }
}