/* ==========================================================================
   Das ist Heiligenberg — the place, with the orientation map beneath it.
   ========================================================================== */

/*
   A real 12-column grid: the column gap stays small so the spans actually
   govern the proportions, and the generous air between image and text comes
   from leaving column 6 empty.
*/
.place__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(1.25rem, 2vw, 2rem);
  row-gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

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

/* Left column stacks portrait then place facts; the story spans both rows. */
.place__media {
  position: relative;
  grid-column: 1 / span 5;
  grid-row: 1;
}

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


/*
   The credit line for a borrowed photograph: CC BY-SA wants author, source
   and licence at the point of use, so it sits right under the frame.

   Smallest step in the scale, muted, light — the same size as the caption
   below it but in lower case and without the eyebrow's letterspacing, so it
   reads as a footnote to the picture rather than a second caption.
*/
.place__credit {
  margin-block-start: var(--sp-3);
  color: var(--c-ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 300;
  line-height: 1.5;
}

.place__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 0.2em;
  transition: color var(--dur-hover) var(--ease-out-soft);
}

.place__credit a:hover {
  color: var(--c-ink);
}

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

/*
   One rose from the door sign, resting on the top-right corner of the frame
   — the only place on the page where the ornament sits over imagery. It
   breaks the rectangle without decorating it.

   The wrapper spans the frame rather than collapsing to a point: the base
   reset gives every image `max-width: 100%`, and against a zero-width
   wrapper that resolves to zero.
*/
.place__roses {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.place__rose {
  position: absolute;
  top: clamp(-1.4rem, -2vw, -1rem);
  right: clamp(-1.2rem, -1.8vw, -0.8rem);
  width: clamp(2.4rem, 3.6vw, 3.1rem);
  transform: rotate(14deg);
  filter: drop-shadow(0 6px 14px rgba(58, 30, 38, 0.28));
}

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

.place__content {
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
}

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

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

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

/* ------------------------------------------------------------ Qualities -- */

/*
   Under the photograph rather than beside the copy. On a wide screen the
   story column runs far longer than the picture, and three facts squeezed
   into that column's width broke their own headings across two lines; here
   they fill the gap and get the full column to themselves.
*/
.place__aside {
  grid-column: 1 / span 5;
  grid-row: 2;
}

.place__qualities {
  display: grid;
  gap: clamp(1.5rem, 2.4vw, 2rem);
  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);
}

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

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

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

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

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

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

/*
   Tablet — dieselbe Aufteilung, nur in zwei echten Spuren.

   Zwölf Spalten tragen hier nicht mehr: elf Spaltenabstände nähmen ein
   Drittel der Breite, und die Spuren blieben Streifen. Gestapelt wurde
   deshalb früher — nur behielt das Bild dabei seine `max-width` von 26 rem
   und stand in einer 720 px breiten Spur, mit 300 px Nichts daneben und dem
   Text darunter über die volle Weite. Die Aufteilung bleibt jetzt: links das
   Bild und darunter die drei Angaben, rechts die Geschichte über beide
   Zeilen. Nur die Zahlen dahinter sind andere.
*/
@media (max-width: 900px) {
  .place__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
    row-gap: clamp(2rem, 4.5vw, 3rem);
  }

  .place__media,
  .place__aside {
    grid-column: 1;
  }

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

  /* Flacher als das 4/5 des Entwurfs — die Spur ist schmal. */
  .place__frame {
    aspect-ratio: 4 / 4.6;
  }

  /* Die Haarlinie sitzt schon unter dem Bild; ein zweites Polster wäre eine Lücke. */
  .place__qualities {
    margin-block-start: clamp(1.5rem, 3vw, 2rem);
  }
}

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

  .place__media,
  .place__content,
  .place__aside {
    grid-column: 1 / -1;
    grid-row: auto;
  }

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

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