/* ThaiLumaGuide — prototype layout. Builds on ../tokens.css; no new brand colors. */

/* Utilities */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--color-ink);color:#fff;font-weight:700}
.skip-link:focus{top:var(--space-4)}
.icon{flex:none}
ul[role=list]{margin:0;padding:0;list-style:none}
p{margin:0}
/* In-page targets clear the sticky header */
[id]{scroll-margin-top:96px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-6);min-height:80px}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;flex:none}
.brand__logo{width:44px;height:auto}
.brand__text{display:flex;flex-direction:column}
.brand__name{font-size:1.625rem;line-height:1.1}
.brand__tagline{margin-top:2px}
.primary-nav{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.primary-nav__list{display:flex;gap:var(--space-1);margin:0;padding:0;list-style:none}
.primary-nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--space-3);white-space:nowrap;border-radius:var(--radius-sm);color:var(--color-ink);font-size:.9375rem;font-weight:500;text-decoration:none}
.primary-nav a:hover{background:var(--color-surface-lavender);color:var(--color-purple)}
.site-header__cta{flex:none}
.cta-short{display:none}
.btn--choklotto:hover{background:var(--color-gold)}
.nav-toggle{display:none}

/* Language switcher (Alpine.js disclosure; plain links without JS) */
.js [x-cloak]{display:none!important}
.lang{position:relative}
.lang__toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);font:500 .9375rem/1 var(--font-body);cursor:pointer}
.lang__toggle:hover{background:var(--color-surface-lavender)}
.lang__chevron{transition:transform var(--duration-fast)}
.lang__toggle[aria-expanded=true] .lang__chevron{transform:rotate(180deg)}
.lang__menu{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:60;min-width:200px;margin:0;padding:var(--space-2);list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-hover)}
.lang__menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--color-ink);text-decoration:none}
.lang__menu a:hover{background:var(--color-surface-lavender)}
.lang__menu a[aria-current]{font-weight:700;color:var(--color-purple)}
.lang__hint{font-size:var(--text-xs);font-weight:400;color:var(--color-muted)}
.no-js .lang__toggle{display:none}
.no-js .lang__menu{position:static;display:flex;min-width:0;padding:0;border:0;box-shadow:none}
@media(min-width:1200px){.no-js .lang__hint{display:none}.no-js .lang__menu a,.no-js .primary-nav a{padding:0 var(--space-2)}}

/* Hero */
.hero-section{padding-top:var(--space-6)}
.hero{position:relative;isolation:isolate;min-height:clamp(440px,44vw,540px)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% center}
/* Text protection overlay (DS §2 Hero) */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.8) 38%,rgba(255,255,255,0) 68%)}
.hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.hero__content .eyebrow{color:var(--color-purple)}
.hero__lead{max-width:44ch;font-size:var(--text-lg);color:var(--color-ink)}
.hero__content .btn{margin-top:var(--space-2)}

/* ChokLotto banner: ChokLotto's own artwork as one link, with the gold CTA laid over the empty area under the headline */
.promo-section{padding-top:var(--space-6)}
.promo-banner{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform var(--duration-normal) ease,box-shadow var(--duration-normal) ease}
.promo-banner img{display:block;width:100%;height:auto;transition:transform .45s ease}
/* Same hover as the cards: artwork zooms a little inside the frame, the banner lifts with a deeper shadow */
@media(hover:hover){
  .promo-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
  .promo-banner:hover img{transform:scale(1.04)}
}
.promo-banner:focus-visible{box-shadow:var(--shadow-hover)}
.promo-banner:focus-visible img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.promo-banner:hover,.promo-banner:focus-visible{transform:none}.promo-banner:hover img,.promo-banner:focus-visible img{transform:none}}
.promo-banner__cta{position:absolute;left:3.2%;top:60%}
.promo-banner:hover .promo-banner__cta{transform:translateY(-2px);box-shadow:var(--shadow-hover);background:var(--color-gold)}
.promo-banner:focus-visible{outline-offset:4px}
.promo-banner__caption{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-muted)}

/* Sections & cards */
.section--lavender{background:var(--color-surface-lavender)}
.section-header{display:flex;flex-direction:column;gap:var(--space-2);max-width:680px;margin-bottom:var(--space-8)}
.section-header__lead{font-size:var(--text-md)}
.card{position:relative;display:flex;flex-direction:column;transition:transform var(--duration-normal) ease,box-shadow var(--duration-normal) ease}
.card:focus-within{outline:3px solid var(--color-focus);outline-offset:3px}
.card__media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--color-surface-lavender)}
.card__media img{transition:transform .45s ease}
.card__title{transition:color var(--duration-fast) ease}
/* Card hover (as on marcotogni.it): photo zooms a little inside its frame, the card lifts with a deeper shadow,
   the title turns purple. Keyboard focus gets the same; touch screens skip it, reduced motion keeps only colour/shadow. */
@media(hover:hover){
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
  .card:hover .card__media img{transform:scale(1.04)}
  .card:hover .card__title{color:var(--color-purple)}
}
.card:focus-within{box-shadow:var(--shadow-hover)}
.card:focus-within .card__media img{transform:scale(1.04)}
.card:focus-within .card__title{color:var(--color-purple)}
@media(prefers-reduced-motion:reduce){
  .card:hover,.card:focus-within{transform:none}
  .card:hover .card__media img,.card:focus-within .card__media img{transform:none}
}
.card__content{display:flex;flex:1;flex-direction:column;gap:var(--space-2)}
.card__title{font-family:var(--font-body);font-size:var(--text-lg)}
.card__link-cover{color:inherit;text-decoration:none}
.card__link-cover::after{content:"";position:absolute;inset:0}
.card__link-cover:focus-visible{outline:none}
.card:hover .card__link-cover{text-decoration:underline}
.card__link{margin-top:auto;padding-top:var(--space-2);color:var(--color-purple)}

/* Article page */
.breadcrumb{padding-top:var(--space-6);font-size:var(--text-sm)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none;color:var(--color-muted)}
.breadcrumb li+li::before{content:"/";margin-right:var(--space-2);color:var(--color-border)}
.breadcrumb a{color:var(--color-muted)}
.breadcrumb [aria-current]{color:var(--color-ink)}
.article-header{display:flex;flex-direction:column;gap:var(--space-4);max-width:780px;padding-block:var(--space-6) var(--space-8)}
.article-header h1{font-size:clamp(2rem,3.6vw,3.25rem);font-weight:800;letter-spacing:-.02em}
.article-header__standfirst{max-width:62ch;font-size:var(--text-lg);color:var(--color-ink)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:var(--text-sm);color:var(--color-muted)}
.article-figure{margin:0 0 var(--space-10)}
.article-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--space-12);align-items:start;padding-bottom:var(--space-16)}
.toc{grid-column:2;grid-row:1;position:sticky;top:104px;font-size:var(--text-sm)}
.toc summary{margin-bottom:var(--space-3);font-weight:700;color:var(--color-ink);list-style:none;pointer-events:none}
.toc summary::-webkit-details-marker{display:none}
.toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--color-border)}
.toc a{display:block;padding:6px 0 6px var(--space-4);margin-left:-2px;border-left:2px solid transparent;color:var(--color-body);text-decoration:none}
.toc a:hover{border-left-color:var(--color-purple);color:var(--color-purple)}
.prose{grid-column:1;grid-row:1;max-width:68ch;font-size:1.0625rem;line-height:1.7}
.prose section+section{margin-top:var(--space-12)}
.prose h2{margin-bottom:var(--space-4);font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:800;letter-spacing:-.02em}
.prose p{margin-bottom:var(--space-4)}
.prose h3{margin:var(--space-6) 0 var(--space-2);font-family:var(--font-body);font-size:var(--text-lg)}
.prose ul{margin:0 0 var(--space-6);padding-left:1.25rem}
.prose ol{margin:0 0 var(--space-6);padding-left:1.25rem}
.prose li{margin-bottom:var(--space-2)}
.prose li::marker{font-weight:700;color:var(--color-purple)}

/* Ticket anatomy: which digits count for each prize (the page's one visual moment) */
.ticket-anatomy{margin:var(--space-8) 0}
.ticket-anatomy__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2);max-width:460px}
.ticket-anatomy__digit{grid-row:2;height:64px;border:2px solid var(--color-ink);border-radius:var(--radius-sm);background:var(--color-surface)}
.ticket-anatomy__bar{padding:6px var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:700;line-height:1.35}
.ticket-anatomy__bar--all{grid-column:1/7;grid-row:1;background:var(--color-surface-lavender);color:var(--color-purple)}
.ticket-anatomy__bar--front{grid-column:1/4;grid-row:3;background:var(--color-surface-mint);color:var(--color-teal)}
.ticket-anatomy__bar--last3{grid-column:4/7;grid-row:3;background:color-mix(in srgb,var(--color-gold) 22%,#fff);color:var(--color-ink)}
.ticket-anatomy__bar--last2{grid-column:5/7;grid-row:4;background:color-mix(in srgb,var(--color-orange) 18%,#fff);color:var(--color-ink)}
.ticket-anatomy figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-muted)}

/* Prize table */
.table-wrap{margin:var(--space-6) 0;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.prize-table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--text-sm);line-height:1.45}
.prize-table caption{padding:var(--space-3) var(--space-4);font-weight:700;color:var(--color-ink);text-align:left}
.prize-table th,.prize-table td{padding:10px var(--space-4);border-top:1px solid var(--color-border);text-align:left;vertical-align:top}
.prize-table thead th{background:var(--color-background);color:var(--color-ink)}
.prize-table tbody th{font-weight:600;color:var(--color-ink);white-space:nowrap}
.prize-table tbody tr:first-child>*{font-weight:700;color:var(--color-ink)}
.prize-table tfoot>tr>*{font-weight:700;color:var(--color-ink);background:var(--color-surface-mint)}
.prize-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prize-table__match-inline{display:none}

/* ChokLotto callout inside an article: same campaign look as the homepage banner */
.callout{margin:var(--space-6) 0;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--gradient-banner);color:rgba(255,255,255,.9)}
.callout__title{margin-bottom:var(--space-2);font-family:var(--font-body);font-size:var(--text-xl);color:#fff}
.callout p{margin-bottom:var(--space-5)}
.callout :focus-visible{outline-color:#fff}

/* Legal pages: publisher details still to be filled in site.json */
.todo{padding:0 4px;border-radius:4px;background:color-mix(in srgb,var(--color-gold) 35%,#fff);color:var(--color-ink);font-weight:700}
.legal{max-width:68ch;padding-bottom:var(--space-16)}
.article-note{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-border);font-size:var(--text-sm);line-height:1.6;color:var(--color-muted)}
.related{background:var(--color-surface-lavender)}
.related__title{margin-bottom:var(--space-6)}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin:0;padding:0;list-style:none}

/* 404 page */
.notfound{max-width:68ch}
.notfound__lead{margin:var(--space-4) 0 var(--space-6);font-size:var(--text-lg);color:var(--color-ink)}
.notfound__links{display:grid;gap:var(--space-2);margin:0 0 var(--space-8)}

/* Footer */
.site-footer{margin-top:0;padding-block:var(--space-12) var(--space-6);background:var(--color-ink);color:rgba(255,255,255,.8)}
.site-footer :focus-visible{outline-color:var(--color-gold)}
.site-footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:var(--space-8);align-items:start}
.brand--inverse .brand-wordmark,.brand--inverse .brand-tagline{color:#fff}
.brand--inverse .brand__name{font-size:1.375rem}
.site-footer__heading{margin-bottom:var(--space-3);font:700 var(--text-sm)/1.4 var(--font-body);color:#fff}
.site-footer__nav li a{display:inline-flex;align-items:center;min-height:36px;color:rgba(255,255,255,.8);font-size:var(--text-sm);text-decoration:none}
.site-footer__nav li a:hover{color:#fff;text-decoration:underline}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.14);font-size:var(--text-sm)}

/* Tablet: collapse navigation */
@media(max-width:1199px){
  .site-header__inner{gap:var(--space-3)}
  .site-header__cta{margin-left:auto}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);cursor:pointer}
  .nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--duration-fast)}
  .nav-toggle__bars{position:relative}
  .nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
  .nav-toggle__bars::before{top:-6px}.nav-toggle__bars::after{top:6px}
  .nav-toggle[aria-expanded=true] .nav-toggle__bars{background:transparent}
  .nav-toggle[aria-expanded=true] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded=true] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}
  .site-header__inner{flex-wrap:wrap;align-content:center;padding-block:var(--space-2)}
  .primary-nav{order:10;flex-basis:100%;margin-left:0}
  .js .primary-nav{display:none;padding-bottom:var(--space-4)}
  .js .primary-nav.is-open{display:block}
  .primary-nav__list{flex-direction:column}
  .js .nav-toggle{order:3}
  /* Inside the collapsed menu the languages are always listed */
  .primary-nav{display:block}
  .lang{margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-border)}
  .lang__toggle{display:none}
  .js .lang__menu{position:static;display:flex!important;flex-wrap:wrap;gap:var(--space-1);min-width:0;padding:0;border:0;box-shadow:none}
  .lang__menu a{justify-content:flex-start;gap:var(--space-2)}
  .site-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__brand,.site-footer__cta{grid-column:1/-1}
  /* Tablet: the headline runs wider than the sky, so carry the overlay further right */
  .hero::after{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,0) 88%)}
  .hero__media img{object-position:right center}
}
@media(max-width:1199px){.no-js .primary-nav__list{flex-direction:row;flex-wrap:wrap}}

/* Banner CTA follows each artwork: tablet and mobile place the headline differently */
@media(max-width:1023px){.promo-banner__cta{left:5%;top:46%}}
@media(max-width:767px){.promo-banner__cta{left:50%;top:27%;width:auto;white-space:nowrap;transform:translateX(-50%)}.promo-banner:hover .promo-banner__cta{transform:translate(-50%,-2px)}}

/* Article: table of contents moves above the text */
@media(max-width:1023px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .toc,.prose{grid-column:1;grid-row:auto}
  .toc{position:static;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
  .toc summary{margin:0;list-style:revert;pointer-events:auto;cursor:pointer}
  .toc summary::-webkit-details-marker{display:revert}
  .toc details[open] summary{margin-bottom:var(--space-3)}
}

/* Mobile */
@media(max-width:767px){
  .site-header__inner{min-height:64px;column-gap:var(--space-2)}
  .brand__logo{width:30px}
  .brand__name{font-size:1.125rem}
  .brand__tagline{display:none}
  .site-header__cta{min-height:44px;padding:0 var(--space-3);font-size:.8125rem}
  .site-header__cta .icon{display:none}
  .hero-section,.promo-section{padding-top:var(--space-4)}
  .hero{align-items:flex-start;min-height:540px;padding:var(--space-8) var(--space-6)}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.85) 52%,rgba(255,255,255,0) 78%)}
  .hero__media img{object-position:center bottom}
  .hero__lead{font-size:var(--text-md)}
  .section-header{margin-bottom:var(--space-6)}
  .card__content{padding:var(--space-3)}
  .site-footer__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .related-grid{grid-template-columns:1fr}
  /* Prize table: the match rule moves under the prize name so amounts stay in view */
  .prize-table{min-width:0}
  .prize-table .prize-table__match{display:none}
  .prize-table__match-inline{display:block;margin-top:2px;font-weight:400;color:var(--color-body);white-space:normal}
  .prize-table tbody th{white-space:normal}
  .prize-table th,.prize-table td{padding:10px var(--space-3)}
  .article-figure{margin-bottom:var(--space-8)}
  .article-figure img{border-radius:var(--radius-lg)}
  .prose{font-size:var(--text-md)}
  .callout{padding:var(--space-5)}
}
@media(max-width:399px){
  .site-header__inner{column-gap:6px}
  .brand{gap:6px}
  .brand__logo{width:26px}
  .brand__name{font-size:1rem}
  .site-header__cta{padding:0 10px;font-size:.75rem}
}
/* Long translated labels: a shorter header label on the smallest screens */
@media(max-width:419px){.site-header__cta .cta-full{display:none}.site-header__cta .cta-short{display:inline}}
@media(max-width:390px){
  .site-header__cta{width:auto}
}

/* System sans headings, weighted and tracked like choklotto.com */
h1,h2{font-weight:800;letter-spacing:-.02em}

/* Thai and Burmese pages: taller line boxes for stacked marks, no Latin tracking */
html:lang(th) body{line-height:1.7}
html:lang(my) body{line-height:1.8;word-break:keep-all;overflow-wrap:break-word}
:lang(th) :is(h1,h2,h3){line-height:1.35;letter-spacing:0}
:lang(my) :is(h1,h2,h3){line-height:1.6;letter-spacing:0}
:lang(my) h1{font-size:clamp(1.75rem,3.6vw,3.25rem)}
:lang(th) .eyebrow,:lang(my) .eyebrow{letter-spacing:.04em}
/* Burmese nav labels run longer; tighten them so the desktop header fits at 1200px */
:lang(my) .primary-nav__list a{padding:0 var(--space-2)}