/* ============================================================
   GLOW v3 — visible colour + growing accent on every box
   Load order: shared.css → premium.css → motion.css → glow3.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════════
   🟢 GOLD RING RESTORED — 2026-08-13 (second pass), Shane:
   "all the highlight growling ring around the boxes are gone !!! fix it
   every page" + "there's no colour growing and highlight as we talked".

   ❌ DEAD: "Shane retired the ring because he likes the flat clean look."
   That retirement, shipped earlier the same day, rested on a MISREADING and
   is the bug this block reverses. He said "flat clean" about
   /medical-tourism — and it was measured that same day that 27 of 27 .lit
   boxes on that page were running the ring at FULL strength when he said
   it. He was describing that page's LAYOUT, TYPE and PHOTOGRAPHY, never its
   ring. He has now explicitly confirmed he wants the ring and the bloom
   back on every page.

   Restored HERE, in the one shared file — feedback_zipai_glow_is_one_shared_file.
   Never re-implement this page-local or as an inline box-shadow.

   ⚠️ VALUES ARE RECONSTRUCTED, NOT RECOVERED. glow3.css has no git history
   (last commit predates it) and no .bak survived, so the pre-retirement file
   is gone. These numbers are the one reading consistent with all three
   surviving records:
     · landing/ACCEPTANCE-STANDARD.md §1b (the acceptance gate, measured live
       across 30 pages on 11 ส.ค.): rest rgba(255,184,37,.22) 1.5px
       -> in-view rgba(255,184,37,.62) 1.6px.
     · landing/BLUEPRINT-PAGE-STYLE.md §4/§10: the 44px halo
       0 10px 44px rgba(255,184,37,.34), pixel-delta verified.
     · this file's own retirement note: the ring "peaked at .80" — which is
       the HOVER peak in §3, not the bloom.
   ACCEPTANCE and BLUEPRINT disagree on the bloom (.62/1.6px vs .80/2px);
   §3 hover at .80/2px is what reconciles them. If Shane's eye says the
   bloom is too weak, the number to raise is §2b — he picks ring strength by
   eye (he chose 42% over 22% that way on 2 ส.ค.).
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   2026-09-06 — RULING B (Shane): the amber ring is retired site-wide by
   kit v2 (zx-system.css:417 keeps one soft shadow on .lit; the 12 SC19
   comparison components excepted). glow3.css stays loaded for the accent
   bar (§1) and legacy pages; its ring rules are outranked on purpose.
   ship.py ASSERT6/7 retired the same day.
   ══════════════════════════════════════════════════════════════════════ */

/* ---- 1. GROWING ACCENT BAR — gold restored ----
   The bar is the only motion many of these boxes have, and every page must
   keep photos + motion. The 3-stop gradient tipped with gold (#ffb825) and
   the 1.05s growth are both restored per BLUEPRINT-PAGE-STYLE.md §4/§11
   ("accent bar 1.05s"). */
.lit{position:relative}
.lit::after{
  content:'';position:absolute;z-index:2;
  bottom:0;left:16px;height:2px;width:0;
  border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,#0e6b5c,#18b87a 48%,#ffb825);
  transition:width 1.05s var(--ease3,cubic-bezier(.33,.9,.28,1)),
             height var(--dur3-hover,150ms) var(--ease3,cubic-bezier(.33,.9,.28,1));
  pointer-events:none;
}
.lit.is-lit::after{width:calc(100% - 32px)}
.lit:hover::after{height:3px}

/* ---- 2. VISIBLE TIER-2 RING (replaces the invisible .07–.14) ---- */
.premium .stat-tile:not(.glow-card),.premium .mech-card:not(.glow-card),
.premium .step:not(.glow-card),.premium .tcard:not(.glow-card),
.premium .svc:not(.glow-card),.premium .svc-card:not(.glow-card),
.premium .answer-block:not(.glow-card),.premium .stat:not(.glow-card),
.premium .ba-card:not(.glow-card),.premium .p-split-copy:not(.glow-card),
.premium .stepcard:not(.glow-card),.premium .price-card:not(.glow-card),
.premium .ctabox:not(.glow-card),.premium .qcard:not(.glow-card),
/* `body .lit` not `.lit` (0,3,0 not 0,2,0): page-local and premium.css card rules reach (0,3,0),
   and at equal specificity glow3 wins on load order. Measured 11 ส.ค. — 18 of 41 boxes on
   /google-maps were losing the cascade and rendering a neutral grey shadow instead of the gold. */
.glow-t2:not(.glow-card),body .lit:not(.glow-card){
  box-shadow:
    0 0 0 1.5px rgba(255,184,37,.22),
    0 1px 2px rgba(28,35,33,.04),
    0 8px 18px rgba(28,35,33,.035),
    0 26px 42px rgba(28,35,33,.022);
}
/* FAQ accordions — RE-GOLDED 2026-08-13 (second pass). This rule is (0,3,1) and
   so outranks `body .lit:not(.glow-card)` (0,3,0); left flat it kept every FAQ
   box on every page ringless while the rest of the site went gold. It survived
   the first restore pass and was only caught at a 1900px desktop viewport —
   ship.py's gate runs 375x812, where the FAQ sits below the measured fold. */
.premium .faq details:not(.glow-card){
  box-shadow:
    0 0 0 1.5px rgba(255,184,37,.22),
    0 1px 2px rgba(28,35,33,.03),
    0 8px 18px rgba(28,35,33,.028);
}
.premium .faq details.is-lit:not(.glow-card){
  box-shadow:
    0 0 0 1.6px rgba(255,184,37,.62),
    0 10px 44px rgba(255,184,37,.34),
    0 8px 18px rgba(28,35,33,.028);
}

/* ---- 2b. GROWING BLOOM (sitewide, 20260811c) — the ring is no longer static from load.
   A box sits at the .22 base above, then blooms as it scrolls into view, in step with the
   accent bar in §1. glow3.js adds .is-lit on intersection then unobserves, so it fires once.
   MUST STAY ABOVE §3: `.lit.is-lit:not(.glow-card)` and `.lit:not(.glow-card):hover` have
   identical specificity (0,3,0), so source order is the only thing letting hover win. ---- */
/* 2026-08-13 (second pass): BLOOM RESTORED with the ring. The box sits at the
   .22 base from §2, then blooms to .62 + a 44px amber halo as it scrolls into
   view, in step with the accent bar in §1. Bloom duration 0.9s per
   BLUEPRINT-PAGE-STYLE.md §11. This is the "colour growing" Shane asked for
   by name — the base ring alone does NOT satisfy it. */
body .lit:not(.glow-card){transition:box-shadow .9s var(--ease3,cubic-bezier(.33,.9,.28,1))}
body .lit.is-lit:not(.glow-card){
  box-shadow:
    0 0 0 1.6px rgba(255,184,37,.62),
    0 10px 44px rgba(255,184,37,.34),
    0 8px 18px rgba(28,35,33,.035),
    0 26px 42px rgba(28,35,33,.022);
}
@media (prefers-reduced-motion:reduce){
  body .lit:not(.glow-card){transition:none}
}

/* ---- 2c. SCROLL WRAPPERS CLIP THE GLOW (20260811g) ----
   An `overflow:auto|hidden` parent clips its child's box-shadow. On the homepage `.cmp-card.lit`
   sits inside `.cmp-scroll{overflow:auto}`, so the 2px hard ring squeezed through but the 44px
   halo was cut to NOTHING — measured, not guessed: sampling pixels outward from the box border
   gave a delta of 0–1 of 255 at every distance from 1px to 60px. Computed style said the glow was
   there; the render said otherwise. Give the halo room to paint. ---- */
/* Padding only — NO negative margin. The first version used `margin:-20px` to cancel the
   padding, which pushed the wrapper 20px outside its parent section; that section has
   overflow:hidden, so the halo was clipped again one level up (gap measured at -18px by the
   ASSERT7 geometry check). Trading 20px of inner space for a glow that actually paints. */
.cmp-scroll,.tbl-scroll{padding:20px}
/* .tbl-scroll is itself .lit on 7 pages — the padding sits inside its own ring, which is correct. */

/* ---- 3. HOVER: colour intensifies ---- */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .glow-t2:not(.glow-card):hover,body .lit:not(.glow-card):hover,
  .premium .svc-card:not(.glow-card):hover,.premium .tcard:not(.glow-card):hover,
  .premium .step:not(.glow-card):hover,.premium .stat-tile:not(.glow-card):hover,
  .premium .answer-block:not(.glow-card):hover,.premium .qcard:not(.glow-card):hover,
  .premium .price-card:not(.glow-card):hover,.premium .ctabox:not(.glow-card):hover{
    /* HOVER = the ring's PEAK, .80/2px — this is the ".80" the retirement note
       recorded, and it is what reconciles ACCEPTANCE (.62 bloom) with
       BLUEPRINT (.80). Restored 2026-08-13 second pass. */
    box-shadow:
      0 0 0 2px rgba(255,184,37,.80),
      0 10px 44px rgba(255,184,37,.34),
      0 12px 26px rgba(28,35,33,.05),
      0 38px 60px rgba(28,35,33,.035);
    transition:box-shadow var(--dur3-hover,150ms) var(--ease3,cubic-bezier(.33,.9,.28,1));
  }
}

/* ---- 4. HEADING ACCENT — fires on card's first heading regardless of DOM position.
   HARD LIMIT: exactly one bar per card — h3 is suppressed when a sibling h2 exists.
   Uses :has() (Chrome 105+, FF 121+, Safari 15.4+) for the suppression logic. ---- */
/* REMOVED 2026-08-11 (Shane: "remove this it doesnt look nice on the top in box").
   This injected a 34px green dash above the first heading inside every .lit box. With the gold
   ring and the bottom accent bar both present, it was a third decoration competing on the same
   card. Deleted rather than commented into a page-local override — one shared file, per
   ACCEPTANCE-STANDARD.md §1b. The .lit-hd hook is now unused; leave it in markup, it is inert. */

/* ---- 5. HOMEPAGE / HERO COLOUR BAND ---- */
.hero-band{
  position:relative;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(24,184,122,.16), transparent 62%),
    radial-gradient(760px 380px at 88% 0%,  rgba(255,184,37,.16), transparent 60%),
    linear-gradient(180deg,#fffdf8 0%,#faf6ee 100%);
}
.hero-band::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#0e6b5c,#18b87a 42%,#ffb825 78%,#0e6b5c);
  background-size:220% 100%;
  animation:zipBandFlow 9s linear infinite;
}
@keyframes zipBandFlow{to{background-position:220% 0}}

/* animated underline under the hero accent word */
.hl-grow{
  background-image:linear-gradient(90deg,rgba(24,184,122,.34),rgba(255,184,37,.42));
  background-repeat:no-repeat;background-position:0 88%;
  background-size:0% .42em;
  animation:zipHlGrow 1.5s cubic-bezier(.33,.9,.28,1) .35s forwards;
  padding:0 .06em;
}
@keyframes zipHlGrow{to{background-size:100% .42em}}

/* ---- 6. SECTION TINT so pages are not one flat cream ---- */
.tint-mint{background:linear-gradient(180deg,rgba(24,184,122,.07),rgba(24,184,122,.02))}
.tint-amber{background:linear-gradient(180deg,rgba(255,184,37,.09),rgba(255,184,37,.02))}

/* ---- 7. IMAGE SIZING — one rule, everywhere ---- */
.svc-media,.card-media,.lit-media{
  aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#f1ece1
}
.svc-media img,.card-media img,.lit-media img{
  width:100%;height:100%;object-fit:cover;display:block
}
.premium img:not(.nav-ico):not([class*=ico]):not(svg){max-width:100%;height:auto}
/* Photo-strip marquee: must beat the catch-all above (spec 0,3,3) — use !important */
.pcard img{height:230px!important;width:auto!important;max-width:none!important}
@media(max-width:860px){.pcard img{height:170px!important}}

/* ---- 8. LINE CTA — logo + ทัก LINE, never bare text ----
   `js-line-cta` is a JS BEHAVIOUR hook (line-modal.js), NOT a style class.
   Styling it green+white hijacked secondary/ghost buttons that keep their own
   pale background, producing white-on-white unreadable text (found live on
   pin-google-maps.html `.btn-sec.js-line-cta`, 2026-08-02).
   Green pill styling belongs to `.btn-line` only; the hook is excluded from
   any button that already declares its own appearance. */
.btn-line,
.js-line-cta:not(.btn-sec):not(.link-pill):not(.btn-check):not(.line-fab){
  display:inline-flex;align-items:center;gap:8px;
  background:#06C755;color:#fff!important;border:0;
  font-weight:700;text-decoration:none;white-space:nowrap;
  border-radius:999px;padding:11px 20px;min-height:44px;
  box-shadow:0 6px 20px rgba(6,199,85,.34)
}
/* s176b (Shane screenshot, 25 ส.ค.): the nowrap above made long pill labels
   ("ทัก LINE เช็กหมุดฟรี — ตอบใน 24 ชม.") overflow their own pill on phones —
   scrollWidth 342-357px vs clientWidth 320-350px at 360-390vw on dorm/google-maps,
   text spilling past the padding with the rounded ends clipped square by
   html's overflow-x:clip. On mobile the label may wrap to 2 centred lines. */
@media(max-width:860px){
  .btn-line,
  .js-line-cta:not(.btn-sec):not(.link-pill):not(.btn-check):not(.line-fab){
    white-space:normal;text-align:center
    /* no line-height here: 1.35 shrank the /medical-tourism SC16 anchor's pill
       14px (inherited 1.8 was load-bearing in the approved render) */
  }
}
.btn-line:hover,
.js-line-cta:not(.btn-sec):not(.link-pill):not(.btn-check):not(.line-fab):hover{
  background:#05b34c;box-shadow:0 10px 28px rgba(6,199,85,.48)
}
.btn-line svg,.js-line-cta svg{flex-shrink:0}

/* Secondary LINE CTA: keeps its pale background, so it needs dark ink and a
   readable border. Never inherits the white text from the green pill. */
.btn-sec.js-line-cta{
  color:var(--sky,#0e6b5c)!important;
  border:1.5px solid rgba(14,107,92,.45);
  background:#fffdf8;
  font-weight:700;text-decoration:none
}
.btn-sec.js-line-cta:hover{
  background:rgba(14,107,92,.07);
  border-color:var(--sky,#0e6b5c)
}

/* ---- 9. Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .lit::after{width:calc(100% - 32px)!important;transition:none!important}
  .hero-band::after,.hl-grow{animation:none!important}
  .hl-grow{background-size:100% .42em}
}

/* ---- 10. SVC-CARD BOXED RING — .svc-card has overflow:hidden which clips
   the .boxed::before gradient ring. Compensate with an inset ring via
   box-shadow so rail cards match the rest of the site. (20260802b) ---- */
/* RE-GOLDED 2026-08-13 (second pass) with §2/§2b/§3. This block re-declares the
   ring at a higher specificity further down the same file, so it must move in
   lockstep with §2 — when it did not, /services was the one page out. */
.svc-card.boxed:not(.glow-card){
  box-shadow:
    inset 0 0 0 1.5px rgba(255,184,37,.22),
    0 1px 2px rgba(28,35,33,.04),
    0 8px 18px rgba(28,35,33,.035),
    0 26px 42px rgba(28,35,33,.022);
}

/* ---- 90-day guarantee block (20260802h) ---- */
.guarantee-sec{padding:clamp(38px,5vw,64px) 20px}
.gtee{
  max-width:760px;margin:0 auto;padding:clamp(26px,3.4vw,40px);
  border-radius:20px;
  background:
    radial-gradient(600px 300px at 8% -20%, rgba(24,184,122,.13), transparent 60%),
    linear-gradient(180deg,#fffdf8,#fdf8ec);
}
.gtee-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:#0e6b5c;background:rgba(24,184,122,.12);
  border:1px solid rgba(24,184,122,.3);
  border-radius:999px;padding:6px 13px;margin-bottom:16px
}
.gtee-hd{
  font-size:clamp(21px,2.7vw,31px);line-height:1.35;margin:0 0 22px;
  letter-spacing:-.01em
}
.gtee-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:13px}
.gtee-list li{display:flex;gap:13px;align-items:flex-start}
.gtee-n{
  flex-shrink:0;width:27px;height:27px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#0e6b5c,#18b87a);
  box-shadow:0 3px 10px rgba(14,107,92,.3)
}
.gtee-list p{margin:2px 0 0;font-size:16px;line-height:1.7;color:var(--ink,#1c2321)}
.gtee-cond{
  font-size:13.5px;line-height:1.65;color:var(--muted,#5c6660);
  border-top:1px solid var(--line,#ddd5c4);padding-top:14px;margin:0 0 20px
}
.gtee-cta{margin-top:2px}
@media(max-width:560px){ .gtee-list p{font-size:15px} }