/* ============================================================
   MÍDIA — Na Mídia page
   Grid: 1340×1340px at 1440px viewport (93vw)
   Columns: 446 | 449 | 445 (≈ 1/3 each)
   Red borders: 50px each side outside the grid
============================================================ */

/* ── Hero ── */
.midia-hero {
  background: var(--red);
  min-height: clamp(180px, 22.6vw, 326px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.midia-title {
  font-family: var(--font-mono);
  font-weight: 200;
  font-size: clamp(72px, 14.2vw, 205px);
  letter-spacing: clamp(-4px, -0.71vw, -10.25px);
  line-height: 1;
  color: var(--dark);
  white-space: nowrap;
  user-select: none;
}

/* ── Subtitle outer — mesmo padding do grid-wrap, red nas laterais ── */
.midia-subtitle-outer {
  background: var(--red);
  padding: 0 clamp(16px, 3.47vw, 50px);
}

/* ── Subtitle band — cream, margem esq relativa ao padding do outer ── */
/* margin-left = 246 - 50 = 196px (offset do título dentro do grid) */
.midia-subtitle-band {
  background: var(--cream);
  min-height: clamp(70px, 11.2vw, 162px);
  display: flex;
  align-items: center;
  margin-left: clamp(64px, 13.6vw, 196px);
  padding: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 24px);
}

.midia-subtitle {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(14px, 2.8vw, 40px);
  line-height: 1.3;
  color: var(--dark);
}

.midia-subtitle u {
  text-underline-position: from-font;
}

/* ── Grid outer wrapper — provides 50px red borders ── */
.midia-grid-wrap {
  background: var(--red);
  padding: 0 clamp(16px, 3.47vw, 50px);
}

/* ── Grid container — 1340×1340 square ── */
.midia-grid {
  display: flex;
  width: 100%;
  height: clamp(400px, 93vw, 1340px);
}

/* ── Columns — proportional widths (446 : 449 : 445) ── */
.midia-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.midia-col--left   { flex: 446; }
.midia-col--center { flex: 449; }
.midia-col--right  { flex: 445; }

/* ── Cells — proportional heights per column ── */

/* Left column: 536 top + 804 bottom */
.midia-col--left .midia-cell:first-child { flex: 536; }
.midia-col--left .midia-cell:last-child  { flex: 804; }

/* Center column: 854 top + 486 bottom */
.midia-col--center .midia-cell:first-child { flex: 854; }
.midia-col--center .midia-cell:last-child  { flex: 486; }

/* Right column: 728 top + 610 bottom */
.midia-col--right .midia-cell:first-child { flex: 728; }
.midia-col--right .midia-cell:last-child  { flex: 610; }

/* ── Cell base ── */
.midia-cell {
  overflow: hidden;
  position: relative;
}

/* ── Cell backgrounds ── */
.midia-cell--terracotta { background: var(--terracotta); }
.midia-cell--cream      { background: var(--cream); }
.midia-cell--dark       { background: var(--dark); }

/* ── Text cells: pub name + headline ── */
.midia-cell--terracotta,
.midia-cell--cream,
.midia-cell--dark {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.9vw, 28px) clamp(12px, 1.4vw, 20px);
  gap: clamp(12px, 2vw, 28px);
}

/* ── Publication name ── */
.midia-pub-name {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(20px, 4.6vw, 66px);
  line-height: 1.0;
  color: var(--cream);
}

.midia-pub-name--dark { color: var(--dark); }

/* ── Article headline ── */
.midia-article-headline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(10px, 1.8vw, 26px);
  line-height: 1.3;
  color: var(--cream);
}

.midia-article-headline--dark { color: var(--dark); }

/* ── Photo cells ── */
.midia-cell--photo {
  display: flex;
  flex-direction: column;
}

/* Background de cada print amostrado da imagem correspondente */
.midia-col--left   .midia-cell--photo { background: #ececec; }
.midia-col--center .midia-cell--photo { background: #eeeee1; }
.midia-col--right  .midia-cell--photo { background: #ececec; }

.midia-cell--photo img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  display: block;
}

/* Right column: 4 photos stacked equally within 610px cell */
.midia-cell--photos-stack {
  display: flex;
  flex-direction: column;
}

.midia-cell--photos-stack img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .midia-grid {
    flex-direction: column;
    height: auto;
  }

  .midia-col {
    flex-direction: row;
    height: 50vw;
  }

  .midia-col--left,
  .midia-col--center,
  .midia-col--right { flex: none; width: 100%; }

  .midia-cell { flex: 1; }
}