/* WP ThailandKids Landing — Apple-TV-style hero + scrollable rows */

.tkl-root {
	--tkl-bg: #0d0d12;
	--tkl-header: #ffffff;
	--tkl-radius: 18px;
	--tkl-hero-vh: 72vh;
	--tkl-peek: 10%;
	--tkl-edge: 0px;
	--tkl-aspect: 16 / 9;
	--tkl-gap: 14px;
	--tkl-hdr-h: 80px;
	--tkl-hdr-fs: 36px;
	--tkl-hdr-ox: 0px;
	--tkl-hdr-oy: 0px;

	/* Vertical rhythm — every one of these is a slider on the Layout tab.
	   Defaults are deliberately tighter than the hand-written values they
	   replaced (hero→row was 50px, row→row 40px): on a landscape tablet the
	   old gaps pushed the second row off screen. */
	--tkl-space-top: 24px;      /* above the header / hero            */
	--tkl-space-header: 18px;   /* title bar → hero                   */
	--tkl-space-hero: 28px;     /* hero bottom → the row beneath it   */
	--tkl-space-row: 26px;      /* between one row and the next       */
	--tkl-space-title: 10px;    /* a row's title → its cards          */
	--tkl-space-bottom: 40px;   /* below the last row                 */

	background: var(--tkl-bg);
	color: var(--tkl-header);
	padding: var(--tkl-space-top) 0 var(--tkl-space-bottom);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	box-sizing: border-box;

	/* Fill 100% of whatever container we are dropped into. For true edge-to-edge,
	   use the bundled "TK Landing Canvas" page template, the Gutenberg block with
	   align="full", or an Elementor section set to Full Width / Stretch. */
	width: 100%;
	max-width: 100%;
}

/* When on the Canvas template, parent is body and chrome is removed. */
body.tk-landing-canvas .tkl-root {
	min-height: 100vh;
}

/* Gutenberg alignfull support — wraps in .alignfull which gets 100vw via theme.
   If theme honors alignfull, this is automatic. If not, the canvas template wins. */
.alignfull > .tkl-root,
.alignfull.tkl-root,
.wp-block-tk-landing-landing.alignfull .tkl-root {
	width: 100%;
}
.tkl-root * { box-sizing: border-box; }
/* Clip negative hero edge so a host theme without overflow-x: hidden on body
   doesn't get a horizontal scrollbar from --tkl-edge < 0. */
.tkl-root { overflow-x: clip; }
/* Anchors the header auto-hide reveal handle (see .tkl-hdr-handle). */
.tkl-root { position: relative; }

.tkl-header {
	max-width: 1600px;
	margin: 0 auto var(--tkl-space-header);
	padding: 0 24px;
	min-height: var(--tkl-hdr-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "title-l title-c title-r";
	align-items: center;
	column-gap: 16px;
}
/* Title slot follows alignment — icons always pin to the right column. */
.tkl-header .tkl-title {
	grid-area: title-c;
	color: var(--tkl-header);
	font-size: var(--tkl-hdr-fs);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	transform: translate(var(--tkl-hdr-ox), var(--tkl-hdr-oy));
}
.tkl-header-align-left   .tkl-title { grid-area: title-l; justify-self: start;  text-align: left;   }
.tkl-header-align-center .tkl-title { grid-area: title-c; justify-self: center; text-align: center; }
.tkl-header-align-right  .tkl-title { grid-area: title-r; justify-self: end;    text-align: right;  }

/* Auto-hide (opt-in, Settings → TK Landing → Header). Once the title has had its
   run of views on a device the band collapses and the hero takes the space. The
   handle is the way back and is the only thing that survives the collapse — with
   header icons on, it is also the only route to them. */
.tkl-header.is-collapsed { display: none; }

.tkl-hdr-handle {
	display: none;
	/* Floats in the root's existing 32px top padding instead of taking a row of
	   its own — otherwise the handle would hand back a third of the space the
	   collapse just won. Safe because every absolute descendant of .tkl-root has a
	   nearer positioned ancestor (.tkl-hero, .tkl-hero-slide, .tkl-row, .tkl-card-art). */
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	padding: 10px 24px;        /* generous tap target for a tablet, small ink */
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 12px;
}
.tkl-hdr-handle.is-visible { display: block; }
.tkl-hdr-handle > span {
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 999px;
	background: var(--tkl-header);
	opacity: 0.28;
	transition: opacity 180ms ease;
}
.tkl-hdr-handle:hover > span,
.tkl-hdr-handle:focus-visible > span { opacity: 0.75; }
.tkl-hdr-handle:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

.tkl-header.is-revealing { animation: tkl-hdr-in 200ms ease; }
@keyframes tkl-hdr-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tkl-header.is-revealing { animation: none; }
	.tkl-hdr-handle > span   { transition: none; }
}

/* Icon row — always right column, vertically centered to the band. */
.tkl-icons {
	grid-area: title-r;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
/* When icons are on AND title is right-aligned, push title back to center to
   avoid collision; icons keep the right column. */
.tkl-header.tkl-has-icons.tkl-header-align-right .tkl-title { grid-area: title-c; justify-self: end; }

.tkl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--tkl-hdr-h) * 0.45);
	height: calc(var(--tkl-hdr-h) * 0.45);
	min-width: 32px;
	min-height: 32px;
	max-width: 56px;
	max-height: 56px;
	border-radius: 50%;
	text-decoration: none;
	transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.tkl-icon svg {
	width: 60%;
	height: 60%;
	display: block;
}
.tkl-icon:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.tkl-icon[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Light variant — for dark backgrounds */
.tkl-icons-light .tkl-icon       { color: rgba(255,255,255,0.92); }
.tkl-icons-light .tkl-icon:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* Dark variant — for light backgrounds */
.tkl-icons-dark  .tkl-icon       { color: rgba(0,0,0,0.82); }
.tkl-icons-dark  .tkl-icon:hover { background: rgba(0,0,0,0.08); color: #000; }

/* HERO */
.tkl-hero {
	position: relative;
	/* Default: hero is full-bleed — neighbor slides peek all the way to the
	   left/right viewport edge. `--tkl-edge` (Hero edge padding slider)
	   ADDS inset on each side when the user wants a gap.
	   width compensates for the margin so we never overflow when positive. */
	width: calc(100% - (var(--tkl-edge) * 2));
	margin: 0 var(--tkl-edge);
	padding: 0;
}
.tkl-hero.tkl-empty {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
}

.tkl-hero-track {
	display: flex;
	gap: var(--tkl-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 0;
	-ms-overflow-style: none;
}
.tkl-hero-track::-webkit-scrollbar { display: none; }

.tkl-hero-slide {
	flex: 0 0 calc(100% - (var(--tkl-peek) * 2));
	scroll-snap-align: center;
	position: relative;
	display: block;
	height: var(--tkl-hero-vh);
	border-radius: var(--tkl-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transform: scale(0.94);
	transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms;
	box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.tkl-hero-slide:hover,
.tkl-hero-slide:focus-visible { transform: scale(0.96); outline: none; }
.tkl-hero-slide.is-active {
	transform: scale(1);
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

.tkl-hero-art {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #1c1c25;
}
.tkl-hero-meta {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 22px 28px 28px;
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 100%);
}
.tkl-hero-title {
	color: #fff;
	font-size: clamp(20px, 2.4vw, 40px);
	font-weight: 700;
	margin: 6px 0 4px;
	text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.tkl-hero-date {
	color: rgba(255,255,255,0.78);
	font-size: 14px;
}

.tkl-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.18);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tkl-badge-live { background: #c9a14a; color: #1c1208; }

/* ROWS */
.tkl-row {
	position: relative;
	max-width: 1600px;
	margin: var(--tkl-space-row) auto 0;
	padding: 0 24px;
}
.tkl-hero + .tkl-row,
.tkl-header + .tkl-row { margin-top: var(--tkl-space-hero); }
h3.tkl-row-title,
.tkl-row .tkl-row-title {
	color: var(--tkl-header);
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 700;
	margin: 0 0 var(--tkl-space-title);
	letter-spacing: -0.01em;
}
.tkl-row-track {
	display: grid;
	grid-auto-flow: column;
	/* --tkl-lines wraps a row onto 2-4 stacked lines (fills down, then across).
	   --tkl-card-w pins the card width instead of dividing the row up; with it
	   set the track scrolls rather than stretching to fit. Both unset = exactly
	   the single-line, fill-the-row behaviour this always had. */
	grid-template-rows: repeat(var(--tkl-lines, 1), auto);
	grid-auto-columns: var(--tkl-card-w, calc((100% - (var(--tkl-cols, 4) - 1) * var(--tkl-gap)) / var(--tkl-cols, 4)));
	gap: var(--tkl-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.tkl-row-track::-webkit-scrollbar { display: none; }

.tkl-card {
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--tkl-radius);
	overflow: hidden;
	background: #1c1c25;
	transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.tkl-card:hover,
.tkl-card:focus-visible { transform: translateY(-4px); outline: none; }
/* --tkl-card-h is a per-row override (General Row -> Card height). Unset it
   resolves to `auto`, which is what the property computed to before it existed,
   so a page with no height set is byte-for-byte unaffected. A definite height
   makes aspect-ratio inert — that is intended, and the admin field says so. */
.tkl-card-art {
	width: 100%;
	height: var(--tkl-card-h, auto);
	aspect-ratio: var(--tkl-aspect);
	background-size: cover;
	background-position: center;
	background-color: #1c1c25;
}
.tkl-card-title {
	padding: 10px 14px 14px;
	color: rgba(255,255,255,0.92);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tkl-card-title-muted { color: rgba(255,255,255,0.55); font-style: italic; }

/* Coming Soon placeholder card */
.tkl-card-coming {
	cursor: default;
	opacity: 0.92;
}
.tkl-card-coming .tkl-card-art {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.tkl-card-coming .tkl-card-art::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18) 0%, transparent 50%);
	pointer-events: none;
}
.tkl-card-coming .tkl-coming-text {
	position: relative;
	z-index: 1;
	color: rgba(255,255,255,0.85);
	font-family: 'Noto Sans Thai', 'Sarabun', system-ui, sans-serif;
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ARROW BUTTONS */
.tkl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms;
}
.tkl-arrow-small { width: 36px; height: 36px; font-size: 16px; }
.tkl-arrow-prev { left: 10px; }
.tkl-arrow-next { right: 10px; }
.tkl-hero:hover .tkl-arrow,
.tkl-hero:focus-within .tkl-arrow,
.tkl-row:hover .tkl-arrow,
.tkl-row:focus-within .tkl-arrow { opacity: 1; }
.tkl-row-noarrows .tkl-arrow { display: none; }
/* Touch devices never fire :hover, so on the kiosk tablets the arrows were
   permanently invisible and the only way to reach card 5 was to guess that the
   row swipes. Show them by default wherever there is no hover. */
@media (hover: none) {
	.tkl-hero .tkl-arrow,
	.tkl-row .tkl-arrow { opacity: 1; }
}
.tkl-arrow:hover { background: rgba(0,0,0,0.78); }
.tkl-arrow:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

/* MEDIA */
@media (max-width: 700px) {
	.tkl-hero-slide { flex-basis: calc(100% - 32px); }
	.tkl-row-track  { grid-auto-columns: 60%; }
	.tkl-arrow      { display: none; }
	/* Cards go to 60% of the viewport here, so a desktop pixel height would
	   stretch them into tall portrait tiles. Hand the phone back to the aspect
	   ratio. */
	.tkl-card-art   { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.tkl-hero-track,
	.tkl-row-track     { scroll-behavior: auto; }
	.tkl-hero-slide,
	.tkl-card,
	.tkl-arrow         { transition: none; }
}

/* EMBEDDED MODES — single / row blocks inserted inside a post or page.
   No background-color (host theme wins), no fullscreen padding chrome,
   inherit text color from theme so card titles stay readable on light themes. */
.tkl-embed {
	width: 100%;
	max-width: 100%;
	margin: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
}
.tkl-embed.tkl-embed-row {
	background: transparent;
	color: inherit;
	padding: 0;
}
.tkl-embed.tkl-embed-row .tkl-row {
	margin: 0;
	padding: 0;
}
.tkl-embed-single {
	display: block;
}
.tkl-embed-single.tkl-embed-card {
	max-width: 480px;
}
.tkl-embed-empty {
	padding: 14px 18px;
	border-radius: 8px;
	background: rgba(0,0,0,0.06);
	color: rgba(0,0,0,0.6);
	font-size: 13px;
	font-style: italic;
}


/* ---- Spotlight rows -----------------------------------------------------
   The hero's treatment applied to a lesson row: the centred card is full
   strength, its neighbours peek in from the edges faded and set back. The
   track's side padding equals the peek, which is what lets the FIRST card sit
   centred at scroll position 0 instead of jammed against the left edge. */
.tkl-row-spotlight .tkl-row-track {
	display: flex;
	grid-auto-flow: unset;
	padding-inline: var(--tkl-row-peek, 12%);
	scroll-snap-type: x mandatory;
}
.tkl-row-spotlight .tkl-card {
	/* 100% here is the track's CONTENT box, which the padding-inline above has
	   already reduced by the peek — subtracting the peek again would shrink the
	   card twice and stop it landing dead centre. */
	flex: 0 0 var(--tkl-card-w, calc((100% - (var(--tkl-cols, 1) - 1) * var(--tkl-gap)) / var(--tkl-cols, 1)));
	scroll-snap-align: center;
	opacity: var(--tkl-row-dim, 0.45);
	transform: scale(0.94);
	transition: opacity 320ms cubic-bezier(.2,.7,.2,1), transform 320ms cubic-bezier(.2,.7,.2,1);
}
/* is-active is set by the front-end script from whichever card is nearest the
   centre — the same routine the hero already uses. */
.tkl-row-spotlight .tkl-card.is-active {
	opacity: 1;
	transform: scale(1);
}
.tkl-row-spotlight .tkl-card:hover,
.tkl-row-spotlight .tkl-card:focus-visible { opacity: 1; transform: scale(0.97); }
.tkl-row-spotlight .tkl-card.is-active:hover { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.tkl-row-spotlight .tkl-card { transition: none; }
}