/* Patês da Rafa — home Herbário editorial
   home.css: composição das seções e responsividade. Grade de 12 colunas no desktop. */

main > section {
  padding-block: var(--space-section);
}

/* Hero da edição: assimétrico, texto 1-7, fotografia 8-12,
   registro cruzando a costura das colunas 6 a 12. */
.hero .hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-section);
  align-items: start;
}

.hero-copy {
  grid-column: 1 / 8;
  grid-row: 1;
  padding-block-start: var(--space-element);
}

.hero-copy .eyebrow {
  margin-block-end: var(--space-tight);
}

.hero-copy h1 {
  margin-block-end: var(--space-element);
}

.hero-description {
  margin-block-end: var(--space-tight);
}

.hero-pairing {
  font-weight: 600;
  color: var(--color-moss);
  margin-block-end: var(--space-element);
}

.hero-photo {
  grid-column: 8 / 13;
  grid-row: 1;
}

.hero-photo img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.hero .edition-register {
  grid-column: 6 / 13;
  grid-row: 2;
  margin-block-start: calc(-1 * var(--space-section) - var(--space-element));
}

/* Conteúdo do kit: lista numerada, sem cartões. */
.contents-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-element);
  margin-block-start: var(--space-element);
}

.contents-list li {
  border-top: 1px solid var(--color-moss);
  padding-block-start: var(--space-tight);
}

.item-number {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 560;
  font-size: var(--type-section);
  line-height: var(--leading-section);
  color: var(--color-moss);
  margin-block-end: var(--space-tight);
}

/* Manifesto de produção: área musgo com texto creme. */
.manifesto {
  background: var(--color-moss);
}

.manifesto-text {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 480;
  font-size: var(--type-section);
  line-height: var(--leading-section);
  color: var(--color-cream);
  max-width: 26ch;
}

/* Rafa e origem: fotografia real à esquerda, texto à direita. */
.maker-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-element);
  align-items: center;
}

.maker-photo {
  grid-column: 1 / 6;
}

.maker-photo img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.maker-copy {
  grid-column: 7 / 13;
}

.maker-copy h2 {
  margin-block-end: var(--space-element);
}

.maker-copy p {
  margin-block-end: var(--space-tight);
}

.maker-place {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin-block-start: var(--space-element);
}

/* Tablet: fotografia segue ao lado do texto, registro ocupa a grade inteira. */
@media (max-width: 1023px) {
  .hero-copy {
    grid-column: 1 / 7;
  }

  .hero-photo {
    grid-column: 7 / 13;
  }

  .hero .edition-register {
    grid-column: 1 / 13;
    margin-block-start: 0;
  }

  .hero .hero-grid {
    row-gap: var(--space-element);
  }

  .contents-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maker-photo {
    grid-column: 1 / 7;
  }

  .maker-copy {
    grid-column: 7 / 13;
  }
}

/* Mobile: empilhado na ordem texto, ação, fotografia, registro. */
@media (max-width: 767px) {
  .hero .hero-grid,
  .maker-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy,
  .hero-photo,
  .hero .edition-register,
  .maker-photo,
  .maker-copy {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero-copy {
    padding-block-start: 0;
  }

  .hero-photo img {
    aspect-ratio: 3 / 4;
  }

  .contents-list {
    grid-template-columns: minmax(0, 1fr);
  }
}