/* ==========================================================================
   Songkhla Marathon — Front page
   Layout: Editorial Split (about) + Asymmetrical Bento (race weekend / sponsors)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. HERO */
.skm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(100dvh, 56rem);
	/* ดันขึ้นไปชิดขอบบนสุดเสมอ — เดิมใช้ค่าคำนวณตายตัว (-5.3rem) ที่ขาดไป ~20px
	   ทำให้เห็นแถบสีพื้นหลังค้างบนหัวรูป ใช้ความสูงจริงของ nav ที่วัดโดย site.js แทน */
	margin-top: calc(-1 * var(--skm-header-h));
	padding-top: clamp(9rem, 18vh, 13rem);
	padding-bottom: clamp(3rem, 8vh, 5.5rem);
	overflow: hidden;
	isolation: isolate;
}

.skm-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.skm-hero__media img,
.skm-hero__media picture { width: 100%; height: 100%; }

.skm-hero__media img {
	object-fit: cover;
	object-position: 50% 42%;
	transform: scale(1.06);
	animation: skm-kenburns 26s var(--ease-soft) forwards;
}

@keyframes skm-kenburns {
	from { transform: scale(1.12) translate3d(0, 1.5%, 0); }
	to { transform: scale(1.01) translate3d(0, 0, 0); }
}

.skm-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.92) 0%, rgba(4, 6, 10, 0.42) 32%, rgba(4, 6, 10, 0.72) 72%, var(--ink-950) 100%),
		linear-gradient(94deg, rgba(4, 6, 10, 0.92) 0%, rgba(4, 6, 10, 0.35) 46%, rgba(4, 6, 10, 0.05) 74%),
		radial-gradient(760px 420px at 6% 88%, rgba(4, 178, 220, 0.24), transparent 66%);
}

.skm-hero__inner {
	width: min(var(--shell), 100% - (var(--gutter) * 2));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: end;
}

.skm-hero__title { margin: 0 0 0.35em; }

.skm-hero__title .skm-mega { display: block; color: #fff; }

.skm-hero__title .skm-mega em {
	font-style: normal;
	color: var(--brand);
	display: block;
}

.skm-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-head);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	font-weight: 500;
	color: var(--text);
}

.skm-hero__meta li { display: flex; align-items: center; gap: 0.6rem; }

.skm-hero__meta svg { width: 1.1rem; height: 1.1rem; fill: var(--cyan); flex: 0 0 auto; }

.skm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* การ์ดข้อมูลงานแข่ง — z-cascade */
.skm-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
}

.skm-edition {
	width: min(20rem, 100%);
	padding: 1.25rem 1.25rem 1.35rem;
	border-radius: var(--r-xl);
	background: rgba(8, 12, 18, 0.62);
	border: 1px solid var(--hairline-2);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	box-shadow: var(--lift-2);
	transform: rotate(-1.2deg);
}

/* โลโก้คู่ประจำการ์ด: World Athletics (จัตุรัส) + 27 Edition (ไวด์)
   ยึดความสูงเท่ากัน → กวาดตาแล้วสองอันดูขนาดพอ ๆ กัน */
.skm-edition__top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
}

.skm-edition__badge {
	height: 3.5rem;
	width: auto;
	object-fit: contain;
	flex: 0 0 auto;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.skm-edition__badge--world { width: 3.5rem; }

.skm-edition__rule {
	height: 1px;
	margin: 1rem 0 0.9rem;
	background: linear-gradient(90deg, var(--hairline-2), transparent);
}

.skm-edition__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
	font-size: var(--fs-small);
}

.skm-edition__list li { display: flex; flex-direction: column; gap: 0.1rem; color: var(--text-dim); }
.skm-edition__list li > span {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.skm-edition__list b { color: var(--text); font-weight: 500; font-size: 0.9375rem; line-height: 1.45; }

/* PC: ขยายการ์ดทั้งใบขึ้น ~27% (20rem → 25.4rem พร้อมระยะ/ตัวอักษรภายในตามสัดส่วน)
   ต้องอยู่ "หลัง" กฎฐานของทุกชิ้นส่วน เพื่อให้ชนะด้วยลำดับในไฟล์
   มือถือ/แท็บเล็ต (≤1080px) คงขนาดเดิม */
@media (min-width: 1081px) {
	.skm-edition {
		width: min(25.4rem, 100%);
		padding: 1.59rem 1.59rem 1.71rem;
	}

	.skm-edition__top { gap: 1.4rem; }

	.skm-edition__badge { height: 4.45rem; }
	.skm-edition__badge--world { width: 4.45rem; }

	.skm-edition__rule { margin: 1.27rem 0 1.14rem; }

	.skm-edition__list { gap: 0.7rem; }
	.skm-edition__list li > span { font-size: 0.875rem; }
	.skm-edition__list b { font-size: 1.19rem; }
}

/* ----------------------------------------------------------- 2. COUNTDOWN */
.skm-countdown {
	margin-top: clamp(2rem, 5vw, 3.25rem);
	padding: 0.5rem;
	border-radius: calc(var(--r-xl) + 0.5rem);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--hairline);
	max-width: 40rem;
}

.skm-countdown__core {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-radius: var(--r-xl);
	background: rgba(8, 11, 17, 0.55);
	border: 1px solid var(--hairline);
	overflow: hidden;
}

.skm-count {
	position: relative;
	padding: clamp(0.9rem, 2.2vw, 1.35rem) 0.5rem;
	text-align: center;
}

.skm-count + .skm-count::before {
	content: "";
	position: absolute;
	left: 0; top: 18%; bottom: 18%;
	width: 1px;
	background: var(--hairline);
}

.skm-count__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.1rem);
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.skm-count__label {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--font-head);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.skm-countdown__note {
	margin: 0.9rem 0 0;
	font-size: var(--fs-small);
	color: var(--text-mute);
}

/* สถานะเมื่อการแข่งขันผ่านไปแล้ว — ลดวามเด่นของตัวเลข แต่ยังอ่านได้ */
.skm-countdown--finished .skm-count__num { color: var(--text-dim); opacity: 0.55; }

.skm-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: var(--r-lg);
	background: var(--glass);
	border: 1px solid var(--hairline);
	max-width: 40rem;
	margin-top: 1.5rem;
	font-size: var(--fs-small);
	color: var(--text-dim);
}

.skm-state b { color: var(--text); font-weight: 500; }

/* --------------------------------------------------- 3. SECTION: RACE WEEK */
.skm-week__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.skm-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 13rem;
	padding: 0.5rem;
	border-radius: calc(var(--r-xl) + 0.5rem);
	background: var(--glass);
	border: 1px solid var(--hairline);
	transition: transform var(--t), border-color var(--t);
}

.skm-tile:hover { transform: translateY(-6px); border-color: var(--hairline-2); }

.skm-tile__core {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	padding: clamp(1.15rem, 2.2vw, 1.65rem);
	border-radius: var(--r-xl);
	border: 1px solid var(--hairline);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
	overflow: hidden;
}

.skm-tile--cat { grid-column: span 3; min-height: 15rem; }

.skm-tile--cat .skm-tile__core { background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)); }

.skm-tile--cat::after {
	content: "";
	position: absolute;
	inset: 0.5rem;
	border-radius: var(--r-xl);
	background: radial-gradient(420px 220px at 82% -10%, rgba(252, 243, 5, 0.14), transparent 68%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--t);
}

.skm-tile--cat:hover::after { opacity: 1; }

.skm-tile--photo { grid-column: span 3; min-height: 15rem; padding: 0.5rem; }

.skm-tile--photo .skm-tile__core { padding: 0; }

.skm-tile--photo img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}

.skm-tile--photo:hover img { transform: scale(1.05); }

.skm-tile--photo .skm-tile__core::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 6, 10, 0) 30%, rgba(4, 6, 10, 0.88) 100%);
}

.skm-tile--photo .skm-tile__text {
	position: relative;
	z-index: 2;
	padding: clamp(1.15rem, 2.2vw, 1.65rem);
}

.skm-tile--wide { grid-column: span 6; min-height: 13rem; }

.skm-tile__kicker {
	font-family: var(--font-head);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cyan);
}

.skm-tile__dist {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5.5vw, 3.75rem);
	line-height: 0.9;
	color: #fff;
	letter-spacing: -0.01em;
}

.skm-tile__dist span { font-size: 0.42em; color: var(--brand); margin-left: 0.15em; }

.skm-tile__name {
	font-family: var(--font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--text);
}

.skm-tile__note {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-mute);
	line-height: 1.6;
}

.skm-tile--wide h3 { margin: 0 0 0.35rem; font-size: clamp(1.15rem, 2vw, 1.5rem); }

.skm-tile--wide p { margin: 0; color: var(--text-dim); font-size: var(--fs-small); max-width: 46ch; }

.skm-tile__icon {
	display: grid;
	place-items: center;
	width: 2.25rem; height: 2.25rem;
	margin-bottom: 0.6rem;
	border-radius: 50%;
	background: rgba(4, 178, 220, 0.16);
	border: 1px solid rgba(4, 178, 220, 0.4);
}

.skm-tile__icon svg { width: 1rem; height: 1rem; fill: var(--cyan); }

/* -------------------------------------------------- 4. SECTION: ABOUT (split) */
.skm-about {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

.skm-about__aside { position: sticky; top: 7rem; }

.skm-about__statement {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	margin: 1.5rem 0 1.75rem;
}

.skm-about__statement em { font-style: normal; color: var(--brand); }

.skm-about__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.skm-stat {
	padding: 1rem 1rem 1.1rem;
	border-radius: var(--r-lg);
	background: var(--glass);
	border: 1px solid var(--hairline);
}

.skm-stat b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1;
	color: var(--brand);
}

.skm-stat span {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.skm-about__body { display: grid; gap: 1.75rem; }

.skm-about__copy {
	padding: clamp(1.35rem, 3vw, 2rem);
	border-radius: var(--r-xl);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
	border: 1px solid var(--hairline);
	box-shadow: var(--lift-1);
}

.skm-about__copy p { margin: 0 0 1.1em; color: var(--text-dim); }
.skm-about__copy p:last-child { margin-bottom: 0; }
.skm-about__copy strong { color: var(--text); font-weight: 600; }
.skm-about__copy em { color: var(--cyan); font-style: normal; }

/* รูปสองรูปในส่วนความเป็นมา — คอลัมน์เท่ากัน ขนาดกล่องจึงเท่ากัน */
.skm-about__shots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.skm-shot {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-xl);
	border: 1px solid var(--hairline);
	background: var(--ink-800);
}

.skm-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.skm-shot:hover img { transform: scale(1.04); }

.skm-shot--tall,
.skm-shot--wide { aspect-ratio: 4 / 5; }

.skm-shot__cap {
	position: absolute;
	left: 0.75rem; bottom: 0.75rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--r-pill);
	background: rgba(4, 6, 10, 0.7);
	border: 1px solid var(--hairline);
	backdrop-filter: blur(10px);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-dim);
}

/* ----------------------------------------------------------- 5. VIDEOS */
/* คลิปสองกล่อง — คอลัมน์เท่ากัน กล่องจึงเท่ากัน */
.skm-videos__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.skm-video {
	position: relative;
	border-radius: calc(var(--r-xl) + 0.5rem);
	padding: 0.5rem;
	background: var(--glass);
	border: 1px solid var(--hairline);
}

.skm-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--ink-800);
	border: 1px solid var(--hairline);
}

.skm-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.skm-video__facade {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: radial-gradient(560px 320px at 50% 50%, rgba(4, 178, 220, 0.22), rgba(4, 6, 10, 0.78));
	transition: opacity var(--t), visibility var(--t);
	cursor: pointer;
	text-align: center;
}

/* รูปปกของคลิป — โหลดเมื่อเลื่อนถึงเท่านั้น
   เดิม z-index:-1 ทำให้ภาพจมไปใต้พื้นหลังของกรอบ (เห็นเป็นกล่องดำ) จึงยกมาไว้ชั้น 0
   แล้วปาด้วยเลเยอร์ไล่เฉด (1) ให้ข้อความอ่านออก ส่วนข้อความอยู่ชั้น 2 */
.skm-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.skm-video__facade > span { position: relative; z-index: 2; }

.skm-video__facade::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(4, 6, 10, 0.18) 0%, rgba(4, 6, 10, 0.6) 58%, rgba(4, 6, 10, 0.92) 100%);
}

.skm-video__frame.is-live .skm-video__facade { opacity: 0; visibility: hidden; pointer-events: none; }

.skm-video__play {
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 7vw, 4.75rem);
	height: clamp(3.5rem, 7vw, 4.75rem);
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 24px 60px -20px rgba(252, 243, 5, 0.55);
	transition: transform var(--t);
}

.skm-video__play svg { width: 1.5rem; height: 1.5rem; fill: var(--ink-950); margin-left: 3px; }

.skm-video__facade:hover .skm-video__play { transform: scale(1.09); }

.skm-video__title {
	margin-top: 1rem;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
}

/* ป้ายนี้ทับบนภาพโพสเตอร์วิดีโอ (พื้นจาง/ภาพสว่างได้) จึงใช้สีที่สว่างกว่า --text-mute
   เพื่อให้คอนทราสต์ผ่าน AA (เดิม #6d7a8a บน #101620 ได้ 4.15:1) */
.skm-video__sub { font-size: var(--fs-small); color: var(--text-dim); }

/* ----------------------------------------------------------- 6. SPONSORS */
/* ตัวแปรที่หัวเรื่องกับกล่องต้องใช้ร่วมกัน (หัวเรื่องเป็นพี่น้องของ .skm-sponsors
   จึงรับค่าจาก .skm-shell ที่ครอบทั้งคู่ ไม่ใช่จาก .skm-sponsors) */
#sponsors .skm-shell { --sp-panel-w: 60%; }

/* สองก้อนซ้อนทับกัน (ตามที่ผู้ขอ):
   - .skm-sponsors__figure  = ภาพนักวิ่งพื้นหลังโปร่งใส (ก้อนหลัง)
   - .skm-sponsors__panel   = กล่องโลโก้พื้นขาวมีขอบ (ก้อนหน้า) ทับเข้ามาบนรูป
   หัวข้ออยู่นอกกล่องทั้งสอง เหมือน Section ก่อน ๆ */
/* ขนาด/ตำแหน่งสองก้อน (ปรับที่เดียว)
   --sp-runner-w: ความกว้างรูปนักวิ่ง (37.3% ของ shell = 477px = ใหญ่กว่าเดิม 398px 20% พอดี)
   --sp-overlap : ระยะที่รูปสอดเข้าไปใต้กล่องขาว (แนวนอน)
   --sp-lift    : ยกกล่องโลโก้ขึ้นจากเดิม (แนวดิ่ง) — เป็น **สัดส่วนของความสูงรูปนักวิ่ง**
                  ไม่ใช่ค่าคงที่ 50px แล้ว จึงทับกันเป็นเปอร์เซ็นต์เท่ากันทุกความกว้างจอ
                  (มาร์จิ้นเปอร์เซ็นต์คิดจาก “ความกว้าง” ของ container เสมอ
                   จึงต้องคูณอัตราส่วนรูปเข้ามา → ดูการคำนวณด้านล่าง)
   --sp-runner-ratio : สูง/กว้าง ของไฟล์ภาพ = 1.5 (sponsors-wind 900×1350)
   --sp-lift-factor  : ยกขึ้นเป็นสัดส่วนของ “ความสูงรูปนักวิ่ง” → 0.084 = 8.4%
                       = ระยะยกเดิม (0.07 = 7% = 50px ที่ 1440) **บวกอีก 20%** → 60px ที่ 1440
                       (รอบที่ 13 เคยลอง 0.58 = ยกเลยกึ่งกลางตัวนักวิ่ง → ผู้ขอให้ย้อนกลับมาใช้ค่าเดิม)
   --sp-panel-w      : ความกว้างกล่องโลโก้ (ตั้งที่ #sponsors .skm-shell เพื่อใช้ร่วมกับหัวเรื่อง)

   หมายเหตุ: ถ้า --sp-lift-factor มากกว่า ~0.41 (จุดที่ กล่อง+ระยะยก สูงกว่าความสูงรูป)
   ความสูงของ section จะมาจาก “กล่อง + ระยะยก” แทนความสูงรูป → จะเกิดพื้นที่ว่างใต้กล่อง
   โดยรูปยังยึดขอบล่างของ section ไว้ (ขาของนักวิ่งยื่นลงต่ำกว่าขอบล่างกล่อง)
   ที่ค่า 0.084 ปัจจุบัน ความสูง section ยังมาจาก “ความสูงรูป” ตามเดิม */
.skm-sponsors {
	--sp-runner-w: 37.3%;
	--sp-overlap: 10%;
	--sp-runner-ratio: 1.5;
	--sp-lift-factor: 0.084;
	/* --sp-shift: ยก “ทั้งบล็อก” (รูป + กล่องโลโก้) ขึ้นจากตำแหน่งเดิม — เปิดใช้เฉพาะ ≥1081px
	   (ดูบล็อก @media ด้านล่าง: ที่ 641–1080px หัวข้อยังชิดซ้ายและรูปจะทับข้อความ) */
	--sp-shift: 0px;
	--sp-lift: calc(var(--sp-runner-w) * var(--sp-runner-ratio) * var(--sp-lift-factor));
	/* margin-top ติดลบที่ตัว container = ยกทั้งสองก้อนขึ้นพร้อมกัน
	   (ไม่ใช้ margin-bottom เพราะจะเพิ่มที่ว่างด้านล่างแทนการยก)
	   ความสูงของ section ลดตามการยกจริง → ไม่เกิดช่องว่างค้างใต้กล่อง */
	margin-top: calc(-1 * var(--sp-shift));
	position: relative;
	/* ชิดขวา + ชิดล่างทั้งคู่ → กล่องขาวรับแนวขวากับ Section อื่น
	   ความสูงของ container = max(ความสูงรูป, กล่อง + ระยะยก)
	   ที่ factor ≤ ~0.41 ความสูงล้วนมาจาก “รูป” · เกินกว่านั้น “กล่อง + ระยะยก” เป็นตัวกำหนด
	   → กล่องจะยึดขอบบนของ container ส่วนรูปยังยึดขอบล่าง (ดูหมายเหตุด้านบน) */
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.skm-sponsors__figure {
	flex: 0 0 auto;
	width: var(--sp-runner-w);
	margin-right: calc(-1 * var(--sp-overlap));
	z-index: 1;                 /* อยู่ “หลัง” กล่องขาว */
	pointer-events: none;
}

/* parallax (เปิดโดย site.js เมื่อผู้ใช้ไม่ได้ตั้ง prefers-reduced-motion)
   บอกเบราว์เซอร์ล่วงหน้าว่าจะมีการขยับ transform → คอมโพสิตได้ลื่นขึ้น */
.skm-sponsors.is-parallax .skm-sponsors__figure,
.skm-sponsors.is-parallax .skm-sponsors__panel { will-change: transform; }

.skm-sponsors__figure picture { display: block; }

.skm-sponsors__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.skm-sponsors__panel {
	--sp-ink: #0b0f16;
	--sp-ink-dim: #56626f;
	--sp-line: rgba(4, 6, 10, 0.10);
	position: relative;
	z-index: 2;                 /* อยู่ “หน้า” รูป → ทับกันเห็นชัด */
	/* กว้าง 60% ของ shell (เดิม 86%) = เล็กลง ~30% → โลโก้ข้างในเล็กลงตาม
	   ใช้ตัวแปร --sp-panel-w ร่วมกับหัวเรื่อง เพื่อให้ “หัวเรื่อง = คอลัมน์เดียวกับกล่อง”
	   ไม่ว่าอนาคตจะปรับความกว้างกล่องเป็นเท่าไร */
	flex: 0 1 auto;
	width: var(--sp-panel-w);
	/* align-items: flex-end จัด “กล่องขอบรวม margin” ชิดขอบล่างของ section
	   การใส่ margin-bottom จึงยกตัวกล่องขึ้นโดยไม่กระทบก้อนอื่น
	   (เปอร์เซ็นต์ของมาร์จิ้นคิดจากความกว้าง container → ได้สัดส่วนตามขนาดรูปจริง) */
	margin-bottom: var(--sp-lift);
	padding: clamp(1.1rem, 2.2vw, 1.9rem);
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: calc(var(--r-xl) + 0.5rem);
	box-shadow: var(--lift-2);
}

.skm-sponsors__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* align-items: start สำคัญ — ค่าเริ่มต้น (stretch) จะทับ aspect-ratio ของช่อง
	   ทำให้ความสูงช่องเพี้ยนไปตามความกว้างจอ */
	align-items: start;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	width: 100%;
	margin: clamp(0.4rem, 1.2vw, 0.9rem) 0 0;
	padding: 0;
	list-style: none;
}

.skm-sponsors__cell {
	display: grid;
	place-items: center;
	/* min-height: 0 จำเป็น — grid item มี automatic minimum size (min-height:auto)
	   ซึ่งดันความสูงให้เท่าภาพเมื่อ “โหลดรูปเสร็จ” ทำให้ aspect-ratio ถูกทับ
	   (เจอจริง: ช่องสูง 131px ก่อนโหลด → 164px หลังโหลด = ขนาดโลโก้ไม่คงที่) */
	min-height: 0;
	/* ช่องเป็นจัตุรัส (โลโก้ทุกตัวเป็นจัตุรัส → ได้พื้นที่เต็มที่)
	   padding เล็ก จึงคุมขนาดโลโก้ให้เล็กลงตามที่ขอ โดยไม่ต้องลดขนาดกล่องลงไปอีก */
	aspect-ratio: 1 / 1;
	padding: clamp(0.3rem, 0.5vw, 0.5rem);
	border-radius: var(--r-md);
	background: #f7f9fb;
	border: 1px solid var(--sp-line);
	transition: transform var(--t), border-color var(--t), background-color var(--t);
}

.skm-sponsors__cell:hover {
	transform: translateY(-3px);
	background: #fff;
	border-color: rgba(4, 6, 10, 0.20);
}

.skm-sponsors__cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* PC: ย้ายหัวเรื่องผู้สนับสนุนไป “ด้านขวา” — ให้อยู่ในคอลัมน์เดียวกับกล่องโลโก้
   ดันด้วย margin-left: auto (ไม่ใช้ float/absolute) → ลายแทงลำดับเนื้อหายังปกติ
   และใช้ --sp-panel-w ร่วมกับกล่อง → ขอบขวาของหัวเรื่องตรงกับขอบขวากล่องเสมอ
   ≤1080px คงเดิม (หัวเรื่องชิดซ้าย) เพราะจอแคบกว่านี้พื้นที่ด้านขวาไม่พอ */
@media (min-width: 1081px) {
	/* ยกทั้งบล็อกผู้สนับสนุนขึ้น 200px + รูปนักวิ่งอีก 37px (margin-top: -37px)
	   ทำเฉพาะช่วงนี้เพราะหัวข้อถูกจัดชิดขวาแล้ว → รูป (ชิดซ้าย) ไม่ทับข้อความ
	   ส่วน 641–1080px หัวข้อยังชิดซ้าย รูปจะทับตัวอักษรทันทีที่ยก
	   margin-bottom +37px ที่รูป = ตัวชดเชย ไม่ให้ margin box บางลงแล้วดึงกล่องขาวขึ้นเกิน 200px */
	.skm-sponsors { --sp-shift: 200px; }
	.skm-sponsors__figure { margin-top: -37px; margin-bottom: 37px; }
	#sponsors .skm-head {
		/* รูปที่ถูกยกขึ้นเข้าช่วงแนวตั้งของหัวข้อ (รูป z-index: 1) — ยกหัวข้อขึ้นเหนือรูป
		   เพื่อไม่ให้ตัวอักษรถูกบังที่ความกว้างจอแคบ ๆ (1081–1330px รูปคาบเกี่ยวกับจุดเริ่มข้อความ) */
		position: relative;
		z-index: 3;
		width: var(--sp-panel-w);
		max-width: none;
		margin-left: auto;
		align-items: flex-end;
		text-align: right;
	}

	/* ป้าย eyebrow ตั้ง align-self: flex-start ไว้ที่กฎฐาน (.skm-eyebrow) → ต้องคืนค่า */
	#sponsors .skm-head .skm-eyebrow { align-self: flex-end; }
}

/* ------------------------------------------------------------- 7. CTA BAND */
.skm-cta {
	position: relative;
	overflow: hidden;
	border-radius: calc(var(--r-xl) + 0.75rem);
	padding: 0.6rem;
	background: linear-gradient(140deg, rgba(252, 243, 5, 0.16), rgba(4, 178, 220, 0.14));
	border: 1px solid var(--hairline-2);
}

.skm-cta__core {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 5vw, 3.5rem);
	border-radius: var(--r-xl);
	background: rgba(7, 10, 16, 0.86);
	backdrop-filter: blur(18px);
	overflow: hidden;
}

.skm-cta__core::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 32rem; height: 32rem;
	background: radial-gradient(circle, rgba(4, 178, 220, 0.24), transparent 62%);
	pointer-events: none;
}

.skm-cta h2 { margin: 0 0 0.5rem; }
.skm-cta p { color: var(--text-dim); margin: 0; max-width: 46ch; }

.skm-cta__actions { display: flex; flex-direction: column; gap: 0.75rem; }

/* -------------------------------------------------------- 8. BREAKPOINTS */
@media (max-width: 1080px) {
	.skm-hero__inner { grid-template-columns: 1fr; align-items: start; }
	.skm-hero__aside { align-items: flex-start; }
	.skm-edition { transform: none; }
	.skm-about { grid-template-columns: 1fr; }
	.skm-about__aside { position: static; }
	.skm-videos__grid { grid-template-columns: 1fr; }
	/* ผู้สนับสนุน: เพิ่มระยะที่รูปโผล่ (จอแคบ กล่องขาวจะต่ำลงด้วย) */
	.skm-sponsors { --sp-runner-w: 41%; --sp-overlap: 8%; }
	.skm-tile--cat { grid-column: span 6; }
	.skm-tile--photo { grid-column: span 6; }
	.skm-tile--wide { grid-column: span 12; }
	.skm-cta__core { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.skm-hero { min-height: auto; padding-top: 8.5rem; }
	.skm-hero__meta { font-size: 0.9375rem; }
	.skm-tile--cat,
	.skm-tile--photo,
	.skm-tile--wide { grid-column: span 12; min-height: 12rem; }
	.skm-countdown__core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.skm-count:nth-child(3)::before { display: none; }
	.skm-about__stats { grid-template-columns: 1fr 1fr; }
	.skm-about__shots { grid-template-columns: 1fr; }
	.skm-shot--tall,
	.skm-shot--wide { aspect-ratio: 16 / 11; }
	/* มือถือ: 2 คอลัมน์ × 4 แถว — ช่องเป็นจัตุรัสเพื่อให้โลโก้ (จัตุรัส) ได้พื้นที่เต็มที่ */
	.skm-sponsors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* คงขนาดโลโก้บนมือถือให้ใกล้เดิม (ช่อง 1:1 มาจากกฎฐานแล้ว) */
	.skm-sponsors__cell { padding: 1rem; }
	/* ผู้สนับสนุน: มือถือจัดเรียง “บน-ล่าง” — รูปนักวิ่งอยู่บน กล่องโลโก้อยู่ล่าง
	   กล่องขาวยกขึ้นทับขอบล่างของรูปเล็กน้อย (margin-bottom ติดลบ) */
	.skm-sponsors {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	/* กว้างรูปบนมือถือตั้งผ่านตัวแปร เพื่อให้ --sp-lift (ที่คำนวณจากตัวแปรนี้)
	   ขยับตามให้เองอัตโนมัติ ไม่ต้องตั้งสองที่ */
	.skm-sponsors { --sp-runner-w: 76%; }
	.skm-sponsors__figure {
		margin-right: 0;
		margin-bottom: -14%;
	}
	/* ยกกล่องโลโก้ขึ้นทับรูปนักวิ่งเป็นเปอร์เซ็นต์เดียวกับเดสก์ท็อป (7% ของความสูงรูป)
	   ในคอลัมน์ margin-bottom ยกกล่องไม่ได้ (มันแค่เพิ่มที่ว่างด้านล่าง)
	   จึงใช้ margin-top ติดลบแทน — ความสูง section ก็ลดตามการยกขึ้นจริง */
	.skm-sponsors__panel {
		width: 100%;
		margin-bottom: 0;
		margin-top: calc(-1 * var(--sp-lift));
	}
}