/* Local Area */

.local-area {
  overflow: hidden;
}

.local-area > div {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .local-area > div {
    /* auto-fit statt fester 3 Spalten: trägt beliebig viele Cards,
       Spaltenzahl ergibt sich aus Breite (kein Abschneiden bei >3). */
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
}

.local-area article {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.local-area article:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-lg);
}

.local-area article figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.local-area article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.local-area article:hover img {
  transform: scale(1.03);
}

.local-area article h3 {
  font-size: var(--text-base);
  font-family: var(--font-body), sans-serif;
  font-weight: 600;
  padding: var(--space-4) var(--padding-card) var(--space-2);
}

.local-area article p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 0 var(--padding-card) var(--padding-card);
}

/* ============================================================
   Variant: pills — kompakte Tag-Liste statt Card-Grid.
   Aktiviert via ['type' => 'local_area', 'variant' => 'pills'] in app.php.
   ============================================================ */

:root {
  --local-area-pill-bg:           var(--color-bg-alt);
  --local-area-pill-bg-hover:     var(--color-bg);
  --local-area-pill-border:       var(--color-panel-border);
  --local-area-pill-name-color:   var(--color-text);
  --local-area-pill-desc-color:   var(--color-text-muted);
  --local-area-pill-icon-color:   var(--color-primary);
  --local-area-pill-icon-size:    1.75rem;
  --local-area-pill-gap:          var(--space-3);
  --local-area-pill-min-width:    16rem;
  /* Icon als inline SVG (data-URI) — currentColor via mask, Customer kann
     im Tier-CSS gegen anderes Icon tauschen. Default: map-pin (Lucide). */
  --local-area-pill-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/></svg>");
}

.local-area-pills > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* Flex + JC:center: Pills behalten ihre fixe Breite (flex-basis), wrappen
     automatisch und werden als Gruppe horizontal zentriert. Pills füllen
     nicht die volle Section-Breite. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--local-area-pill-gap);
  justify-content: center;
}

.local-area-pills > ul > li {
  flex: 0 0 var(--local-area-pill-min-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--local-area-pill-bg);
  border: 0.0625rem solid var(--local-area-pill-border);
  border-radius: var(--radius);
  transition: background var(--transition);
}

.local-area-pills > ul > li:hover {
  background: var(--local-area-pill-bg-hover);
}

/* Icon oben — CSS-only (Pseudo-Element + mask) damit der Markup-Loop in
   LocalArea.php nicht angefasst werden muss. background-color = currentColor
   (per icon-color-Var einfärbbar). */
.local-area-pills > ul > li::before {
  content: '';
  width: var(--local-area-pill-icon-size);
  height: var(--local-area-pill-icon-size);
  background-color: var(--local-area-pill-icon-color);
  mask-image: var(--local-area-pill-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--local-area-pill-icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.local-area-pills > ul > li > strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--local-area-pill-name-color);
}

.local-area-pills > ul > li > span {
  font-size: var(--text-sm);
  color: var(--local-area-pill-desc-color);
  line-height: var(--leading);
}