/* ==========================================================================
   05 How it works (#how). Boards: m03b-how-v2 (390) and d03b-how-v2 (1280), canvas v353.
   Three numbered steps, each its own reveal block (nv-solo) that shows as it is reached.
   Phone: words then the mock-up, stacked. 768 up: words and mock-up side by side, step 2 mirrored.
   The mock-ups are pictures of the booking, aria-hidden as on the boards; every figure in them is
   filled from fares.js by sections/05-how.py.
   Phones, D-168 (a trial): data-hw-layout="swipe" makes the steps one swipe row (site.css 6i), each
   step a card shaped like Services (D-172: a compact picture on top, then the label, title and words),
   Previous and Next under it (05-how.js); "stack" is the board's stacked steps. The switch is LAYOUT
   in sections/05-how.py.
   ========================================================================== */

#how{position:relative;overflow:clip}                    /* the 600 to 760px glow pools stay inside */
.hw-wrap{position:relative}

.hw-h{margin:0 auto;max-width:350px;font-family:var(--font-display);font-size:30px;line-height:1.1;font-weight:700;
  letter-spacing:-.02em;text-wrap:balance;text-align:center;color:var(--bone)}

.hw-steps{list-style:none;margin-top:48px;margin-bottom:0;display:flex;flex-direction:column;gap:72px}
/* sideways margin and padding belong to the swipe row when it is one (site.css 6i); zero otherwise */
#how:not([data-hw-layout="swipe"]) .hw-steps{margin-left:0;margin-right:0;padding:0}
#how .hw-step.rim::before{content:none}                    /* the rim is for the phone swipe card only */
#how[data-hw-layout="stack"] .hw-hint,#how[data-hw-layout="stack"] .hw-ctrl{display:none}
.hw-step{display:flex;flex-direction:column;gap:32px}

/* The words */
.hw-copy{position:relative;z-index:1}
.hw-eyebrow{display:block;font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-300)}
.hw-title{margin:12px 0 0;font-family:var(--font-display);font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--bone)}
.hw-text{margin:16px 0 0;color:var(--muted)}
.hw-ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.45;color:var(--bone)}
.hw-ticks li{display:flex;align-items:flex-start;gap:12px}
.hw-ticks svg{flex-shrink:0;margin-top:2px;color:var(--blue-300)}

/* The mock-up column and its glow */
.hw-visual{position:relative;width:100%}
.hw-glow{position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;z-index:0;pointer-events:none}
.hw-glow__pool{width:100%;height:100%;border-radius:50%;filter:blur(32px);
  background:radial-gradient(circle,rgba(23,212,208,.12) 0%,rgba(0,95,214,.20) 30%,rgba(0,95,214,.08) 50%,rgba(0,95,214,0) 70%)}
.hw-glow__pool--blue{background:radial-gradient(circle,rgba(0,95,214,.22) 0%,rgba(0,95,214,.09) 40%,rgba(0,95,214,0) 70%)}
.hw-card{position:relative;z-index:1;padding:20px;border-radius:var(--radius);background:var(--navy-900)}

.hw-label{display:block;font-size:14px;line-height:1.4;color:var(--muted)}
.hw-label--sub{margin-top:4px}

/* Step 1: the fare finder */
.hw-finder__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:12px;
  font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hw-finder__fields{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.hw-field{display:block;margin-top:6px;padding:12px 16px;border:1px solid var(--navy-700);border-radius:var(--radius);
  background:var(--navy-800);font-size:16px;line-height:1.4;color:var(--bone)}
.hw-finder__total{margin-top:20px;padding-top:20px;border-top:1px solid var(--navy-700);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.hw-fare{font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--bone)}

/* Step 2: the WhatsApp thread */
.hw-chat__head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--navy-700)}
.hw-chat__avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:var(--radius);
  background:var(--blue-700);font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--bone)}
.hw-chat__name{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--bone)}
.hw-chat__thread{margin-top:16px;display:flex;flex-direction:column;gap:12px}
/* the boards size bubbles by their text box (248, 340): add the padding and border here, since the page is border-box */
.hw-bubble{max-width:280px;padding:12px 16px;border-radius:var(--radius)}
.hw-bubble--out{align-self:flex-end;max-width:282px;border:1px solid var(--navy-700);background:var(--navy-800)}
.hw-bubble--in{align-self:flex-start;background:var(--blue-700)}
.hw-bubble__text{display:block;font-size:16px;line-height:1.45;color:var(--bone)}
.hw-bubble__time{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--bone)}
.hw-bubble--out .hw-bubble__time{text-align:right;color:var(--muted)}

/* Step 3: the confirmed booking */
.hw-booking{padding:0;overflow:hidden}
.hw-booking img{display:block;width:100%;height:auto;aspect-ratio:12 / 5;object-fit:cover}
.hw-booking__body{padding:20px}
.hw-booking__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hw-booking__when{font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.2;color:var(--bone)}
.hw-booking__status{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--bone)}
.hw-booking__dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.hw-booking__rows{margin-top:16px;display:grid;grid-template-columns:76px minmax(0,1fr);row-gap:10px;font-size:16px;line-height:1.45}
.hw-booking__k{color:var(--muted)}
.hw-booking__v{color:var(--bone)}

/* What happens next */
.hw-next{margin:64px auto 0;max-width:350px;font-size:16px;line-height:1.55;color:var(--muted);text-align:center}
.hw-next b{color:var(--bone);font-weight:600}

/* The compact pictures (D-172): only on a phone swipe card, at its top */
.hw-pic{display:none}

/* --------------------------------------------------------------------------
   Phones, swipe (D-168, reshaped by D-172). One card per step, about 86% of the row so the next one
   peeks in, all three the height of the tallest, shaped like the Services cards: a 5:4 picture at the
   top (a compact mock-up: route and fare, two chat bubbles, the car), then the step label, the title
   and the words. The full mock-ups and the tick lines are left out here. The row is not a reveal: a
   card swiped in from the side must never wait on a scroll observer, so the steps simply show (the
   heading still reveals). The glow pools are left out: the row would clip them into boxes.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  #how[data-hw-layout="swipe"] .hw-hint{margin-top:28px}
  #how[data-hw-layout="swipe"] .hw-steps{flex-direction:row;align-items:stretch;gap:16px;margin-top:12px}
  #how[data-hw-layout="swipe"] .hw-step{flex:0 0 min(86%,440px);position:relative;gap:0;padding:0;overflow:hidden;
    border-radius:var(--radius);background:rgba(9,33,78,.5);scroll-snap-stop:always}
  #how[data-hw-layout="swipe"] .hw-step.rim::before{content:""}
  #how[data-hw-layout="swipe"] .hw-step.nv-rv{opacity:1;transform:none}
  #how[data-hw-layout="swipe"] .hw-visual,#how[data-hw-layout="swipe"] .hw-ticks{display:none}
  #how[data-hw-layout="swipe"] .hw-copy{padding:16px 18px 20px}
  #how[data-hw-layout="swipe"] .hw-title{margin-top:10px;font-size:22px;line-height:1.1}
  #how[data-hw-layout="swipe"] .hw-text{margin-top:10px}
  #how[data-hw-layout="swipe"] .hw-next{margin-top:40px}

  /* the picture: a fixed 5:4 area on the panel blue, everything in it 12px or more */
  #how[data-hw-layout="swipe"] .hw-pic{order:-1;position:relative;display:flex;flex-direction:column;aspect-ratio:5 / 4;
    padding:16px;background:var(--navy-900);border-bottom:1px solid var(--navy-700)}
  .hw-pic__label{font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .hw-pic--finder{justify-content:space-between}
  .hw-pic__route{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid var(--navy-700);
    border-radius:var(--radius);background:var(--navy-800)}
  .hw-pic__stop{position:relative;padding-left:20px;font-size:15px;line-height:1.3;color:var(--bone)}
  .hw-pic__stop::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
    border:2px solid var(--blue-300)}
  .hw-pic__stop + .hw-pic__stop::before{background:var(--blue-300)}
  .hw-pic__total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
  .hw-pic__fare{font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--bone)}
  .hw-pic__note{max-width:150px;font-size:13px;line-height:1.35;text-align:right;color:var(--muted)}
  #how[data-hw-layout="swipe"] .hw-pic--chat{justify-content:center;gap:8px;padding:12px}
  .hw-pic__bubble{display:block;max-width:86%;padding:10px 12px;border-radius:var(--radius);font-size:14px;line-height:1.4;color:var(--bone)}
  .hw-pic__bubble--out{align-self:flex-end;border:1px solid var(--navy-700);background:var(--navy-800)}
  .hw-pic__bubble--in{align-self:flex-start;background:var(--blue-700)}
  #how[data-hw-layout="swipe"] .hw-pic--car{padding:0;justify-content:flex-start;overflow:hidden}   /* chip over the trees, clear of the car (D-181) */
  .hw-pic--car img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:49% 50%}   /* D-181: the car (27 to 71% of the photo) centred */
  .hw-pic__chip{position:relative;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:10px;padding:5px 8px;white-space:nowrap;
    border-radius:var(--radius);background:rgba(4,16,39,var(--glass-tint,.89));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    font-size:12px;line-height:1.3;color:var(--bone)}
}

/* --------------------------------------------------------------------------
   768 up: side by side (d03b). Words 440, mock-up 500, the rest between them; both give a little
   on narrower screens, never less than a 48px gap.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  #how .hw-steps{margin-left:0;margin-right:0;padding:0}
  .hw-h{max-width:640px;font-size:var(--fs-h2)}
  .hw-steps{margin-top:64px;gap:80px}
  .hw-step{flex-direction:row;align-items:center;justify-content:space-between;gap:48px}
  .hw-step--rev{flex-direction:row-reverse}
  .hw-copy{flex:0 1 440px;min-width:0}
  .hw-visual{flex:0 1 500px;width:auto;min-width:0}
  .hw-ticks li{align-items:center}
  .hw-ticks svg{margin-top:0}
  .hw-next{max-width:640px;font-size:14px}
}

@media (min-width:1024px){
  #how{font-size:16.64px}                                 /* the desktop boards' base size */
  .hw-h{font-size:40px;line-height:1.08}
  .hw-steps{margin-top:80px;gap:96px}
  .hw-title{font-size:32px;line-height:1.08}
  .hw-ticks{font-size:15.5px}
  .hw-glow{width:760px;height:760px;margin:-380px 0 0 -380px}
  .hw-card{padding:24px}
  .hw-booking{padding:0}
  .hw-booking__body{padding:24px}
  .hw-field{font-size:inherit}
  .hw-bubble{max-width:372px}
  .hw-bubble--out{max-width:374px}
  .hw-bubble__text{font-size:15px}
  .hw-booking__rows{grid-template-columns:96px minmax(0,1fr);font-size:15px}
  .hw-next{margin-top:80px}
}