/* =========================================================
   Design tokens
   ========================================================= */
:root {
  /* Palette: Тёмная хвоя / Глубокий лес / Молочный / Шалфей / Глина-костёр / Вода-туман */
  --c-pine:      #143D34;  /* Тёмная хвоя — header, buttons, dark sections, headings/body text */
  --c-pine-deep: #0E2B25;  /* Глубокий лес — overlays, footer, evening bg */
  --c-moss:      #9B9B7A;  /* Шалфей — secondary accents, hover borders */
  --c-lake:      #AAB7B3;  /* Вода/туман — water/fog-themed blocks (e.g. rafting service cards) */
  --c-birch:     #F3F0E8;  /* Молочный — page background */
  --c-bark:      var(--c-pine); /* body text — dark green on light, per palette rule */
  --c-ember:     #B86F45;  /* Глина/костёр — CTA accent */
  --c-ember-dk:  #935937;  /* darker shade of Глина/костёр, for hover */
  --c-white:     #FFFFFF;

  /* Typography */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", "Segoe UI", Roboto, Arial, sans-serif;

  --fs-base: 1rem;       /* 16px */
  --fs-sm:   0.875rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.5rem;
  --fs-xl:   clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-hero: clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 64px;
  --radius-card: 14px;
  --radius-btn: 999px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-bark);
  background: var(--c-birch);
  -webkit-font-smoothing: antialiased;
  /* Needed for the full-bleed house panel, which breaks out of .container using 100vw. */
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.9;
  margin: 0;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-ember);
  outline-offset: 3px;
}

/* Offset anchor targets so the sticky header doesn't cover them */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: var(--fs-base);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

/* .btn изначально рассчитан на <a>, у которых нет рамки по умолчанию.
   Настоящий <button> (кнопка LitePMS) браузер обводит своей системной
   рамкой/объёмом — сбрасываем это явно. */
button.btn {
  border: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.btn-accent {
  background: var(--c-ember);
  color: var(--c-birch);
}

.btn-accent:hover { background: var(--c-ember-dk); }

/* =========================================================
   Header / navigation
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg, var(--c-pine));
  color: var(--c-birch);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1.5rem;
}

.logo {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-decoration: none;
}

.header-logo {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
}

.nav-list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

.nav-cta { padding: 0.55rem 1.25rem; }

/* Toggle elements are hidden on desktop */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }

/* ---------- Mobile navigation ---------- */
@media (max-width: 860px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
  }

  .nav-burger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Keyboard focus on the hidden checkbox shows on the burger */
  .nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--c-ember); }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--c-pine);
    border-top: 1px solid rgba(238, 241, 236, 0.15);
    display: none;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list a {
    display: block;
    padding: 0.85rem 0;
    font-size: var(--fs-md);
    border-bottom: 1px solid rgba(238, 241, 236, 0.1);
  }

  .nav-cta { text-align: center; padding: 0.85rem; }

  /* Open state */
  .nav-toggle:checked ~ .site-nav { display: flex; }

  .nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   Hero panorama
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Wide panoramic strip: tall enough on phones, not full-screen on monitors */
  min-height: clamp(420px, 42vw, 640px);
  color: var(--c-birch);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  /*
    Placeholder landscape drawn with gradients.
    To use a real photo, set --hero-image on .hero, e.g.
    style="--hero-image: url('uploads/panorama.jpg')"
  */
  background:
    var(--hero-image, none) center / cover no-repeat,
    /* treeline */
    radial-gradient(120% 60% at 15% 100%, #16291F 45%, transparent 46%),
    radial-gradient(90% 55% at 70% 100%, #1B3226 45%, transparent 46%),
    /* lake band */
    linear-gradient(to bottom, transparent 58%, #4F6E7E 58%, #3E5A6B 78%, transparent 78%),
    /* distant hills */
    radial-gradient(140% 50% at 50% 62%, #6F8A78 40%, transparent 41%),
    /* sky */
    linear-gradient(to bottom, #A9C1C9 0%, #D6DFD9 45%, #E8D9B8 60%);
}

.hero-media-bg-filter {
    z-index: 1;
    background: linear-gradient(#00000000, 65%, #00000070);
    position: absolute;
    inset: 0;
}

/* Darkening overlay for text readability */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 30, 22, 0.75) 0%, rgba(15, 30, 22, 0.1) 60%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.hero-title {
  font-size: var(--fs-hero);
  max-width: 14ch;
  letter-spacing: -0.01em;
}

.hero-text {
  max-width: 42ch;
  margin: 1rem 0 1.75rem;
  font-size: var(--fs-md);
  opacity: 0.92;
}

/* =========================================================
   Section background media (image or looping video)
   ========================================================= */
.section-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.section-media img,
.section-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* dark scrim, for sections with light text on a dark base (hero, footer) */
.section-media--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 30, 22, 0.75) 0%, rgba(15, 30, 22, 0.35) 100%);
}

/* light scrim, for content sections with dark text on a light base */
.section-media--light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f3f0e88a;
}

/* =========================================================
   House cards
   ========================================================= */
.houses {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 4rem);
}

.houses > .container {
  position: relative;
  z-index: 1;
}

.section-head {
  margin-bottom: 2rem;
  max-width: 60ch;
}

.section-title {
  font-size: var(--fs-xl);
  color: var(--c-pine);
}

.section-text {
  margin: 0.5rem 0 0.5rem;
  color: var(--c-pine);
}

/* =========================================================
   Houses / Services / Rafting switcher — horizontal slide between
   panes (pure CSS, radio hack). The track/panes are sized in vw (not %
   of .container) and each pane re-centers its own .container inside —
   otherwise, on any screen wider than .container's 1200px cap, sliding
   by "one container width" doesn't clear the viewport and the inactive
   pane peeks in from the side. .houses already clips overflow, so the
   off-screen pane needs no extra wrapper — that also keeps the
   house/service panel's own full-bleed breakout intact.
   Trade-off (plain CSS, no JS): the row's height is the taller of the
   panes, since all have to stay laid out side by side for the
   slide to animate — a shorter pane will show blank space below it.
   ========================================================= */

.section-switch-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.switch-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.switch-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.section-switch-btn {
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(31, 58, 46, 0.2);
  background: var(--c-white);
  color: var(--c-pine);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.section-switch-btn:hover { border-color: var(--c-moss); }

.switch-radio:checked + .section-switch-btn {
  background: var(--c-pine);
  border-color: var(--c-pine);
  color: var(--c-white);
}

.switch-radio:focus-visible + .section-switch-btn {
  outline: 3px solid var(--c-ember);
  outline-offset: 2px;
}

.section-switch-track {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  transition: transform 0.5s ease, height 0.3s ease;
}

.section-switch-btn--add {
  background: transparent;
  border-style: dashed;
}
.section-switch-btn--add:hover { border-color: var(--c-moss); }

.section-pane {
  width: 100vw;
  flex-shrink: 0;
  min-width: 0;
}

/* Colour placeholder shown until a photo/video is uploaded (reused by the small
   tab thumbnail and by the empty-gallery placeholder in the panel below). */
.card-media--lake   { background: linear-gradient(to bottom, #A9C1C9 0 50%, #3E5A6B 50%); }
.card-media--pine   { background: linear-gradient(to bottom, #D6DFD9 0 35%, #1F3A2E 35%); }
.card-media--meadow { background: linear-gradient(to bottom, #E8D9B8 0 55%, #5C7A4F 55%); }
.card-media--dusk   { background: linear-gradient(to bottom, #C9A77A 0 45%, #2E4538 45%); }

.card-title {
  font-size: var(--fs-lg);
  color: var(--c-pine);
}

.card-facts {
  display: flex;
  gap: 1.5rem;
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
}

.card-facts dt { color: var(--c-pine); }
.card-facts dd { margin: 0; font-weight: 700; color: var(--c-pine); }

.card-details-text {
  margin-top: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--c-bark);
  line-height: 1.6;
}

.card-details-text p { margin: 0 0 0.85em; }
.card-details-text p:last-child { margin-bottom: 0; }

/* =========================================================
   House cards — a normal grid, always at full size (pure CSS,
   radio hack). Clicking a card opens its full-width panel right
   after it, pushing the following cards down — the card itself
   never shrinks or gets replaced by anything else.
   ========================================================= */
.tabset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

/* While a card is open, the rest turn into short, wide list rows (photo on
   the left, info on the right) instead of tall vertical cards — they're
   secondary at that point, and this keeps them low on vertical space while
   still sitting several to a row. */
.tabset:has(.tab-radio:checked) {
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 0.4rem;
}

.tabset:has(.tab-radio:checked) .tab-btn {
  flex-direction: row;
  align-items: stretch;
}

.tabset:has(.tab-radio:checked) .tab-media {
  width: 56px;
  height: auto;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.tabset:has(.tab-radio:checked) .tab-body {
  padding: 0.4rem 0.6rem;
  justify-content: center;
}

.tabset:has(.tab-radio:checked) .tab-title {
  font-size: 1rem;
  line-height: 1.2;
}

.tabset:has(.tab-radio:checked) .tab-text {
  display: none;
}

.tabset:has(.tab-radio:checked) .tab-facts {
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: none;
  gap: 0.7rem;
  /* font-size: 0.9rem; */
}

/* Hidden but focusable/keyboard-operable, like .nav-toggle elsewhere on the site. */
.tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Real grid cell + positioning context for the radio above. Without this,
   an unpositioned absolute child of a *grid* container resolves its "static
   position" (used by the browser to auto-scroll on focus) to the grid's very
   first cell — so clicking any card would jump the page back to the top of
   the section. Wrapping it here keeps that position local to its own card. */
.tab-item {
  position: relative;
}

.tab-btn,
.tab-btn--add {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(31, 58, 46, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tab-btn:hover,
.tab-btn--add:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31, 58, 46, 0.12);
}

.tab-btn:hover { border-color: var(--c-moss); }
.tab-btn:hover .tab-title { text-decoration: underline; text-underline-offset: 4px; }

.tab-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-moss);
  flex-shrink: 0;
}

.tab-media img,
.tab-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tab-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1rem 1.2rem;
}

.tab-title {
  font-size: 1.2rem;
  color: var(--c-pine);
  margin: 0;
}

.tab-text {
  margin: 0.4rem 0 0.8rem;
  font-size: var(--fs-sm);
  color: var(--c-bark);
}

.tab-facts {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin: auto 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(31, 58, 46, 0.12);
  font-size: var(--fs-sm);
}
.tab-facts dt { color: var(--c-pine); }
.tab-facts dd { margin: 0; font-weight: 700; color: var(--c-pine); }
.tab-facts div:last-child { text-align: right; }

.tab-btn--add {
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 192px;
  border: 2px dashed rgba(31, 58, 46, 0.35);
  color: var(--c-pine);
}

.tabset:has(.tab-radio:checked) .tab-btn--add {
  min-height: 56px;
}
.tab-btn--add:hover { border-color: var(--c-ember); background: rgba(255, 255, 255, 0.5); }
.tab-add-icon { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.tab-add-label { font-size: var(--fs-sm); font-weight: 600; }

/* Even more compact on phones — both the normal grid and the open-state
   list rows get tighter padding, smaller thumbnails and smaller type. */
/* All cards always stay visible — the open one just gets a highlight so
   it's clear which panel below belongs to it. */
.tab-radio:checked + .tab-btn {
  border-color: var(--c-moss);
  box-shadow: 0 6px 18px rgba(31, 58, 46, 0.12);
}

.tab-radio:focus-visible + .tab-btn {
  outline: 3px solid var(--c-ember);
  outline-offset: -3px;
}

/* Full-bleed: breaks out of .container to span the entire viewport width,
   like an actual landing-page block, regardless of how narrow the page's
   content column is. Always pinned as the first row (order: -1), with the
   whole card grid below it — so switching between cards never moves the
   panel around and the page doesn't jump. */
/* display is deliberately NOT transitioned: the outgoing panel must vanish
   instantly, otherwise it stays laid out in the same grid cell as the
   incoming one while both fade, and they overlap. */
.tab-panel {
  position: relative;
  order: -1;
  grid-column: 1 / -1;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: none;
  overflow: hidden;
  color: var(--c-birch);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.tab-item:has(.tab-radio:checked) + .tab-panel {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Panel floats up into place on open, 0.6s (progressively enhanced —
   browsers without @starting-style just show the panel instantly). */
@starting-style {
  .tab-item:has(.tab-radio:checked) + .tab-panel {
    opacity: 0;
    transform: translateY(40px);
  }
}

.tab-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tab-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tab-panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 30, 22, 0.88) 0%, rgba(15, 30, 22, 0.65) 100%);
  backdrop-filter: blur(6px);
}

.tab-panel-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}

.tab-panel-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

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

.tab-panel-gallery,
.embla {
  position: relative;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.tab-panel-gallery--empty {
  aspect-ratio: 4 / 3;
}

/* ---- Embla Carousel (assets/js/gallery.js) ---- */
.embla__viewport {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.embla__container {
  display: flex;
}

.embla__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
}

.pswp-trigger {
  display: block;
  cursor: zoom-in;
}

.embla__slide img,
.embla__slide video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.15);
}

/* ---- prev/next paging buttons, typical-carousel style ---- */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 30, 22, 0.55);
  color: var(--c-white);
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.gallery-nav:hover { background: rgba(15, 30, 22, 0.8); }
.gallery-nav:disabled { opacity: 0.35; cursor: default; }
.gallery-nav:disabled:hover { background: rgba(15, 30, 22, 0.55); }
.gallery-nav--prev { left: 0.75rem; }
.gallery-nav--next { right: 0.75rem; }

.tab-panel-title {
  font-size: var(--fs-xl);
  color: var(--c-white);
  margin: 0;
}

.tab-panel-facts {
  display: flex;
  gap: 1.5rem;
  margin: 0.85rem 0 0;
  font-size: var(--fs-sm);
}
.tab-panel-facts dt { color: rgba(238, 241, 236, 0.7); }
.tab-panel-facts dd { margin: 0; font-weight: 700; color: var(--c-white); }

.tab-panel-text {
  margin-top: 1.25rem;
  font-size: var(--fs-md);
  color: rgba(238, 241, 236, 0.92);
  line-height: 1.6;
}
.tab-panel-text p { margin: 0 0 0.85em; }
.tab-panel-text p:last-child { margin-bottom: 0; }

.tab-panel-info .btn { margin-top: 1.5rem; }
.tab-panel-widget { margin-top: 1.5rem; }
.tab-panel-widget iframe { max-width: 100%; border: none; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--c-pine-deep);
  color: var(--c-birch);
  padding-block: 2.5rem;
  min-height: 160px;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.footer-logo {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.footer-note {
  margin: 0;
  font-size: var(--fs-sm);
  opacity: 0.75;
}

/* =========================================================
   About / route / etc text sections
   ========================================================= */
.section--alt {
  background: var(--c-white);
}

.prose {
  max-width: 70ch;
  color: var(--c-pine);
  line-height: 1.6;
}

.prose p {
  margin: 0 0 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.extra-field {
  margin: 1rem 0;
}

.extra-field summary {
  cursor: pointer;
  font-weight: 700;
}

.extra-field .section-text {
  margin-top: 0.5rem;
}

.extra-fields-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

.extra-fields-layout > .extra-field {
  min-width: 0;
  margin: 0;
}

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

.extra-field--left {
  grid-column: 1;
}

.extra-field--right {
  grid-column: 2;
}

.extra-field-title {
  margin: 1rem 0 0.5rem;
  color: var(--c-pine);
}

.extra-field-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0.75rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

.extra-field-iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.extra-field-image,
.extra-field-image-link {
  display: block;
  margin: 0.75rem 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

.extra-field-image img,
.extra-field-image-link img {
  display: block;
  width: 100%;
  height: auto;
}

.extra-field-image-link:hover img {
  opacity: 0.9;
}

@media (max-width: 700px) {
  .extra-fields-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .extra-field--left,
  .extra-field--right {
    grid-column: 1;
  }
}


/* =========================================================
   Footer contacts / social
   ========================================================= */
.footer-contacts-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
}

.footer-contacts,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer-contacts a {
  color: var(--c-birch);
  text-decoration: none;
}

.footer-contacts a:hover {
  text-decoration: underline;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-birch);
  opacity: 0.85;
}

.footer-social-link:hover {
  opacity: 1;
}

.footer-social-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  object-fit: contain;
  border-radius: 0.3rem;
}

/* =========================================================
   Форма заявки на бронирование (своя, без стороннего сервиса)
   ========================================================= */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.booking-calendar {
  max-width: 280px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0.5rem;
}

.booking-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  color: var(--c-birch);
  font-weight: 700;
  font-size: 0.8rem;
}

.booking-calendar-prev,
.booking-calendar-next {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(238, 241, 236, 0.25);
  border-radius: 5px;
  background: none;
  color: var(--c-birch);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.booking-calendar-prev:disabled,
.booking-calendar-next:disabled { opacity: 0.3; cursor: default; }
.booking-calendar-prev:not(:disabled):hover,
.booking-calendar-next:not(:disabled):hover { border-color: var(--c-ember); }

.booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.booking-calendar-head {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(238, 241, 236, 0.45);
  padding-bottom: 0.2rem;
}

.booking-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.72rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-birch);
  cursor: pointer;
}
/* Дни соседних месяцев приглушены по умолчанию, но всё равно кликабельны
   (если не в прошлом) — курсор остаётся pointer от базового .booking-calendar-day. */
.booking-calendar-day--adjacent { background: none; color: rgba(238, 241, 236, 0.22); }
.booking-calendar-day--disabled { background: none; color: rgba(238, 241, 236, 0.2); cursor: default; }
/* Даты, занятые уже существующей бронью этого же домика/карточки — не просто
   прошлое, поэтому отдельный стиль (зачёркнуто), чтобы было видно почему недоступно. */
.booking-calendar-day--booked {
  background: none;
  color: rgba(238, 241, 236, 0.3);
  text-decoration: line-through;
  cursor: not-allowed;
}
.booking-calendar-day--today { border-color: rgba(238, 241, 236, 0.4); }
.booking-calendar-day--preview {
  background: rgba(184, 111, 69, 0.35);
}
.booking-calendar-day--selected {
  background: var(--c-ember);
  border-color: var(--c-ember);
  color: var(--c-birch);
  font-weight: 700;
}
.booking-calendar-day:not(.booking-calendar-day--disabled):not(.booking-calendar-day--booked):hover {
  border-color: var(--c-ember);
}

.booking-calendar-summary {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-birch);
}
.booking-calendar-summary--error { color: #f4c7c2; }
.booking-calendar-price {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-ember);
}

.booking-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--fs-sm);
  color: rgba(238, 241, 236, 0.85);
}

.booking-form-row {
  display: flex;
  gap: 0.6rem;
}
.booking-form-row label { flex: 1; min-width: 0; }

.booking-form input,
.booking-form textarea {
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(238, 241, 236, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-birch);
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: rgba(238, 241, 236, 0.5); }
.booking-form textarea { resize: vertical; }

.booking-form .btn { align-self: flex-start; margin-top: 0.3rem; }

/* Приманка для ботов — реальным посетителям не видна и не доступна по Tab. */
.booking-form-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.booking-flash {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.booking-flash--ok {
  background: rgba(92, 122, 79, 0.25);
  color: #d7e8c9;
}
.booking-flash--error {
  background: rgba(185, 58, 46, 0.25);
  color: #f4c7c2;
}

@media (max-width: 540px) {
  .booking-form-row { flex-direction: column; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}