/**
 * QA responsive fixes (2026-09-11)
 * Round 4: mobile hero whitespace, swoosh under titles, hide footer on mobile
 */

:root {
  --qa-nav-clearance: calc(var(--nav-top) + var(--nav-h) + 16px + env(safe-area-inset-top, 0px));
  --qa-touch: 44px;
}

html {
  scroll-padding-top: var(--qa-nav-clearance);
}

#gateway-services,
#green-heart-events,
#nation,
#story,
#data-stats,
#sports-network,
#events,
#footer,
.gateway-services,
.green-heart,
.training-courses {
  scroll-margin-top: var(--qa-nav-clearance);
}

/* Decorative search glyph — not a separate control */
.hero-search-box > span {
  pointer-events: none;
  user-select: none;
}

/* Whole activity row is the hit target */
.activity-editorial-list article {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.activity-editorial-list article > span {
  pointer-events: none;
}

/* ---------- ≤1100: tablet + mobile ---------- */
@media (max-width: 1100px) {
  :root {
    --qa-nav-clearance: calc(var(--nav-top) + var(--nav-h) + 16px + env(safe-area-inset-top, 0px));
  }

  .nav-shell,
  .nav-shell.is-scrolled {
    top: max(var(--nav-top), env(safe-area-inset-top, 0px));
  }

  .menu-button {
    width: var(--qa-touch);
    height: var(--qa-touch);
    min-width: var(--qa-touch);
    min-height: var(--qa-touch);
    touch-action: manipulation;
  }

  /* Logo home link — cinematic/site-nav shrinks img below 44px on narrow viewports */
  .nav-shell .brand,
  .brand {
    min-height: var(--qa-touch);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  .nav-shell .brand img,
  .nav-shell.is-scrolled .brand img,
  .brand img {
    height: 44px !important;
    max-height: 44px;
    width: auto;
    max-width: 100%;
  }

  .mobile-menu {
    left: 0;
    right: 0;
    width: auto;
    max-height: min(78dvh, calc(100dvh - var(--qa-nav-clearance)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px;
    pointer-events: none;
  }

  .mobile-menu.open {
    pointer-events: auto;
  }

  .mobile-menu .mobile-direct,
  .mobile-accordion-trigger {
    min-height: 48px !important;
    padding: 14px 16px !important;
    box-sizing: border-box;
  }

  .mobile-submenu a,
  .mobile-submenu b {
    min-height: var(--qa-touch);
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  .mobile-menu .mobile-login,
  .mobile-menu .mobile-login.login {
    min-height: var(--qa-touch) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
  }

  .activity-editorial-lead > a {
    min-height: var(--qa-touch);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 4px;
    box-sizing: border-box;
  }

  .activity-editorial-list article {
    min-height: 116px;
    padding-top: 16px;
    padding-bottom: 16px;
    align-items: center;
  }

  .green-heart-tab,
  .green-heart-province-trigger {
    min-height: var(--qa-touch);
    padding: 12px 18px;
    box-sizing: border-box;
  }

  .green-heart-controls button {
    width: var(--qa-touch);
    height: var(--qa-touch);
    min-width: var(--qa-touch);
    min-height: var(--qa-touch);
  }

  .training-course-detail-btn,
  .training-courses .green-heart-intro > a {
    min-height: var(--qa-touch);
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .hero-search-box {
    min-height: 56px;
  }

  .hero-search-box input,
  .hero-search-box input[type="search"] {
    min-height: var(--qa-touch) !important;
    height: auto;
    align-self: stretch;
    box-sizing: border-box;
  }

  .hero-search-box button {
    height: var(--qa-touch) !important;
    min-height: var(--qa-touch) !important;
    min-width: 76px;
    padding: 0 18px !important;
  }

  .login,
  .circle-cta {
    min-height: var(--qa-touch);
  }

  /* Map + nation toolbar */
  .map-reset-btn,
  #map-reset,
  .nation-toolbar-inline button,
  .map-search button,
  .map-zoom button {
    min-height: var(--qa-touch) !important;
    min-width: var(--qa-touch);
    padding: 10px 14px !important;
    box-sizing: border-box;
  }

  .nation-toolbar-inline select,
  .nation-toolbar-inline input,
  .map-search input,
  #map-search,
  #province-select,
  #district-select {
    min-height: var(--qa-touch);
    box-sizing: border-box;
  }

  /* Footer links — real tap rows */
  body > footer a,
  #footer a {
    min-height: 0;
    display: flex !important;
    align-items: center;
    padding: 2px 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  body > footer .footer-bottom a,
  #footer .footer-bottom a {
    min-height: auto;
    display: inline-flex !important;
    padding: 8px 0 !important;
  }
}

/* Tablet band: full-viewport hero + denser stats */
@media (min-width: 761px) and (max-width: 1100px) {
  .motion-hero {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh;
  }

  .motion-stage {
    height: 100% !important;
    min-height: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: calc(96px + env(safe-area-inset-top, 0px)) 0 48px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .motion-copy {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(640px, 86%);
    margin: 0 auto;
    z-index: 4;
  }

  .motion-copy h1 {
    font-size: clamp(42px, 6.2vw, 56px) !important;
    line-height: 1.08 !important;
  }

  .motion-sports {
    top: 46%;
    font-size: clamp(120px, 18vw, 200px);
    opacity: 0.38;
  }

  .motion-copy .hero-search {
    margin-top: clamp(28px, 4.5vh, 48px);
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .gateway-stats-ribbon {
    padding: 22px 28px 14px;
  }

  .gateway-stats-ribbon:before {
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }

  /* Don't stretch 3 stats across full iPad width — keep a compact cluster */
  .gateway-stats-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(780px, 100%);
    max-width: 780px;
    margin: 0 auto;
    min-height: auto;
    gap: 0;
  }

  .gateway-stats-rail,
  .gateway-stats-signoff {
    display: none !important;
  }

  .gateway-stat {
    min-height: 88px;
    padding: 16px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
  }

  .gateway-stat:last-of-type {
    border-right: 0;
  }

  .gateway-stat strong {
    font-size: clamp(1.7rem, 3.2vw, 2.15rem);
  }

  .gateway-stat small {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .activity-editorial {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .activity-editorial-list {
    grid-template-columns: 1fr 1fr;
  }

  .activity-editorial-list article:nth-child(even) {
    padding-left: 14px;
  }

  .mobile-menu {
    max-height: min(70dvh, calc(100dvh - 100px));
  }
}

/* Mobile extras */
@media (max-width: 760px) {
  :root {
    --qa-nav-clearance: calc(84px + env(safe-area-inset-top, 0px));
  }

  .activity-editorial-list {
    grid-template-columns: 1fr;
    padding-top: 4px;
  }

  .activity-editorial-list article:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .hero-search-box input::placeholder {
    font-size: 11px;
  }

  .hero-search-box {
    min-height: 54px;
  }

  .green-heart-level-tabs {
    width: 100%;
    gap: 8px;
  }

  .green-heart-tab {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .event-arrows button {
    width: var(--qa-touch);
    height: var(--qa-touch);
  }
}

@media (min-width: 1101px) {
  .motion-hero {
    height: min(78svh, 720px);
    min-height: 600px;
  }
}

/* ---------- Layering: swoosh leads the eye; titles stay readable ----------
   Original CSS pulled intros up with negative margin so the dashed stroke cut
   through headings. Keep the curve between blocks (visible), keep copy clear. */
.journey-connector,
.nation > .journey-connector,
#green-heart-events + .journey-connector,
#gateway-services + .journey-connector,
.gateway-stats-ribbon + .journey-connector {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
  overflow: visible !important;
}

/* Titles / stats labels above any residual curve overlap */
#gateway-services,
#green-heart-events,
#green-heart-events.green-heart,
.green-heart,
.gateway-services,
.training-courses,
.public-insights {
  z-index: auto !important;
  isolation: auto !important;
  overflow: visible !important;
}

.gateway-stats-ribbon {
  /* Keep isolation so :before clip fill stays inside the ribbon */
  isolation: isolate;
  overflow: hidden;
}

.gateway-stats-inner,
.gateway-stat {
  position: relative;
  z-index: 2;
}

/* Following swoosh must still read above the ribbon's bottom edge */
.gateway-stats-ribbon + .journey-connector {
  z-index: calc(var(--z-connector, 1100) + 1) !important;
}

/* Titles stay above residual curve overlap */
.gateway-section-intro,
.activity-editorial-lead,
.green-heart-intro,
#green-heart-events .green-heart-intro,
.nation-intro,
.training-courses .green-heart-intro,
.places-head,
.ribbon-lead {
  position: relative;
  z-index: calc(var(--z-connector, 1100) + 2) !important;
}
#green-heart-events .green-heart-intro,
#green-heart-events.green-heart .green-heart-intro {
  margin-top: 0 !important;
}

/* Connector rhythm handled by --connector-band in section rhythm block */
#gateway-services + .journey-connector,
.gateway-stats-ribbon + .journey-connector,
#green-heart-events + .journey-connector,
.nation > .journey-connector {
  /* keep visible; size set in rhythm tokens */
}

@media (max-width: 1100px) {
  #gateway-services + .journey-connector {
    margin-bottom: 0 !important;
  }
}

/* ---------- Mobile / tablet-shared: full-viewport hero ---------- */
@media (max-width: 760px) {
  .motion-hero {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh;
  }

  .motion-stage {
    height: 100% !important;
    min-height: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: calc(88px + env(safe-area-inset-top, 0px)) 0 calc(28px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    box-sizing: border-box;
  }

  .motion-sports {
    top: 44%;
    font-size: clamp(88px, 26vw, 130px);
    opacity: 0.35;
    color: #fafbfc;
  }

  .motion-copy {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 40px);
    margin: 0 auto;
    z-index: 4;
  }

  /* Ticker stays out of hero (moved to footer by JS) */
  .association-ticker {
    position: relative !important;
    left: auto;
    right: auto;
    bottom: auto !important;
    margin-top: 0;
    z-index: 8;
  }

  body > footer,
  #footer {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: none;
  }
}

/* ---------- White canvas + section rhythm ---------- */
:root {
  --paper: #ffffff;
  --gateway-paper: #ffffff;
  /* Shared vertical rhythm — not pixel-identical gaps, one beat */
  --section-pad-y: 88px;
  --section-pad-x: 6vw;
  --section-pad-y-hero-next: 64px;
  --connector-band: 48px;
}

html,
body,
body.tpl-landing {
  background: #fff !important;
}

.motion-hero,
.motion-stage,
.gateway-services,
.gateway-stats-ribbon,
#gateway-services,
#green-heart-events,
.green-heart,
.public-insights,
.training-courses,
#nation,
.nation,
.places {
  background-color: #fff;
}

.motion-stage {
  background: #fff !important;
}

.gateway-services,
.public-insights,
#nation,
.nation,
.nation-shell,
.training-courses {
  background: #fff !important;
}

/* Search sits on top; soft shadow so hero doesn't look tinted vs section 2 */
.motion-copy .hero-search,
.hero-search {
  position: relative;
  z-index: 30;
  isolation: isolate;
}

.motion-copy .hero-search:before,
.hero-search:before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

.hero-search-box {
  position: relative;
  z-index: 31;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(7, 24, 49, 0.06) !important;
}

.hero-search-box:hover,
.hero-search-box:focus-within {
  box-shadow: 0 6px 18px rgba(7, 24, 49, 0.09) !important;
}

.hero-search-results {
  z-index: 40;
}

.motion-stage:before {
  opacity: 0.22;
}

.training-course-grid {
  gap: 12px !important;
}

.training-course-card {
  box-shadow: 0 4px 14px rgba(14, 47, 82, 0.06);
}

/* Content sections share one vertical beat */
#gateway-services.gateway-services,
.gateway-services {
  padding: var(--section-pad-y) var(--section-pad-x) !important;
}

#green-heart-events .green-heart-shell,
.green-heart-shell {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* Courses live inside #nation which already has section-pad-x — avoid double inset */
#nation .training-courses .green-heart-shell,
.nation .training-courses .green-heart-shell {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none;
}

/* Keep intentional <br> line breaks (2 lines) — balance was rewriting wraps */
#green-heart-title,
#training-courses-title,
.green-heart-intro h2.kinetic-title,
.training-courses .green-heart-intro h2 {
  text-wrap: unset !important;
  word-break: keep-all;
  overflow-wrap: normal;
  max-width: min(760px, 100%);
}

#green-heart-events .green-heart-intro,
.training-courses .green-heart-intro {
  max-width: min(760px, 100%);
  width: 100%;
}

/* Courses sit inside #nation — trim stacked top air before หลักสูตร */
.training-courses {
  padding-top: 28px !important;
  padding-bottom: calc(var(--section-pad-y) * 0.5) !important;
}

#nation.nation,
.nation {
  padding-top: calc(var(--section-pad-y) * 0.4) !important;
  padding-bottom: var(--section-pad-y) !important;
  /* horizontal inset lives on .nation-shell only (same as green-heart-shell) */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nation-shell {
  padding-left: var(--site-gutter) !important;
  padding-right: var(--site-gutter) !important;
}

#green-heart-events.green-heart,
#green-heart-events,
.green-heart {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: calc(var(--section-pad-y) * 0.55) !important;
}

.training-courses .green-heart-intro {
  margin-bottom: 20px !important;
}

.public-insights {
  padding-left: var(--section-pad-x) !important;
  padding-right: var(--section-pad-x) !important;
  padding-bottom: calc(var(--section-pad-y) * 0.65) !important;
}

/* Connectors live inside the beat — don't invent a second gap */
#gateway-services + .journey-connector,
#green-heart-events + .journey-connector,
.nation > .journey-connector {
  height: var(--connector-band) !important;
  margin: calc(var(--connector-band) / -2) 0 !important;
}

#green-heart-events .green-heart-intro,
#green-heart-events.green-heart .green-heart-intro {
  margin-top: 0 !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --section-pad-y: 72px;
    --section-pad-x: 22px;
    --section-pad-y-hero-next: 40px;
    --connector-band: 40px;
  }

  .gateway-stats-ribbon {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  #gateway-services.gateway-services,
  .gateway-services {
    padding-top: var(--section-pad-y-hero-next) !important;
  }

  #nation.nation,
  .nation {
    padding-top: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .training-courses {
    padding-top: 4px !important;
    padding-bottom: 40px !important;
  }

  #green-heart-events.green-heart,
  #green-heart-events,
  .green-heart {
    padding-bottom: 8px !important;
  }

  #green-heart-events + .journey-connector {
    height: 32px !important;
    margin: -6px 0 0 !important;
  }

  .training-courses .green-heart-intro {
    margin-bottom: 16px !important;
  }

  .green-heart-rail {
    padding-bottom: 0 !important;
  }

  .hero-search-box {
    border-radius: 999px !important;
  }

  .hero-search-box button {
    border-radius: 999px !important;
    height: 44px !important;
  }
}

@media (min-width: 1101px) {
  #nation.nation,
  .nation {
    padding-top: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .training-courses {
    padding-top: 6px !important;
    padding-bottom: 48px !important;
  }

  #green-heart-events.green-heart,
  #green-heart-events,
  .green-heart {
    padding-bottom: 10px !important;
  }

  #green-heart-events + .journey-connector {
    height: 36px !important;
    margin: -8px 0 0 !important;
  }

  .training-courses .green-heart-intro {
    margin-bottom: 18px !important;
  }

  .green-heart-rail {
    padding-bottom: 0 !important;
  }

  .hero-search-box {
    border-radius: 999px !important;
  }

  .hero-search-box button {
    border-radius: 999px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --section-pad-y: 52px;
    --section-pad-x: 18px;
    --section-pad-y-hero-next: 44px;
    --connector-band: 36px;
  }

  /* Hero: full viewport — center block, balanced gaps */
  .motion-stage {
    padding: calc(88px + env(safe-area-inset-top, 0px)) 0 calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .motion-copy {
    width: calc(100% - 40px);
    margin: 0 auto;
  }

  .motion-copy h1 {
    font-size: clamp(34px, 9.2vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em;
    margin-bottom: 0;
  }

  .motion-copy h1 em {
    font-size: 0.92em !important;
  }

  .motion-sports {
    top: 44%;
    font-size: clamp(72px, 22vw, 110px);
    opacity: 0.35;
    color: #fafbfc;
  }

  .motion-copy .hero-search {
    margin-top: clamp(24px, 5vh, 40px);
    width: 100%;
    margin-bottom: 0;
    z-index: 30;
  }

  .hero-search > label {
    margin-bottom: 10px;
  }

  /* Match pill search box + pill button (was 14px box vs 999px button) */
  .hero-search-box {
    min-height: 52px;
    height: 52px;
    padding: 0 5px 0 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(7, 24, 49, 0.05) !important;
    border-color: #d7e0e9;
  }

  .hero-search-box button {
    height: 42px !important;
    min-height: 42px !important;
    min-width: 78px;
    padding: 0 18px !important;
    font-size: 12px;
    border-radius: 999px !important;
  }

  .motion-stage:before {
    display: none !important;
  }

  .gateway-stats-ribbon,
  .gateway-stats-ribbon + .journey-connector {
    display: none !important;
  }

  #gateway-services.gateway-services,
  .gateway-services {
    padding: var(--section-pad-y-hero-next) var(--section-pad-x) var(--section-pad-y) !important;
    background: #fff !important;
  }

  #green-heart-events.green-heart,
  #green-heart-events,
  .green-heart {
    padding: var(--section-pad-y) 0 calc(var(--section-pad-y) * 0.5) !important;
  }

  #nation.nation,
  .nation {
    padding: 16px 0 var(--section-pad-y) !important;
  }

  .training-courses {
    padding-top: 16px !important;
    padding-bottom: 32px !important;
  }

  .training-courses .green-heart-intro {
    margin-bottom: 14px !important;
  }

  .training-course-grid {
    gap: 8px !important;
  }

  .training-course-card {
    box-shadow: 0 2px 8px rgba(14, 47, 82, 0.05);
  }

  .training-course-card-body {
    padding: 12px 12px 14px !important;
    gap: 6px !important;
  }

  .training-course-detail-btn {
    margin-top: 8px;
    padding: 10px 12px;
  }

  #gateway-services + .journey-connector,
  #green-heart-events + .journey-connector {
    height: var(--connector-band) !important;
    margin: calc(var(--connector-band) / -2) 0 !important;
  }

  .activity-editorial-lead > small {
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .activity-editorial-lead h2 {
    margin: 14px 0 18px !important;
    font-size: clamp(32px, 8.5vw, 40px) !important;
    line-height: 1.12 !important;
  }

  .activity-editorial-lead > a {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .activity-editorial {
    gap: 22px !important;
  }

  .activity-editorial-list article {
    min-height: 88px !important;
    padding: 12px 0 !important;
    gap: 12px !important;
    grid-template-columns: 64px 1fr 18px !important;
  }

  .activity-editorial-list time strong {
    font-size: 36px !important;
  }

  .activity-editorial-list time small {
    font-size: 13px !important;
  }

  .activity-editorial-list h3 {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}