/* ===== Ogród i plener ===== */

/* Strefy ogrodu */
.garden-zones { padding: var(--section-py-compact) 0 var(--section-py); }
.garden-zones__head,
.garden-types__head { margin-bottom: var(--section-header-gap); }
.garden-zones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Co zorganizujesz */
.garden-types { padding: var(--section-py-compact) 0 var(--section-py); }
.garden-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Mapa stref */
.zone-map-section { padding: 0 var(--hero-inset); }
.zone-map-section__panel {
  background: var(--c-bg-surface); border-radius: var(--r-2xl);
  padding: var(--section-py) var(--page-gutter);
  max-width: 1408px; margin: 0 auto;
}
.zone-map-section__head { margin-bottom: var(--section-header-gap); }
.zone-map { display: flex; gap: 32px; align-items: flex-start; }
.zone-map__plan {
  flex: 1; min-width: 0; height: 520px; overflow: hidden;
  border-radius: var(--r-2xl); background: var(--c-bg-accent-subtle);
}
.zone-map__plan svg { display: block; width: 100%; height: 100%; }
.zone-map__plan text { font-family: var(--ff-primary); font-size: 12px; font-weight: 500; letter-spacing: .08em; fill: var(--c-primary); pointer-events: none; }
.zone-map__trees circle { fill: #cfe3d4; }
.zone-map__parking { fill: var(--c-text) !important; }

.zone { cursor: pointer; }
.zone__shape { fill: rgba(51, 115, 154, .08); stroke: rgba(51, 115, 154, .35); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.zone[data-zone="1"] .zone__shape { fill: rgba(120, 170, 120, .16); stroke: rgba(90, 140, 95, .35); stroke-dasharray: 6 6; }
.zone__core { fill: rgba(51, 115, 154, .35); }
.zone:hover .zone__shape { fill: rgba(51, 115, 154, .16); }
.zone.is-active .zone__shape { fill: rgba(51, 115, 154, .24); stroke: var(--c-secondary); stroke-width: 2; stroke-dasharray: none; }
.zone-map__pins circle { fill: var(--c-secondary); stroke: #fff; stroke-width: 2; }
.zone-map__pins text { fill: #fff !important; font-size: 12.5px !important; letter-spacing: 0 !important; font-weight: 400 !important; }

.zone-map__legend { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.zone-item {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  background: transparent; cursor: pointer; font: inherit; color: inherit;
  transition: background .2s, border-color .2s;
}
.zone-item:hover { background: var(--c-bg-page); }
.zone-item.is-active { background: var(--c-bg-surface); border-color: var(--c-secondary); }
.zone-item__nr {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 999px; background: var(--c-secondary); color: var(--c-text-inverse);
  font-size: var(--fs-caption); line-height: 1.5;
}
.zone-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zone-item__name { color: var(--c-primary); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; }
.zone-item__desc { font-size: var(--fs-caption); line-height: 1.5; }

/* Gastronomia i pogoda */
.garden-food { padding: var(--section-py) 0; }
.garden-food__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Galeria */
.garden-gallery { padding: var(--section-py-compact) 0 var(--section-py); }
.garden-gallery .photo-row { grid-template-columns: repeat(4, 1fr); }
.garden-gallery .photo-card img { height: 308px; }

@media (max-width: 1100px) {
  .zone-map { flex-direction: column; align-items: stretch; }
  .zone-map__legend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .garden-gallery .photo-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .garden-zones__grid,
  .garden-types__grid,
  .garden-food__grid { grid-template-columns: 1fr; }
  .garden-zones .card-space { padding: 16px; }
  .garden-zones .card-space__media { height: 240px; }
  .garden-types .card-category,
  .garden-food .card-category { height: 400px; }
  .zone-map-section__panel { padding: 64px 20px; }
  .zone-map__plan { height: auto; aspect-ratio: 908 / 520; }
}
@media (max-width: 640px) {
  .zone-map__legend { grid-template-columns: 1fr; }
  .garden-gallery .photo-row { grid-template-columns: 1fr; }
  .garden-gallery .photo-card img { height: 280px; }
}