/* === CASE STUDY TEMPLATE — fffilms.it ===
   Built to match /styles/about.css layout + tone
*/

.container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

:root{
  --case-content-width: 100%;
}

.case-intro, .case-lede, .body-grid, .stills-grid, .case-title {
  max-width: 1400px;
}

/* Page base (same as about) */
html, body{ height: auto; }

body.case{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  overflow:auto !important;
  background:#eaeaea;
  color:#111;
  font-family:"Inter", sans-serif;
}

/* Header: keep consistent with about */
header{
  position:fixed;
  inset:0 0 auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px clamp(24px, 3vw, 40px);
  z-index:3;
  isolation:isolate;
  background:transparent;
}

header::before{
  content:"";
  position:absolute;
  inset:0;
  mix-blend-mode:difference;
  z-index:-1;
}

header .logo{
  filter:none;
  mix-blend-mode:difference;
}

header .logo,
header .nav a{
  mix-blend-mode:difference;
  color:#fff;
  transition:opacity .3s ease;
  font-weight:600;
  text-decoration:none;
}

header .nav a:hover{ opacity:.85; }

/* Main */
.case-main{
  position:relative;
  z-index:2;
  flex:1 0 auto;
  min-height:0;
  height:auto !important;
  overflow:visible !important;
  padding:120px 0 90px;
}

/* Intro */
.case-intro{
  margin-top: 12px;
}

.case-title{
  font-weight:800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 18px;
  max-width: var(--case-content-width);
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  margin: 0 0 28px;
  font-size: 12px;
  font-weight:600;
  color:#555;
}

.case-tags .tag{ color:#777; }
.case-tags .muted{ color:#999; }
.case-tags .sep{ color:#bbb; }
.case-tags a{
  color:inherit;
  text-decoration:none;
}
.case-tags a:hover .tag{
  color:#111;
}
.case-nav{
  margin:34px 0 0;
}

/* Two-column lede like your JPG */
.case-lede{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items:start;
  max-width: var(--case-content-width);
  margin-left: 0;
}

.case-lede p{
  font-weight:600;
  font-size:16px;
  line-height:1.12;
  margin:0 0 14px;
}

/* Hero image */
.case-hero{
  margin-top: 32px;
}

/* Case hero: full-bleed width, height driven by 16:9 player */
.case-hero{
  position: relative;
  overflow: hidden;
  width: 100vw;
  background:#eaeaea;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 32px;
}

/* HERO trailer */
.case-hero--trailer .case-hero-video.is-trailer{
  position: relative;
  width: 100%;
  aspect-ratio: 2.39 / 1; /* try 21/9 or 2.39/1 */
  background:#000;
}

.case-hero--trailer .case-hero-video.is-trailer iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

.case-hero img, .case-hero video {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  display: block;
}

/* Full film embed inside still grid (wide) */
.still-video .embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:#eaeaea;
  overflow: hidden;
  border-radius: 6px; /* match your wide still radius */
}

.still-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile: match your reduced radius */
@media (max-width: 768px){
  .still-video .embed{ border-radius: 6px; }
}

.case-hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Responsive 16:9 box */
.case-hero-video.is-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:#eaeaea;
}


/* iframe fills the box */
.case-hero-video.is-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transform: none;
  top: 0;
  left: 0;
  min-width: 0;
  min-height: 0;
}



/* Body text area */
.case-body{
  margin-top: 28px;
}

.body-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  max-width: var(--case-content-width);
  margin-bottom: 26px;
}

.body-grid p{
  font-weight:600;
  font-size:16px;
  line-height:1.12;
  margin:18px 0 18px;
}

/* Stills grid (2 + 1 wide) */
.stills-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  max-width: var(--case-content-width);
}

.still{
  margin:0;
}

.still img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 6px;
}

.still.wide{
  grid-column: 1 / -1;
}

.still.wide img{
  border-radius: 6px;
}

/* Manifesto block (same vibe as about) */
.case-manifesto{
  width:100%;
  max-width:600px;
  margin-top: 56px;
  margin-bottom: 34px;
}

.case-manifesto p{
  font-weight:700;
  font-size: 14px;
  line-height:1.2;
  color:#111;
}

.manifesto-logo{
  display:block;
  width: clamp(200px, 12vw, 160px);
  margin-top: 2rem;
  filter: brightness(0) saturate(100%) contrast(100%);
}

/* Footer (same system as about) */
footer{
  position:relative !important;
  inset:auto !important;
  margin-top:auto !important;
  padding:26px 0;
  width:100%;
  z-index:1;
  background:none;
  color:#505050;
  font-weight:600;
  mix-blend-mode:normal;
}

footer .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}

footer .nav{
  display:flex;
  gap:16px;
}

footer .nav a{
  color:#505050;
  font-weight:600;
  text-decoration:none;
}

footer .nav a:hover{ text-decoration:underline; }

footer span {
  color: #505050;        /* subtle grey tone */
  font-weight: 600;
}

/* Mobile */
@media (max-width: 980px){
  .case-lede, .body-grid{ grid-template-columns: 1fr; }
  .case-title{ max-width: 100%; }
}

@media (max-width: 720px){
  footer .container{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  footer .nav{ gap:12px; }
}

@media (max-width: 480px){
  .container{ padding-left:24px; padding-right:24px; }
}

/* Mobile: stills become full-width sequence */
@media (max-width: 768px) {
  .stills-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .still,
  .still.wide {
    grid-column: auto;
  }
  
  .still.wide img{
    border-radius: 6px;
  }

  .still img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
  }
}

@media (max-width: 768px) {
  .case-hero img,
  .case-hero video {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 30vh;
  }
}

@media (max-width: 768px) {
  .case-hero {
    height: auto;
    background:#eaeaea;
  }
  .case-hero--trailer .case-hero-video.is-trailer{
    aspect-ratio: 16 / 9;
  }
  .case-hero-video {
    position: relative;
    padding-top: 56.25%; /* 16:9 ratio */
  }
  
  .case-hero-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    top: 0;
    left: 0;
    transform: none;
  }
}