/* Joiel's Palace — shared stylesheet
   Editorial layout: Jost throughout (caps for display type), full-bleed
   photography and generous whitespace. The palette is built from three brand
   colours — slate blue, sand and sage — see the block below. Content stays
   entirely data-driven (see site.js), so this file and the HTML skeletons
   never need to change when text/images in /i18n/ change. */

:root {
  /* Three brand colours carry the site: slate blue, sand and sage.
     Everything else is derived from them.

     Sand is the one that cannot hold text — at 2.3:1 against white it is a
     surface colour only (bands, table headers, frames). Text on sand always
     uses --color-heading. Every text pairing below meets WCAG AA; the one
     exception is sage on a sand band, where --color-accent-dark steps in. */
  --color-slate: #626e82;
  --color-sand: #b6a892;
  --color-sage: #667057;

  --color-bg: #f7f4ef;
  --color-bg-alt: #f2ece4;
  /* Sand mixed 60% into white — keep this in step when --color-sand moves. */
  --color-sand-soft: #e2dcd3;
  --color-surface: #ffffff;
  --color-text: #4b5361;
  --color-text-soft: #5f6673;
  /* Zeigt jetzt auf Slate statt auf den fast schwarzen Alt-Ton (#333c4b).
     Trägt Überschriften, Navigation, Tabellenköpfe, Auszeichnungstitel und
     die vier dunklen Flächen (Sprachwahl-Seite, Bild-Letterbox, Social-Hover,
     Skip-Link). --color-text bleibt bewusst separat und unverändert, das ist
     das eigentliche Fliesstext-Token und wird hier nicht berührt. */
  --color-heading: var(--color-slate);
  --color-border: rgba(98, 110, 130, 0.22);
  --color-accent: #667057;
  --color-accent-dark: #4e5643;
  --color-accent-soft: rgba(102, 112, 87, 0.13);
  --color-deep: #2b323d;
  --color-cream: #f7f4ef;

  /* Eine einzige Familie trägt die Seite: Jost, eine geometrische Grotesk.
     Sie liegt dem Schriftzug im Logo am nächsten, dadurch spricht die Seite
     dieselbe Sprache wie das Wortzeichen. Der Unterschied zwischen Titel und
     Text entsteht nicht über eine zweite Schrift, sondern über Versalien und
     weite Laufweite — daher steht bei den Überschriften unten
     `text-transform: uppercase` mit grossem `letter-spacing`. */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", sans-serif;

  /* ---- Schriftgrössen-Skala ----------------------------------------
     Vorher standen 23 einzelne Grössen im Stylesheet, viele davon nur
     Hundertstel auseinander (0.74 / 0.76 / 0.78 / 0.8 nebeneinander für
     dieselbe Sorte Mikro-Label). Ab hier greift jede Regel auf eine dieser
     acht Stufen zu — das ist der Grund, warum die Seite einheitlich wirkt.

     2xs  Versal-Mikrolabels: Buttons, Tabellenkopf, Pille, Auszeichnungen
     xs   Navigation, Bildunterschriften, Sprachwahl
     sm   Formulare, Tabellenzellen, Untermenü, Lightbox
     base Fliesstext
     lg   Einleitungssatz unter einer Überschrift
     xl   h3, Fusszeilen-Titel, Formular-Abschnitt, Splash-Zeile
     2xl  h2
     3xl  h1                                                            */
  --text-2xs: 0.74rem;
  --text-xs: 0.82rem;
  --text-sm: 0.92rem;
  --text-base: clamp(1.02rem, 0.94rem + 0.25vw, 1.12rem);
  --text-lg: clamp(1.06rem, 0.98rem + 0.3vw, 1.26rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.4vw, 1.45rem);
  --text-2xl: clamp(1.35rem, 1.15rem + 0.85vw, 1.95rem);
  --text-3xl: clamp(1.85rem, 1.45rem + 1.7vw, 2.9rem);

  --max-width: 1240px;
  --max-width-narrow: 760px;
  --gap: 1.5rem;

  --radius-l: 22px;
  --radius-m: 14px;
  --radius-s: 8px;

  --shadow-soft: 0 20px 45px -22px rgba(43, 50, 61, 0.26);
  --shadow-lift: 0 30px 60px -25px rgba(43, 50, 61, 0.34);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:not([class]):hover {
  text-decoration: underline;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 0.5em;
  line-height: 1.3;
  letter-spacing: 0.14em;
}

/* Nur der Seitentitel (h1, genau einer pro Seite) bekommt Sage statt Slate
   — er soll als der eine Haupttitel auffallen. h2-h6 bleiben blau. Reines
   Sage erreicht bei dieser Grösse 4.76:1 auf Creme, also über AA auch für
   normalgrossen Text, nicht nur für die Grossschrift-Ausnahme (3:1). */
h1 { font-size: var(--text-3xl); color: var(--color-accent); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: 0.12em; }
h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--color-text);
}

p { margin: 0 0 1.2em; }

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-heading);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(247, 244, 239, 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 12px 30px -22px rgba(43, 50, 61, 0.38);
}

/* Das Logo behält immer dieselbe Größe — es schrumpft beim Scrollen nicht.
   Die 707px sind kein runder Wert, sondern die Breite der Menüzeile (659px)
   plus die 1.5rem Innenabstand links und rechts: so stehen Logo und Menü
   auf gleicher Breite untereinander. */
.site-header__logo {
  display: block;
  padding: 1.35rem 1.5rem 0.15rem;
  max-width: 707px;
  margin: 0 auto;
}

.site-header__logo img {
  width: 100%;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.5rem 1.1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  color: var(--color-heading);
}

.main-nav {
  order: 2;
}

.main-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.main-nav__item {
  position: relative;
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-heading);
}

.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.main-nav__link:hover,
.main-nav__link.is-active,
.main-nav__item.is-open > .main-nav__link {
  text-decoration: none;
}

.main-nav__link:hover::after,
.main-nav__link.is-active::after {
  transform: scaleX(1);
}

.main-nav__caret {
  font-size: 0.6rem;
  opacity: 0.55;
}

.main-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 50;
}

.main-nav__item.is-open > .main-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 861px) {
  .main-nav__item.has-children:hover > .main-nav__submenu,
  .main-nav__item.has-children:focus-within > .main-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.main-nav__submenu .main-nav__link {
  display: block;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--text-sm);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-s);
}

.main-nav__submenu .main-nav__link:hover {
  background: var(--color-accent-soft);
}

.main-nav__submenu .main-nav__link::after {
  display: none;
}

.main-nav__submenu .main-nav__submenu {
  position: static;
  border: none;
  box-shadow: none;
  padding-left: 0.75rem;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.header-side {
  order: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-side:last-of-type {
  order: 3;
}

.lang-switch {
  display: flex;
  gap: 0.4rem;
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--color-text-soft);
}

.lang-switch a.is-current {
  color: var(--color-heading);
  font-weight: 500;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--color-heading);
  background: transparent;
  border: 1px solid var(--color-border);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.social-links a:hover {
  background: var(--color-heading);
  color: #fff;
  transform: translateY(-2px);
}

.social-links svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    order: 0;
  }

  .site-header__bar {
    justify-content: space-between;
  }

  .header-side:last-of-type {
    order: 1;
  }

  .main-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
  }

  .site-header.is-nav-open .main-nav {
    display: block;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .main-nav__link::after {
    display: none;
  }

  .main-nav__submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    border: none;
    background: var(--color-bg-alt);
    border-radius: var(--radius-s);
  }

  .main-nav__item.is-open > .main-nav__submenu {
    display: block;
  }
}

/* ---------- Hero / splash (language chooser) ---------- */

.splash {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-heading);
  color: var(--color-cream);
  overflow: hidden;
}

.splash__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.splash h1 {
  color: #ffffff;
  margin-bottom: 0.3em;
}

.splash__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  margin-bottom: 2.75rem;
  opacity: 0.88;
}

.splash__choices {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.75rem;
}

.splash__choice {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 0.95rem 2.4rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}

.splash__choice:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

.splash__credit {
  font-size: var(--text-xs);
  /* the slate backdrop is lighter than the old brown one, so this needs more
     opacity to stay readable at this size (5.7:1) */
  opacity: 0.68;
  letter-spacing: 0.03em;
}

.splash figure {
  margin: 0 0 2.25rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  max-width: 400px;
  box-shadow: var(--shadow-lift);
}

.splash figure img {
  animation: kenburns 22s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

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

main {
  display: block;
}

.page-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
}

.page-section--narrow {
  max-width: var(--max-width-narrow);
}

/* Contact stacks two sections; without this their paddings add up to a
   conspicuous hole between the copy and the form. */
.page-section + .page-section {
  padding-top: 0;
}

.content-block {
  margin: 0 0 1.75rem;
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto;
}

.content-block--p,
.content-block--li {
  text-align: left;
}

.content-block--h1,
.content-block--h2 {
  text-align: center;
  max-width: 900px;
}

.content-block--h1:first-child,
.content-block--h2:first-child {
  margin-top: 0;
}

.content-block--h2 {
  margin-top: 3rem;
  position: relative;
  padding-top: 1.6rem;
}

.content-block--h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 999px;
  /* sage into sand: both brand colours show up at every section heading */
  background: linear-gradient(90deg, var(--color-sage), var(--color-sand));
}

.content-block--h1 {
  text-align: center;
}

.content-block--h3,
.content-block--h4 {
  text-align: center;
  max-width: 760px;
}

.content-block--h3.content-block--subtitle,
.content-block--h4.content-block--subtitle,
.content-block--h1.content-block--subtitle,
.content-block--h2.content-block--subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xl);
  color: var(--color-text-soft);
  /* Der Untertitel ist bewusst gemischt gesetzt: Versalien direkt unter
     einem Versaltitel würden die Hierarchie einebnen. */
  text-transform: none;
  letter-spacing: 0.01em;
  margin-top: -1rem;
}

.content-block--h2.content-block--subtitle::before {
  display: none;
}

.content-block--h4 {
  opacity: 0.9;
}

/* Leading announcement line ("we're expecting a litter…") — reads as an
   orphaned grey sentence when left as plain text, so it gets a pill. */
.content-block--announce {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  /* Helles Sage statt des sandfarbenen Bands — derselbe Ton, der auch die
     Textmarkierung (::selection) trägt, hier nur als Fläche. Der dunkle
     Sage-Text darauf bleibt bei 6.0:1 gut lesbar. */
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-sage);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  opacity: 1;
}

.content-block--h3 + .content-block--p,
.content-block--h4 + .content-block--p {
  margin-top: -0.6rem;
}

/* ---------- Figures & imagery ---------- */

.content-figure {
  margin: 0 auto 2rem;
  max-width: var(--max-width-narrow);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.content-figure img {
  width: 100%;
  cursor: zoom-in;
  transition: transform 0.6s var(--ease);
}

.content-figure img:focus-visible,
.info-card__frame img:focus-visible {
  outline: 2px solid var(--color-sage);
  outline-offset: 3px;
}

.content-figure:hover img {
  transform: scale(1.03);
}

.content-figure figcaption {
  font-size: var(--text-xs);
  padding: 0.75rem 1.1rem;
  color: var(--color-text-soft);
}

/* Hero figure — first stand-alone photo on a page.
   Deliberately laid out with margins only (never a transform): the
   scroll-reveal helper sets `transform: none` at a higher specificity,
   which would silently knock a transform-centred box off-centre. */

.content-figure--hero {
  position: relative;
  max-width: none;
  width: auto;
  margin: 0 -1.5rem 3rem;
  border-radius: 0;
  box-shadow: none;
}

.content-figure--hero .content-figure__frame {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 62vh, 640px);
}

/* On a phone a tall vh-based band turns a landscape photo into a narrow
   portrait crop and cuts the outer subjects off. A gentle 4:3 frame keeps
   the composition intact. */
@media (max-width: 600px) {
  .content-figure--hero .content-figure__frame {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.content-figure--hero img {
  width: 100%;
  height: 100%;
  /* contain statt cover: das ganze Foto bleibt sichtbar, auch wenn sein
     Format nicht exakt zum Rahmen passt. Der dunkle Rand, der dabei
     entstehen kann, ist bewusst derselbe Ton wie der Verlauf darüber. */
  object-fit: contain;
  background: var(--color-heading);
  cursor: default;
}

.content-figure--hero:hover img {
  transform: none;
}

.content-figure--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 50, 61, 0) 55%, rgba(43, 50, 61, 0.6) 100%);
  pointer-events: none;
}

.content-figure--hero figcaption {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 2;
  color: #fff;
  background: rgba(43, 50, 61, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

/* From tablet up the hero sits flush with the gallery/card columns, so
   every image edge on a page lines up on the same two vertical rules. */
@media (min-width: 601px) {
  .content-figure--hero {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
  }

  .content-figure--hero .content-figure__frame {
    border-radius: var(--radius-l);
    overflow: hidden;
  }
}

/* Gallery — runs of 2+ consecutive images.
   Every tile gets one explicit aspect ratio so a stray portrait shot
   can't stretch a whole row. Ratios lean portrait for the wider 3-up
   sets (which is how most of these dog photos are shot) and landscape
   for the roomier 2-up ones. The photo is never cropped to fill that
   shape — object-fit: contain shows the whole animal, with a plain
   border on whichever side doesn't match the tile. */

.gallery-grid {
  --tile-ratio: 3 / 4;
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.gallery-grid[data-count="2"],
.gallery-grid[data-count="4"] {
  --tile-ratio: 4 / 3;
  grid-template-columns: repeat(2, 1fr);
}

.gallery-grid .content-figure {
  position: relative;
  max-width: none;
  margin: 0;
}

.gallery-grid .content-figure img {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  /* --fit kommt aus Picture.astro: cover (randlos), wenn das Foto ohnehin
     fast zur Kachel passt, sonst contain — dann zeigt object-fit von sich
     aus einen gleichmässig verteilten Rand, nie nur auf einer Seite. */
  object-fit: var(--fit, contain);
  background: var(--color-surface);
}

.gallery-grid .content-figure:hover img,
.gallery-grid .content-figure:focus-within img {
  transform: scale(1.07);
}

/* Bildunterschrift liegt jetzt als Verlauf über dem Foto und erscheint erst
   bei Hover/Fokus — das Foto wirkt dadurch ruhiger, der Kontext bleibt aber
   einen Wisch entfernt statt permanent unter jeder Kachel zu stehen. Ein
   Foto ohne caption (die meisten) bekommt trotzdem den Zoom, nur ohne
   Verlauf/Text darüber. */
.gallery-grid .content-figure:has(figcaption)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 50, 61, 0) 55%, rgba(43, 50, 61, 0.82) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.gallery-grid .content-figure:hover::after,
.gallery-grid .content-figure:focus-within::after {
  opacity: 1;
}

.gallery-grid .content-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.5rem 1rem 0.85rem;
  color: #fff;
  font-size: var(--text-xs);
  transform: translateY(0.4rem);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.gallery-grid .content-figure:hover figcaption,
.gallery-grid .content-figure:focus-within figcaption {
  transform: translateY(0);
  opacity: 1;
}

@media (hover: none) {
  /* Ohne Hover (Touch) bleibt die Bildunterschrift wie bisher sichtbar —
     sonst gäbe es keine Möglichkeit, sie überhaupt zu lesen. */
  .gallery-grid .content-figure::after,
  .gallery-grid .content-figure figcaption {
    opacity: 1;
    transform: none;
  }
  .gallery-grid .content-figure figcaption {
    position: static;
    color: var(--color-text-soft);
    padding: 0.75rem 1.1rem;
  }
  .gallery-grid .content-figure::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .gallery-grid,
  .gallery-grid[data-count="2"],
  .gallery-grid[data-count="4"] {
    --tile-ratio: 4 / 3;
    grid-template-columns: 1fr;
  }

  /* Bei dieser Breite ist die Kachel immer 4/3 — dafür kann ein Foto, das
     bei drei Spalten (3/4) einen Rand brauchte, hier randlos passen, und
     umgekehrt. --fit-mobile ist nur gesetzt, wenn sich die Entscheidung von
     --fit tatsächlich unterscheidet. */
  .gallery-grid .content-figure img {
    object-fit: var(--fit-mobile, var(--fit, contain));
  }
}

/* Info cards — image + heading + text triples grouped side by side */

.info-card-grid {
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.info-card {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.info-card__frame {
  height: 260px;
  overflow: hidden;
  background: var(--color-surface);
}

.info-card__frame img {
  width: 100%;
  height: 100%;
  /* --fit kommt aus Picture.astro, siehe .gallery-grid img weiter oben:
     cover (randlos), wenn das Foto ohnehin fast zum Rahmen passt, sonst
     contain — dann zentriert object-fit den Rand von sich aus gleichmässig. */
  object-fit: var(--fit, contain);
  cursor: default;
}

/* Unter 636px räumt das auto-fit-Raster jede Karte in eine eigene Zeile
   (siehe .info-card-grid oben) — der Rahmen wird dadurch relativ zur festen
   Höhe von 260px viel schmaler, ein Foto kann hier also eine andere
   Randentscheidung brauchen als in der zwei- oder dreispaltigen Ansicht. */
@media (max-width: 636px) {
  .info-card__frame img {
    object-fit: var(--fit-mobile, var(--fit, contain));
  }
}

.info-card__body {
  padding: 1.5rem 1.75rem 1.85rem;
}

.info-card__body h3 {
  margin-bottom: 0.5rem;
  text-align: left;
}

.info-card__body p {
  margin: 0;
  text-align: left;
}

/* Checklists */

.content-list {
  list-style: none;
  margin: 0 auto 1.75rem;
  padding: 0;
  max-width: var(--max-width-narrow);
  display: grid;
  gap: 0.6rem;
}

.content-list li {
  position: relative;
  padding-left: 2.1rem;
  text-align: left;
}

.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.3em;
  height: 1.3em;
  border-radius: 999px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.content-list li::after {
  content: "";
  position: absolute;
  left: 0.42em;
  top: 0.62em;
  width: 0.42em;
  height: 0.24em;
  border-left: 2px solid var(--color-accent-dark);
  border-bottom: 2px solid var(--color-accent-dark);
  transform: rotate(-45deg);
}

/* ---------- Credential panels ---------- */

/* Health results presented as documents rather than prose, and — since there
   are three per dog and the findings are dense lab shorthand — collapsed
   behind a native <details> so the page shows what was tested without
   forcing every reading to be read. The sage tick is decorative (the
   summary's own heading already says what was examined), so it is drawn in
   CSS and kept out of the accessibility tree. */
.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
}

.credential {
  background: var(--color-surface);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s var(--ease);
}

.credential[open] {
  box-shadow: var(--shadow-lift);
}

.credential__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.4rem;
}

.credential__summary::-webkit-details-marker {
  display: none;
}

.credential__summary::marker {
  content: "";
}

.credential__check {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.credential__check::after {
  content: "";
  position: absolute;
  top: 0.58rem;
  left: 0.42rem;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--color-accent-dark);
  border-bottom: 2px solid var(--color-accent-dark);
  transform: rotate(-45deg);
}

.credential__label {
  flex: 1;
  min-width: 0;
}

.credential__title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-heading);
  line-height: 1.35;
}

.credential__source {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-slate);
  line-height: 1.25;
}

.credential__chevron {
  position: relative;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.credential__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -5px 0 0 -5px;
  border-right: 1.5px solid var(--color-heading);
  border-bottom: 1.5px solid var(--color-heading);
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease);
}

.credential[open] .credential__chevron::before {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.credential__findings {
  margin: 0;
  padding: 0 1.4rem 1.4rem calc(1.4rem + 1.6rem + 0.9rem);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text);
}

@media (max-width: 480px) {
  /* Bei sehr schmalen Karten würde der Einzug (auf Höhe des Häkchens) den
     Fliesstext zu stark einengen. */
  .credential__findings {
    padding-left: 1.4rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.9rem;
  }
}

/* ---------- Story cards (memorial entries) ---------- */

/* A private photo album read as a small set of keepsake cards instead of
   flowing text: dark ground, portrait, name and dates always visible, the
   paragraph clamped to two lines with a "read more" toggle (site.js). Text
   stays in the HTML at full length regardless of open/closed state — only
   the visual height changes — so nothing is hidden from search engines. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
}

.story-card {
  background: var(--color-deep);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.4rem;
  align-items: start;
  box-shadow: var(--shadow-lift);
}

.story-card__frame {
  width: 104px;
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.55);
}

.story-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: default;
}

.story-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  text-align: left;
  margin: 0 0 0.2rem;
}

.story-card__dates {
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 1rem;
  text-align: left;
}

.story-card__text {
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(238, 240, 242, 0.82);
  text-align: left;
  max-height: 3.4em;
  overflow: hidden;
  margin: 0;
  transition: max-height 0.5s var(--ease);
}

.story-card__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(180deg, rgba(43, 50, 61, 0), var(--color-deep) 82%);
  transition: opacity 0.4s var(--ease);
}

.story-card.is-open .story-card__text {
  max-height: 20em;
}

.story-card.is-open .story-card__text::after {
  opacity: 0;
}

.story-card__toggle {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sand);
  padding: 0;
  margin: 0.9rem 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.story-card__toggle svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}

.story-card__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.story-card__toggle:focus-visible {
  outline: 1px solid var(--color-sand);
  outline-offset: 3px;
}

.story-card .content-buttons--card {
  margin-top: 1.1rem;
}

.content-button--ghost {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

.content-button--ghost:hover,
.content-button--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

@media (max-width: 420px) {
  .story-card {
    grid-template-columns: 1fr;
  }
  .story-card__frame {
    width: 72px;
  }
}

/* ---------- Call-to-action buttons ---------- */

.content-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto 2rem;
  max-width: var(--max-width-narrow);
}

/* Inside a card the buttons sit with the text, not centred across the page. */
.content-buttons--card {
  justify-content: flex-start;
  margin: 0.9rem 0 0;
}

.content-button {
  display: inline-block;
  /* Slate statt der fast schwarzen Überschriftfarbe: eine der drei
     Markenfarben, deutlich heller, und Weiss darauf erreicht 5.2:1. */
  background: var(--color-slate);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 2.1rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.3s var(--ease);
}

.content-button:hover,
.content-button:focus-visible {
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* ---------- Tables ---------- */

/* Show results are wide: the wrapper scrolls on its own so the page body
   never gets a horizontal scrollbar on a phone. */
.content-table-wrap {
  max-width: var(--max-width-narrow);
  margin: 0 auto 2rem;
  overflow-x: auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.content-table caption {
  padding: 0.9rem 1rem 0;
  font-family: var(--font-display);
  color: var(--color-heading);
  text-align: left;
}

.content-table th {
  background: var(--color-sand-soft);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.content-table th,
.content-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.content-table tbody tr:last-child td {
  border-bottom: 0;
}

.content-table tbody tr:hover td {
  background: var(--color-accent-soft);
}

/* ---------- Scroll reveal ---------- */

.will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.will-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .content-figure img,
  .splash figure img {
    transition: none;
    animation: none;
  }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 4vw;
  background: rgba(43, 50, 61, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lift);
}

.lightbox__caption {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1rem;
  font-size: var(--text-sm);
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background 0.25s ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- Contact form ---------- */

.contact-emails {
  display: flex;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
  font-size: var(--text-base);
  font-family: var(--font-display);
}

.contact-emails a {
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 0.1rem;
}

.contact-card {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
}

/* One form style for both the contact form and the puppy enquiry form.
   Labels are set in sentence case rather than uppercase micro-type: on the
   enquiry form a label is a whole question, and uppercase is unreadable
   at that length. */
.content-form {
  display: grid;
  gap: 1.15rem;
}

.content-form__section {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  margin: 1.4rem 0 0;
}

.content-form__section:first-child {
  margin-top: 0;
}

.content-form label,
.content-form legend {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-heading);
  margin-bottom: 0.45rem;
}

.content-form input[type="text"],
.content-form input[type="email"],
.content-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-heading);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.content-form input:focus,
.content-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.content-form textarea {
  min-height: 120px;
  resize: vertical;
}

.content-form__field--choice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.9rem 1rem;
  margin: 0;
}

.content-form__option,
.content-form__field--consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.content-form__option input,
.content-form__field--consent input {
  margin-top: 0.28em;
  accent-color: var(--color-accent);
}

.content-form__field--consent {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.content-form button {
  justify-self: start;
  background: var(--color-slate);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 2.1rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.3s var(--ease);
}

.content-form button:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  margin-top: 3rem;
  background: var(--color-bg-alt);
}

.site-footer h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.6rem;
}

.site-footer p {
  color: var(--color-text-soft);
  margin-bottom: 0;
}

.site-footer .social-links {
  justify-content: center;
  margin-top: 1.5rem;
}