/**
 * TWL Responsive Audit Fixes
 * Loaded AFTER all other CSS (priority 2600)
 * Single file for all responsive corrections — easy to revert.
 */

/* ==========================================================================
   FASE 1 — Critical
   ========================================================================== */

/* 1.2 Hero dead space fix */
@media (max-width: 768px) {
  .twl-vh {
    height: 100vh;
    height: 100svh;
  }
  .twl-vh + section,
  .twl-vh + .elementor-section,
  .twl-vh + .vc_row {
    margin-top: 0 !important;
    padding-top: 0;
  }
}

/* 1.3 WooCommerce product cards */
.woocommerce ul.products {
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}
.woocommerce ul.products li.product .button {
  margin-top: auto;
}

/* 1.4 Service cards — fix overflow:hidden that blocks touch scroll
   Uses body prefix for higher specificity to beat cached rules */
@media (max-width: 1100px) {
  body .services-grid {
    overflow: auto visible !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  body .services-grid .service-card {
    flex: 0 0 80% !important;
    min-width: 260px;
    scroll-snap-align: center;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body .services-grid .service-card {
    flex: 0 0 45% !important;
  }
}

/* 1.6 Location section / footer map */
.twl-footer-final {
  max-height: none;
}
.wl-map-widget iframe,
.twl-ff-map iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
.twl-ff-info-strip__cell {
  color: rgba(255, 255, 255, 0.85);
}

/* 1.7 Six-step process */
@media (max-width: 768px) {
  .twl-process-section [class*="step"],
  .twl-process-section .process-steps,
  .twl-process-grid,
  .wl-process-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }
}

/* ==========================================================================
   FASE 2 — High Impact
   ========================================================================== */

/* 2.2 Tap targets (44px minimum) */
@media (max-width: 1024px) {
  a, button, [role="button"], input[type="submit"],
  .accordion-toggle, summary {
    min-height: 44px;
  }
  /* Don't force min-width on inline links */
  button, [role="button"], input[type="submit"] {
    min-width: 44px;
  }
}

/* 2.3 Mobile menu drawer sizing */
@media (max-width: 1100px) {
  .menu_mobile .menu_mobile_nav_area,
  #mobile-menu .menu_mobile_nav_area {
    width: min(80vw, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2.4 Fixed element stacking */
@media (max-width: 768px) {
  .twl-co2-badge {
    display: none !important;
  }
  .trx_addons_scroll_to_top {
    bottom: calc(var(--cro-bar-h, 64px) + 16px) !important;
  }
}

/* 2.5 Hero height on service pages */
@media (max-width: 768px) {
  [class*="mf-hero"],
  [class*="twl-hero"],
  .twl-vh__hero {
    min-height: 80vh !important;
    min-height: 80svh !important;
  }
}

/* 2.6 CTA buttons stack on mobile */
@media (max-width: 480px) {
  .twl-cta__buttons,
  [class*="cta-buttons"],
  .wl-a3-cta__buttons {
    flex-direction: column !important;
    width: 100%;
  }
  .twl-cta__buttons a,
  .twl-cta__buttons button,
  [class*="cta-buttons"] a,
  [class*="cta-buttons"] button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* 2.7 Contact form mobile (prevent iOS zoom) */
@media (max-width: 480px) {
  .twl-contacto input,
  .twl-contacto select,
  .twl-contacto textarea,
  .wpcf7 input,
  .wpcf7 select,
  .wpcf7 textarea {
    font-size: 16px !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* 2.8 Shop product grid breakpoints */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   FASE 3 — Refinement
   ========================================================================== */

/* 3.1 Gallery border-radius */
@media (max-width: 768px) {
  .esg-media-poster,
  .eg-post-outer {
    border-radius: 12px !important;
  }
}

/* 3.2 B2B tier cards reorder */
@media (max-width: 640px) {
  .wl-b2b-tiers {
    flex-direction: column;
  }
  .wl-b2b-tier--popular {
    order: -1;
  }
}

/* 3.3 Reviews carousel — 1 card on mobile */
@media (max-width: 640px) {
  .wl-rev__card {
    flex: 0 0 90% !important;
    min-width: 260px;
  }
  .wl-rev__arrow {
    width: 36px;
    height: 36px;
  }
}

/* 3.4 Footer cleanup on mobile */
@media (max-width: 768px) {
  .widget_tag_cloud,
  .widget_categories,
  .widget_search {
    display: none !important;
  }
  footer .sidebar {
    display: none !important;
  }
}

/* 3.5 Product variation dropdowns */
@media (max-width: 480px) {
  .variations td {
    display: block;
    width: 100%;
  }
  .variations select {
    width: 100%;
    font-size: 16px;
  }
}

/* 3.6 FAQ accordion tap targets */
.sc_item_title_a,
[class*="accordion"] > [class*="header"],
[class*="accordion"] > summary {
  min-height: 48px;
  padding: 16px 0;
  cursor: pointer;
}

/* 3.7 Marquee overflow */
.twl-marquee {
  overflow: hidden !important;
}