/* ─────────────────────────────────────────────────────────────────────────
   NBRH — English-language scope (.lang-en on <html>)
   ADDITIVE ONLY. Loaded after styles.css, and only by /en/ pages.
   Nothing here can affect the Thai site: every rule is scoped to .lang-en.
   ───────────────────────────────────────────────────────────────────────── */

/* — Latin reading rhythm ————————————————————————————————————————————
   The Thai site sets 1.92 line-height via :lang(th)/.th. English pages never
   match that selector, so base body copy already lands on the 1.72 default.
   These adjust only the places tuned specifically for Thai metrics.        */
.lang-en .lead{ line-height:1.6; max-width:44ch; }
.lang-en h1{ line-height:1.06; }
.lang-en h2{ line-height:1.1; }
.lang-en .philosophy-lead{ line-height:1.22; }
.lang-en .philosophy-body{ line-height:1.5; }
.lang-en .philosophy-en{ line-height:1.7; max-width:56ch; }

/* — Hero intro (English counterpart of the Thai .hero-th block) ————————— */
.lang-en .hero-intro{ font-family:var(--font-body); color:var(--ink-2); font-size:1.02rem;
  line-height:1.72; max-width:52ch; margin-top:1.7em; }
.lang-en .hero-intro p{ margin:0 0 .85em; text-wrap:pretty; }
.lang-en .hero-intro p:last-child{ margin-bottom:0; }

/* — Trust row: Thai keys are short enough to nowrap; English ones are not — */
.lang-en .hero-meta .k{ white-space:normal; line-height:1.26; font-size:1.1rem; }
.lang-en .hero-meta .l{ line-height:1.62; }

/* — Navigation: 8 English labels are wider than 8 Thai labels ——————————
   Nav collapses to the burger at 940px, so this only tightens 941–1180px.  */
.lang-en .nav-links{ gap:2px; }
@media (max-width:1240px){
  .lang-en .nav-links{ gap:0; }
  .lang-en .nav-links a, .lang-en .nav-links span.en-pending{ padding:.6em .46em; font-size:.87rem; }
  .lang-en .nav-cta{ gap:13px; }
}
/* Eight English labels need more room than eight Thai ones, so the EN header
   hands over to the burger earlier than the Thai 940px breakpoint. */
@media (max-width:1160px){
  .lang-en .nav-links, .lang-en .nav-meta{ display:none; }
  .lang-en .burger{ display:flex; }
}

/* — Area cards: English descriptor sits under an English title ——————————— */
.lang-en .area-list .item .t{ line-height:1.34; }
.lang-en .area-list .item .t small{ line-height:1.45; margin-top:4px; }

/* — Steps / reviews Latin metrics ——————————————————————————————————————— */
.lang-en .step p{ line-height:1.7; }
.lang-en .review p{ line-height:1.52; }

/* — Footer ————————————————————————————————————————————————————————————— */
.lang-en footer p{ line-height:1.65; }

/* — Price cards: English CTA labels are longer than the Thai ones, whose
   min-content happened to fit the 320px track exactly. Let the block buttons
   wrap and let the grid track shrink below its items' min-content. — */
.lang-en .grid.cols-3 > *{ min-width:0; }
.lang-en .price-card .btn-block{ white-space:normal; }

/* — About hero: the Thai eyebrows are short enough to nowrap; the English
   “Education & Professional Background” is 396px and cannot, which pinned the
   grid column open and caused horizontal overflow ≤768px. Also release the
   practitioner-name nowrap at the same 760px the hero grid collapses. — */
.lang-en .about-hero .eyebrow{ white-space:normal; }
@media (max-width:820px){
  .lang-en .about-name{ white-space:normal; }
}

/* — Header CTA: keep a 44px touch target on small phones — */
@media (max-width:380px){
  .lang-en .nav-cta .btn-primary{ min-height:44px; display:inline-flex;
    align-items:center; justify-content:center; }
}

/* — 320px header CTA standardization: every English page matches the approved
   en/index.html reference box (96.08 × 44px) — side padding, arrow gap and
   font-size only. EN-only scope (.lang-en), so Thai headers are untouched. — */
@media (max-width:340.5px){
  .lang-en .topbar .nav-cta .btn-primary{ padding-left:5.25px; padding-right:5.25px; gap:4.05px; font-size:13px; }
}

/* — Article "Back to …" link: a 19px text link is below the 44px touch
   target on phones. Grow the hit area with padding and cancel the extra
   height with matching negative margins so the visual layout is unchanged. — */
@media (max-width:600px){
  .lang-en .article-back{ display:inline-flex; align-items:center; min-height:44px; margin-top:-12px; margin-bottom:-12px; }
}

/* — Full-width stacked CTA buttons: the longer English labels exceed the
   button box on the narrowest phones, where .btn's white-space:nowrap made
   the text spill outside its own background. Allow a wrap at ≤380px only. — */
@media (max-width:380px){
  .lang-en .hero-cta .btn{ white-space:normal; line-height:1.3; padding-top:.86em; padding-bottom:.86em; }
}

/* — Home hero H1: four intentional editorial lines on desktop/laptop.
   The <br class="h1-brk"> breaks are neutralized ≤940px so tablet and mobile
   wrap naturally. The copy column keeps its original grid share. — */
@media (max-width:940px){
  .lang-en .hero h1 br.h1-brk{ display:none; }
}

/* — Areas heading: its second authored line needs ~592px but the default 1:1
   split gives 536px, orphaning “down.”. Give the heading column the room. — */
@media (min-width:761px){
  .lang-en section:has(.area-list) .grid.cols-2{ grid-template-columns:1.28fr 1fr; }
}

/* — Home trust row: equal baselines for the three keys — */
@media (min-width:761px){
  .lang-en .hero-meta .k{ min-height:2.52em; }
}

/* — Areas section heading: balance the rag so “down.” doesn't sit alone — */
.lang-en .area-head h2, .lang-en h2{ text-wrap:balance; }

/* — Price cards: equal CTA height and equal duration-line height so the
   three bullet lists align across the row — */
.lang-en .price-card .btn-block{ min-height:64px; }
.lang-en .price-card .per{ min-height:3.5em; }

/* — BUILD STATE ONLY —————————————————————————————————————————
   Destinations whose English page does not exist yet are rendered as inert
   elements instead of links, so nothing 404s during the page-by-page build.
   Delete this block (and swap the spans back to <a href>) once the EN site
   is complete.                                                              */
.lang-en .en-pending{ cursor:default; }
.lang-en .nav-links .en-pending,
.lang-en .mobile-menu .en-pending,
.lang-en footer .en-pending{ opacity:.5; }
.lang-en .nav-links span.en-pending{ display:inline-block; color:var(--ink-2);
  font-size:.92rem; font-weight:500; padding:.6em .85em; }
.lang-en .mobile-menu span.en-pending{ color:var(--ink); font-family:var(--font-display);
  font-size:1.5rem; padding:.55em 0; border-bottom:1px solid var(--line-soft); display:block; }
.lang-en footer span.en-pending{ display:block; padding:5px 0; font-size:.94rem; color:#C9BFA9; }
.lang-en .btn.en-pending:hover .arr{ transform:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   EN DESKTOP SCALE — width/margins + header + typography (English pages only)
   Scope: .lang-en (EN <html>) → zero effect on TH. ≥1360px only → ≤1280px untouched.
   Values = the EN Home prototype approved live (en/index.html keeps its identical
   local rules, so nothing stacks). .wrap-narrow reading columns (article/area
   prose, FAQ, page heads) keep their width by design. Rollback = delete this block.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1360px){
  .lang-en .wrap:not(.wrap-narrow){ max-width:1320px; padding:0 40px; }
  .lang-en .topbar .nav-links{ gap:0; }
  .lang-en .topbar .nav-links a, .lang-en .topbar .nav-links span.en-pending{ font-size:18px; padding:.6em .42em; }
  .lang-en .topbar .nav-tel{ font-size:1rem; }
  .lang-en .topbar .lang-switch{ font-size:.88rem; }
  .lang-en main.site{ font-size:17.5px; }
  .lang-en .area-hero-body p{ font-size:17.5px; }
  .lang-en .prose p{ font-size:1.16rem; }
  .lang-en .prose .prose-h{ font-size:1.7rem; }
  .lang-en .acc-q{ font-size:1.26rem; }
  .lang-en .card p{ font-size:1.02rem; }
  .lang-en .kc-card .art-excerpt{ font-size:.98rem; }
  .lang-en .price-card li{ font-size:1rem; }
  .lang-en .experience-list li, .lang-en .qual-list li, .lang-en .cat-desc{ font-size:1.07rem; }
  .lang-en .area-list .item .t small{ font-size:.88rem; }
  .lang-en .ct-row .v{ font-size:16.8px; }
  .lang-en .ct-note, .lang-en .ct-sub{ font-size:16.3px; }
  .lang-en .callout p.final-body{ font-size:19px; }
  .lang-en .about-hero-grid .about-portrait{ min-height:0; height:auto; aspect-ratio:454 / 560; }
}
@media (min-width:1600px){
  .lang-en .wrap:not(.wrap-narrow){ max-width:1440px; padding:0 48px; }
  .lang-en .topbar .nav-links a, .lang-en .topbar .nav-links span.en-pending{ padding:.6em .6em; }
  .lang-en main.site{ font-size:18.5px; }
  .lang-en .area-hero-body p{ font-size:18.5px; }
  .lang-en .prose p{ font-size:1.22rem; }
  .lang-en .acc-q{ font-size:1.32rem; }
  .lang-en .page-head .lead{ font-size:1.38rem; }
  .lang-en .callout p.final-body{ font-size:20px; }
}