/* Diván: composición de la página de inicio. Requiere tokens, base, components y site. */

/* ---------- Primera pantalla ---------- */

.home-hero {
  display: grid;
  gap: var(--space-5);
  /* Solapa un píxel con la cabecera para que no asome una junta entre superficies */
  margin-top: -1px;
  padding: var(--space-2) var(--gutter) var(--gap-block);
}

.home-hero__intro {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.home-hero__line {
  max-width: none;
}

.home-hero__line span {
  display: block;
}

.home-hero__tagline {
  max-width: 30ch;
  text-wrap: pretty;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* En pantalla ancha el sofá cabe entero bajo la cabecera y el texto ocupa el
   hueco libre a la izquierda del personaje. 0.621 es alto / ancho del sofá. */
@media (min-width: 60rem) and (orientation: landscape) {
  .home-hero {
    position: relative;
    display: block;
    padding-top: 0;
    padding-bottom: var(--space-5);
  }

  .home-hero .sofa-banner {
    width: min(100%, max(38rem, (100svh - 7rem) / 0.621));
    margin-left: auto;
  }

  .home-hero__intro {
    position: absolute;
    top: var(--space-5);
    left: var(--gutter);
    width: 27%;
  }
}

/* ---------- Café: leyendo, a la izquierda y a gran escala ---------- */

@container (min-width: 44rem) {
  .home-coffee .feature__grid {
    grid-template-columns: 2fr 3fr;
  }

  .home-coffee .feature__art {
    order: -1;
    justify-self: start;
    max-width: none;
  }
}

/* ---------- Tapas: brindando ---------- */

.home-tapes {
  display: grid;
  gap: var(--gap-block);
  justify-items: center;
}

.home-tapes__art {
  width: min(70%, 20rem);
  color: var(--figure);
}

.home-tapes .word-stack {
  padding-block: 0;
}

/* Dos líneas siempre, también con «hechas con tiempo», la más larga */
.home-tapes .word-stack__lead {
  font-size: min(1.5em, 5.8vw);
}

@media (max-width: 59.99rem) {
  .home-tapes .word-stack__lead {
    font-size: min(1.5em, 8.8vw);
  }
}

.home-tapes .word-stack__lead span {
  display: block;
}

.home-tapes .word-stack__list {
  gap: var(--space-4);
}

.word-stack__note {
  display: block;
  max-width: 38ch;
  margin-top: var(--space-1);
  margin-inline: auto;
  color: var(--text);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: 1.32;
  letter-spacing: var(--tracking-text);
  text-transform: none;
  text-wrap: balance;
  hyphens: manual;
}

/* En móvil el titular respeta el corte de la carta */
@media (max-width: 34rem) {
  .home-tapes .word-stack__lead {
    hyphens: manual;
  }

  /* Los nombres bajan un escalón para que el titular siga mandando */
  .home-tapes .word-stack__list {
    font-size: var(--text-heading-sm);
  }
}

@media (min-width: 60rem) {
  .home-tapes {
    grid-template-columns: 2fr 1fr;
    align-items: end;
  }

  .home-tapes__art {
    width: 100%;
    justify-self: end;
  }

  .home-tapes .home-actions {
    grid-column: 1;
  }
}

/* ---------- Horario y lugar ---------- */

.home-visit__art {
  margin-top: var(--gap-block);
}