/*
 * BD Vending - tablet and phone layer.
 *
 * Every rule here sits inside a max-width media query (1024px and below), so
 * the desktop design cannot be affected by anything in this file. Loaded last,
 * after Elementor's own CSS and the theme's inline blocks.
 */

/* ---------- Tablet and phone (<=1024px) ---------- */
@media (max-width: 1024px) {

  /* The page could be dragged sideways on touch devices: the Trusted By logo
     marquee runs past the edge. clip (not hidden) so position:sticky, which
     the story section relies on, keeps working. */
  html, body { overflow-x: clip; }

  /* WhatsApp bubble: on desktop it floats at 57% of the screen height, which on
     a phone lands in the middle of the content and covers headings, cards and
     form fields. Pin it to the bottom-right corner, clear of the home bar. */
  .bdv-wa {
    top: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    height: auto !important;
  }
  .bdv-wa__btn,
  .bdv-wa__btn:link, .bdv-wa__btn:visited, .bdv-wa__btn:hover,
  .bdv-wa__btn:focus, .bdv-wa__btn:active {
    width: 58px; height: 58px; padding-left: 13px;
  }
  .bdv-wa.is-open .bdv-wa__btn { height: 64px; }
  .bdv-wa__icon, .bdv-wa__icon svg { width: 32px; height: 28px; flex-basis: 32px; }

  /* White gaps on About and Products (Our Process). Those bands are custom
     HTML widgets sitting in flex columns with no width of their own. Their
     type is sized in container units, so Chrome measures the flex height at a
     narrow intrinsic width (tall, wrapped text) and then lays the band out at
     full width, leaving the difference as empty space under it: 630px under
     The Year 2005, 400px under Family First, 365px under Vision, 660px under
     Our Process. A definite width makes both passes agree. */
  .page-id-130 .e-con > .elementor-widget-html,
  .page-id-132 .e-con > .elementor-widget-html { width: 100%; }

  /* About, Directors band: the desktop collage (machine, Doritos, protein bar,
     popcorn) had been flattened into a 340px machine and a 390px bag stacked
     one under the other, with the bar and popcorn hidden: 730px of loose
     product shots. Rebuilt as the same collage, scaled. Every image shares
     one grid cell and is placed with percentage margins (a grid item's %
     margins resolve against the cell width), so the arrangement holds at any
     width. Offsets are the desktop positions measured from the collage's own
     bounding box (1029 x 1084 in the 1920 frame). */
  .abill .abill__stage {
    display: grid !important;
    grid-template-columns: 1fr min(100%, 460px) 1fr;
    justify-items: center;
    row-gap: 0;
  }
  .abill .abill__stage > .abill__col { grid-column: 1 / -1; grid-row: 1; }
  .abill .abill__stage > .abill__img {
    grid-column: 2; grid-row: 2;
    justify-self: start; align-self: start;
    display: block !important;
    max-width: none !important; height: auto !important;
  }
  .abill .abill__stage > .abill__img--machine { width: 77% !important; margin: calc(28.4% + 24px) 0 0 0 !important; z-index: 1; }
  .abill .abill__stage > .abill__img--doritos { width: 51% !important; margin: 24px 0 0 39.5% !important; z-index: 2; }
  .abill .abill__stage > .abill__img--bar     { width: 30.5% !important; margin: calc(23% + 24px) 0 0 69.5% !important; z-index: 3; transform: rotate(180deg) !important; }
  .abill .abill__stage > .abill__img--popcorn { width: 31.8% !important; margin: calc(56.1% + 24px) 0 0 56.4% !important; z-index: 4; }

  /* One CTA size. The About bands' own Book a Site Visit links were set to
     306 x 60 with 30px type, twice the weight of every other CTA on the site
     (Elementor's 205 x 44, 16px black). Matched to the standard pill. */
  .page-id-130 :is(.abill__cta, .a2005__cta, .afam__cta, .bdb__cta, .ace__cta) {
    width: auto !important; min-width: 205px; height: 44px !important;
    padding: 0 28px !important; font-size: 16px !important; font-weight: 900 !important;
  }

  /* Service, "If a machine isn't working": the stacked service cards sit in
     the old horizontal-scroll wrappers, which still hold one screen of height
     (852px on a phone) with overflow hidden. The stack is 1669px, so the
     WhatsApp card was cut in half and the FAQs band slid over it. */
  .page-id-36 #maintenance-section,
  .page-id-36 #maintenance-section .maintenance-horizontal-scroll-wrapper,
  .page-id-36 #maintenance-section .maintenance-horizontal-scroll {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  /* its Book a Site Visit button is pinned to the wrapper's bottom edge, which
     put it on top of the last card; let it follow the cards instead */
  .page-id-36 #maintenance-section .elementor-element-b619cdb {
    position: relative !important; inset: auto !important; margin: 8px 0 48px !important;
    transform: none !important; width: 100% !important; align-self: stretch !important;
    display: flex !important; justify-content: center !important;
  }

  /* Products, benefit bands 1-4: the copy sat straight on top of a busy
     product photo, which on a narrow screen fills the whole band behind the
     words. The photo now leads each band as its own image, fading into the
     orange, and the copy follows on clean ground. */
  .page-id-132 :is(.bg-benefit-1, .bg-benefit-2, .bg-benefit-3, .bg-benefit-4) {
    position: relative !important;
    inset: auto !important;
    order: -1;
    align-self: stretch;
    width: auto !important;
    height: clamp(240px, 64vw, 400px) !important;
    margin: -88px -20px 8px !important;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .page-id-132 :is(.bg-benefit-1, .bg-benefit-2, .bg-benefit-3, .bg-benefit-4) img {
    width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 45%;
  }
  /* Bands 1 and 4 end on orange once the photo moves up, so their orange
     CTA vanished into the ground. Filled black, like Custom Product Mix. */
  .page-id-132 :is(.elementor-element-b0aa9af, .elementor-element-cd6cd46) .elementor-button {
    background-color: #000 !important; color: #fff !important;
  }
  /* Custom Product Mix: the question-mark pattern ran over the copy at full
     strength. Desktop already dims it to .22; match it. */
  .page-id-132 .bg-benefit-5 { opacity: .22 !important; z-index: 0; }
  .page-id-132 .benefit-section-5 > :not([class*="bg-"]) { position: relative; z-index: 1; }

  /* About, Family First and Cutting Edge: same flattening, same fix. Each
     is a two-image overlap on desktop (team photo + coaching photo, snack
     machine + drink machine); the earlier pass stacked them as two 340-400px
     images. Rebuilt as the desktop overlap, offsets measured from each
     collage's bounding box. The photos keep the desktop crop, tilt, corner
     radius and shadow. */
  .afam .afam__stage, .ace .ace__stage {
    display: grid !important;
    grid-template-columns: 1fr min(100%, 420px) 1fr;
    justify-items: center;
    row-gap: 0;
  }
  .afam .afam__stage > .afam__col, .ace .ace__stage > .ace__col { grid-column: 1 / -1; grid-row: 1; }
  .afam .afam__stage > .afam__img, .ace .ace__stage > .ace__img {
    grid-column: 2; grid-row: 2;
    justify-self: start; align-self: start;
    display: block !important; max-width: none !important;
  }
  .afam .afam__stage > .afam__img {
    object-fit: cover; border-radius: 22px;
    box-shadow: 0 12px 34px rgba(0,0,0,.30);
  }
  .afam .afam__stage > .afam__img--team  { width: 62% !important; aspect-ratio: 440/560; height: auto !important; object-position: 29.7% 50%;
    margin: 30px 0 0 1% !important; transform: rotate(-3deg) !important; z-index: 1; }
  .afam .afam__stage > .afam__img--coach { width: 55% !important; aspect-ratio: 380/470; height: auto !important; object-position: 5.6% 50%;
    margin: calc(28.8% + 30px) 0 0 42% !important; transform: rotate(4deg) !important; z-index: 2; }
  .ace .ace__stage > .ace__img--snack { width: 63.8% !important; height: auto !important; margin: 24px 0 0 0 !important; z-index: 1; }
  .ace .ace__stage > .ace__img--drink { width: 55.2% !important; height: auto !important; margin: calc(30.4% + 24px) 0 0 44.8% !important; z-index: 2; }

  /* About, Backing the Community: the club cards fan showed an empty dark
     box. An earlier mobile pass set the fan to position:static and
     transform:none, so the absolutely placed cards lost their frame (they
     measured against the whole band instead) and the hand, 1060px wide at
     full size, lost its scale-down. Restored as a positioned, scaled box; the
     layout height is set to the scaled height so no gap is left under it. */
  .bdb .bdb__fan {
    position: relative !important;
    transform: scale(.78) !important;
    transform-origin: top center !important;
    height: 562px !important;             /* 720 x .78 */
    margin: 32px auto 0 !important;
  }
  /* its pager dots are 10px; widen the hit area without moving them, as the
     theme already does for the Elementor carousel dots */
  .bdb .bdb__dot { position: relative; }
  .bdb .bdb__dot::after { content: ""; position: absolute; inset: -17px -6px; }
}

/* ---------- Phone (<=767px) ---------- */
@media (max-width: 767px) {
  .bdv-wa__btn,
  .bdv-wa__btn:link, .bdv-wa__btn:visited, .bdv-wa__btn:hover,
  .bdv-wa__btn:focus, .bdv-wa__btn:active {
    width: 52px; height: 52px; padding-left: 12px;
  }
  .bdv-wa__icon, .bdv-wa__icon svg { width: 28px; height: 25px; flex-basis: 28px; }

  /* Off-canvas menu: every item on one line. The menu type was sized from
     the screen height only, so on a narrow phone ABOUT US broke onto two
     lines and SERVICE & MAINTENANCE broke and ran off the edge. Now the size
     is also capped by width: the longest item is 12.2em wide, so everything
     is sized to fit that across the full-width panel (less its 20px
     padding each side), all items at the same size. Line spacing opens up to
     keep the list filling the panel at the smaller size. */
  body .e-off-canvas .elementor-element-1f0e8e2 {
    --bd-fs: min(clamp(22px, min(9.26vh, calc((var(--bd-room) - var(--bd-hdr) - var(--bd-gap) - 12px) / 7.63)), 100px),
                 calc((100vw - 40px) / 12.4));
  }
  body .e-off-canvas .elementor-element-1f0e8e2 a { white-space: nowrap; line-height: 1.9 !important; }

  /* Menu open/close: the menu panel carries its own copy of the header (logo
     and close icon) over the page header. On a phone the page header hides
     its Call Now block and packs the logo and burger to the right; the
     panel's copy kept that block (112px, empty on a phone) and spaced the row
     out instead, so its logo sat 3.5-6px left of the page logo and visibly
     jumped every time the menu opened or closed. Laid out the same way as
     the page header, the two logos land on the same pixel. */
  .e-off-canvas .elementor-element-9a8d007 .elementor-element-5114c3d { display: none !important; }
  .e-off-canvas .elementor-element-9a8d007 > .e-con-inner { justify-content: flex-end !important; }

  /* club cards fan: .42 keeps the hand to about 445px, so the outer cards
     bleed just past the screen edge like a hand held up to the camera */
  .bdb .bdb__fan { transform: scale(.42) !important; height: 302px !important; margin-top: 20px !important; }
}

/* ---------- Tablet only (768-1024px) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Directors band: room for the desktop arrangement, copy left and the
     collage right, instead of one long column. */
  .abill .abill__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: center;   /* centres the copy against the collage */
  }
  .abill .abill__stage > .abill__col { grid-column: 1; grid-row: 1; }
  .abill .abill__stage > .abill__img { grid-column: 2; grid-row: 1; }
  .abill .abill__stage > .abill__img--machine { margin-top: 28.4% !important; }
  .abill .abill__stage > .abill__img--doritos { margin-top: 0 !important; }
  .abill .abill__stage > .abill__img--bar     { margin-top: 23% !important; }
  .abill .abill__stage > .abill__img--popcorn { margin-top: 56.1% !important; }

  /* Off-canvas menu on tablet: the panel is half the screen wide, so the
     one-line fit is taken from 50vw. See the phone rule for the reasoning. */
  body .e-off-canvas .elementor-element-1f0e8e2 {
    --bd-fs: min(clamp(22px, min(9.26vh, calc((var(--bd-room) - var(--bd-hdr) - var(--bd-gap) - 12px) / 7.63)), 100px),
                 calc((50vw - 40px) / 12.4));
  }
  body .e-off-canvas .elementor-element-1f0e8e2 a { white-space: nowrap; line-height: 1.9 !important; }

  /* Family First and Cutting Edge: copy left, overlap right, as on desktop */
  .afam .afam__stage, .ace .ace__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: center;
  }
  .afam .afam__stage > .afam__col, .ace .ace__stage > .ace__col { grid-column: 1; grid-row: 1; }
  .afam .afam__stage > .afam__img, .ace .ace__stage > .ace__img { grid-column: 2; grid-row: 1; }
  .afam .afam__stage > .afam__img--team  { margin-top: 0 !important; }
  .afam .afam__stage > .afam__img--coach { margin-top: 28.8% !important; }
  .ace .ace__stage > .ace__img--snack { margin-top: 0 !important; }
  .ace .ace__stage > .ace__img--drink { margin-top: 30.4% !important; }

  /* Service, the four "isn't working" cards: two by two under the heading,
     instead of one narrow column of 420px cards down an 834px screen. */
  .page-id-36 #maintenance-section .maintenance-horizontal-scroll {
    flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; column-gap: 24px;
  }
  .page-id-36 #maintenance-section .maintenance-horizontal-scroll > .elementor-element-f202f4f { width: 100% !important; }
  .page-id-36 #maintenance-section .maintenance-horizontal-scroll > :is(.elementor-element-460331b, .elementor-element-85c9841,
      .elementor-element-9768791, .elementor-element-79f1a45) { width: calc(50% - 12px) !important; max-width: 380px !important; }

  /* Card copy on Machines and Service stayed at the desktop 14px, small for
     a tablet held at reading distance. */
  :is(.elementor-element-5730eae, .elementor-element-0539b30, .elementor-element-94fb1bd, .elementor-element-f644523,
      .elementor-element-e0b5c23, .elementor-element-b3891be, .elementor-element-61be4ee, .elementor-element-fa58cc9,
      .elementor-element-f8227b9, .elementor-element-656026e,
      .elementor-element-c1b146a, .elementor-element-2a35a3e, .elementor-element-f0ed59d, .elementor-element-4426d4c,
      .elementor-element-9779c4d) :is(p, li, .elementor-widget-container) { font-size: 16px !important; line-height: 1.5 !important; }
}