/* ==========================================================================
   Die drei Verweise auf die Unterkünfte — zwischen Aufschlag und erstem
   Abschnitt der Startseite.

   Ein Band, kein Abschnitt: es bringt die Luft mit, die über dem ersten
   Abschnitt fehlte, eine Haarlinie, an der die drei Felder hängen, und
   zwischen ihnen zwei senkrechte Linien. Mehr Rahmen gibt es nicht — kein
   Kasten, kein Schatten, keine Fläche. Was trägt, sind die Miniaturen und
   die Namen.

   Alles daran ist eine Stufe kleiner als der Angebotsteil weiter unten.
   Das ist Absicht: hier wird gewiesen, dort angeboten. Zwei Abschnitte, die
   gleich laut dasselbe sagen, wären einer zu viel.
   ========================================================================== */

.stay-links {
  /*
     Die Luft über dem ersten Abschnitt. Nur nach oben: nach unten bringt
     "Das Haus Mali" als `.section--roomy` reichlich eigenes Polster mit,
     und zwei Polster hintereinander rissen ein Loch in die Seite.
  */
  padding-block-start: clamp(3rem, 6vw, 5rem);
}

.stay-links__eyebrow {
  margin-block-end: clamp(0.85rem, 1.5vw, 1.25rem);
}

/* Die Beschriftung steht über der Linie, der Strich des Eyebrows wäre
   daneben ein zweiter Strich zu viel. */
.stay-links__eyebrow::before {
  display: none;
}

.stay-links__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--c-line);
}

.stay-links__item + .stay-links__item {
  border-inline-start: 1px solid var(--c-line);
}

/* ------------------------------------------------------------- Das Feld -- */

/*
   Die drei Teile rücken zusammen und füllen die Spalte nicht aus:
   `justify-content: start` statt einer gedehnten Mittelspalte. Gedehnt
   stand der Pfeil am rechten Rand der Spalte und der Name am linken, und
   dazwischen lagen zweihundert Pixel Nichts — das las sich als Lücke, nicht
   als Luft. Jetzt ist jedes Feld eine kompakte Einheit, die an ihrer
   Trennlinie hängt, und der freie Platz steht dahinter.
*/
.stay-links__link {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: clamp(0.85rem, 1.4vw, 1.25rem);
  padding: clamp(0.95rem, 1.5vw, 1.25rem) clamp(0.9rem, 1.5vw, 1.5rem);
}

/* Zwischen Text und Pfeil etwas mehr Raum als zwischen Bild und Text — der
   Pfeil gehört zur Geste, nicht zur Auskunft. */
.stay-links__arrow {
  margin-inline-start: clamp(0.2rem, 0.6vw, 0.6rem);
}

/*
   Außen kein Innenabstand: die erste Miniatur und der letzte Pfeil sollen
   an derselben Kante stehen wie alles andere auf der Seite. Sonst rückte
   das Band um ein paar Pixel aus dem Raster.
*/
.stay-links__item:first-child .stay-links__link {
  padding-inline-start: 0;
}

.stay-links__item:last-child .stay-links__link {
  padding-inline-end: 0;
}

/*
   Beim Überfahren färbt sich das Stück Haarlinie über dem Feld. Es liegt
   auf der Linie und nicht darunter — daher `top: -1px` —, also leuchtet
   scheinbar der Strich selbst auf, statt dass ein zweiter dazukäme.
*/
.stay-links__link::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-in-out);
}

.stay-links__link:hover::before,
.stay-links__link:focus-visible::before {
  transform: scaleX(1);
}

.stay-links__link:focus-visible {
  outline-offset: 4px;
}

/* ------------------------------------------------------------ Miniatur --- */

.stay-links__thumb {
  display: block;
  width: clamp(3.6rem, 4.8vw, 4.75rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* Bis das Bild da ist, steht hier Sand und kein weißes Loch. */
  background: var(--c-sand);
  box-shadow: var(--shadow-sm);
}

.stay-links__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-image-hover) var(--ease-out-soft);
}

.stay-links__link:hover .stay-links__thumb img,
.stay-links__link:focus-visible .stay-links__thumb img {
  transform: scale(1.06);
}

/* ---------------------------------------------------------------- Text --- */

.stay-links__body {
  min-width: 0;
}

.stay-links__name {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: var(--ls-display);
  /*
     Auf einer Zeile. Gattung und Name gehören zusammen, und umgebrochen
     stünde "Studio" allein über seinem Namen wie eine Überschrift über
     einem Kapitel — dafür ist die Zeile zu klein. Sie ist kurz genug, dass
     sie auch auf einem schmalen Telefon in eine Zeile passt.
  */
  white-space: nowrap;
}

/*
   Der Name kursiv und in der Akzentfarbe — dieselbe Auszeichnung wie die
   Schlusszeile jeder Überschrift im Haus ("Haus Mali.", "Das Haus Mali.",
   "Die Ferienwohnung."). Sie ist hier der einzige Farbton und trägt das
   ganze Band; ohne sie wären es drei graue Zeilen.
*/
.stay-links__accent {
  font-style: italic;
  color: var(--c-accent);
  /* Kursive Playfair braucht rechts etwas Luft, sonst klebt sie am Rand. */
  padding-inline: 0.04em;
  margin-inline: -0.04em;
  transition: color var(--dur-hover) var(--ease-out-soft);
}

.stay-links__link:hover .stay-links__accent,
.stay-links__link:focus-visible .stay-links__accent {
  color: var(--c-accent-deep);
}

.stay-links__meta {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--c-ink-muted);
  font-size: var(--fs-meta);
  line-height: 1.4;
}

/* --------------------------------------------------------------- Pfeil --- */

/*
   Die kleine Schwester des Markers auf den Unterkunftskarten: derselbe
   Kreis mit Haarlinie, nur ohne Milchglas und eine Stufe kleiner. Er zeigt
   nach unten, weil der Verweis nach unten führt.
*/
.stay-links__arrow {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink-muted);
  font-size: 0.8rem;
  line-height: 1;
  transition: color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft),
    transform var(--dur-hover) var(--ease-out-soft);
}

.stay-links__link:hover .stay-links__arrow,
.stay-links__link:focus-visible .stay-links__arrow {
  border-color: var(--c-accent);
  color: var(--c-accent);
  transform: translateY(3px);
}

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

/*
   Dieselbe Stufe, auf der im ganzen Haus aus Spalten Zeilen werden. Drei
   Felder nebeneinander ließen dem Namen hier keine Zeile mehr: "Studio
   „Erwin“" bräche mitten im Namen um. Also untereinander, und aus den
   senkrechten Trennlinien werden waagerechte.
*/
@media (max-width: 900px) {
  .stay-links__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .stay-links__item + .stay-links__item {
    border-inline-start: 0;
    border-block-start: 1px solid var(--c-line);
  }

  /*
     Untereinander hat jedes Feld die volle Breite. Der seitliche
     Innenabstand wäre dann ein Einzug und kein Abstand, und der Pfeil darf
     jetzt wieder ganz nach rechts: nebeneinander stand er als Abschluss
     einer kompakten Einheit, untereinander steht er am Zeilenende. Dafür
     dehnt sich die Mittelspur.
  */
  .stay-links__link {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    padding-inline: 0;
  }

  .stay-links__arrow {
    margin-inline-start: 0;
  }

  .stay-links__thumb {
    width: 3.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stay-links__link:hover .stay-links__arrow,
  .stay-links__link:focus-visible .stay-links__arrow {
    transform: none;
  }

  .stay-links__link:hover .stay-links__thumb img,
  .stay-links__link:focus-visible .stay-links__thumb img {
    transform: none;
  }
}