/* 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;

	background: var(--tkl-bg);
	color: var(--tkl-header);
	padding: 32px 0 48px;
	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; }

.tkl-header {
	max-width: 1600px;
	margin: 0 auto 22px;
	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;  }

/* 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 18px;
	-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: 32px auto 0;
	padding: 0 24px;
}
.tkl-row .tkl-row-title {
	color: var(--tkl-header);
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.tkl-row-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 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;
	padding-bottom: 8px;
}
.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-art {
	width: 100%;
	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; }
.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; }
}

@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;
}