/* =========================================================================
   programari.css — Programări page only (enqueued on is_page('programari')).
   Shared pieces (.page-hero, .card) live in base.css.
   ========================================================================= */

.city-section__title {
  padding-bottom: 0.4em;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.city-section { scroll-margin-top: calc(var(--header-h-compact) + 16px); }

.clinics-grid { align-items: start; }
.clinics-grid > .clinic-card { grid-column: span 6; }

/* Cascade the clinic cards instead of a single block. */
.clinics-grid > .clinic-card:nth-child(2) { --du-stagger: 80ms; }
.clinics-grid > .clinic-card:nth-child(3) { --du-stagger: 160ms; }
.clinics-grid > .clinic-card:nth-child(4) { --du-stagger: 240ms; }
.clinics-grid > .clinic-card:nth-child(5) { --du-stagger: 320ms; }
.clinics-grid > .clinic-card:nth-child(6) { --du-stagger: 400ms; }
.clinics-grid > .clinic-card:nth-child(7) { --du-stagger: 480ms; }
.clinic-card { display: flex; flex-direction: column; }
.clinic-card__name { margin-bottom: 0.5em; }
.clinic-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.clinic-card__meta-item {
  color: var(--gray-500);
  text-decoration: none;
}
.clinic-card__meta-item--placeholder { color: var(--gray-500); }
.clinic-card__meta-site {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (hover: hover) and (pointer: fine) {
  .clinic-card__meta-site:hover { opacity: 0.75; }
}
.clinic-card__actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

/* Expandable per-clinic details (native <details>, no height animation). */
.clinic-detalii {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.clinic-detalii__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand);
  padding: 0.35rem 0;
  user-select: none;
}
.clinic-detalii__summary::-webkit-details-marker { display: none; }
.clinic-detalii__summary::marker { content: none; }
.clinic-detalii__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease-out;
}
.clinic-detalii[open] .clinic-detalii__summary::after {
  transform: rotate(-135deg);
}
.clinic-detalii__panel {
  padding: 0.75rem 0 0.25rem;
  display: grid;
  gap: 0.75rem;
}
.clinic-detalii[open] .clinic-detalii__panel {
  animation: clinic-detalii-fade 0.25s ease-out;
}
@keyframes clinic-detalii-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.clinic-detalii__label {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
}
.clinic-detalii__services {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--gray-500);
  font-size: 0.9375rem;
}
.clinic-detalii__services li::marker { color: var(--accent); }
.clinic-detalii__services a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.clinic-detalii__services a:hover { color: var(--accent); }
.clinic-detalii__placeholder {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-500);
}
.clinic-detalii__meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--gray-500);
}

@media (prefers-reduced-motion: reduce) {
  .clinic-detalii__summary::after { transition: none; }
  .clinic-detalii[open] .clinic-detalii__panel { animation: none; }
}

.programari-cta { text-align: center; max-width: 640px; }
.programari-cta__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .clinics-grid > .clinic-card { grid-column: span 12; }
}
@media (max-width: 480px) {
  .clinic-card__actions { flex-direction: column; align-items: stretch; }
}