/* ==========================================================================
   Intro — "Die Ferienwohnung"
   ========================================================================== */

/* Column 7 is left empty — that, not an oversized gap, is the separation. */
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2vw, 2rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  margin-block-start: clamp(3rem, 7vw, 6rem);
}

.intro__lede {
  grid-column: 1 / span 6;
}

.intro__title {
  margin-block-start: clamp(1.25rem, 2.4vw, 2rem);
  font-size: var(--fs-display);
}

.intro__title .reveal-line:last-child > span {
  font-style: italic;
  color: var(--c-accent);
  padding-inline: 0.06em;
  margin-inline: -0.06em;
}

/* ==========================================================================
   Der Preis — js/components/price.js.

   Steht unter der Überschrift, in derselben Spalte, mit einer Haarlinie
   darüber: unterhalb der Headline kommt in dieser Spalte sonst nichts mehr,
   und die Linie macht aus dem freien Raum eine Angabe.

   Drei Lagen, von laut nach leise: der Einstiegspreis im Display-Schnitt,
   darunter die Staffel nach Personenzahl als kleine Tabelle, darunter die
   Hundegebühr hinter einer zweiten Haarlinie — was pro Nacht kostet und was
   zusätzlich anfällt, sind zwei Angaben.
   ========================================================================== */

.price {
  width: fit-content;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: clamp(1.25rem, 2.4vw, 1.9rem);
  border-block-start: 1px solid var(--c-line);
}

.price__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 0.6rem;
}

/*
   Betrag und Währungszeichen sind eine Angabe und dürfen deshalb nicht
   umbrechen.

   Ohne `nowrap` entschied darüber der Zufall: die erste Spalte ist eine
   auto-Spur und damit exakt so breit wie ihr Text — gemessen 54,9141 px Spur
   auf 54,9141 px Text bei "75 €", also 0,00004 px Luft. Ein Bruchteil eines
   Pixels aus der Spurberechnung genügte, und das € rutschte unter die Zahl.
   Wie viel davon anfällt, hängt an der Fensterbreite, am Zoom und an der
   Engine — deshalb trat es auf manchen Desktopbreiten auf und auf anderen
   nicht.

   `nowrap` nimmt der Spurbreite die Entscheidung ab: Die Zahl bleibt bei
   ihrer Währung, egal wie schmal die Spur ausfällt. Aus demselben Grund
   steht es an den Beträgen der Staffel noch einmal.
*/
.price__amount {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-accent);
  white-space: nowrap;
}

.price__unit {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}

/*
   Die Staffel — zwei echte Spalten, damit die Beträge untereinander stehen
   und nicht hinter unterschiedlich langen Bezeichnungen ausfransen. `dt` und
   `dd` gehören paarweise zusammen, ihr Wrapper reicht sie mit
   `display: contents` unverändert ins Raster durch.

   Die zweite Spur ist `1fr` und nicht `auto`: der Block ist so breit wie
   seine breiteste Zeile, und die Beträge sollen rechts an derselben Kante
   stehen wie das Ende der Haarlinien — sonst hinge die Staffel schmaler in
   einem breiteren Block.
*/
.price__tiers {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.45rem clamp(1.25rem, 2.4vw, 2rem);
  margin-block-start: clamp(1rem, 1.9vw, 1.4rem);
}

.price__tier {
  display: contents;
}

.price__tier-label {
  color: var(--c-ink-muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price__tier-amount {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.price__note {
  margin-block-start: clamp(0.9rem, 1.7vw, 1.25rem);
  padding-block-start: clamp(0.75rem, 1.4vw, 1.05rem);
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro__copy {
  grid-column: 8 / span 5;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding-block-start: 0.6rem;
}

.intro__note {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
   Tablet — zwei Spuren statt zwölf Spalten.

   Gestapelt hing der Preisblock (`width: fit-content`) mit 140 px in einer
   720 px breiten Spur, und der Text darunter lief über die volle Weite. Die
   Aufteilung des Entwurfs bleibt deshalb bis 720 px erhalten: links die
   Überschrift mit dem Preis, rechts die Beschreibung.
*/
@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
    row-gap: clamp(2rem, 5vw, 3rem);
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
  }

  .intro__lede {
    grid-column: 1;
  }

  .intro__copy {
    grid-column: 2;
  }
}

/*
   Telefon — eine Spur. Der Preis nimmt sie ganz: als Block von 140 px unter
   einer vollbreiten Überschrift läse er sich als Rest, nicht als Angabe.
*/
@media (max-width: 720px) {
  .intro__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: clamp(2rem, 6vw, 3rem);
  }

  .intro__lede,
  .intro__copy {
    grid-column: 1 / -1;
  }

  .intro__copy {
    padding-block-start: 0;
  }

  .price {
    width: auto;
  }

  /*
     Gestapelt hat der Fließtext die ganze Spur — auf 700 px sind das 78
     Zeichen je Zeile, und das Auge findet den Zeilenanfang nicht mehr. Der
     Riegel greift erst oberhalb von etwa 520 px Textbreite und ist auf dem
     Telefon deshalb wirkungslos; er begrenzt genau das Band zwischen
     Telefon und Tablet.
  */

  .intro__copy {
    max-width: 62ch;
  }
}