/* Zip Zap Chargers — Our Story mobile layer
 * ===========================================================================
 * Loads after mobile.css. Same contract as the other mobile files: every rule
 * sits inside a max-width query so the approved desktop rendering is untouched,
 * and every selector matches the inline style text already in the markup.
 *
 * The charge log is authored as a centre-spine timeline: the meter runs down
 * the middle at left: 50% and cards alternate either side. On a phone that
 * leaves each card about 150px of measure, which is where the one-word-per-line
 * headlines came from. Here the spine moves hard left and every card takes the
 * full width beside it.
 * ===========================================================================
 */

@media (max-width: 767.98px) {

  /* --- 1. The meter runs down the far left ------------------------------- */
  #top div[style*="left: 50%"][style*="width: 4px"] {
    left: 11px !important;
    transform: none !important;
  }

  /* --- 2. Rows: one column, card beside the meter ------------------------ */
  #top div[style*="gap: 40px"] {
    position: relative !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding-left: 38px !important;
  }
  #top div[style*="gap: 40px"] > div[style*="max-width: 580px"] {
    max-width: none !important;
    width: 100% !important;
  }
  /* the empty balance column the alternating layout needs */
  #top div[style*="gap: 40px"] > div[style*="min-width: 0"]:last-child { display: none !important; }
  /* the node dot rides the meter instead of the centre of the row */
  #top div[style*="width: 0"][style*="align-self: center"] {
    position: absolute !important;
    left: 13px !important;
    top: 34px !important;
    align-self: flex-start !important;
    transform: translateY(-50%) !important;
  }
  #top div[style*="gap: 88px"] { gap: 34px !important; }

  /* --- 3. Card type, two steps down ------------------------------------- */
  #top div[style*="border-radius: 26px"][style*="padding: 32px 34px 30px"] {
    padding: 18px 17px 18px !important;
    border-radius: 20px !important;
  }
  #top span[style*="font-size: 32px"][style*="font-weight: 800"] { font-size: 22px !important; }
  #top span[style*="font-size: 13px"][style*="letter-spacing: .14em"] { font-size: 10.5px !important; }
  #top h3[style*="font-size: 32px"] {
    font-size: 20px !important;
    line-height: 1.16 !important;
    letter-spacing: -.01em !important;
  }
  #top p[style*="font-size: 17.5px"] { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* --- 4. Every image well is a rounded box ----------------------------- */
  /* The story shots are background-image divs at 300–420px tall, sized for a
     580px desktop card. On a ~300px card they only need to be wide-screen. */
  /* The fit stays as authored (contain for the press screenshots — faces and
     on-screen text sit near their edges); only the box height changes. */
  /* A 4:5 box instead of a fixed 215px: most of the story shots are portrait
     screenshots, so a taller well lets "contain" draw them near full width
     without cropping, and the few landscape ones simply letterbox. */
  /* The one landscape render (the podium shot) keeps its own ratio, or a 4:5
     box leaves a grey band above and below it — its backing is light, so the
     letterboxing that is invisible on the near-black wells would show. */
  #top div[role="img"][style*="rgb(185"] {
    aspect-ratio: 16 / 11 !important;
    height: auto !important;
  }
  #top div[role="img"] {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    border-radius: 16px !important;
    margin-top: 14px !important;
    overflow: hidden !important;
  }
  #top div[style*="height: 240px"] { height: 190px !important; margin-top: 14px !important; }
  #top image-slot {
    border-radius: 16px !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* --- 5. The closing card ---------------------------------------------- */
  #top h3[style*="font-size: 26px"] { font-size: 20px !important; line-height: 1.18 !important; }
  #top p[style*="font-size: 16px"] { font-size: 13.5px !important; }
}

/* ===================== REVEAL TRANSFORM  ( <= 1240px ) ==================== */
/* The scroll reveal slides each row in from the side (translate3d(-34px…) /
   (34px…)). On a phone or tablet that horizontal travel sticks 12-16px past
   the viewport on both edges — invisible, because html/body are overflow-x:
   clip, but it still shows up as document overflow. Below the desktop
   breakpoint (1240px — the 1180px content column plus its gutters) the reveal
   becomes vertical only: same fade, same rise, no
   sideways travel, nothing crossing the viewport. Settled rows already sit at
   translate3d(0,0,0) and are untouched. */
@media (max-width: 1240px) {
  #top [style*="translate3d(-34px"],
  #top [style*="translate3d(34px"] {
    transform: translate3d(0, 18px, 0) !important;
  }
}