/* Groenhart — Projectdetail "Gezinstuin in Hilversum". Gedeelde componenten staan in style.css.
   Opbouw als een tekeningenset: titelblok, blad 1 (situatie voor), wensen, blad 2 (ontwerp),
   staalkaart, bloeikalender, fotoreeks en een jaarring voor de nazorg. */

.pd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.pd-hero { min-height: min(calc(100svh - 36px), 860px); }
.pd-hero::before {
  background:
    linear-gradient(180deg, rgba(16, 26, 20, .72) 0%, rgba(16, 26, 20, .4) 26%, rgba(16, 26, 20, .3) 44%, rgba(16, 26, 20, .62) 74%, rgba(16, 26, 20, .88) 100%),
    linear-gradient(90deg, rgba(16, 26, 20, .58) 0%, rgba(16, 26, 20, .22) 50%, rgba(16, 26, 20, 0) 75%);
}
.pd-hero .hero__inner { gap: var(--space-l); }
.pd-hero__text { max-width: 54rem; }
.pd-hero .hero__title { max-width: 15ch; }
.pd-hero .hero__lead { max-width: 44ch; }
.pd-hero .crumbs { font-size: var(--fs-small); color: var(--tekst-licht); }
.pd-hero .label { color: var(--tekst-licht); }
.pd-hero .crumbs [aria-current] { color: var(--tekst-licht); }
@media (max-width: 599px) {
  .pd-hero .hero__inner { padding-bottom: 2rem; }
  .pd-hero::before {
    background: linear-gradient(180deg, rgba(16, 26, 20, .8) 0%, rgba(16, 26, 20, .72) 24%, rgba(16, 26, 20, .6) 40%, rgba(16, 26, 20, .66) 50%, rgba(16, 26, 20, .88) 66%, rgba(16, 26, 20, .94) 100%);
  }
}

/* --------------------------------------------------------------------------
   2. Titelblok (projectgegevens)
   -------------------------------------------------------------------------- */
.pd-tb-sec { padding-top: var(--space-xl); }
.pd-tb > div:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .pd-tb { grid-auto-columns: .8fr 1.35fr 1.2fr 1.1fr 1fr; }
  .pd-tb > div:last-child { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Plattegronden (gedeelde stijl voor blad 1 en blad 2)
   -------------------------------------------------------------------------- */
.pd-plan .plan-label { font-size: 12px; }
.pd-plan .plan-note { font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.pd-plan .plan-code { font-size: 11px; }
.pd-moss { fill: url(#pd-mos); stroke: var(--kiezel); stroke-width: .8; stroke-dasharray: 3 4; }
.pd-klinkers { fill: url(#pd-klinker); stroke: var(--bos); stroke-width: 1.2; }
.pd-steel { fill: none; stroke: var(--bos-diep); stroke-width: 3; stroke-linecap: square; }
.pd-hammock { fill: none; stroke: var(--bos-diep); stroke-width: 3.2; stroke-linecap: round; }
.pd-furniture rect { fill: var(--linnen-licht); stroke: var(--bos); stroke-width: .9; }
.pd-lamps circle { fill: var(--linnen-licht); stroke: var(--kiezel); stroke-width: 1; }
.pd-lamps path { stroke: var(--kiezel); stroke-width: .9; }
.pd-plan .plan-border { fill: #E6E7DA; }
.pd-codes circle { fill: var(--linnen-licht); stroke: var(--bos); stroke-width: 1; }
.pd-codes text { fill: var(--bos-diep); font-family: var(--sans); font-stretch: 85%; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.pd-mark circle, .pd-disc circle { fill: var(--bos); stroke: var(--linnen-licht); stroke-width: 2; transition: fill var(--t-fast); }
.pd-mark text, .pd-disc text { fill: var(--linnen-licht); font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0; }
/* Plattegronden op smalle schermen: tekst en codes in user units vergroten, zodat ze rond 9-10px blijven */
@media (max-width: 699px) {
  .pd-plan .plan-label { font-size: 15px; letter-spacing: .08em; }
  .pd-plan .plan-code { font-size: 15px; }
  .pd-plan text.plan-size { font-size: 16px; }
  .pd-codes circle { r: 13.5px; }
  .pd-codes text { font-size: 14.5px; transform: translateY(1.7px); }
  .pd-mark text, .pd-disc text { font-size: 15px; transform: translateY(.7px); }
  .pd-mark circle, .pd-disc circle { r: 15px; }
}
/* Blad 1 staat tussen 960 en 1399px in een smalle kolom (ongeveer 290–330px) */
@media (min-width: 960px) and (max-width: 1399px) {
  .pd-plan--before .plan-label { font-size: 16px; letter-spacing: .08em; }
  .pd-plan--before .plan-code { font-size: 16px; }
  .pd-plan--before text.plan-size { font-size: 17px; }
  .pd-plan--before .pd-mark text { font-size: 16px; transform: translateY(1px); }
  .pd-plan--before .pd-mark circle { r: 16px; }
}

/* Zone-chip, zoals op de tekening */
.pd-chip {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bos); color: var(--linnen-licht);
  font-size: .75rem; font-weight: 700; line-height: 1;
}

/* --------------------------------------------------------------------------
   3. Uitgangssituatie
   -------------------------------------------------------------------------- */
.pd-before { padding-top: var(--space-2xl); }
.pd-before__grid { display: grid; gap: var(--space-xl) var(--gap); }
.pd-before__text { display: grid; gap: 1.1rem; align-content: start; max-width: 60ch; }
.pd-before__text > p:not(.lead) { color: var(--kiezel); }
.pd-before__facts { margin-top: var(--space-m); }
.pd-before__facts > div { padding: .85rem 0; }
@media (min-width: 640px) { .pd-before__facts > div { grid-template-columns: 8.5rem 1fr; } }
.pd-before__plan .sheet { max-width: 460px; }

.pd-marks { display: grid; margin-top: 1rem; max-width: 460px; border-top: 1px solid var(--steen-lijn); }
.pd-marks li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--steen-lijn); font-size: var(--fs-small); color: var(--kiezel); }
.pd-marks__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bos); color: var(--linnen-licht); font-size: .7rem; font-weight: 700; line-height: 1;
}
@media (min-width: 960px) {
  .pd-before__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-before__text { grid-column: 4 / span 4; }
  .pd-before__plan { grid-column: 9 / -1; margin-top: -.25rem; }
}
@media (min-width: 1200px) {
  .pd-before__text { grid-column: 4 / span 4; padding-right: var(--gap); }
}

/* --------------------------------------------------------------------------
   5. Het ontwerp: tekenbord
   -------------------------------------------------------------------------- */
.pd-board { display: grid; gap: var(--space-l) var(--gap); }
.pd-board__plan { width: 100%; max-width: 560px; justify-self: center; }
.pd-zones { display: grid; gap: 0; border-top: 1px solid var(--steen-lijn); }
.pd-zones li { display: grid; grid-template-columns: 26px 1fr; gap: .35rem .9rem; padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--steen-lijn); transition: background-color var(--t-fast); }
.pd-zones .pd-chip { grid-row: span 2; margin-top: .15rem; transition: background-color var(--t-fast); }
.pd-zones__t { font-family: var(--serif); font-size: 1.4rem; font-weight: 380; line-height: 1.2; }
.pd-zones li > :not(.pd-chip) { grid-column: 2; }
.pd-zones .pd-chip { grid-row: 1 / span 3; }
/* De wens van het gezin, als notitie bij de zone (Newsreader, met de groene stip van de tekening) */
.pd-zones__wish { position: relative; padding-left: 1.05rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 380; line-height: 1.35; color: var(--inkt); max-width: 34ch; }
.pd-zones__wish::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--mos); }
@media (forced-colors: active) { .pd-zones__wish::before { background: CanvasText; } }
.pd-plan--design .pd-wishpins circle { fill: var(--mos); stroke: var(--linnen-licht); stroke-width: 2; }
/* Blad 1 en blad 2 horen bij elkaar: geen dubbele sectie-afstand tussen de twee linnen secties */
.pd-before + .pd-design { padding-top: 0; }
.pd-zones p { color: var(--kiezel); font-size: var(--fs-small); max-width: 46ch; }
.pd-zones--right { margin-top: calc(-1 * var(--space-l)); border-top: 0; }

/* Zone aanwijzen: de bijbehorende vlakken in de tekening lichten op (zonder JS) */
.pd-plan--design .zone { transition: opacity var(--t) var(--ease); }
.pd-board:has(.pd-zones li:hover) .pd-plan--design .zone { opacity: .28; }
.pd-board:has([data-zone="a"]:hover) .zone--a,
.pd-board:has([data-zone="b"]:hover) .zone--b,
.pd-board:has([data-zone="c"]:hover) .zone--c,
.pd-board:has([data-zone="d"]:hover) .zone--d,
.pd-board:has([data-zone="e"]:hover) .zone--e,
.pd-board:has([data-zone="f"]:hover) .zone--f { opacity: 1 !important; }
.pd-board:has([data-zone="a"]:hover) .pd-disc--a circle,
.pd-board:has([data-zone="b"]:hover) .pd-disc--b circle,
.pd-board:has([data-zone="c"]:hover) .pd-disc--c circle,
.pd-board:has([data-zone="d"]:hover) .pd-disc--d circle,
.pd-board:has([data-zone="e"]:hover) .pd-disc--e circle,
.pd-board:has([data-zone="f"]:hover) .pd-disc--f circle { fill: var(--mos); }
.pd-zones li:hover .pd-chip { background: var(--mos); }

@media (min-width: 700px) and (max-width: 1099px) {
  .pd-board { grid-template-columns: 1fr 1fr; }
  .pd-board__plan { grid-column: 1 / -1; }
  .pd-zones--right { margin-top: 0; border-top: 1px solid var(--steen-lijn); }
}
@media (min-width: 1100px) {
  .pd-board { grid-template-columns: minmax(0, 1fr) minmax(0, 540px) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 4vw, 4.5rem); }
  .pd-board__plan { grid-column: 2; grid-row: 1; max-width: none; }
  .pd-zones--left { grid-column: 1; grid-row: 1; }
  .pd-zones--right { grid-column: 3; grid-row: 1; margin-top: 0; border-top: 1px solid var(--steen-lijn); }
  .pd-zones li { padding: 1.35rem 0 1.45rem; }
}

.pd-key {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: var(--space-l) auto 0; max-width: 760px;
  font-size: var(--fs-xs); color: var(--kiezel);
}
.pd-key b { font-weight: 700; color: var(--bos); letter-spacing: .04em; margin-right: .2rem; }
.pd-key .latin { font-size: 1.08em; }
.pd-key__title { width: 100%; font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
@media (min-width: 1100px) { .pd-key { justify-content: center; } .pd-key__title { text-align: center; } }

.pd-midcta {
  display: grid; gap: var(--space-m); justify-items: start;
  margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--steen-lijn);
}
.pd-midcta__text { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 340; line-height: 1.32; max-width: 30ch; }
@media (max-width: 559px) { .pd-midcta .btn { width: 100%; } }
@media (min-width: 960px) {
  .pd-midcta { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .pd-midcta__text { grid-column: 4 / span 5; }
  .pd-midcta .btn-row { grid-column: 9 / -1; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   6. Materialen: staalkaart
   -------------------------------------------------------------------------- */
.pd-mats { display: grid; border-top: 1px solid var(--steen-lijn); }
.pd-matitem {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.1rem; row-gap: .25rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--steen-lijn);
}
.pd-swatch { grid-row: 1 / span 3; width: 76px; height: 76px; }
.pd-matitem__name { overflow-wrap: anywhere; font-family: var(--serif); font-size: 1.35rem; font-weight: 380; line-height: 1.2; }
.pd-matitem__spec { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--mos); line-height: 1.45; }
.pd-matitem__why { font-size: var(--fs-small); color: var(--kiezel); margin-top: .35rem; }
@media (min-width: 960px) {
  /* Vijf gelijke kolommen; de scheidingslijn staat midden in de tussenruimte */
  .pd-mats { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2.3rem; border-top: 0; }
  .pd-matitem {
    position: relative;
    grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; row-gap: .4rem;
    padding: 0; border-bottom: 0;
  }
  .pd-matitem + .pd-matitem::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.15rem; border-left: 1px solid var(--steen-lijn); }
  .pd-swatch { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: .9rem; }
}
@media (min-width: 1280px) {
  .pd-mats { margin-left: calc((100% + var(--gap)) / 4); }
}

/* --------------------------------------------------------------------------
   7. Beplanting (donker): beeldpaar + bloeikalender
   -------------------------------------------------------------------------- */
.pd-plants__grid { display: grid; gap: var(--space-xl) var(--gap); }
.pd-pair { position: relative; max-width: 520px; }
.pd-pair__a { width: 74%; }
.pd-pair__a .caption { max-width: 52%; flex-direction: column; gap: .15rem; }
.pd-pair__b { position: relative; z-index: 1; width: 54%; margin: -46% 0 0 auto; }
.pd-pair__b .media { outline: 8px solid var(--bos-diep); }

.pd-bloom { display: grid; gap: var(--space-m); align-content: start; }
.bloom { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-small); }
.bloom th, .bloom td { padding: 0; }
.bloom thead th {
  height: 2.25rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; color: var(--mist); text-align: center;
  border-bottom: 1px solid rgba(236, 231, 219, .4);
}
.bloom thead .bloom__head { text-align: left; width: 46%; letter-spacing: .16em; text-transform: uppercase; font-stretch: 85%; }
.bloom__group th {
  padding: 1.25rem 0 .45rem; text-align: left;
  font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos-licht);
}
.bloom tbody tr:not(.bloom__group) { border-bottom: 1px solid var(--lijn-donker); }
.bloom tbody th[scope="row"] { text-align: left; font-weight: 400; padding: .6rem .75rem .6rem 0; line-height: 1.3; vertical-align: middle; color: var(--tekst-licht); }
.bloom .latin { font-size: 1.1em; }
.bloom__nl { display: block; font-size: var(--fs-xs); color: var(--mist); margin-top: .15rem; }
.bloom td { position: relative; border-left: 1px dotted var(--lijn-donker); }
/* Bloeikleur per maand, als de staaltjes in een kwekerscatalogus: geen balk, maar een vakje in de kleur van de bloem */
.bloom td.on::before, .bloom td.st::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); border-radius: 2px;
}
.bloom td.on::before { background: var(--c, var(--mos-licht)); box-shadow: inset 0 0 0 1px rgba(16, 26, 20, .25); }
.bloom td.st::before { border: 1px dashed var(--c-st, #CDBE8E); }

.pd-bloom__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-xs); color: var(--mist); }
.pd-bloom__legend li { display: inline-flex; align-items: center; gap: .55rem; }
.pd-bloom__sw { width: 13px; height: 13px; border-radius: 2px; }
.pd-bloom__sw--on { background: linear-gradient(90deg, #9A9CC8 0 50%, #E9CFC8 50%); }
.pd-bloom__sw--st { border: 1px dashed #CDBE8E; }
@media (forced-colors: active) {
  .bloom td.on::before, .pd-bloom__sw--on { background: CanvasText; }
}

.pd-bloom__note { margin-top: var(--space-m); max-width: 40ch; font-size: clamp(1.2rem, 1.08rem + .5vw, 1.5rem); }

/* Telefoon: naam op één regel, daaronder twaalf maandvakjes over de volle breedte.
   De maandletters staan één keer bovenaan. */
@media (max-width: 639px) {
  .bloom, .bloom thead, .bloom tbody { display: block; }
  .bloom tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bloom thead tr { position: sticky; top: var(--header-h); z-index: 1; background: var(--bos-diep); }
  .bloom thead .bloom__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bloom thead th { height: 2rem; }
  .bloom__group th { grid-column: 1 / -1; padding-top: 1.1rem; }
  .bloom tbody tr:not(.bloom__group) { padding-bottom: .75rem; }
  .bloom tbody th[scope="row"] { grid-column: 1 / -1; padding: .7rem 0 .45rem; }
  .bloom__nl { display: inline; margin: 0 0 0 .45rem; }
  .bloom td { height: 14px; }
  .bloom td:first-of-type { border-left: 0; }
  .bloom td.on::before, .bloom td.st::before { width: 11px; height: 11px; }
}
@media (min-width: 640px) {
  .bloom thead .bloom__head { width: 40%; }
}
@media (min-width: 960px) {
  .pd-plants__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-pair { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); }
  .pd-bloom { grid-column: 6 / -1; }
  .bloom { font-size: var(--fs-body); }
  .bloom thead .bloom__head { width: 38%; }
  .bloom tbody th[scope="row"] { padding-block: .75rem; }
}

/* --------------------------------------------------------------------------
   8. Fotoreeks
   -------------------------------------------------------------------------- */
.pd-series { display: grid; gap: var(--space-l) var(--gap); }
.pd-shot--2 { width: 66%; justify-self: end; }
.pd-band { margin-block: var(--space-2xl); }
.pd-band__media { aspect-ratio: 4 / 3; }
.pd-band__media img { object-position: 50% 45%; }
.pd-band figcaption { margin-top: .7rem; }
.pd-band .caption { display: flex; }
.pd-series--b .pd-series__note { max-width: 32ch; }
@media (min-width: 760px) {
  .pd-band__media { aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; }
}
@media (min-width: 960px) {
  .pd-series { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-shot--1 { grid-column: 1 / span 8; }
  .pd-shot--2 { grid-column: 9 / -1; width: auto; margin-top: 9rem; }
  .pd-shot--4 { grid-column: 2 / span 7; }
  .pd-series--b .pd-series__note { grid-column: 10 / -1; align-self: end; margin-bottom: 3rem; }
}
@media (min-width: 1200px) {
  .pd-band__media { aspect-ratio: 21 / 9; }
}

/* --------------------------------------------------------------------------
   9. Nazorg: jaarring + rondes, en meer projecten
   -------------------------------------------------------------------------- */
.pd-year { display: grid; gap: var(--space-xl) var(--gap); }
.pd-ring { width: min(100%, 230px); }
.pd-ring svg { width: 100%; height: auto; overflow: visible; }
.pd-ring__line { fill: none; stroke: var(--bos); stroke-width: 1.2; }
.pd-ring__ticks { stroke: var(--bos); stroke-width: 1; }
.pd-ring__inner { fill: none; stroke: var(--lijn-sterk); stroke-width: .8; stroke-dasharray: 2 3; }
.pd-ring__core { fill: var(--bos); }
.pd-ring__months text { fill: var(--kiezel); font-family: var(--sans); font-stretch: 85%; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.pd-ring__stops circle { fill: var(--bos); stroke: var(--linnen-licht); stroke-width: 2; }
.pd-ring__stops text { fill: var(--linnen-licht); font-family: var(--sans); font-size: 11px; font-weight: 700; }
.pd-ring__cap { margin-top: .8rem; font-size: var(--fs-xs); color: var(--kiezel); }

.pd-rounds { display: grid; gap: 0 var(--gap); }
.pd-rounds li { display: grid; gap: .4rem; align-content: start; padding: 1.2rem 0 1.4rem; border-top: 1px solid var(--steen-lijn); }
.pd-rounds__m { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.pd-rounds__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bos); color: var(--linnen-licht); font-size: .7rem; letter-spacing: 0; line-height: 1;
}
.pd-rounds__t { font-family: var(--serif); font-size: 1.5rem; font-weight: 360; line-height: 1.2; }
.pd-rounds p { color: var(--kiezel); max-width: 40ch; }
@media (min-width: 640px) { .pd-rounds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .pd-year { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pd-ring { grid-column: 1 / span 3; width: 100%; max-width: 280px; }
  .pd-rounds { grid-column: 5 / -1; }
}

.pd-more {
  display: grid; gap: var(--space-m) var(--gap);
  margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--steen-lijn);
}
.pd-more__label { align-self: start; font-size: var(--fs-label); }
.pd-more__list { border-top: 1px solid var(--steen-lijn); }
.pd-more__list li { border-bottom: 1px solid var(--steen-lijn); }
.pd-more__link {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 24px; grid-template-areas: "thumb place arrow" "thumb title arrow" "thumb meta arrow";
  column-gap: 1.1rem; row-gap: .1rem; align-items: center; padding: 1rem 0; text-decoration: none; color: inherit;
}
.pd-more__thumb { grid-area: thumb; width: 84px; aspect-ratio: 4 / 3; align-self: center; }
.pd-more__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-more__place { grid-area: place; align-self: end; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.pd-more__title { grid-area: title; align-self: end; font-family: var(--serif); font-size: clamp(1.35rem, 1.15rem + .8vw, 1.9rem); font-weight: 340; line-height: 1.12; letter-spacing: -.012em; }
.pd-more__meta { grid-area: meta; align-self: start; margin-top: .2rem; font-size: var(--fs-small); color: var(--kiezel); }
.pd-more__arrow { grid-area: arrow; width: 22px; height: 22px; color: var(--bos); transition: transform var(--t) var(--ease); }
.pd-more__link:hover .pd-more__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.pd-more__link:hover .pd-more__arrow, .pd-more__link:focus-visible .pd-more__arrow { transform: translateX(4px); }
.pd-more__all { justify-self: start; }
@media (min-width: 960px) {
  .pd-more { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pd-more__label { grid-column: 1 / span 3; padding-top: .35rem; }
  .pd-more__list, .pd-more__all { grid-column: 4 / -1; }
  .pd-more__link { grid-template-columns: 132px minmax(0, 1fr) auto 28px; grid-template-areas: "thumb title place arrow" "thumb meta place arrow"; column-gap: var(--gap); padding: 1.1rem 0; }
  .pd-more__thumb { width: 132px; }
  .pd-more__place { align-self: center; }
}