/* ==========================================================================
   Über die Gastgeberin.

   Kleiner angelegt als Heiligenberg: ein schmales Porträt links, eine
   großzügige Textspalte rechts, darunter zwei knappe Zeilen auf einer
   Haarlinie. Persönlich, nicht repräsentativ.
   ========================================================================== */

.host__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(1.25rem, 2vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------- Media -- */

.host__media {
  grid-column: 1 / span 4;
}

.host__frame {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}

/*
   Der Rahmen ohne Bild — siehe js/components/host.js.

   Solange kein Porträt eingetragen ist, bleibt die Fläche stehen und hält
   die Spalte: gleiches Seitenverhältnis, gleiche Rundung, der Sandton, der
   ohnehin hinter jedem Bild der Seite liegt. Dazu eine Haarlinie nach innen
   statt des Schlagschattens — der Schatten hebt ein Bild von der Seite ab,
   und hier ist nichts abzuheben. So liest sich die Fläche als freigehalten
   und nicht als kaputt.
*/
.host__frame--empty {
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.host__caption {
  margin-block-start: var(--sp-4);
  color: var(--c-ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* -------------------------------------------------------------- Content -- */

.host__content {
  grid-column: 6 / span 7;
}

.host__title {
  margin-block-start: clamp(1.25rem, 2.2vw, 1.9rem);
  font-size: var(--fs-display);
}

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

.host__copy {
  display: grid;
  gap: var(--sp-5);
  max-width: 44rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------ Signatur -- */

/*
   Der Abschnitt endet wie ein Brief. Die Grußzeilen gehören zum letzten
   Absatz und rücken deshalb näher an ihn heran, als die Absätze
   untereinander stehen. Gesetzt sind sie in der Kursiven der Displayschrift,
   der Name im Rosé des Hauses — dieselbe Hand wie die letzte Zeile der
   Überschrift.
*/

.host__signature {
  display: grid;
  gap: 0.15em;
  margin-block-start: calc(var(--sp-5) * -0.45);
  color: var(--c-ink-soft);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-style: italic;
  line-height: 1.4;
}

.host__signature span:last-child {
  color: var(--c-accent);
}

/* --------------------------------------------------------------- Facts -- */

.host__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
  max-width: 44rem;
  margin-block-start: clamp(2rem, 3.5vw, 2.75rem);
  padding-block-start: clamp(1.5rem, 2.6vw, 2rem);
  border-block-start: 1px solid var(--c-line);
}

.host__facts li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.host__fact-title {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
}

.host__fact-text {
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.55;
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 1080px) {
  .host__media {
    grid-column: 1 / span 5;
  }

  .host__content {
    grid-column: 7 / span 6;
  }
}

/*
   Tablet — zwei Spuren. Das Porträt behielt gestapelt seine `max-width` von
   24 rem und stand damit in gut der Hälfte einer 720 px breiten Spur; die
   restlichen 340 px blieben leer, und der Brief lief darunter über alles.
   Hier trägt es wieder eine eigene Spur und füllt sie ganz.
*/
@media (max-width: 900px) {
  .host__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
    row-gap: clamp(2rem, 4.5vw, 3rem);
  }

  .host__media {
    grid-column: 1;
  }

  .host__content {
    grid-column: 2;
  }

  /*
     Untereinander statt nebeneinander: die Textspalte ist hier keine 44 rem
     mehr, und zwei Angaben darin ergäben Spalten von 24 Zeichen.
  */
  .host__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
  }
}

/* Telefon — eine Spur, das Porträt füllt sie ganz aus. */
@media (max-width: 720px) {
  .host__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: clamp(2.25rem, 7vw, 3.25rem);
  }

  .host__media,
  .host__content {
    grid-column: 1 / -1;
  }

  .host__frame {
    aspect-ratio: 4 / 4.6;
  }

  /*
     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.
  */

  .host__copy,
  .host__facts {
    max-width: 62ch;
  }
}