/* ══════════════════════════════════════════════════════
   EDITORIAL PROFILE – Faithful reconstruction of the reference
   Only the first section. Strict 50/50 layout.
   ══════════════════════════════════════════════════════ */

.profile-shell {
  min-height: 100vh;
  background: #FFFBEB;
}

.profile {
  background: #FFFBEB;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden;
}

/* ── NAV ── */
.ed-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4.5vw;
  border-bottom: 1px solid rgba(26, 26, 26, 0.07);
}

.ed-nav__back {
  background: transparent; border: 0; padding: 0;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.45;
  cursor: url('cursor-hand-tilt.png?v=4') 4 3, pointer;
}
.ed-nav__back:hover { opacity: 1; }

.ed-nav__wordmark {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.3;
}

.ed-nav__arrows { display: flex; gap: 18px; }
.ed-nav__arrows button {
  background: transparent; border: 0; padding: 4px;
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
  opacity: 0.3;
  cursor: url('cursor-hand-tilt.png?v=4') 4 3, pointer;
}
.ed-nav__arrows button:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════
   SECTION – exact wireframe per spec
   ══════════════════════════════════════════════════════ */

.ed-section {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* STRICT 50/50 grid – height determined by right content (image is absolute, doesn't interfere) */
.ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
}

/* ── LEFT HALF 50% – image with white frame ── */

.ed-left {
  padding: 2vw;            /* uniform white frame on all 4 sides */
  position: relative;      /* container for absolute image */
}

.ed-image {
  position: absolute;     /* doesn't interfere with the natural cell height */
  inset: 2vw;             /* fills .ed-left minus the white frame */
  overflow: hidden;
}

.ed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* ── RIGHT HALF 50% – vertical editorial composition ── */

.ed-right {
  padding: 5vh 4.5vw 2vw 3vw;   /* top compensates removed section padding; bottom = 2vw aligns with image base */
  display: flex;
  flex-direction: column;
}

/* Zone 1 – small discrete kicker at the top */
.ed-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 2.2vh;
  color: #999;
  font-weight: 500;
}

/* Zone 1 – large main title, bold, ONE line, full-width */
.ed-title {
  font-size: clamp(2rem, 2.7vw, 3.6rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 3vh;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zone 1 – short subtitle, full-width as the title, justified, max 4 lines */
.ed-subtitle {
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 700;
  color: #444;
  margin: 0 0 3.2vh;
  letter-spacing: 0.01em;
  text-align: justify;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zone 2 – vertical metadata stack, discrete */
.ed-meta {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  max-width: 32%;
  margin: 0 0 9vh;
}

.ed-meta-item { /* container for each label/value pair */ }

.ed-meta-label {
  color: #999;
  margin-bottom: 0.2vh;
}

.ed-meta-value {
  color: #444;
  font-weight: 500;
}

/* Zone 3 – 3 balanced columns (cross-browser) */
.ed-columns {
  width: 100%;
  column-count: 3;
  column-gap: 1.6vw;
  column-fill: balance;   /* distributes text evenly across 3 columns in all browsers */
}

.ed-columns p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #666;
  text-align: justify;
  hyphens: auto;
}

/* ── FOOTER ── */
.ed-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 30px 4.5vw;
  border-top: 1px solid rgba(26, 26, 26, 0.07);
}

.ed-footer button {
  background: transparent; border: 0; padding: 6px 0;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a1a1a;
  opacity: 0.4;
  cursor: url('cursor-hand-tilt.png?v=4') 4 3, pointer;
}
.ed-footer button:hover { opacity: 1; }

.ed-footer__back {
  font-size: 12px !important;
  font-style: italic;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.5 !important;
  text-align: center;
}
.ed-footer__next { text-align: right; }

/* ══════════════════════════════════════════════════════
   SECTION 3 – Editorial essay · strict 50/50
   left: kicker + intro + centered title + 2 thumbs + credits
   right: full-bleed image
   ══════════════════════════════════════════════════════ */

.s3-section {
  width: 100%;
  min-height: 100vh;
  background: #FFFBEB;
  padding: 0;
  margin-top: 10vh;            /* editorial breathing room between sections */
  box-sizing: border-box;
}

.s3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
  min-height: 100vh;
}

/* ── LEFT HALF 50% – editorial composition ── */

.s3-left {
  position: relative;
  padding: 0 3vw 5vh 2vw;     /* left = 2vw matching section 1; top = 0 aligns kicker with image top */
  box-sizing: border-box;
}

.s3-kicker {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 2.2vh;
  color: #1a1a1a;
}

.s3-intro {
  font-size: 1.3rem;
  line-height: 1.32;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
  text-align: justify;
  hyphens: auto;
}

/* Title vertically centered in the left block */
.s3-title {
  position: absolute;
  left: 2vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(3rem, 4.4vw, 5rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 52%;
  margin: 0;
  color: #1a1a1a;
}

/* Column of 2 vertical thumbs – end aligned with the base of the right image */
.s3-thumbs {
  position: absolute;
  right: 3vw;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.s3-thumb {
  width: 15vw;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.s3-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* Credits in the bottom-left corner – aligned with the base of the images */
.s3-credits {
  position: absolute;
  left: 2vw;
  bottom: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 500;
  color: #1a1a1a;
}

.s3-credits-row {
  margin-bottom: 1.2vh;
}
.s3-credits-row:last-child { margin-bottom: 0; }

.s3-credits-label {
  font-weight: 400;
  opacity: 0.55;
}

.s3-credits-value {
  font-weight: 600;
}

/* ── RIGHT HALF 50% – full-bleed image ── */

.s3-right {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.s3-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* ══════════════════════════════════════════════════════
   SECTION 2 – Editorial spread with pull quote · strict 50/50
   left: kicker + large image + stack of 3 thumbs + caption
   direita: 3 colunas (texto · quote · texto)
   ══════════════════════════════════════════════════════ */

.s2-section {
  width: 100%;
  min-height: 100vh;
  background: #FFFBEB;
  padding: 0;
  margin-top: 10vh;            /* mesmo gap usado entre seção 1 e 2 */
  box-sizing: border-box;
}

.s2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
  min-height: 100vh;
}

/* Inversão s3: colunas à esquerda, imagens à direita (via grid order, sem mexer no JSX) */
.s2-right { order: 1; }
.s2-left  { order: 2; }

/* ── LEFT HALF 50% – image composition ── */

.s2-left {
  position: relative;
  padding: 4.5vh 3vw 4.5vh 2vw;   /* left = 2vw matching sections 1 & 2 */
  box-sizing: border-box;
}

/* Absolute kicker, aligned with the top of the first stack thumb (top: 4.5vh) */
.s2-kicker {
  position: absolute;
  top: 4.5vh;
  left: 2vw;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
  line-height: 1;
}

/* Large dominant image on the left */
.s2-main {
  position: absolute;
  left: 2vw;
  top: 4.5vh;             /* aligns with the top of the first stack thumb */
  width: 54%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.s2-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* Column of 3 images – aligns with the top and base of the 3-column area on the right */
.s2-stack {
  position: absolute;
  right: 3vw;
  top: 4.5vh;                /* same padding-top as .s2-right */
  bottom: 4.5vh;             /* same padding-bottom as .s2-right */
  width: 27%;
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
}

.s2-stack-img {
  flex: 1;                    /* splits the available height evenly */
  width: 100%;
  overflow: hidden;
}

.s2-stack-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* Caption aligned with the base of the last thumb (same bottom: 4.5vh) */
.s2-caption {
  position: absolute;
  left: 2vw;
  bottom: 4.5vh;
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 55%;
  color: #1a1a1a;
}

/* ── RIGHT HALF 50% – 3 columns (body + quote + body) ── */

.s2-right {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2vw;
  align-items: start;
  padding: 4.5vh 3.5vw 4.5vh 3vw;
  box-sizing: border-box;
}

.s2-col {
  margin: 0;
  color: #1a1a1a;
  hyphens: auto;
}

/* Side columns – editorial body */
.s2-col--body {
  font-size: 0.88rem;
  line-height: 1.75;
  text-align: justify;
}

/* Middle column – dominant pull quote (max-height applied via JS to never exceed the side columns) */
.s2-col--quote {
  font-size: clamp(2rem, 2.4vw, 3rem);
  line-height: 1.18;
  font-weight: 800;
  text-align: justify;
  letter-spacing: -0.015em;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   SECTION 4 – Full-bleed image · text in the right half
   50/50 structure preserved internally: image covers 100%, text lives in the right 50%
   kicker no canto superior esquerdo (alinhado com s2/s3)
   white text with subtle gradient to ensure legibility
   ══════════════════════════════════════════════════════ */

.s4-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin-top: 10vh;            /* same gap as the previous sections */
  overflow: hidden;
}

/* Image covers the entire section */
.s4-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.s4-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.92);
}

/* Subtle top gradient to ensure white text contrast */
.s4-photo::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
  pointer-events: none;
}

/* Kicker top-left – aligned with section 2 and 3 kickers */
.s4-kicker {
  position: absolute;
  top: 4.5vh;
  left: 2vw;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Text cluster overlay, anchored in the right half */
.s4-text {
  position: absolute;
  top: 8vh;
  left: 56%;
  right: 6vw;
  z-index: 2;
  color: #fff;
}

.s4-title {
  font-size: clamp(3rem, 4.2vw, 5rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 85%;
  margin: 0 0 2vh;
  color: #fff;
}

.s4-subtitle {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
  max-width: 78%;
  margin: 0 0 3vh;
  color: rgba(255, 255, 255, 0.95);
}

.s4-credits {
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 1vh;
  color: #fff;
}

.s4-credits-row {
  margin-bottom: 1.2vh;
}
.s4-credits-row:last-child { margin-bottom: 0; }

.s4-credits-label {
  font-weight: 700;
  color: #fff;
}

.s4-credits-value {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

/* ══════════════════════════════════════════════════════
   MOBILE – stacks vertically
   ══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .ed-section { padding: 5vh 6vw; }
  .ed-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 5vh;
  }
  .ed-left { padding: 0; }
  .ed-image {
    width: 100%;
    max-width: 100%;
  }
  .ed-right { padding: 0; }
  .ed-title {
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    max-width: 100%;
  }
  .ed-subtitle { max-width: 100%; }
  .ed-meta { max-width: 100%; }
  .ed-columns { column-count: 1; }
  .ed-footer {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    padding: 28px 6vw;
  }
  .ed-footer__prev, .ed-footer__next { text-align: center; }

  /* SEÇÃO 3 mobile */
  .s3-section { margin-top: 6vh; }
  .s3-grid { grid-template-columns: 1fr; min-height: auto; row-gap: 4vh; }
  .s3-left {
    padding: 5vh 6vw;
    min-height: auto;
  }
  .s3-intro { max-width: 100%; }
  .s3-title {
    position: static;
    transform: none;
    max-width: 100%;
    margin: 5vh 0;
    font-size: clamp(2.2rem, 8vw, 3.6rem);
  }
  .s3-thumbs {
    position: static;
    flex-direction: row;
    margin: 4vh 0;
  }
  .s3-thumb { width: 40vw; }
  .s3-credits {
    position: static;
    margin-top: 4vh;
  }
  .s3-right { aspect-ratio: 4/5; }

  /* SEÇÃO 2 mobile */
  .s2-section { margin-top: 6vh; }
  .s2-grid { grid-template-columns: 1fr; min-height: auto; row-gap: 4vh; }
  .s2-left {
    padding: 5vh 6vw;
    min-height: auto;
  }
  .s2-main {
    position: static;
    width: 100%;
    margin-bottom: 3vh;
  }
  .s2-stack {
    position: static;
    width: 100%;
    flex-direction: row;
    gap: 2vw;
    margin-bottom: 3vh;
  }
  .s2-stack-img { flex: 1; }
  .s2-caption {
    position: static;
    max-width: 100%;
    margin-top: 2vh;
  }
  .s2-right {
    grid-template-columns: 1fr;
    padding: 5vh 6vw;
    row-gap: 3vh;
  }
  .s2-col--quote { font-size: clamp(1.5rem, 6vw, 2.4rem); }

  /* SEÇÃO 4 mobile */
  .s4-section { margin-top: 6vh; min-height: 80vh; }
  .s4-text {
    top: 5vh;
    left: 6vw;
    right: 6vw;
  }
  .s4-title {
    font-size: clamp(2rem, 8vw, 3rem);
    max-width: 100%;
  }
  .s4-subtitle { max-width: 100%; }
}