/* =============================================================
   SKIN: Matchday Print — หน้าหนึ่งหนังสือพิมพ์กีฬา (สว่าง แดง/ดำ บนกระดาษ)
   โหลดทับ main.css เมื่อเลือกธีม "print". scope ใต้ .sp-skin-print
   เปลี่ยนทั้งโทนสี + โครง layout (hero, กริดข่าว, การ์ด)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700;900&family=Noto+Serif+Thai:wght@500;700&display=swap');

/* ---- โทเคนสี (ล็อกโหมดกระดาษ ทับ dark/light) ---- */
.sp-skin-print {
	--sp-bg: #FBFAF6;
	--sp-surface: #FFFFFF;
	--sp-surface-2: #F1EEE6;
	--sp-text: #16130F;
	--sp-text-dim: #6E695E;
	--sp-accent: #C8102E;
	--sp-accent-ink: #FFFFFF;
	--sp-live: #C8102E;
	--sp-warn: #9A6A00;
	--sp-line: #D8D3C7;
	--sp-shadow: none;
	--sp-radius: 0px;
	--sp-radius-sm: 0px;
	--sp-serif: "Roboto Slab", "Noto Serif Thai", Georgia, "Times New Roman", serif;
	color-scheme: light;
}
.sp-skin-print { background: var(--sp-bg); color: var(--sp-text); }
.sp-skin-print [data-sp-theme-toggle] { display: none; }

/* ---- Header / ticker ---- */
.sp-skin-print .sp-header { background: #FFF; border-bottom: 3px double var(--sp-text); }
.sp-skin-print .sp-logo__text { color: var(--sp-text); font-family: var(--sp-serif); font-weight: 900; letter-spacing: -.5px; }
.sp-skin-print .sp-logo__mark { filter: grayscale(1) contrast(1.2); }
.sp-skin-print .sp-nav a { color: var(--sp-text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; }
.sp-skin-print .sp-nav a:hover { color: var(--sp-accent); }
.sp-skin-print .sp-iconbtn { color: var(--sp-text); }
.sp-skin-print .sp-ticker { background: var(--sp-text); color: #FFF; border: 0; }
.sp-skin-print .sp-ticker__label { background: var(--sp-accent); color: #fff; font-weight: 900; text-transform: uppercase; border-radius: 0; }
.sp-skin-print .sp-ticker--results { background: #2A2A2A; }
.sp-skin-print .sp-ticker--results .sp-ticker__label { background: var(--sp-text); }

/* ---- Section head: serif + เส้นแดง ---- */
.sp-skin-print .sp-section__title { font-family: var(--sp-serif); font-weight: 900; text-transform: uppercase; letter-spacing: -.2px; border-left: 6px solid var(--sp-accent); padding-left: 12px; }
.sp-skin-print .sp-section__head { border-bottom: 2px solid var(--sp-text); padding-bottom: 8px; }
.sp-skin-print .sp-section--alt { background: var(--sp-surface-2); }

/* ============================================================
   LAYOUT รื้อใหม่ — หน้าหนึ่งหนังสือพิมพ์
   ============================================================ */

/* HERO: คอลัมน์เดียวเต็มกว้าง → ภาพ+พาดหัวยักษ์เคียงกัน, side เป็นแถบ 3 คอลัมน์ใต้ลงมา */
.sp-skin-print .sp-hero__grid { display: block; border-top: 5px solid var(--sp-text); padding-top: 18px; }
.sp-skin-print .sp-hero__lead {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: center;
	background: transparent; border: 0; border-bottom: 2px solid var(--sp-text); border-radius: 0;
	padding-bottom: 22px; margin-bottom: 20px;
}
.sp-skin-print .sp-hero__media { aspect-ratio: 4/3; border: 1px solid var(--sp-line); border-radius: 0; order: 2; }
.sp-skin-print .sp-hero__body { padding: 0; order: 1; }
.sp-skin-print .sp-hero__title { font-family: var(--sp-serif); font-weight: 900; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.04; letter-spacing: -.6px; }
.sp-skin-print .sp-hero__title a { color: var(--sp-text); }
.sp-skin-print .sp-hero__title a:hover { color: var(--sp-accent); }
.sp-skin-print .sp-hero__body p { font-size: 16px; line-height: 1.6; }

/* side: 3 คอลัมน์ มีเส้นตั้งคั่น, การ์ดแนวตั้ง (ภาพบน หัวข่าวล่าง) */
.sp-skin-print .sp-hero__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sp-skin-print .sp-hero__item {
	display: block; background: transparent; border: 0; border-left: 1px solid var(--sp-line);
	border-radius: 0; padding: 0 18px; margin: 0;
}
.sp-skin-print .sp-hero__item:first-child { border-left: 0; padding-left: 0; }
.sp-skin-print .sp-hero__thumb { width: 100%; aspect-ratio: 16/9; border-radius: 0; margin-bottom: 8px; }
.sp-skin-print .sp-hero__item h3 { font-family: var(--sp-serif); font-weight: 700; font-size: 16px; line-height: 1.2; }
.sp-skin-print .sp-hero__item h3 a { color: var(--sp-text); }
.sp-skin-print .sp-hero__item h3 a:hover { color: var(--sp-accent); }

/* กริดข่าว: การ์ดแนวนอน (ภาพซ้าย+ข้อความขวา) เรียง 2 คอลัมน์แบบคอลัมน์ข่าว */
.sp-skin-print .sp-grid--4 { grid-template-columns: 1fr 1fr; gap: 0 28px; }
.sp-skin-print .sp-card-news {
	display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start;
	background: transparent; border: 0; border-top: 1px solid var(--sp-line); border-radius: 0;
	box-shadow: none; padding: 16px 0;
}
.sp-skin-print .sp-card-news:hover { transform: none; }
.sp-skin-print .sp-card-news__media { aspect-ratio: 4/3; border-radius: 0; }
.sp-skin-print .sp-card-news__title { font-family: var(--sp-serif); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -.2px; }
.sp-skin-print .sp-card-news__title a { color: var(--sp-text); }
.sp-skin-print .sp-card-news__title a:hover { color: var(--sp-accent); }
.sp-skin-print .sp-card-news__excerpt { font-size: 13.5px; }

/* การ์ดแมตช์/วิดีโอ/ปุ่ม/แท็บ/ชิป */
.sp-skin-print .sp-card-match, .sp-skin-print .sp-card-video { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: 0; box-shadow: none; }
.sp-skin-print .sp-card-match__score, .sp-skin-print .sp-card-match__name { font-family: var(--sp-serif); }
.sp-skin-print .sp-btn { border-radius: 0; }
.sp-skin-print .sp-btn--primary { background: var(--sp-accent); color: #fff; border-color: var(--sp-accent); }
.sp-skin-print .sp-tab { border-radius: 0; border: 1px solid var(--sp-line); }
.sp-skin-print .sp-tab.is-active { background: var(--sp-text); color: #fff; border-color: var(--sp-text); }
.sp-skin-print .sp-chip { border-radius: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }
.sp-skin-print table th { text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--sp-text); }
.sp-skin-print .sp-footer { background: var(--sp-text); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.sp-skin-print .sp-hero__side { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.sp-skin-print .sp-hero__lead { grid-template-columns: 1fr; gap: 14px; }
	.sp-skin-print .sp-hero__media { order: 1; }
	.sp-skin-print .sp-hero__body { order: 2; }
	.sp-skin-print .sp-hero__side { grid-template-columns: 1fr; }
	.sp-skin-print .sp-hero__item { border-left: 0; padding: 14px 0 0; border-top: 1px solid var(--sp-line); }
	.sp-skin-print .sp-hero__item:first-child { padding-top: 0; border-top: 0; }
	.sp-skin-print .sp-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.sp-skin-print .sp-card-news { grid-template-columns: 110px 1fr; gap: 10px; }
}