/* ============================================================
   MOBILE SAFETY LAYER  (320–768px)
   Loaded LAST on every front-end page (handle: villas-mobile).
   PURPOSE: a non-destructive safety net on top of the theme's
   existing, already-responsive CSS (villas-*.css, shop/checkout/
   product, Elementor). It only ADDS guards — no existing rule is
   removed. Heavy blanket overrides are intentionally avoided so the
   hand-tuned villas breakpoints keep working; this file fixes the
   universal mobile pitfalls (overflow, iOS zoom, tap targets, vanilla
   Elementor column stacking) and a few concrete overflow culprits.
   ============================================================ */

/* ---- 1. Kill horizontal scroll (uses clip so position:sticky keeps working) ---- */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* media never forces the viewport wider than the screen */
img,
video,
iframe,
svg.v-fluid {
  max-width: 100%;
}

/* Страховка на случай, если Woodmart всё же выведет свои «Skip to …» ссылки
   (их PHP-хук снят в functions.php). Их собственный CSS у нас отключён, поэтому
   без этого правила надпись садится поверх логотипа. Прячем визуально, но
   оставляем доступной с клавиатуры. */
.wd-skip-links {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wd-skip-links:focus-within {
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

/* long unbroken strings (urls, emails) wrap instead of overflowing */
.v-footer__contacts a,
.v-cnt-info__val,
.v-msgr__btn,
.elementor-widget-container a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================
   2. ≤768px — tablet / large phone
   ============================================================ */
@media (max-width: 768px) {

  /* iOS zooms the page when a focused input is < 16px — force 16px */
  input,
  select,
  textarea,
  .v-input,
  .wpcf7-form input,
  .wpcf7-form select,
  .wpcf7-form textarea {
    font-size: 16px;
  }

  /* finger-friendly tap targets (44px) — interactive CONTROLS only,
     not inline text links, so prose layout is untouched */
  .v-btn-gold,
  .v-btn,
  button.v-msgr__btn,
  .v-iconbtn,
  .v-burger,
  .v-loc,
  .v-cnt-form__submit,
  .v-cnt-form__arrow,
  .v-footer__reply-btn,
  .wpcf7-submit,
  .v-nav a,
  .v-pagination a,
  .v-pagination span {
    min-height: 44px;
  }

  /* ---- Generic Elementor content: stop columns floating side-by-side ----
     (villas widgets already render full-width single-column sections; this
     only affects vanilla Elementor columns the owner may add) */
  .elementor-section .elementor-container {
    flex-wrap: wrap !important;
  }

  .elementor-column,
  .elementor-column.elementor-col-50,
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-25,
  .elementor-column.elementor-col-20,
  .elementor-column.elementor-col-16 {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* background-image sections shouldn't keep a fixed desktop height */
  .elementor-section.elementor-section-height-min-height {
    min-height: auto !important;
  }

  /* tables (cart / checkout / specs) never push the page wide */
  table {
    max-width: 100%;
  }
  .woocommerce table.shop_table,
  .woocommerce-cart-form table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   3. ≤480px — small phones (≥320)
   ============================================================ */
@media (max-width: 480px) {

  /* never let a media card / image block exceed the column */
  .v-card,
  .v-nov,
  .v-flat,
  .v-cnt-media,
  .v-catalog__book {
    max-width: 100%;
  }

  /* messenger toggle: already wraps, make each button comfy & tappable */
  .v-msgr {
    flex-wrap: wrap;
    gap: 8px;
  }
  .v-msgr__btn {
    min-height: 44px;
  }

  /* keep the gold CTA from overflowing on the narrowest screens */
  .v-btn-gold {
    width: 100%;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* contact info columns: one per row, centred, no overlap */
  .v-cnt-info {
    grid-template-columns: 1fr;
  }
}