/* ==========================================================================
   Ankommen, durchatmen — das Haus Mali.

   Spiegelbild zu Heiligenberg: Überschrift und Text links, das Foto trägt
   die rechte Hälfte über beide Zeilen. Es sitzt bewusst tiefer als die
   Headline — dieser Versatz ist die Asymmetrie, nicht ein eigenes Raster.
   ========================================================================== */

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

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

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

/* Dieselbe Auszeichnung der Schlusszeile wie im Einstieg der Wohnung. */
.about__title .reveal-line:last-child > span {
  font-style: italic;
  color: var(--c-accent);
  padding-inline: 0.06em;
  margin-inline: -0.06em;
}

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

.about__media {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  /* Der Versatz gegen die Headline. */
  margin-block-start: clamp(0.5rem, 3.5vw, 3.5rem);
}

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

.about__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;
}

/*
   Die zweite Aufnahme unter dem Porträt.

   Querformat gegen das Hochformat darüber, und flacher als die Aufnahme
   selbst: 4/3 schneidet oben die Schrankreihe und unten den Rand der Zeitung
   weg, und genau dann sitzen die beiden Gesichter im Bild statt in seiner
   Mitte. Der Abstand ist größer als der zur Bildunterschrift darüber, damit
   diese beim Porträt bleibt und nicht zwischen zwei Bildern zu schweben
   beginnt.

   Kein Schatten wie beim Porträt: zwei gleich schwere Rahmen übereinander
   ergäben eine Kachelwand. Dieses Bild liegt flach in der Spalte.
*/
.about__snapshot {
  aspect-ratio: 4 / 3;
  margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

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

.about__content {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.about__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1.25;
}

.about__copy {
  display: grid;
  gap: var(--sp-5);
  margin-block-start: clamp(1.25rem, 2.2vw, 1.75rem);
}

.about__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;
}

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

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

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

  .about__media {
    grid-column: 8 / span 5;
  }
}

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

   Zwölf Spalten schleppen elf Spaltenabstände mit; auf 820 px sind das über
   200 px, die keiner Spalte gehören. Gestapelt war die Antwort darauf und
   riss dafür ein größeres Loch: das Bild behielt seine `max-width` und stand
   in der halben Spur, während der Text darunter über die volle lief. Zwei
   Maße im selben Rechteck.

   Also die Aufteilung des Entwurfs, nur in zwei echten Spuren: die Headline
   nimmt sich die Breite, darunter trägt das Bild die linke Seite und die
   Geschichte die rechte. Der Versatz gegen die Headline entfällt — hier
   beginnt die Zeile ohnehin neu.
*/
@media (max-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
    row-gap: clamp(2rem, 4.5vw, 3rem);
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
  }

  .about__lede {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .about__media {
    grid-column: 1;
    grid-row: 2;
    margin-block-start: 0;
  }

  .about__content {
    grid-column: 2;
    grid-row: 2;
  }

  /* Etwas flacher: die Spur ist schmal, das Hochformat sonst sehr lang. */
  .about__frame {
    aspect-ratio: 4 / 5;
  }
}

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

  .about__lede,
  .about__media,
  .about__content {
    grid-column: 1 / -1;
    grid-row: auto;
  }

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

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