/* Frida case study — extends the existing New Life website system. */

.frida-page { background: var(--paper); }

.frida-hero {
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

.frida-hero .hero-bg img {
  opacity: 1;
  object-position: center 48%;
}

.frida-hero::after {
  background:
    linear-gradient(90deg, rgba(15, 17, 20, 0.88) 0%, rgba(15, 17, 20, 0.42) 48%, rgba(15, 17, 20, 0.16) 76%),
    linear-gradient(180deg, rgba(15, 17, 20, 0.4) 0%, rgba(15, 17, 20, 0.1) 42%, rgba(15, 17, 20, 0.9) 100%);
}

.frida-hero .hero-inner { padding-bottom: clamp(38px, 6vw, 72px); }
.frida-hero .frida-title {
  max-width: none;
  font-size: clamp(5.6rem, 17vw, 13rem);
  line-height: 0.72;
  margin: 12px 0 34px;
}

.frida-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.62);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.frida-breadcrumb a { color: #fff; }
.frida-breadcrumb a:hover { color: var(--accent-bright); }

.frida-deck {
  max-width: 37ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);
  line-height: 1.22;
  margin-bottom: 32px;
}

.frida-hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 850px;
  margin-top: clamp(36px, 7vh, 72px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.28);
}

.frida-hero-facts div { padding-right: 24px; }
.frida-hero-facts dt {
  color: rgba(255,255,255,0.56);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.frida-hero-facts dd { color: #fff; font-weight: 600; margin-top: 3px; }

.frida-intro { padding: clamp(94px, 12vw, 170px) 0; }
.frida-intro-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(54px, 10vw, 150px);
  align-items: start;
}
.frida-intro-heading { position: sticky; top: calc(var(--header-h) + 36px); }
.frida-intro-heading h2 { max-width: 8ch; }
.frida-intro-copy { max-width: 720px; }
.frida-intro-copy p { color: var(--muted); margin-top: 22px; }
.frida-intro-copy .frida-lede {
  margin-top: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  line-height: 1.35;
}

.frida-design { padding: clamp(80px, 10vw, 140px) 0; }
.frida-design-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}
.frida-design-media { height: min(760px, 78vh); overflow: hidden; border-radius: var(--radius-sm); }
.frida-design-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.frida-design-media:hover img { transform: scale(1.025); }
.frida-design-copy > p:not(.eyebrow) { margin-top: 24px; }
.frida-feature-lines { margin-top: 42px; border-top: 1px solid var(--line-dark); }
.frida-feature-lines li { padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.frida-feature-lines strong { display: block; color: #fff; font-size: 0.96rem; }
.frida-feature-lines span { display: block; color: var(--muted-dark); font-size: 0.9rem; margin-top: 4px; }

.frida-systems { padding: clamp(88px, 11vw, 150px) 0; }
.frida-section-heading,
.frida-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(44px, 7vw, 84px);
}
.frida-section-heading > p,
.frida-gallery-heading > p { color: var(--muted); max-width: 44ch; }
.frida-system-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(44px, 8vw, 104px);
  align-items: center;
}
.frida-system-layout figure {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink);
}
.frida-system-layout figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.frida-system-list { border-top: 1px solid var(--line); }
.frida-system-list div { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr); gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.frida-system-list dt { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }
.frida-system-list dd { color: var(--muted); font-size: 0.94rem; }

.frida-film { padding: clamp(88px, 11vw, 150px) 0; }
.frida-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 54px); }
.frida-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 76vh;
  object-fit: cover;
  background: var(--ink);
  border-radius: var(--radius-sm);
}
.frida-video figcaption { display: flex; justify-content: space-between; gap: 24px; padding: 18px 2px 0; }
.frida-video figcaption strong { color: var(--ink); font-family: var(--font-display); font-size: 1.24rem; }
.frida-video figcaption span { color: var(--muted); max-width: 32ch; font-size: 0.9rem; text-align: right; }

.frida-gallery-section { padding: clamp(88px, 11vw, 150px) 0; }
.frida-gallery-heading { width: min(1180px, 92vw); margin-left: auto; margin-right: auto; }
.frida-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.frida-gallery figure {
  grid-column: span 4;
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink-soft);
}
.frida-gallery .frida-gallery-wide { grid-column: span 8; }
.frida-gallery .frida-gallery-tall { grid-row: span 2; min-height: 744px; }
.frida-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out), opacity 0.4s ease; }
.frida-gallery figure:hover img { transform: scale(1.035); opacity: 0.9; }
.frida-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 50px 20px 17px;
  color: #fff;
  font-size: 0.82rem;
  background: linear-gradient(180deg, transparent, rgba(15,17,20,0.82));
}

.frida-outcome { padding: clamp(100px, 14vw, 190px) 0; text-align: center; }
.frida-outcome-inner { max-width: 900px; }
.frida-outcome .eyebrow { justify-content: center; }
.frida-outcome .eyebrow::before { display: none; }
.frida-outcome h2 { margin: 0 auto; max-width: 14ch; }
.frida-outcome p:not(.eyebrow) { max-width: 64ch; margin: 28px auto 38px; color: var(--muted-dark); font-size: 1.08rem; }
.frida-outcome .hero-actions { justify-content: center; }

@media (max-width: 900px) {
  .frida-hero { min-height: 860px; }
  .frida-hero .hero-bg img { object-position: 60% center; }
  .frida-hero-facts { grid-template-columns: 1fr 1fr; gap: 20px 30px; }
  .frida-intro-grid,
  .frida-design-grid,
  .frida-system-layout,
  .frida-section-heading,
  .frida-gallery-heading { grid-template-columns: 1fr; }
  .frida-intro-heading { position: static; }
  .frida-intro-heading h2 { max-width: 12ch; }
  .frida-design-media { height: 660px; }
  .frida-section-heading,
  .frida-gallery-heading { gap: 24px; }
  .frida-gallery figure,
  .frida-gallery .frida-gallery-wide { grid-column: span 6; }
  .frida-gallery .frida-gallery-tall { grid-row: span 1; min-height: 420px; }
}

@media (max-width: 600px) {
  .frida-hero { min-height: 760px; }
  .frida-hero::after {
    background:
      linear-gradient(180deg, rgba(15,17,20,0.45) 0%, rgba(15,17,20,0.28) 35%, rgba(15,17,20,0.94) 82%),
      linear-gradient(90deg, rgba(15,17,20,0.62), transparent);
  }
  .frida-hero .hero-bg img { object-position: 58% center; }
  .frida-hero .frida-title { font-size: clamp(5rem, 28vw, 7.5rem); margin-bottom: 28px; }
  .frida-deck { font-size: 1.34rem; }
  .frida-hero-facts { margin-top: 38px; padding-top: 18px; }
  .frida-hero-facts div { padding-right: 0; }
  .frida-intro { padding-block: 82px; }
  .frida-design-media { height: 520px; }
  .frida-system-list div { grid-template-columns: 1fr; gap: 8px; }
  .frida-video-grid { grid-template-columns: 1fr; gap: 50px; }
  .frida-video video { max-height: none; }
  .frida-video figcaption { display: block; }
  .frida-video figcaption span { display: block; margin-top: 6px; text-align: left; }
  .frida-gallery { grid-template-columns: 1fr; }
  .frida-gallery figure,
  .frida-gallery .frida-gallery-wide { grid-column: auto; min-height: 400px; }
  .frida-gallery figure:nth-child(7) { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .frida-design-media img,
  .frida-gallery img { transition: none; }
}