/* ==========================================================================
   HOME — layout that only exists on index.html. Text, boxes and images still come from presets.css.
   ========================================================================== */

/* ---------- "Um sonho sustentável…" ---------- */
.intro__text { grid-column: span 12; display: grid; gap: 1em; align-content: start; }
.intro__side { grid-column: span 12; }   /* + .pill-stack: label + Sobre / Conceito, the two pills share one width */
.intro__side .text-label { margin: 0; }
@media (min-width: 640px) {
  .intro__text { grid-column: span 8; }
  .intro__side { grid-column: span 4; }
}
@media (min-width: 1025px) {
  .intro__text { grid-column: 1 / span 9; }
  .intro__side { grid-column: 10 / span 3; }
}

/* ---------- História: .history__photo .window .pill-2 > .img ---------- */
.history__photo { grid-column: span 12; aspect-ratio: 1.1; }
.history__photo .img { object-position: 40% 50%; }   /* keeps the frame in the mold (36–57% across the photo) in view */
/* The text column is as tall as the photo: the title starts exactly at the top of the image (cap top aligned, like the PDL
   block) and the Acervo pill sits at the bottom of the column, flush with the bottom of the image. */
.history__text { grid-column: span 12; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5em; }
.history__copy { display: grid; gap: 1em; }
.history__copy h2 { margin-top: -0.1em; }             /* cap top sits ~0.1em below the line box, independent of --lh (font-metric constant, not a leading effect) */
.history__text .pill { align-self: flex-end; }

/* ---------- Photo row: same distance from the row above as between marquee items ---------- */
.gallery { padding-top: var(--marquee-gap); }
.gallery__cta { margin-top: 1.25rem; }   /* the "Qualidades" pill under the photo row */
@media (min-width: 640px) {
  .history__photo { grid-column: span 5; }
  .history__text { grid-column: span 7; }
}
@media (min-width: 1025px) {
  .history__photo { grid-column: 1 / span 5; }
  .history__text { grid-column: 7 / span 6; }
}

/* ---------- Quadros: .mural .window-fixed .pill-2 > .img (photo pinned to the screen) ---------- */
.mural { margin: 0; aspect-ratio: 16 / 9; }
@media (min-width: 640px) { .mural { aspect-ratio: 3.4 / 1; } }

/* ---------- PDL ----------
   Both columns start at the top of the row; the mark is nudged up so the top of the "PDL" letters lines up with
   the top of the first line of text (at --lh: 1.1 the extra leading already puts the cap top at the line box's top edge). */
.pdl { margin-bottom: clamp(2.5rem, 7vw, 9rem); }   /* + the footer's 1vw = the 8vw the Home always had */   /* the Home's last section keeps its own room above the footer (the footer margin is small now) */
.pdl .grid { align-items: start; }
.pdl__mark {                        /* + .fill-liquid .text-liquid, painted through the letters */
  grid-column: span 12; align-self: start;
  margin-top: calc(-0.1em + 0.1 * var(--fs-2));
  /* one-off display size: a graphic mark, not running text, so it sits outside the font-size tokens */
  font-size: 7rem; font-weight: 700;
}
.pdl__text { grid-column: span 12; display: grid; gap: 1.2em; align-content: start; justify-items: start; }
@media (min-width: 640px) {
  .pdl__mark { grid-column: span 6; font-size: clamp(4.5rem, 19vw, 24rem); }
  .pdl__text { grid-column: span 6; }
}
.pdl__text .pill { align-self: end; justify-self: end; }