/* Plantpagina /planten/<slug> (ontwerp 2026-10-01).
 *
 * Geladen na site.css en plantengids.css: de tokens komen uit site.css, de iconen (.td-pg-ico, sprite),
 * het kleurvlak met beginletter (.td-pg-letter) en het typelabel (.td-pg-label) uit plantengids.css.
 * Eigen klassen .td-pd-*; van de oude .td-plant-* blijven alleen de voetnoot, de "andere bron"-regel, de
 * Latijnse naam en de bronnenlijst, en die worden hier bijgesteld. Mobiel eerst, breakpoints 600 / 900 / 980. */

.td-pd { padding: 20px 0 56px; }
.td-pd .td-plant-voorbeeld { margin-bottom: 14px; }

/* ── Kruimelpad en terug ───────────────────────────────────────────────── */
.td-pd-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.td-pd-nav .td-kruimels { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.td-pd-terug {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px;
  font-size: .93rem; font-weight: 650; color: var(--td-ink); text-decoration: none;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(16, 38, 28, .1); border-radius: 999px;
  transition: background-color .2s, border-color .2s;
}
.td-pd-terug:hover { background: #fff; border-color: var(--td-primary-donker); }
.td-pd-terug .td-pg-ico { color: var(--td-primary-donker); }
/* Op een smal scherm staat het kruimelpad er al; de terug-chip gaat eronder, op zijn eigen regel. */
@media (max-width: 599.98px) { .td-pd-nav .td-kruimels { flex: 1 1 100%; } }

/* ── Hero: foto en titel ───────────────────────────────────────────────── */
.td-pd-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 26px; }
.td-pd-foto { margin: 0; min-width: 0; }
.td-pd-foto-beeld {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--td-radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .4), rgba(16, 38, 28, .3)), var(--pd-kleur, #6fae62);
  box-shadow: 0 2px 4px rgba(16, 38, 28, .05), 0 22px 50px rgba(16, 38, 28, .12);
}
.td-pd-foto-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.td-pd-foto-leeg .td-pg-letter { font-size: clamp(5rem, 22vw, 8rem); }
.td-pd-foto figcaption { margin-top: 8px; padding: 0 4px; font-size: .84rem; color: var(--td-tekst-zacht); overflow-wrap: anywhere; }
.td-pd-foto figcaption a { color: var(--td-tekst-zacht); }

.td-pd-titel { min-width: 0; }
.td-pd-titel h1 { margin: 0; overflow-wrap: anywhere; }
.td-pd-titel .td-plant-wet { margin: 6px 0 4px; font-size: 1.2rem; font-style: italic; color: var(--td-tekst-zacht); overflow-wrap: anywhere; }
.td-pd-titel .td-plant-soort { margin: 0 0 16px; color: var(--td-tekst-zacht); }
.td-pd-lead { margin: 0 0 22px; font-size: 1.06rem; color: var(--td-tekst); max-width: 38rem; }
.td-pd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.td-pd-cta .td-btn { gap: 8px; }
.td-pd-cta .td-pg-ico { width: 20px; height: 20px; }
@media (max-width: 599.98px) { .td-pd-cta .td-btn { flex: 1 1 100%; justify-content: center; } }

/* ── Kernfeiten als tegels ─────────────────────────────────────────────── */
.td-pd-kern { margin-bottom: 30px; }
/* dense: de brede bloeitegel laat geen gat achter; een losse tegel schuift erboven in. */
.td-pd-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; margin: 0; }
.td-pd-tegel {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 16px;
  background: var(--td-vlak); border: 1px solid rgba(16, 38, 28, .08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 38, 28, .04), 0 8px 24px rgba(16, 38, 28, .05);
}
.td-pd-tegel dt { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; color: var(--td-tekst-zacht); }
.td-pd-tegel-ico {
  width: 32px; height: 32px; padding: 7px; flex: none; border-radius: 50%;
  color: var(--td-primary-donker); background: var(--td-vlak-zacht);
}
.td-pd-dwars { transform: rotate(90deg); }
.td-pd-tegel dd { margin: 0; font-family: var(--td-serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; color: var(--td-ink); overflow-wrap: anywhere; }
.td-pd-tegel dd::first-letter { text-transform: uppercase; }
.td-pd-tegel .td-plant-alt { font-family: var(--td-sans); font-weight: 400; }
.td-pd-tegel-bloei { grid-column: 1 / -1; }
.td-pd-bloeibalk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 10px; }
.td-pd-bloeibalk i { display: flex; flex-direction: column; align-items: center; gap: 4px; font-style: normal; }
.td-pd-bloeibalk i::before {
  content: ""; align-self: stretch; height: 10px; border-radius: 4px; background: rgba(16, 38, 28, .08);
}
.td-pd-bloeibalk i.is-aan::before { background: var(--pd-kleur, #6fae62); box-shadow: inset 0 0 0 1px rgba(16, 38, 28, .16); }
.td-pd-bloeibalk b { font-family: var(--td-sans); font-size: .68rem; font-weight: 600; color: var(--td-tekst-zacht); }
.td-pd-bloeibalk i[data-nu] b { color: var(--td-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Indeling: inhoudsopgave en secties ────────────────────────────────── */
.td-pd-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.td-pd-inhoud { min-width: 0; }
.td-pd-inhoud-kop { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--td-tekst-zacht); }
.td-pd-inhoud ul {
  display: flex; gap: 8px; list-style: none; margin: 0 calc(-1 * var(--td-gutter)); padding: 2px var(--td-gutter) 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.td-pd-inhoud ul::-webkit-scrollbar { display: none; }
.td-pd-inhoud a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; white-space: nowrap;
  font-size: .92rem; font-weight: 600; color: var(--td-ink); text-decoration: none;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(16, 38, 28, .1); border-radius: 999px;
  transition: background-color .15s, border-color .15s;
}
.td-pd-inhoud a:hover { background: #fff; border-color: var(--td-primary-donker); }

.td-pd-secties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.td-pd-kaart {
  min-width: 0; padding: 20px 18px;
  background: var(--td-vlak); border: 1px solid rgba(16, 38, 28, .08); border-radius: var(--td-radius);
  box-shadow: 0 1px 2px rgba(16, 38, 28, .04), 0 8px 24px rgba(16, 38, 28, .05);
}
.td-pd-kaart h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: clamp(1.35rem, 3vw, 1.65rem); }
.td-pd-kaart h3 { margin: 4px 0 10px; font-size: 1.1rem; }
.td-pd-kop-ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: var(--td-primary-donker); background: var(--td-vlak-zacht); }
.td-pd-kaart.td-tekst p { color: var(--td-tekst); }
.td-pd-uitleg { margin: 0 0 12px; font-size: .92rem; color: var(--td-tekst-zacht); }

.td-pd-feiten { margin: 0; }
.td-pd-feiten > div {
  display: grid; grid-template-columns: minmax(7.5em, 40%) minmax(0, 1fr); gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(16, 38, 28, .07);
}
.td-pd-feiten > div:last-child { border-bottom: 0; padding-bottom: 0; }
.td-pd-feiten dt { color: var(--td-tekst-zacht); }
.td-pd-feiten dd { margin: 0; color: var(--td-ink); font-weight: 550; overflow-wrap: anywhere; }
.td-pd-feiten .td-plant-alt { font-weight: 400; }
.td-pd-kaart .td-tabel-wrap { margin-bottom: 16px; box-shadow: none; }
/* Smallere rijkop dan in site.css (11rem): op een telefoon blijven er dan een paar maanden zichtbaar naast. */
.td-pd-kaart .td-zaaikalender th[scope="row"] { min-width: 7.5rem; }

/* Een horizontale rij kaarten of foto's: op een telefoon vegen, met snap. */
.td-pd-kaart-rij { padding-right: 0; padding-left: 0; }
.td-pd-kaart-rij > h2, .td-pd-kaart-rij > h3, .td-pd-kaart-rij > p { padding: 0 18px; }
.td-pd-rij {
  display: flex; gap: 12px; list-style: none; margin: 0; padding: 4px 18px 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.td-pd-rij > li { flex: 0 0 min(78%, 250px); scroll-snap-align: start; min-width: 0; }

.td-pd-partner {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid rgba(16, 38, 28, .08); border-radius: 18px;
  transition: transform .25s var(--td-ease), box-shadow .25s var(--td-ease);
}
.td-pd-partner:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 38, 28, .1); }
.td-pd-partner:focus-within { outline: 3px solid var(--td-primary-donker); outline-offset: 2px; }
.td-pd-partner-beeld {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .4), rgba(16, 38, 28, .3)), var(--pg-kleur, #6fae62);
}
.td-pd-partner-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.td-pd-partner-beeld .td-pg-letter { font-size: 3rem; }
.td-pd-partner.is-afraden .td-pd-partner-beeld { filter: grayscale(.65); }
.td-pd-partner-tekst { padding: 12px 14px 14px; }
.td-pd-partner h3 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
.td-pd-partner h3 a { color: var(--td-ink); text-decoration: none; }
/* De hele kaart is het aanraakdoel; de voetnootlinks liggen erboven en blijven aan te tikken. */
.td-pd-partner h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.td-pd-partner h3 a:focus-visible { outline: none; }
.td-pd-partner .td-plant-wet { margin: 2px 0 8px; font-size: .88rem; font-style: italic; color: var(--td-tekst-zacht); overflow-wrap: anywhere; }
.td-pd-partner-reden { margin: 0; font-size: .88rem; color: var(--td-tekst-zacht); }
.td-pd-partner-reden .td-plant-noot { position: relative; z-index: 2; }

.td-pd-galerij > li { flex-basis: min(84%, 340px); }
.td-pd-galerij figure { margin: 0; }
.td-pd-galerij img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--td-vlak-zacht); }
.td-pd-galerij figcaption { margin-top: 6px; font-size: .82rem; color: var(--td-tekst-zacht); overflow-wrap: anywhere; }

.td-pd-namen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.td-pd-namen li { padding: 6px 14px; font-size: .95rem; color: var(--td-ink); background: var(--td-papier); border-radius: 999px; overflow-wrap: anywhere; }
.td-pd-namen span { color: var(--td-tekst-zacht); font-size: .88em; }

/* Voetnoten en bronnen */
.td-pd .td-plant-noot a { min-width: 24px; text-align: center; }
.td-pd .td-plant-alt { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.4; color: var(--td-tekst-zacht); }
.td-pd .td-plant-bronnen { margin: 0; padding-left: 1.5em; font-size: .93rem; color: var(--td-tekst-zacht); }
.td-pd .td-plant-bronnen li { margin: 0 0 .4em; padding: 4px 8px; border-radius: 10px; overflow-wrap: anywhere; transition: background-color .3s; }
.td-pd .td-plant-bronnen li:target { background: rgba(223, 245, 106, .45); color: var(--td-ink); }
.td-pd-voet { margin: 6px 4px 0; font-size: .9rem; color: var(--td-tekst-zacht); }

/* ── Breder ────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .td-pd-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .td-pd-tegel { padding: 16px 18px 18px; }
  .td-pd-tegel-bloei { grid-column: span 3; }
  .td-pd-kaart { padding: 24px 26px; }
  .td-pd-kaart-rij { padding-left: 0; padding-right: 0; }
  .td-pd-kaart-rij > h2, .td-pd-kaart-rij > h3, .td-pd-kaart-rij > p { padding: 0 26px; }
  .td-pd-rij { padding: 4px 26px 12px; scroll-padding: 0 26px; }
}
@media (min-width: 900px) {
  .td-pd-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; margin-bottom: 34px; }
  .td-pd-foto-beeld { aspect-ratio: 5 / 4; }
  .td-pd-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-pd-tegel-bloei { grid-column: span 2; }
}
@media (min-width: 980px) {
  .td-pd-lay { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
  .td-pd-lay-enkel { grid-template-columns: minmax(0, 1fr); }
  .td-pd-inhoud { position: sticky; top: 96px; }
  .td-pd-inhoud ul { flex-direction: column; gap: 4px; margin: 0; padding: 0; overflow: visible; }
  .td-pd-inhoud a { display: flex; min-height: 40px; background: transparent; border-color: transparent; }
  .td-pd-inhoud a:hover { background: rgba(255, 255, 255, .8); border-color: rgba(16, 38, 28, .1); }
}

@media (prefers-reduced-motion: reduce) {
  .td-pd-partner, .td-pd-partner:hover { transition: none; transform: none; }
  .td-pd .td-plant-bronnen li { transition: none; }
}