/* =========================================================
  site-flow.css
  Єдине полотно “День у Карпатах”
  ЧИСТА ВЕРСІЯ 06

  Використання:
  - Hero залишається окремим першим екраном.
  - Усі секції після Hero загортаються в .site-flow.
  - Секції всередині .site-flow прозорі.
  - Окремі блоки мають свої локальні декоративні мотиви.
  - Темну тему тут НЕ вмикаємо автоматично, щоб не ламати “день”.
========================================================= */

/* =========================================================
  1. Додаткові змінні для єдиного полотна і glass-ефекту
========================================================= */

:root {
  --flow-text-main: #2d2723;
  --flow-text-soft: #665d55;
  --flow-text-muted: #75695f;
  --flow-text-accent: #164734;

  --glass-bg: rgba(255, 255, 255, 0.46);
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-bg-ultra: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.52);
  --glass-border-dark: rgba(45, 39, 35, 0.12);
  --glass-shadow: 0 24px 70px rgba(45, 39, 35, 0.13);
  --glass-blur: blur(22px) saturate(160%);
  --hover-shadow: 0 24px 62px rgba(45, 39, 35, 0.16);
}

/* =========================================================
  2. Єдиний фон після Hero
========================================================= */

.site-flow {
  position: relative;
  overflow: hidden;
  color: var(--flow-text-main);
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 226, 196, 0.82), transparent 18%),
    radial-gradient(circle at 86% 16%, rgba(255, 220, 29, 0.22), transparent 22%),
    radial-gradient(circle at 18% 42%, rgba(22, 71, 52, 0.055), transparent 20%),
    radial-gradient(circle at 82% 64%, rgba(255, 220, 29, 0.13), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(22, 71, 52, 0.075), transparent 22%),
    radial-gradient(circle at 76% 98%, rgba(239, 168, 84, 0.34), transparent 26%),
    linear-gradient(
      180deg,
      #fff0e8 0%,
      #fff8ec 16%,
      #fff7cf 34%,
      #f7f1d8 52%,
      #f4e6be 74%,
      #efcf8f 100%
    );
}

/* Легка фактура. */
.site-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(22, 71, 52, 0.13) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(91, 16, 166, 0.08) 1px, transparent 1.4px);
  background-size: 86px 86px, 140px 140px;
  background-position: 0 0, 42px 34px;
  opacity: 0.22;
  pointer-events: none;
}

/* Делікатна вертикальна “стежка”. Якщо заважає — можна вимкнути display:none. */
.site-flow::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 90px;
  bottom: 120px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 220, 29, 0.25),
    rgba(22, 71, 52, 0.14),
    rgba(240, 106, 42, 0.22)
  );
  opacity: 0.50;
  pointer-events: none;
}

/* =========================================================
  3. Секції всередині site-flow
========================================================= */

.site-flow .camp-section,
.site-flow .program-section,
.site-flow .history-section,
.site-flow .logistics-section,
.site-flow .backpack-section,
.site-flow .safety-section,
.site-flow .parents-info-section,
.site-flow .final-compact-section {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* =========================================================
  4. Базова текстова система
========================================================= */

.site-flow .camp-title,
.site-flow .history-title,
.site-flow .logistics-title,
.site-flow .backpack-title,
.site-flow .parents-info-title {
  color: var(--flow-text-main);
}

.site-flow .camp-subtitle,
.site-flow .history-subtitle,
.site-flow .logistics-subtitle,
.site-flow .backpack-subtitle,
.site-flow .parents-info-subtitle {
  color: var(--flow-text-accent);
}

.site-flow .camp-text p,
.site-flow .history-main-text,
.site-flow .logistics-text,
.site-flow .backpack-text,
.site-flow .parents-info-text {
  color: var(--flow-text-soft);
}

/* Темні акцентні блоки мають власну внутрішню систему кольорів. */
.site-flow .program-section,
.site-flow .safety-section,
.site-flow .final-compact-card,
.site-flow .logistics-note,
.site-flow .equipment-guide-card,
.site-flow .history-credo {
  color: var(--white);
}

/* =========================================================
  5. Універсальний glass-ефект
========================================================= */

.site-flow .camp-scheme-card,
.site-flow .history-visual-card,
.site-flow .history-values-mini,
.site-flow .route-card,
.site-flow .backpack-card,
.site-flow .safety-photo-card {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* =========================================================
  6. Загальний hover для карток
========================================================= */

.site-flow .camp-value,
.site-flow .program-mission,
.site-flow .route-point,
.site-flow .backpack-item,
.site-flow .history-value-mini,
.site-flow .final-info-pill {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.site-flow .camp-value:hover,
.site-flow .program-mission:hover,
.site-flow .route-point:hover,
.site-flow .backpack-item:hover,
.site-flow .history-value-mini:hover,
.site-flow .final-info-pill:hover {
  transform: translateY(-4px);
}

/* =========================================================
  7. Адаптивність
========================================================= */

@media (max-width: 980px) {
  .site-flow::after {
    display: none;
  }
}