/* Pfoten verbinden — theme refinements layered on top of app.css (which stays
   verbatim-to-concept). Keep this file small and well-commented. */

/* ──────────────────────────────────────────────────────────────────────────
   Card row-alignment (3 Säulen + Patenschaften)
   Problem: headings/tags wrap to different line counts across a card row, so
   the body copy below them lands at different heights ("off a little bit").
   Fix: CSS subgrid — each card shares the parent's row tracks, so icon / title /
   tag / text line up across all cards no matter how many lines a heading wraps
   to. Replaces the concept's fragile hand-tuned min-height values.
   Scoped to the multi-column (desktop) layouts only; the single-column mobile
   stacks keep the original behaviour.
   ────────────────────────────────────────────────────────────────────────── */

/* 3 Säulen — rows: icon / title / text */
@media (min-width: 881px) {
  @supports (grid-template-rows: subgrid) {
    .pillars { grid-template-rows: auto auto 1fr; row-gap: 0; }
    .pillar  { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* Patenschaften cards — rows: icon / title / tag / intro / sub-line / list (/ trailer) */
@media (min-width: 821px) {
  @supports (grid-template-rows: subgrid) {
    .paten-grid { grid-template-rows: repeat(7, auto); }
    .paten-card {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
    /* let subgrid do the aligning — drop the concept's magic min-heights */
    .paten-card h3,
    .paten-card .ptag,
    .paten-card > p:first-of-type,
    .paten-card > p:nth-of-type(2) { min-height: 0; }
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hund-Detailseite: Galerie = großes Hauptfoto + klickbare Thumbnail-Leiste.
   Klick auf ein Thumbnail tauscht es ins Hauptbild (Markup + kleines Inline-JS
   in single-hund.php). Ein einzelnes Foto → nur das Hauptbild, keine Leiste.
   Hochformat (3/4) passt zu Hundefotos und vermeidet den Kopf-Beschnitt des
   alten 4/3-Zuschnitts.
   ────────────────────────────────────────────────────────────────────────── */
.dog-detail .gallery__main img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: block;
}
.dog-detail .gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.dog-detail .gallery__thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow);
  outline-offset: 2px;
}
.dog-detail .gallery__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: opacity .15s ease;
}
.dog-detail .gallery__thumb:hover img { opacity: .82; }
.dog-detail .gallery__thumb.is-active { outline: 3px solid var(--teal); }

/* ──────────────────────────────────────────────────────────────────────────
   Antrag-Formulare während der Gründung gesperrt (pvf_forms_locked):
   graue „vormerken per E-Mail"-Karte statt des Live-Formulars.
   ────────────────────────────────────────────────────────────────────────── */
.antrag--locked {
  background: #f1f3f2;
  border: 1px solid #dfe4e2;
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.antrag-locked__inner {
  text-align: center;
  padding: 34px 26px;
  color: #4a5560;
}
.antrag-locked__badge {
  display: inline-block;
  background: #e2e7e5;
  color: #5a6a70;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.antrag-locked__inner h3 { color: var(--teal); margin: 0 0 8px; }
.antrag-locked__inner p { max-width: 46ch; margin: 0 auto 20px; line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────────────────
   News/Aktuelles — card list (index.php) + Beitrag (single.php).
   ────────────────────────────────────────────────────────────────────────── */
.news-list { display: flex; flex-direction: column; gap: 22px; max-width: 860px; }
.news-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.news-card:not(:has(.news-card__media)) { grid-template-columns: 1fr; }
.news-card__media { display: block; position: relative; min-height: 190px; }
.news-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-card__body { padding: 24px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.news-card__date {
  font-size: .82rem;
  color: var(--neutral);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.news-card__body h2 { font-size: 1.3rem; margin-bottom: 8px; }
.news-card__body h2 a { color: var(--ink); }
.news-card__body h2 a:hover { color: var(--teal); }
.news-card__body p { font-size: .96rem; margin-bottom: 14px; }
.news-card__more { font-weight: 700; font-size: .9rem; color: var(--teal); margin-top: auto; }
@media (max-width: 640px) {
  .news-card { grid-template-columns: 1fr; }
  .news-card__media { height: 200px; min-height: 0; }
}

.news-empty {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 28px;
  max-width: 860px;
  color: var(--neutral);
}

/* Beitrag: Beitragsbild oberhalb des Texts */
.news-figure { margin: 0 0 26px; }
.news-figure img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r); display: block; }

/* WP-Pagination im Seitenstil */
.pagination { margin-top: 30px; }
.pagination .nav-links { display: flex; gap: 8px; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--teal);
}
.pagination .page-numbers.current { background: var(--teal); border-color: var(--teal); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--teal); }

/* ──────────────────────────────────────────────────────────────────────────
   Aktuelles-Teaser (Startseite) — Karte = Foto + Datum + Titel + Weiterlesen.
   Beiträge ohne Foto rendern als Teal-Karte mit Pfoten-Wasserzeichen.
   ────────────────────────────────────────────────────────────────────────── */
.news-teaser .nt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.news-teaser .nt-head h2{margin-top:10px}
.nt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nt-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.nt-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,45,55,.14)}
.nt-media{position:relative;height:230px}
.nt-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nt-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;align-items:flex-start}
.nt-date{font-size:.78rem;color:var(--neutral);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.nt-body h3{font-size:1.12rem;margin:7px 0 8px;line-height:1.4}
.nt-body p{font-size:.92rem;color:var(--muted);margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-card--plain .nt-body p{color:#d7e4ea}
.nt-more{font-weight:700;font-size:.88rem;color:var(--teal);margin-top:auto}
.nt-card--plain{background:var(--teal);border-color:var(--teal);position:relative}
.nt-card--plain .nt-body{position:relative;z-index:1}
.nt-card--plain .nt-date{color:#a9c3cd}
.nt-card--plain h3{color:#fff;font-size:1.35rem;line-height:1.45;max-width:24ch}
.nt-card--plain .nt-more{color:var(--yellow)}
.nt-card--plain .nt-paw{position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;color:rgba(255,255,255,.08)}
@media (max-width:960px){.nt-grid{grid-template-columns:1fr 1fr}.nt-card--plain{grid-column:span 2}}
@media (max-width:640px){.nt-grid{grid-template-columns:1fr}.nt-card--plain{grid-column:auto}}

/* ──────────────────────────────────────────────────────────────────────────
   Zuhause-gesucht-Teaser (Startseite) — Team-Karten-Stil statt Zeilenliste.
   ────────────────────────────────────────────────────────────────────────── */
.dog-cards{margin-top:34px}
.tcard--dog .tcard__img{height:230px}
.tcard--dog .tcard__img img{object-position:50% 50%}
.tcard--dog .meta{font-size:.9rem;color:var(--neutral);margin-bottom:10px}
.tcard--dog .tcard__body a{margin-top:auto;padding-top:14px}

/* ──────────────────────────────────────────────────────────────────────────
   News-Beitrag: Gutenberg-Inhalte professionell gesetzt.
   ────────────────────────────────────────────────────────────────────────── */
.prose blockquote{border-left:3px solid var(--teal);margin:26px 0;padding:4px 0 4px 22px;font-family:var(--head);font-size:1.12rem;font-style:italic;color:var(--teal)}
.prose blockquote p{margin:0;color:inherit}
.prose blockquote cite{display:block;margin-top:8px;font-family:var(--body);font-style:normal;font-size:.85rem;color:var(--neutral)}
.prose ol{margin:0 0 18px 22px}
.prose ol li{margin-bottom:8px}
.prose figure{margin:26px 0}
.prose figure img{width:100%;height:auto;border-radius:var(--r);display:block}
.prose figcaption{font-size:.84rem;color:var(--neutral);margin-top:8px;text-align:center}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose h2:first-child{margin-top:0}
.prose p a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(33,87,108,.4)}
.prose p a:not(.btn):hover{text-decoration-color:var(--teal)}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile-Fixes (2026-07): kein Seitwärts-Scroll, Markenname nie abgeschnitten.
   ────────────────────────────────────────────────────────────────────────── */
/* Sicherheitsnetz: kleine Ausreißer dürfen nie horizontales Scrollen freischalten */
html, body { overflow-x: clip; }

/* Gated-Formular-Buttons: lange Labels dürfen umbrechen statt auszubrechen */
.antrag-locked__inner .btn { white-space: normal; max-width: 100%; line-height: 1.35; }

/* Markenname: eine Zeile, Suffix (V.i.G. / e.V.) als eigenes Element */
.brand__text { white-space: nowrap; }
.brand__suffix { font-size: .72em; }
@media (max-width: 880px) {
  .brand { font-size: 1.02rem; gap: 8px; }
  .brand img { height: 32px; }
  .brand__text { display: flex; flex-direction: column; line-height: 1.15; }
  .brand__suffix { font-size: .64em; color: var(--neutral); letter-spacing: .04em; font-family: var(--body); font-weight: 600; }
}
@media (max-width: 400px) {
  .brand { font-size: .95rem; }
  .brand img { height: 28px; }
}