/* =====================================================================
   Warm Precision — /siec/ + /siec/<slug>/ (Phase D).
   Tokens from variables.css, base utilities from global.css.

   Section map (render order):
     .page-hero.siec-hero       — dark gradient hero w/ pin decor + stats
     .siec-filter-bar           — cream bg, sticky below header
     .siec-list-wrapper         — cream container for grouped city lists
     .siec-city                 — section per city with H2 header + count pill
     .siec-point-card           — light card, bordo title, hover gold+lift
     .siec-empty                — friendly empty state w/ reset CTA
     .siec-detail-hero          — dark, narrower hero for point detail
     .siec-detail__breadcrumb   — inline ol breadcrumb trail
     .siec-detail__grid         — 2-col (contact left, map right) on desktop
     .siec-detail__contact      — structured address + contact list
     .siec-detail__map          — iframe OR graceful placeholder
     .siec-detail__events       — related events strip (max 3 cards)
   ===================================================================== */


/* ----------------------------------------------------------- D.1.1 Page hero */

.siec-page {
  color: var(--color-text-primary);
}

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.siec-hero {
  padding-block: var(--space-7) var(--space-6);
  color: var(--color-text-on-dark);
  background-color: var(--color-surface-dark);
  background-image:
    radial-gradient(
      circle at 82% 22%,
      rgba(197, 165, 90, 0.10) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 12% 78%,
      rgba(114, 47, 55, 0.40) 0%,
      transparent 55%
    ),
    linear-gradient(
      135deg,
      rgba(26, 23, 22, 0.94) 0%,
      rgba(74, 28, 35, 0.85) 100%
    );
}

/* Thin gold underline at the bottom of the hero — visual break. */
.siec-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(197, 165, 90, 0.35) 30%,
    rgba(197, 165, 90, 0.35) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Decorative map pin SVG — gold ghost shape, desktop right side. */
.siec-hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.siec-hero__pin {
  position: absolute;
  right: -30px;
  top: 10%;
  width: clamp(120px, 16vw, 200px);
  height: auto;
  color: rgba(197, 165, 90, 0.18);
  transform: rotate(8deg);
}

@media (max-width: 767.98px) {
  .siec-hero__pin {
    right: -40px;
    top: auto;
    bottom: -20px;
    width: 140px;
    opacity: 0.6;
  }
}

.siec-hero__inner {
  position: relative;
  max-width: 56rem;
}

.siec-hero__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
}

.siec-hero__title {
  color: var(--color-text-on-dark);
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: var(--space-4);
  max-width: 22ch;
}

.siec-hero__lead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: var(--space-5);
  color: var(--color-text-on-dark);
}

.siec-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(197, 165, 90, 0.25);
  justify-content: start;
  align-items: end;
}

.siec-hero__stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
  min-width: 0;
}

.siec-hero__stat-label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-medium);
  color: var(--color-secondary-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.siec-hero__stat-value {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  line-height: 1;
  margin: 0;
}

@media (max-width: 520px) {
  .siec-hero__stats {
    gap: var(--space-4);
  }

  .siec-hero__stat-value {
    font-size: 1.75rem;
  }
}


/* ---------------------------------------------------------- D.1.2 Filter bar */

.siec-filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
  background: var(--color-surface-light);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

@media (max-width: 767.98px) {
  /* On mobile, scrolling is more important than sticky filter. */
  .siec-filter-bar {
    position: static;
  }
}

.siec-filter {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.siec-filter__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  font-size: var(--font-small);
  letter-spacing: 0.04em;
}

.siec-filter__select {
  min-width: 14rem;
  padding: 0.65rem 0.9rem;
  padding-right: 2.5rem;
  font-size: var(--font-body);
  min-height: 2.75rem; /* 44px touch target (AA) */
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  /* Custom caret via background-image — keeps the gold focus ring happy. */
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 0.2rem),
    calc(100% - 12px) calc(1em + 0.2rem);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.siec-filter__select:hover {
  border-color: var(--color-secondary);
}

.siec-filter__select:focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
}


/* ------------------------------------------------------ D.1.3 City list body */

.siec-list-wrapper {
  padding-block: var(--space-6) var(--space-7);
}

.siec-points {
  display: grid;
  gap: var(--space-6);
}

.siec-city {
  display: grid;
  gap: var(--space-4);
}

.siec-city__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.siec-city__name {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.siec-city__count {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kind-grouped sections (own / franchise / representative) ---------- */

.siec-group {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.siec-group__header {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  max-width: 70ch;
}

.siec-group__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
}

.siec-group__title {
  margin: 0;
  color: var(--color-primary);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15;
}

.siec-group__lead {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  max-width: 62ch;
}

.siec-group--representative .siec-group__eyebrow {
  color: var(--color-accent, var(--color-secondary));
}

.siec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.siec-list > li {
  display: flex;
}


/* ------------------------------------------------------ D.1.4 Point card */

.siec-point-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  padding-top: 0;
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  overflow: hidden;
  transition: border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.siec-point-card__thumb {
  display: block;
  margin: 0 calc(var(--space-4) * -1) var(--space-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-2, #f5efe6);
  position: relative;
}

.siec-point-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.siec-point-card:hover .siec-point-card__thumb img,
.siec-point-card:focus-within .siec-point-card__thumb img {
  transform: scale(1.04);
}

.siec-point-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(197, 165, 90, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, rgba(26, 23, 22, 0.96) 0%, rgba(74, 28, 35, 0.92) 100%);
  color: rgba(197, 165, 90, 0.9);
}

.siec-point-card__thumb-mark {
  font-family: var(--font-serif, Lora, Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.siec-point-card__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-family: var(--font-sans, "Work Sans", sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8a7a6a);
  background: var(--color-surface-2, #f5efe6);
  border: 1px solid var(--color-border, #e8ddcd);
  border-radius: 999px;
  vertical-align: middle;
}

.siec-point-card--hq {
  opacity: 0.92;
}

.siec-point-card:hover,
.siec-point-card:focus-within {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.siec-point-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc(var(--font-h3) - 0.125rem);
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.siec-point-card__title a {
  color: inherit;
  text-decoration: none;
  /* Enlarge hit box to entire card via ::after overlay. */
}

.siec-point-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  /* Sits above content, below explicit links like phone/cta so tel:/mailto
     still have real hit targets. */
  z-index: 0;
}

.siec-point-card {
  position: relative;
}

.siec-point-card__title a:hover,
.siec-point-card__title a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.siec-point-card__address {
  font-style: normal;
  color: var(--color-text-secondary);
  font-size: var(--font-small);
  line-height: var(--lh-base);
  margin: 0;
}

.siec-point-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
  position: relative;
  z-index: 1;
}

.siec-point-card__phone,
.siec-point-card__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--font-small);
  font-variant-numeric: tabular-nums;
  min-height: 2rem;
  padding: var(--space-1) 0;
}

.siec-point-card__phone:hover,
.siec-point-card__email:hover,
.siec-point-card__phone:focus-visible,
.siec-point-card__email:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.siec-point-card__contact-label {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: rgba(197, 165, 90, 0.18);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.siec-point-card__cta {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--space-2);
  color: var(--color-secondary);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--font-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.siec-point-card__cta:hover,
.siec-point-card__cta:focus-visible {
  color: var(--color-secondary-light);
}

.siec-point-card:hover .siec-point-card__cta {
  transform: translateX(2px);
}


/* ------------------------------------------------------ D.1.5 Empty state */

.siec-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--color-surface-light);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.siec-empty__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--color-primary);
}

.siec-empty__sub {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 40ch;
  line-height: var(--lh-relaxed);
}

.siec-empty .btn {
  margin-top: var(--space-2);
}


/* =====================================================================
   Detail page — /siec/<slug>/.
   ===================================================================== */

.siec-detail {
  color: var(--color-text-primary);
}


/* ----------------------------------------------------- D.2.1 Detail hero */

.siec-detail-hero {
  padding-block: var(--space-6) var(--space-5);
  color: var(--color-text-on-dark);
  background-color: var(--color-surface-dark);
  background-image:
    radial-gradient(
      circle at 82% 22%,
      rgba(197, 165, 90, 0.08) 0%,
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(26, 23, 22, 0.94) 0%,
      rgba(74, 28, 35, 0.85) 100%
    );
}

.siec-detail-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(197, 165, 90, 0.35) 30%,
    rgba(197, 165, 90, 0.35) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.siec-detail-hero__inner {
  position: relative;
  max-width: 56rem;
}

.siec-detail-hero__eyebrow {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
}

.siec-detail-hero__title {
  color: var(--color-text-on-dark);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  max-width: 24ch;
}


/* ----------------------------------------------------- D.2.2 Breadcrumb */

.siec-detail__breadcrumb {
  font-size: var(--font-small);
}

.siec-detail__breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.siec-detail__breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-on-dark);
  opacity: 0.8;
}

.siec-detail__breadcrumb li + li::before {
  content: "\203A"; /* U+203A single right-pointing angle */
  margin-right: var(--space-1);
  color: var(--color-secondary);
  opacity: 0.7;
}

.siec-detail__breadcrumb a {
  color: var(--color-secondary);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding-inline: 2px;
}

.siec-detail__breadcrumb a:hover,
.siec-detail__breadcrumb a:focus-visible {
  color: var(--color-secondary-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.siec-detail__breadcrumb [aria-current="page"] {
  color: var(--color-text-on-dark);
  font-weight: var(--fw-medium);
  opacity: 1;
}


/* ----------------------------------------------------- D.2.3 Body layout */

.siec-detail__body {
  padding-block: var(--space-6) var(--space-7);
  display: grid;
  /* `minmax(0, 1fr)` zamiast toru domyślnego (`auto`): tor `auto` nie kurczy się poniżej
     min-content najszerszego dziecka, a karta mapy wnosi ~375 px (placeholder z
     `aspect-ratio: 4/3` + `min-height: 16rem`). Bez tego WSZYSTKIE bloki — w tym opis
     punktu — miały sztywną szerokość 375 px i na telefonach wychodziły poza kontener
     (przy 320 px: ~71 px tekstu uciętego, bo `overflow-x: hidden` na html/body).
     Zmierzone 2026-09-27: opis 375.3 px przy viewportach 390/360/320 px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.siec-detail__grid {
  display: grid;
  /* `1fr` = `minmax(auto, 1fr)` — minimum „auto" blokuje kurczenie poniżej min-content
     karty mapy (patrz komentarz przy `.siec-detail__body`). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .siec-detail__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.siec-detail__section-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Mobile: opis punktu był jedynym blokiem bez własnego obramowania/paddingu, więc jego
   linie tekstu biegły szerzej niż treść kart obok. Właściciel: „troszkę za szeroki"
   (2026-09-27) — zwężenie o 5% na telefonie. Szerokość liczy się od toru ciała strony,
   który po poprawce `minmax(0, 1fr)` mieści się już w kontenerze. */
@media (max-width: 767.98px) {
  .siec-detail__description {
    max-width: 95%;
  }
}


/* ----------------------------------------------------- D.2.4 Contact card */

.siec-detail__contact {
  padding: var(--space-5);
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.siec-detail__address {
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-style: normal;
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.siec-detail__address-name {
  color: var(--color-primary);
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: calc(var(--font-body) + 0.1rem);
}

.siec-detail__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.siec-detail__contact-list li {
  display: grid;
  gap: var(--space-1);
}

.siec-detail__contact-label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.siec-detail__contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--color-primary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.siec-detail__contact-list a:hover,
.siec-detail__contact-list a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.siec-detail__coords {
  font-family: var(--font-mono);
  font-size: var(--font-small);
  color: var(--color-text-secondary);
}

.siec-detail__hours {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.siec-detail__subtitle {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-size: calc(var(--font-h3) - 0.25rem);
}

.siec-detail__hours-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.siec-detail__hours-list dt {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.siec-detail__hours-list dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-small);
}


/* ----------------------------------------------------- D.2.5 Map card */

.siec-detail__map {
  display: flex;
  flex-direction: column;
  /* `min-width: 0` — bez tego iframe/placeholder trzymają kartę na ~375 px
     (element flexu nie schodzi poniżej min-content). */
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.siec-detail__map-iframe {
  width: 100%;
  /* iframe ma wbudowaną szerokość 300 px i jako element flexu nie schodził poniżej niej. */
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 20rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-surface-dark);
}

.siec-detail__map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /* `width: 100%` PRZED `aspect-ratio`: przy `width: auto` para aspect-ratio + min-height
     wyliczała szerokość 256 × 4/3 = 341 px i to ona rozpinała cały tor strony.
     Teraz szerokość bierze się z rodzica, a wysokość nadal ma podłogę (min-height). */
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 16rem;
  padding: var(--space-5);
  border-radius: var(--radius);
  background-image:
    linear-gradient(
      135deg,
      rgba(114, 47, 55, 0.08) 0%,
      rgba(197, 165, 90, 0.12) 100%
    );
  color: var(--color-primary);
}

.siec-detail__map-placeholder svg {
  width: 48px;
  height: 60px;
  color: var(--color-secondary);
  opacity: 0.6;
}

.siec-detail__map-placeholder-text {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.siec-detail__map-link {
  align-self: flex-start;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--font-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
}

.siec-detail__map-link:hover,
.siec-detail__map-link:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ----------------------------------------------------- D.2.6 Related events */

.siec-detail__events {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.siec-detail__events-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.siec-detail__events-grid .event-card {
  height: 100%;
}


/* ----------------------------------------------------- D — Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .siec-point-card,
  .siec-point-card__cta,
  .siec-filter__select {
    transition: none;
  }

  .siec-point-card:hover,
  .siec-point-card:focus-within {
    transform: none;
  }

  .siec-point-card:hover .siec-point-card__cta {
    transform: none;
  }
}


/* ============================================================
   E — SiecPoint detail: rating, gallery, reviews (phase-08)
   ============================================================ */

.siec-detail-hero__rating {
  margin-top: var(--space-3, 0.75rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  color: var(--color-text-muted, #ccc);
}

.siec-detail-hero__rating-stars {
  color: var(--color-brand-gold, #c5a55a);
  letter-spacing: 0.05em;
  font-size: 1.1rem;
}

.siec-detail-hero__rating-value {
  font-weight: 600;
  color: var(--color-text, #fff);
}

.siec-detail-hero__rating-count {
  font-size: 0.875rem;
  opacity: 0.75;
}

.siec-detail__hours-closed {
  color: var(--color-text-muted, #8a7a6a);
  font-style: italic;
}

.siec-detail__gallery {
  margin-top: var(--space-8, 3rem);
}

.siec-detail__gallery-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4, 1rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.siec-detail__gallery-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md, 0.5rem);
  display: block;
  background: var(--color-surface-2, #f5efe6);
}

.siec-detail__reviews {
  margin-top: var(--space-8, 3rem);
}

.siec-detail__reviews-source {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8a7a6a);
  font-weight: 400;
}

.siec-detail__reviews-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4, 1rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4, 1rem);
}

.siec-detail__review {
  background: var(--color-surface-2, #fbf6ef);
  border: 1px solid var(--color-border, #e8ddcd);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-4, 1rem);
}

.siec-detail__review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.siec-detail__review-author {
  color: var(--color-text, #1a1716);
}

.siec-detail__review-stars {
  color: var(--color-brand-gold, #c5a55a);
  letter-spacing: 0.05em;
}

.siec-detail__review-time {
  color: var(--color-text-muted, #8a7a6a);
  font-size: 0.825rem;
}

.siec-detail__review-text {
  margin: 0;
  line-height: 1.55;
  color: var(--color-text, #2b2220);
}

.siec-detail__reviews-link {
  margin-top: var(--space-4, 1rem);
  text-align: center;
}

.siec-detail__reviews-link a {
  color: var(--color-brand-red, #6b1019);
  text-decoration: none;
  font-weight: 600;
}

.siec-detail__reviews-link a:hover,
.siec-detail__reviews-link a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .siec-detail__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .siec-detail__reviews-list {
    grid-template-columns: 1fr;
  }
}