/* ==========================================================================
   Naava Chalet — design system
   Scandinavian, calm, premium. Natural white / charcoal / warm wood / muted
   forest green. System font stack only (no third-party font requests).
   ========================================================================== */

:root {
  --color-bg: #f7f5f1;
  --color-surface: #ffffff;
  --color-surface-alt: #f2efe8;
  --color-fg: #181817;
  --color-fg-soft: #4a463e;
  --color-muted: #6d6c67;
  --color-border: #ddd8cf;
  --color-wood: #a7947d;
  --color-wood-dark: #8a7660;
  --color-green: #33423a;
  --color-green-soft: #eef1ea;
  --color-accent-contrast: #ffffff;
  --color-error: #9c3b2e;
  --color-error-bg: #fbecea;
  --color-success: #3d5b3f;
  --color-focus: #2f6f5e;

  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif",
    serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  --container-max: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 23, 0.07), 0 1px 1px rgba(24, 24, 23, 0.04);
  --shadow-md: 0 10px 28px rgba(24, 24, 23, 0.09);
  --shadow-lg: 0 18px 50px rgba(24, 24, 23, 0.13);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Stop the browser from silently shifting scroll position to keep some
     element "anchored" in view as images and content load in below the
     fold (CSS scroll anchoring). Combined with the scroll-to-top logic in
     main.js, this keeps every page load landing at the very top. */
  overflow-anchor: none;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow-x is intentionally not set here (only on html above): an
     overflow value on body turns it into its own scroll container in most
     browsers, which breaks `position: sticky` on .site-header. */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-4); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-wood-dark);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.section {
  padding: var(--space-9) 0;
}

.section--tight { padding: var(--space-7) 0; }

.section--alt {
  background: var(--color-surface-alt);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-fg);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------------------------------- Buttons ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85em 1.7em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height: 1.2;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-fg);
  color: #fff;
}
.btn--primary:hover { background: #33302a; }

.btn--wood {
  background: var(--color-wood-dark);
  color: #fff;
}
.btn--wood:hover { background: #6a5033; }

.btn--outline {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
}
.btn--outline:hover { background: var(--color-fg); color: #fff; }

.btn--ghost-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: #fff; color: var(--color-fg); }

.btn--full { width: 100%; }
.btn--lg { padding: 1em 1.8em; font-size: 1.02rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ----------------------------------- Header ------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.96);
  border-bottom: 1px solid var(--color-border);
  /* No backdrop-filter here: applying one turns this element into the
     containing block for its position:fixed descendants (the mobile nav
     drawer below), which un-pins the drawer from the viewport and causes
     horizontal overflow on mobile. */
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: var(--space-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img { height: 60px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.main-nav__links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-fg-soft);
  padding: 0.4em 0;
  border-bottom: 2px solid transparent;
}

.main-nav__links a:hover,
.main-nav__links a[aria-current="page"] {
  color: var(--color-fg);
  border-bottom-color: var(--color-wood-dark);
}

.lang-switch {
  display: flex;
  gap: 0.35em;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.lang-switch a {
  text-decoration: none;
  color: var(--color-muted);
  padding: 0.3em 0.5em;
  border-radius: var(--radius-sm);
}

.lang-switch a[aria-current="true"] {
  color: var(--color-fg);
  background: var(--color-surface-alt);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.65em;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-fg);
  position: relative;
  transition: transform 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .main-nav { position: relative; }
  .main-nav__links {
    position: fixed;
    inset: 92px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-5);
    font-size: 1.15rem;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .main-nav.is-open .main-nav__links { transform: translateX(0); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header-actions .btn--wood { display: none; }
}

/* ------------------------------------ Hero -------------------------------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background-size: cover;
  /* Biased toward the bottom of the source photo so the building fills
     more of the frame and less open sky shows above it. */
  background-position: center 72%;
  background-color: #14130f;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,18,15,0.35) 0%, rgba(20,18,15,0.35) 40%, rgba(15,14,11,0.82) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--space-8);
}

/* ---- Hero image carousel ---- */

.hero--carousel { background-image: none; }

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.2s ease;
  will-change: opacity, transform;
}

.hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* A handful of very subtle, alternating pan + zoom variants applied only to
   the currently active slide. Kept small (scale 1.03 -> ~1.09) and slow so
   the motion reads as "a photo slowly breathing" rather than a slideshow
   effect -- see hero-carousel.js for how the animation is restarted each
   time a slide becomes active. */
.hero__slide.is-active.hero__slide--kb-left { animation: heroKbLeft var(--hero-kb-duration, 7s) ease-out forwards; }
.hero__slide.is-active.hero__slide--kb-right { animation: heroKbRight var(--hero-kb-duration, 7s) ease-out forwards; }
.hero__slide.is-active.hero__slide--kb-up { animation: heroKbUp var(--hero-kb-duration, 7s) ease-out forwards; }
.hero__slide.is-active.hero__slide--kb-slow { animation: heroKbSlow var(--hero-kb-duration, 7s) ease-out forwards; }

@keyframes heroKbLeft {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.4%, 0, 0); }
}
@keyframes heroKbRight {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(1.4%, 0, 0); }
}
@keyframes heroKbUp {
  from { transform: scale(1.04) translate3d(0, 1%, 0); }
  to { transform: scale(1.1) translate3d(0, -1%, 0); }
}
@keyframes heroKbSlow {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(0, 0, 0); }
}

.hero__dots {
  position: absolute;
  z-index: 2;
  right: var(--space-5);
  /* The search widget below the hero is pulled up over the hero's own
     bottom ~64px (see the inline `margin-top:-64px` on its wrapper in
     home.mjs) and paints above it, so the dots need to sit well clear of
     that zone rather than hugging the hero's bottom edge. */
  bottom: 6rem;
  display: flex;
  gap: 0.5rem;
}

.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero__dot:hover { background: rgba(255,255,255,0.75); }

.hero__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 640px) {
  .hero__dots { right: var(--space-4); bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: opacity 0.6s ease;
    transform: none !important;
    animation: none !important;
  }
}

.hero__eyebrow {
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.hero h1 { color: #fff; max-width: 16ch; margin-bottom: var(--space-3); }
.hero__subtitle { max-width: 46ch; font-size: 1.15rem; color: rgba(255,255,255,0.92); }

.page-hero {
  position: relative;
  color: #fff;
  padding: var(--space-8) 0 var(--space-7);
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,18,15,0.55);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: var(--space-2); max-width: 24ch; }
.page-hero p { color: rgba(255,255,255,0.9); max-width: 56ch; }

/* -------------------------------- Search widget ---------------------------- */

.search-widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--space-4);
  align-items: end;
  color: var(--color-fg);
}

.search-widget.search-widget--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

@media (max-width: 900px) {
  .search-widget,
  .search-widget.search-widget--compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .search-widget .btn { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-fg);
}

.field input:focus,
.field select:focus {
  border-color: var(--color-focus);
}

.field-error {
  color: var(--color-error);
  font-size: 0.82rem;
  min-height: 1.2em;
}

/* --------------------------------- Unit cards ------------------------------ */

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.unit-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.unit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.unit-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.unit-card__image img { width: 100%; height: 100%; object-fit: cover; }

.unit-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }

.unit-card__tagline { color: var(--color-muted); font-size: 0.92rem; margin-bottom: var(--space-3); }

.unit-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  font-size: 0.85rem;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-4);
  list-style: none;
  padding: 0;
}

.unit-card__facts li::before { content: "· "; color: var(--color-wood); }
.unit-card__facts li:first-child::before { content: ""; }

.unit-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.unit-card__price { font-weight: 700; font-size: 1.05rem; }
.unit-card__price small { display: block; font-weight: 400; color: var(--color-muted); font-size: 0.72rem; }

.unit-card__status { margin-bottom: var(--space-2); }
.unit-card__status[hidden] { display: none; }

.unit-card.is-unavailable { opacity: 0.65; }

.availability-summary {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: var(--space-5);
}
.availability-summary--loading { background: var(--color-surface-alt); color: var(--color-fg-soft); }
.availability-summary--available { background: var(--color-green-soft); color: var(--color-green); }
.availability-summary--none,
.availability-summary--error { background: var(--color-error-bg); color: var(--color-error); }

/* --------------------------------- Benefits -------------------------------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.benefit-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.benefit-card__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-green-soft);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  font-weight: 700;
}

/* --------------------------------- Image stack ------------------------------ */

.image-stack {
  position: relative;
  min-height: 460px;
}

.image-stack img:first-child {
  position: absolute;
  inset: 0 18% 12% 0;
  width: 82%;
  height: 88%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.image-stack img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 45%;
  object-fit: cover;
  border: 8px solid var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 720px) {
  .image-stack { min-height: 320px; }
}

/* --------------------------------- Gallery ---------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: var(--space-3);
}

.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.gallery a { display: block; cursor: zoom-in; }
.gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery a:nth-child(2) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .gallery a:nth-child(1),
  .gallery a:nth-child(2) { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

/* --------------------------------- Lightbox ----------------------------------- */
/* Full-size photo overlay for the unit-page gallery (opened/closed in JS —
   see assets/js/main.js). Sits above everything else, closes via the ×
   button, a click on the dark backdrop, or Escape. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(15, 14, 11, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.28); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.28); }

.lightbox__nav--prev { left: var(--space-5); }
.lightbox__nav--next { right: var(--space-5); }

@media (max-width: 480px) {
  .lightbox { padding: var(--space-4); }
  .lightbox__close { top: var(--space-3); right: var(--space-3); }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.1rem; }
  .lightbox__nav--prev { left: var(--space-2); }
  .lightbox__nav--next { right: var(--space-2); }
}

/* --------------------------------- Property facts ---------------------------- */

.property-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.property-fact {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}

.property-fact strong { display: block; font-size: 1.3rem; }
.property-fact span { font-size: 0.78rem; color: var(--color-muted); }

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

/* --------------------------------- Fact list -------------------------------- */

.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.fact-list li {
  border-left: 3px solid var(--color-wood);
  padding-left: 0.85em;
}

.fact-list .fact-label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fact-list .fact-value { font-weight: 600; }

.amenities-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6em 1.2em;
}

.amenities-list li { padding-left: 1.4em; position: relative; }
.amenities-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-green);
}

/* --------------------------------- Two-column layout ------------------------ */

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: start;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.sticky { position: sticky; top: 96px; }

/* While the price panel isn't shown yet (first booking step), let the
   search card use the full width instead of being squeezed into the
   narrower .split column — avoids cramped, overlapping form labels. */
.split:has(> [hidden]) { grid-template-columns: 1fr; }

/* --------------------------------- Booking widget --------------------------- */

.booking-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.price-breakdown {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  font-size: 0.95rem;
}

.price-breakdown li {
  display: flex;
  justify-content: space-between;
  padding: 0.4em 0;
  border-bottom: 1px dashed var(--color-border);
}

.price-breakdown li.total {
  border-bottom: none;
  border-top: 2px solid var(--color-fg);
  font-weight: 700;
  font-size: 1.1rem;
  padding-top: 0.7em;
  margin-top: 0.3em;
}

.price-breakdown .strike { text-decoration: line-through; color: var(--color-muted); }
.price-breakdown .discount-value { color: var(--color-success); }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: var(--color-green-soft);
  color: var(--color-green);
}

.badge--unavailable {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.stepper {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.stepper li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.stepper li .num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-fg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
}

.stepper li.is-active { color: var(--color-fg); }
.stepper li.is-active .num { background: var(--color-fg); color: #fff; }

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.92rem;
  margin-bottom: var(--space-3);
}

.checkbox-field input { margin-top: 0.25em; }

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-bottom: var(--space-4);
}

.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--info { background: var(--color-green-soft); color: var(--color-green); }

/* --------------------------------- Activities -------------------------------- */

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.activity-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.activity-card__dist { color: var(--color-wood-dark); font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3em; }

.activity-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.activity-service {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.activity-service:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #cfc8bd;
}

.activity-logo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.activity-logo img { width: 100%; height: 100%; object-fit: cover; }

.activity-service h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 800; margin-bottom: var(--space-2); }
.activity-service p { font-size: 0.92rem; color: var(--color-muted); margin-bottom: var(--space-3); }

.service-link {
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-bottom: 1px solid var(--color-fg);
  padding-bottom: 2px;
}

.activity-note {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Compact "Tekemistä" teaser grid on the homepage — logo + name, links
   straight out to the partner's own site. */
.activity-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.activity-teaser-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  text-decoration: none;
  padding: var(--space-5) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.activity-teaser-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #cfc8bd;
}

.activity-teaser-card img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--color-border);
}

.activity-teaser-card span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-fg);
}

@media (max-width: 900px) {
  .activity-directory { grid-template-columns: 1fr; }
  .activity-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .activity-service { grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .activity-service h3 { font-size: 0.98rem; }
}

/* ----------------------------------- Footer ----------------------------------- */

.site-footer {
  background: var(--color-fg);
  color: rgba(255,255,255,0.82);
  padding: var(--space-8) 0 var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: var(--space-3); }
.site-footer .brand { margin-bottom: var(--space-4); }
.site-footer .brand img { height: 54px; }
.site-footer p { color: rgba(255,255,255,0.68); }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5em; }
.site-footer a { text-decoration: none; color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; }

.social-links {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

.social-link {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  background: rgba(255, 255, 255, 0.04);
}

.social-link:hover { background: #fff; color: var(--color-fg); transform: translateY(-1px); }
.social-link svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

/* ----------------------------------- Utility ------------------------------------ */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--color-muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------- Admin ------------------------------------- */

.admin-shell { max-width: 760px; margin: 0 auto; padding: var(--space-7) var(--space-5); }
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.admin-table th, .admin-table td { text-align: left; padding: 0.6em 0.5em; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.admin-unit-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); }
.admin-unit-block h3 { margin-bottom: var(--space-3); }
.los-row { display: flex; gap: var(--space-3); align-items: center; margin-bottom: 0.5em; }
.los-row input[type="number"] { width: 90px; }

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}