/* Mobile responsive overrides for Кузня Свят website.
   Uses [data-grid] attributes (added in component source) plus a few
   structural selectors. No fragile substring matching against inline styles. */

/* ===== ≤ 960px : tablet — collapse most 2-col headers, hide nav anchors ===== */
@media (max-width: 960px) {
  /* Section headers with intro paragraph on the right — stack */
  section header[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
  /* Footer top — 2 columns instead of 4 */
  footer > div > div[style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* ===== ≤ 720px : mobile — fully reflow ===== */
@media (max-width: 720px) {
  /* Hero (kids and adult) */
  [data-grid="hero"] {
    grid-template-columns: 1fr !important;
  }
  /* Hero spec chips: 4 cols → 2 */
  [data-grid="specs"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* AlaCarte row */
  [data-grid="alacarte-row"] {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }
  /* FloorPlan wrapper */
  [data-grid="floorplan"] {
    grid-template-columns: 1fr !important;
  }

  /* Generic auto-fit/auto-fill grids → 1 col */
  section [style*="repeat(auto-fit"],
  section [style*="repeat(auto-fill"],
  section [style*="repeat(2,"],
  section [style*="repeat(3,"] {
    grid-template-columns: 1fr !important;
  }

  /* ScheduleStrip 2-col → stacked (top-level wrapper only, not nested) */
  section > div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* WhatsIncluded items */
  section [style*="120px 1fr"] { grid-template-columns: 88px 1fr !important; }
  section [style*="44px 1fr"]  { grid-template-columns: 28px 1fr !important; }

  /* GuestbookStrip */
  section [style*="1fr 1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* FAQ 2-col rows */
  section [style*="1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Location 1fr 1.4fr */
  section [style*="1.4fr"] {
    grid-template-columns: 1fr !important;
  }
  section iframe[title="Кузня Свят на мапі"] {
    min-height: 320px !important;
  }

  /* Footer 4-col → 2-col */
  footer > div > div[style*="1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Sections: tighter padding */
  section, footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Nav: two rows, with the mode switch visible and usable under the wordmark */
  .kuznia-nav-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .kuznia-wordmark {
    font-size: 24px !important;
    justify-self: start !important;
  }
  .kuznia-nav-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .kuznia-mode-toggle-wrap > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .kuznia-mode-toggle-wrap button {
    width: 100% !important;
  }
  nav button { padding: 8px 14px !important; font-size: 13px !important; }
  [data-nav-subtitle] { display: none !important; }
  .kuznia-nav-anchors { display: none !important; }

  /* Headlines: allow break */
  h1, h2 { word-break: break-word; }

  /* Promo ribbon: smaller, allow wrap */
  [data-promo-ribbon] { gap: 8px !important; padding: 8px 12px !important; font-size: 11px !important; }

  /* Sticky pill: full-width, oversized, bright orange on mobile */
  button[style*="position: fixed"][style*="bottom: 24px"] {
    left: 12px !important; right: 12px !important; bottom: 12px !important;
    width: calc(100% - 24px) !important;
    justify-content: center !important;
    padding: 18px 20px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    background: #ff6a1f !important;
    color: #fffaf3 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(255,106,31,0.45), 0 4px 10px rgba(0,0,0,0.18) !important;
  }

  /* StatsBand inner padding */
  section > div > div[style*="border-radius: 8px"] {
    padding: 28px 18px !important;
  }
}

/* ===== ≤ 420px : phone — extra trim ===== */
@media (max-width: 420px) {
  [data-grid="alacarte-row"] {
    grid-template-columns: 28px 1fr !important;
  }
  [data-grid="alacarte-row"] > div:last-child {
    grid-column: 2 !important;
    margin-top: 6px !important;
  }
}

/* No horizontal overflow ever */
html, body { overflow-x: hidden; }
img, svg, iframe { max-width: 100%; }

/* Readability + density pass.
   The first implementation behaved like a design-system gallery: large section
   gutters and many 10-14px labels. Keep the premium rhythm, but make the page
   easier to scan as a real marketing site. */
.kids-mode > section:not(:first-of-type),
.adult-mode > section:not(:first-of-type) {
  padding-top: clamp(20px, 3vw, 36px) !important;
  padding-bottom: clamp(20px, 3vw, 36px) !important;
}

section header {
  margin-bottom: clamp(18px, 2vw, 24px) !important;
}

section p,
section article p,
section header p {
  font-size: clamp(15px, 1.05vw, 16px) !important;
  line-height: 1.6 !important;
}

section h2 {
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
}

section h3 {
  font-size: clamp(1.45rem, 2vw, 1.75rem) !important;
}

section [style*="font-size: 10"],
section [style*="fontSize: 10"],
section [style*="font-size: 11"],
section [style*="fontSize: 11"] {
  font-size: 12px !important;
}

section [style*="font-size: 13"],
section [style*="fontSize: 13"],
section [style*="font-size: 14"],
section [style*="fontSize: 14"] {
  font-size: 15px !important;
}

footer {
  margin-top: 32px !important;
}

[data-grid="pricing"],
[data-grid="activities"] {
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr) !important;
  gap: 20px !important;
}

[data-grid="formats"] {
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3.5fr) minmax(0, 2.5fr) !important;
  gap: 20px !important;
}

@media (max-width: 540px) {
  [data-grid="hero"] h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
    line-height: 1 !important;
  }
  [data-hero-stats] {
    display: none !important;
  }
}

@media (max-width: 960px) {
  [data-grid="pricing"],
  [data-grid="activities"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [data-grid="package-row"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  [data-grid="formats"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 720px) {
  .kids-mode > section:not(:first-of-type),
  .adult-mode > section:not(:first-of-type) {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  [data-grid="pricing"],
  [data-grid="formats"],
  [data-grid="activities"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  [data-grid="package-row"] {
    grid-template-columns: 1fr !important;
  }

  [data-grid="package-prices"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 520px) {
  [data-grid="package-prices"] {
    grid-template-columns: 1fr !important;
  }
}