/* ============================================================
   Kindertageseinrichtungen — Übersicht + Landingpage.
   Ported from the mockup.
   The chrome, page-intro, section headings, filter dropdown, Jobs split and footer
   come from design.css; this file only adds the Kita card grid and prose block.
   ============================================================ */

/* Kita card grid: image + name (+ Ort) + optional "mit Familienzentrum". */
.kgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap-wide)}
/* Column layout so the text link can sit at the bottom edge of the body: names run to one
   or two lines, and without this the link would ride up with the shorter names and a row
   of cards would show it at three different heights. Same contract as .card in design.css. */
.kcard{background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.10); display:flex; flex-direction:column}
.kcard__media{overflow:hidden}
/* Same ratio contract as the News card: `height:auto` keeps aspect-ratio in charge of the
   box once a featured image brings its own width/height attributes along. */
.kcard__media img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .3s ease}
/* Card hover: a smooth zoom on the image (WCAG AA: colour/contrast unchanged; motion is
   suppressed for users who ask for reduced motion). */
.kcard:hover .kcard__media img,.kcard:focus-within .kcard__media img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){
  .kcard__media img{transition:none}
  .kcard:hover .kcard__media img,.kcard:focus-within .kcard__media img{transform:none}
}
.kcard__body{padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; flex:1}
.kcard__name{font-weight:700; font-size:1.05rem; line-height:1.32; margin-bottom:.9rem}
.kcard__name a{color:inherit; text-decoration:none}
/* The text link that opens the facility, styled and placed exactly like the one on a News
   card (.card .link-arrow in design.css): 14/20 and pushed to the bottom of the body. */
.kcard .link-arrow{font-size:14px; line-height:20px; margin-top:auto}
/* Same treatment as the date on a News card (.card__date in design.css): a quiet line that says
   what the entry is, above the name rather than competing with it. */
.kcard__fz{color:var(--ink); font-size:14px; line-height:21px; font-weight:400; margin-bottom:.5rem}

/* The intro text of the archive's own markup, not the prose block.
 *
 * Scoped away from `.awo-prose` because the editor loads every section stylesheet at once while a
 * page on the front loads only its own: unscoped, this width reached the prose block on every
 * screen of the editor and its text broke lines at 820px where the page breaks them at
 * --content-col. On the front nothing changes -- where both sheets load, content.css already wins
 * (measured: 719px on /einrichtungen/, /allgemeine-inhaltsseite/ and /jugendwerk/) -- and this
 * keeps the width for the one case it is for, the archive rendered from its own template. */
.container:not(.awo-prose) > .prose{max-width:820px; color:var(--ink2); line-height:var(--lh-lead)}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}  /* keep the section->section gap at --section-gap */

@media(max-width:860px){ .kgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .kgrid{grid-template-columns:1fr} }