/* DubaLog mobile layout guard
   Keeps every landing-page section inside the viewport, including JS-built carousels. */
@media (max-width: 760px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body { position: relative; }
  main, header, footer, section, .section {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .container, .narrow {
    width: calc(100% - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nav-wrap { min-width: 0 !important; }
  .brand { min-width: 0 !important; max-width: 100% !important; }

  .hero-grid,
  .feeding-grid,
  .health-grid,
  .training-grid,
  .blankets-grid,
  .access-grid,
  .overview-grid,
  .horses-grid,
  .horse-code-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-copy,
  .feeding-copy,
  .health-copy,
  .training-copy,
  .blankets-copy,
  .access-copy,
  .overview-copy,
  .horses-copy,
  .horse-code-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .feeding-copy h2, .health-copy h2, .training-copy h2, .blankets-copy h2,
  .access-copy h2, .overview-copy h2, .horses-copy h2, .horse-code-copy h2,
  .feeding-lead, .health-lead, .training-lead, .blankets-lead,
  .access-lead, .overview-lead, .horses-lead, .horse-code-lead {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .feeding-points, .health-points, .training-points, .blankets-points,
  .access-points, .overview-points, .horses-points, .horse-code-points {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .feeding-point, .health-point, .training-point, .blankets-point,
  .access-point, .overview-point, .horses-point, .horse-code-point {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .feeding-point > div, .health-point > div, .training-point > div,
  .blankets-point > div, .access-point > div, .overview-point > div,
  .horses-point > div, .horse-code-point > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .feeding-point small, .health-point small, .training-point small,
  .blankets-point small, .access-point small, .overview-point small,
  .horses-point small, .horse-code-point small {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .hero-visual,
  .feeding-visual,
  .health-visual,
  .training-visual,
  .blankets-visual,
  .access-visual,
  .overview-visual,
  .horses-visual,
  .horse-code-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin-top: 30px !important;
  }

  .feeding-carousel,
  .health-carousel,
  .training-carousel,
  .blankets-carousel,
  .access-carousel,
  .overview-carousel,
  .mh-carousel,
  .pc-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .feeding-carousel-tabs,
  .health-carousel-tabs,
  .training-carousel-tabs,
  .blankets-carousel-tabs,
  .access-tabs,
  .overview-tabs,
  .mh-tabs,
  .pc-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .feeding-carousel-stage,
  .health-carousel-stage,
  .training-carousel-stage,
  .blankets-carousel-stage,
  .access-stage,
  .overview-stage,
  .mh-stage,
  .pc-stage {
    position: relative !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
  }

  .carousel-phone,
  .health-phone,
  .training-phone,
  .blankets-phone,
  .access-phone,
  .overview-phone,
  .mh-phone,
  .pc-phone {
    flex: 0 1 auto !important;
    width: min(286px, calc(100vw - 86px)) !important;
    max-width: 286px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  .carousel-arrow,
  .health-arrow,
  .training-arrow,
  .blankets-arrow,
  .access-arrow,
  .overview-arrow,
  .mh-arrow,
  .pc-arrow {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 23px !important;
  }

  .carousel-arrow.prev, .health-arrow.prev, .training-arrow.prev, .blankets-arrow.prev,
  .access-arrow.prev, .overview-arrow.prev, .mh-arrow.prev, .pc-arrow.prev { left: 0 !important; }

  .carousel-arrow.next, .health-arrow.next, .training-arrow.next, .blankets-arrow.next,
  .access-arrow.next, .overview-arrow.next, .mh-arrow.next, .pc-arrow.next { right: 0 !important; }

  .app-phone {
    width: min(330px, calc(100vw - 42px)) !important;
    max-width: 100% !important;
  }

  .weide-float { right: 8px !important; transform: none !important; max-width: 72% !important; }
  .care-float { left: 8px !important; transform: none !important; max-width: calc(100% - 16px) !important; }

  .horse-code-privacy { grid-template-columns: 34px minmax(0,1fr) !important; }
}

@media (max-width: 360px) {
  .carousel-phone, .health-phone, .training-phone, .blankets-phone,
  .access-phone, .overview-phone, .mh-phone, .pc-phone {
    width: min(258px, calc(100vw - 76px)) !important;
    max-width: 258px !important;
  }
}