/* ================================================================
   Public kindergarten directory (/centers)
   Scoped under .cd-directory. Colors come only from tokens.css;
   warm tones are used as fills, never as body text.
   ================================================================ */

.cd-directory {
  --cd-primary:      var(--sk-primary);
  --cd-primary-dark: var(--sk-primary-dark);
  --cd-warm-fill:    var(--sk-warning-tint);
  --cd-fresh-fill:   var(--sk-secondary-tint);
  --cd-surface:      var(--sk-warm-surface);
  --cd-bg:           var(--sk-warm-bg);
  --cd-radius:       var(--sk-radius-lg);
  background: var(--cd-bg);
  color: var(--sk-text-primary);
}

.cd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cd-ico { flex: 0 0 auto; vertical-align: middle; }

/* ---------- Hero ---------- */
.cd-hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
  background:
    linear-gradient(180deg, var(--cd-warm-fill) 0%, var(--cd-bg) 100%);
  overflow: hidden;
}
.cd-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/zellige-tile.svg") repeat;
  background-size: 96px;
  opacity: 0.04;
  pointer-events: none;
}
[data-bs-theme="dark"] .cd-hero::after { opacity: 0.08; }
.cd-hero .lp-container { position: relative; z-index: 1; }
.cd-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--sk-sp-md);
  font-family: var(--sk-font-display); font-weight: var(--sk-fw-bold);
  font-size: var(--sk-fs-sm); color: var(--sk-warning-dark);
}
.cd-hero__title {
  margin: 0 0 var(--sk-sp-md);
  max-width: 22ch;
  font-family: var(--sk-font-display); font-weight: var(--sk-fw-extra);
  font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance;
}
.cd-hero__sub {
  margin: 0; max-width: 60ch;
  font-size: 17px; line-height: 1.55; color: var(--sk-text-secondary);
}
.cd-kpis {
  display: flex; flex-wrap: wrap; gap: var(--sk-sp-md);
  margin: var(--sk-sp-xl) 0 0; padding: 0; list-style: none;
}
.cd-kpis li {
  padding: 8px 16px; border-radius: var(--sk-radius-pill);
  background: var(--cd-surface); box-shadow: var(--sk-shadow-sm);
  font-size: var(--sk-fs-sm); color: var(--sk-text-secondary);
}
.cd-kpis strong { font-family: var(--sk-font-display); color: var(--sk-text-primary); font-size: 16px; }

/* ---------- Filters ---------- */
.cd-body { padding-block: 0 var(--lp-section-y); }
.cd-filters {
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--sk-sp-lg));
  padding: var(--sk-sp-lg);
  background: var(--cd-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-card);
  box-shadow: var(--sk-shadow-md);
}
.cd-filters__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sk-sp-md);
}
.cd-field { position: relative; display: block; }
.cd-field input, .cd-field select {
  width: 100%; min-height: 48px;
  padding-block: 10px; padding-inline: 14px;
  border: 2px solid var(--sk-border); border-radius: var(--sk-radius-button);
  background: var(--cd-surface); color: var(--sk-text-primary);
  font-family: var(--sk-font-body); font-size: 15px;
}
.cd-field--search .cd-ico {
  position: absolute; inset-inline-start: 14px; inset-block-start: 50%;
  transform: translateY(-50%); color: var(--sk-text-muted); pointer-events: none;
}
.cd-field--search input { padding-inline-start: 42px; }
.cd-field input:focus-visible, .cd-field select:focus-visible {
  outline: none; border-color: var(--cd-primary);
  box-shadow: 0 0 0 3px var(--sk-primary-tint);
}
.cd-filters__submit { min-height: 48px; }
.js .cd-filters__submit { display: none; }
.js .cd-filters__main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

.cd-pills {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sk-sp-sm);
  margin: var(--sk-sp-md) 0 0; padding: 0; border: 0; min-width: 0;
}
.cd-pill { position: relative; display: inline-flex; cursor: pointer; }
.cd-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cd-pill > span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-inline: 16px;
  border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius-pill);
  background: var(--cd-surface); color: var(--sk-text-secondary);
  font-size: 14px; font-weight: var(--sk-fw-medium);
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.cd-pill:hover > span { border-color: var(--sk-border-dark); color: var(--sk-text-primary); }
.cd-pill input:checked + span {
  background: var(--sk-primary-tint); border-color: var(--cd-primary); color: var(--cd-primary-dark);
  font-weight: var(--sk-fw-semibold);
}
.cd-pill input:focus-visible + span { outline: 3px solid var(--sk-primary-light); outline-offset: 2px; }
.cd-more { display: contents; }
.cd-more[open] .cd-more__list { display: flex; }
.cd-pill--summary { list-style: none; }
.cd-pill--summary::-webkit-details-marker { display: none; }
.cd-more__list { display: none; flex-wrap: wrap; gap: var(--sk-sp-sm); flex-basis: 100%; }

/* ---------- Results ---------- */
.cd-results { margin-block-start: var(--sk-sp-xl); transition: opacity 150ms ease-out; }
.cd-results.is-loading { opacity: 0.5; }
.cd-count {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-md);
  margin: 0 0 var(--sk-sp-lg); color: var(--sk-text-secondary); font-size: 15px;
}
.cd-reset {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cd-primary-dark); font-weight: var(--sk-fw-semibold); text-decoration: underline;
}
.cd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sk-sp-xl); margin: 0; padding: 0; list-style: none;
}

.cd-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--cd-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--cd-radius);
  box-shadow: var(--sk-shadow-sm);
  overflow: hidden;
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.cd-card:hover { box-shadow: var(--sk-shadow-md); transform: translateY(-2px); }
.cd-card__media { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--cd-fresh-fill); }
.cd-card__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-card__placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cd-fresh-fill), var(--cd-warm-fill));
}
.cd-card__logo {
  position: absolute; inset-inline-start: var(--sk-sp-lg); inset-block-end: -26px;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--cd-surface); border: 3px solid var(--cd-surface);
  box-shadow: var(--sk-shadow-sm); overflow: hidden;
}
.cd-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.cd-initials {
  font-family: var(--sk-font-display); font-weight: var(--sk-fw-extra);
  font-size: 20px; color: var(--sk-secondary-dark);
}
.cd-card__body {
  display: flex; flex-direction: column; gap: var(--sk-sp-sm); flex: 1;
  padding: 34px var(--sk-sp-lg) var(--sk-sp-lg);
}
.cd-card__title { margin: 0; font-family: var(--sk-font-display); font-weight: var(--sk-fw-bold); font-size: 18px; line-height: 1.3; }
.cd-card__title a { color: var(--sk-text-primary); text-decoration: none; }
.cd-card__title a:hover { color: var(--cd-primary-dark); }
.cd-card__title a::after { content: ""; position: absolute; inset: 0; }
.cd-card { position: relative; }
.cd-card__actions, .cd-card__actions a { position: relative; z-index: 1; }
.cd-card__place, .cd-card__meta {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 14px; color: var(--sk-text-secondary);
}
.cd-card__meta { color: var(--sk-text-muted); }
.cd-card__short {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--sk-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cd-amenities { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cd-amenities li {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--sk-radius-pill);
  background: var(--sk-warm-sunken); color: var(--sk-text-secondary); font-size: 12.5px;
}
.cd-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--sk-sp-sm);
  margin-block-start: auto; padding-block-start: var(--sk-sp-md);
}
.cd-card__actions .lp-btn { flex: 1 1 auto; }
.cd-btn-sm { min-height: 44px; padding: 8px 16px; font-size: 14px; }

.cd-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--sk-radius-pill);
  background: var(--sk-warm-sunken); color: var(--sk-text-secondary);
  font-size: 12px; font-weight: var(--sk-fw-semibold);
}
.cd-badge--open { background: var(--cd-fresh-fill); color: var(--sk-secondary-dark); }
.cd-badge--verified { background: var(--sk-primary-tint); color: var(--cd-primary-dark); }
.cd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-secondary); flex: 0 0 auto; }

.cd-pager { display: flex; align-items: center; justify-content: center; gap: var(--sk-sp-lg); margin-block-start: var(--sk-sp-2xl); }
.cd-pager__info { color: var(--sk-text-muted); font-size: 14px; }

.cd-empty {
  position: relative; overflow: hidden;
  max-width: 560px; margin: var(--sk-sp-xl) auto; padding: var(--sk-sp-3xl) var(--sk-sp-xl);
  text-align: center; background: var(--cd-surface);
  border: 1px dashed var(--sk-border-dark); border-radius: var(--sk-radius-card);
}
.cd-empty::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/zellige-tile.svg") repeat; background-size: 80px;
  opacity: 0.04; pointer-events: none;
}
[data-bs-theme="dark"] .cd-empty::before { opacity: 0.08; }
.cd-empty > * { position: relative; }
.cd-empty__ico {
  display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--cd-warm-fill); color: var(--sk-warning-dark);
}
.cd-empty h2 { margin: var(--sk-sp-lg) 0 var(--sk-sp-sm); font-family: var(--sk-font-display); font-size: 21px; }
.cd-empty p { margin: 0 auto var(--sk-sp-xl); max-width: 44ch; color: var(--sk-text-secondary); line-height: 1.55; }

/* ---------- Join CTA ---------- */
.cd-join { padding-block: var(--sk-sp-3xl); background: var(--cd-fresh-fill); }
.cd-join__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sk-sp-xl); }
.cd-join h2 { margin: 0 0 6px; font-family: var(--sk-font-display); font-size: 22px; }
.cd-join p { margin: 0; max-width: 56ch; color: var(--sk-text-secondary); }

/* ---------- Detail ---------- */
.cd-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-block: var(--sk-sp-lg); font-size: 14px; color: var(--sk-text-muted);
}
.cd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cd-primary-dark); text-decoration: none; font-weight: var(--sk-fw-semibold); }
.cd-profile__cover {
  aspect-ratio: 21 / 7; border-radius: var(--sk-radius-card); overflow: hidden;
  background: linear-gradient(135deg, var(--cd-fresh-fill), var(--cd-warm-fill));
}
.cd-profile__cover--empty { aspect-ratio: 21 / 4; }
.cd-profile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-profile__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--sk-sp-xl);
  padding-inline: var(--sk-sp-xl); margin-block-start: -44px;
}
.cd-profile__logo {
  display: grid; place-items: center; width: 104px; height: 104px; border-radius: 24px;
  background: var(--cd-surface); border: 4px solid var(--cd-surface); box-shadow: var(--sk-shadow-md); overflow: hidden;
}
.cd-profile__logo img { width: 100%; height: 100%; object-fit: contain; }
.cd-profile__logo .cd-initials { font-size: 32px; }
.cd-profile__id { padding-block-start: 52px; min-width: 0; }
.cd-profile__name {
  margin: 8px 0 6px; font-family: var(--sk-font-display); font-weight: var(--sk-fw-extra);
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; text-wrap: balance;
}
.cd-profile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--sk-text-secondary); }
.cd-profile__cta { display: flex; flex-wrap: wrap; gap: var(--sk-sp-sm); }

.cd-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sk-sp-2xl);
  padding-block: var(--sk-sp-2xl) var(--lp-section-y);
}
.cd-section {
  padding: var(--sk-sp-xl); margin-block-end: var(--sk-sp-xl);
  background: var(--cd-surface); border: 1px solid var(--sk-border); border-radius: var(--cd-radius);
}
.cd-section h2, .cd-contact h2 { margin: 0 0 var(--sk-sp-md); font-family: var(--sk-font-display); font-size: 20px; }
.cd-lead { margin: 0 0 var(--sk-sp-md); font-size: 17px; line-height: 1.55; color: var(--sk-text-primary); }
.cd-prose { max-width: 70ch; line-height: 1.7; color: var(--sk-text-secondary); }
.cd-feature-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sk-sp-md); margin: 0; padding: 0; list-style: none;
}
.cd-feature-list li { display: flex; align-items: center; gap: 10px; color: var(--sk-text-primary); }
.cd-feature-list .cd-ico { color: var(--sk-secondary-dark); }

.cd-aside { display: flex; flex-direction: column; gap: var(--sk-sp-lg); }
.cd-contact {
  position: sticky; inset-block-start: calc(var(--lp-header-h) + 16px);
  padding: var(--sk-sp-xl); background: var(--cd-surface);
  border: 1px solid var(--sk-border); border-inline-start: 4px solid var(--sk-secondary);
  border-radius: var(--cd-radius);
}
.cd-contact ul { display: grid; gap: var(--sk-sp-md); margin: 0 0 var(--sk-sp-lg); padding: 0; list-style: none; }
.cd-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--sk-text-secondary); overflow-wrap: anywhere; }
.cd-contact li .cd-ico { margin-block-start: 2px; color: var(--sk-text-muted); }
.cd-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cd-primary-dark); font-weight: var(--sk-fw-semibold); text-decoration: none; }
.cd-contact li { align-items: center; }
.cd-contact li:first-child { align-items: flex-start; }
.cd-contact a:hover { text-decoration: underline; }
.cd-verified-note {
  display: flex; gap: 10px; padding: var(--sk-sp-lg);
  background: var(--sk-primary-tint); border-radius: var(--cd-radius); color: var(--cd-primary-dark); font-size: 14px;
}
.cd-verified-note p { margin: 0; line-height: 1.5; }
.cd-verified-note span { color: var(--sk-text-secondary); }

/* ---------- Inquiry form ---------- */
.cd-inquiry { scroll-margin-block-start: calc(var(--lp-header-h) + 16px); border-inline-start: 4px solid var(--cd-primary); }
.cd-inquiry:focus { outline: none; }
.cd-form-intro { margin: 0 0 var(--sk-sp-lg); color: var(--sk-text-secondary); }
.cd-form { display: grid; gap: var(--sk-sp-lg); }
.cd-form__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.cd-form__group legend {
  margin-block-end: var(--sk-sp-sm); padding: 0;
  font-family: var(--sk-font-display); font-weight: var(--sk-fw-bold); font-size: 15px;
}
.cd-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-md); }
.cd-form .lp-field input, .cd-form .lp-field select, .cd-form .lp-field textarea { border-color: var(--sk-border); }
.cd-form .lp-field input:focus, .cd-form .lp-field select:focus, .cd-form .lp-field textarea:focus { box-shadow: 0 0 0 3px var(--sk-primary-tint); }
.cd-form .lp-field.is-invalid input, .cd-form .lp-field.is-invalid select { border-color: var(--sk-danger); }
.cd-segment { display: flex; flex-wrap: wrap; gap: var(--sk-sp-sm); }
.cd-segment label { position: relative; cursor: pointer; }
.cd-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cd-segment span {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px;
  border: 2px solid var(--sk-border); border-radius: var(--sk-radius-button);
  font-weight: var(--sk-fw-semibold); color: var(--sk-text-secondary);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.cd-segment input:checked + span { border-color: var(--cd-primary); background: var(--sk-primary-tint); color: var(--cd-primary-dark); }
.cd-segment input:focus-visible + span { outline: 3px solid var(--sk-primary-light); outline-offset: 2px; }
.cd-consent { font-size: 14px; min-height: 44px; align-items: center; cursor: pointer; }
.cd-consent input { width: 20px; height: 20px; }
.cd-consent a { color: var(--cd-primary-dark); font-weight: var(--sk-fw-semibold); }
.cd-consent.is-invalid span { color: var(--sk-danger-dark); }
.cd-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cd-form-alert {
  margin-block-end: var(--sk-sp-lg); padding: var(--sk-sp-md) var(--sk-sp-lg);
  border-radius: var(--sk-radius-button); background: var(--sk-danger-tint); color: var(--sk-danger-dark); font-size: 14px;
}
.cd-form-alert p { margin: 0; }
.cd-form-alert p + p { margin-block-start: 4px; }
.cd-form [data-cd-submit][aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.cd-success { text-align: center; padding-block: var(--sk-sp-xl); }
.cd-success__ico {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--cd-fresh-fill); color: var(--sk-secondary-dark);
  animation: cd-pop 300ms ease-out;
}
.cd-success h2 { margin: var(--sk-sp-lg) 0 var(--sk-sp-sm); }
.cd-success p { margin: 0 auto; max-width: 48ch; color: var(--sk-text-secondary); line-height: 1.55; }
.cd-ref { margin-block-start: var(--sk-sp-md) !important; }
.cd-ref strong { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--sk-text-primary); letter-spacing: 0.06em; }
@keyframes cd-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Homepage teaser ---------- */
.cd-teaser { padding-block: var(--lp-section-y); background: var(--cd-warm-fill); }
.cd-teaser__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sk-sp-2xl); align-items: center; }
.cd-teaser h2 { margin: 0 0 var(--sk-sp-sm); font-family: var(--sk-font-display); font-weight: var(--sk-fw-extra); font-size: clamp(24px, 3vw, 32px); }
.cd-teaser p { margin: 0; color: var(--sk-text-secondary); line-height: 1.55; }
.cd-teaser form {
  display: flex; gap: var(--sk-sp-sm); padding: var(--sk-sp-md);
  background: var(--sk-warm-surface); border-radius: var(--sk-radius-card); box-shadow: var(--sk-shadow-md);
}
.cd-teaser .cd-field { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cd-layout { grid-template-columns: 1fr; }
  .cd-contact { position: static; }
  .cd-profile__head { grid-template-columns: auto 1fr; }
  .cd-profile__cta { grid-column: 1 / -1; }
  .cd-teaser__inner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cd-filters__main, .js .cd-filters__main { grid-template-columns: 1fr 1fr; }
  .cd-field--search { grid-column: 1 / -1; }
  .cd-filters__submit { grid-column: 1 / -1; }
  .cd-form__row { grid-template-columns: 1fr; }
  .cd-profile__head { grid-template-columns: 1fr; padding-inline: 0; margin-block-start: -40px; }
  .cd-profile__head .cd-profile__logo { width: 84px; height: 84px; margin-inline-start: var(--sk-sp-lg); }
  .cd-profile__id { padding-block-start: 0; }
  .cd-profile__cover { aspect-ratio: 16 / 7; }
  .cd-section, .cd-contact { padding: var(--sk-sp-lg); }
  .cd-teaser form { flex-direction: column; }
}
@media (max-width: 420px) {
  .cd-filters__main, .js .cd-filters__main { grid-template-columns: 1fr; }
  .cd-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-card, .cd-results, .cd-pill > span, .cd-segment span { transition: none; }
  .cd-card:hover { transform: none; }
  .cd-success__ico { animation: none; }
}