/* ==========================================================================
   ubu-hero-media.css (v1) — ไล่เฉดสีจากธีมให้ Carousel (Hero) และ Media & Video
   เฉดสี: c3 เข้ม (ผสมดำ) → c2 → c2 อ่อน  ทั้งหมดดึงจากตัวแปรธีม (head_ref_v3.php)
   ต้องโหลดหลัง ubu-section-bg.css (มันบังคับ Media เป็นพื้นอ่อน ไฟล์นี้คืนเป็นพื้นเข้ม)
   ยกเลิก: ลบ <link> ของไฟล์นี้ใน index_main_v3.php 1 บรรทัด
   ========================================================================== */

.u-home .u-hero,
.u-home.u-home section.u-media.u-media.u-media{
	/* gradient แนวทแยงหลายสี: c1 → c2 → accent (ผสมดำเล็กน้อยให้ตัวอักษรขาวอ่านได้) */
	--ugh-g1: color-mix(in srgb, color-mix(in srgb, var(--u-c1, #11285c) 35%, var(--u-c3, var(--u-c2, #11285c))) 88%, #000);   /* c1 ผสม c3 (กัน c1 สีอ่อน/เทา) */
	--ugh-g2: var(--u-c2, #274690);
	--ugh-g3: color-mix(in srgb, var(--u-c2, #274690) 62%, #fff);           /* ปลายสว่าง สดใส */
	--ugh-acc:  var(--u-accent, #f5b301);
	--ugh-on:   #fff;
	background-color: var(--ugh-g2);
	background-image: linear-gradient(135deg, var(--ugh-g1) 0%, var(--ugh-g2) 55%, var(--ugh-g3) 100%);
	color: var(--ugh-on);
}

/* ---------- Hero / Carousel ---------- */
.u-home .u-hero{
	background-image:
		radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--ugh-acc) 38%, transparent), transparent 42%),
		radial-gradient(circle at 82% 8%, rgb(255 255 255 / .16), transparent 42%),
		linear-gradient(135deg, var(--ugh-g1) 0%, var(--ugh-g2) 55%, var(--ugh-g3) 100%);
}
.u-home .u-hero{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; }
.u-home .u-hero > .u-container{ position:relative; z-index:1; }
/* ลายจุด: แยก 2 ชั้น (::after = ขาวมุมขวาบน, ::before = สีเน้นมุมซ้ายล่าง) ไม่ให้ซ้อนกัน */
.u-home .u-hero::before,
.u-home .u-hero::after{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background-size:28px 28px;
}
.u-home .u-hero::after{
	background-image:radial-gradient(circle, #fff 2px, transparent 2.6px);
	opacity:.18;
	-webkit-mask-image:radial-gradient(ellipse 620px 320px at 100% 0, #000, transparent 100%);
	        mask-image:radial-gradient(ellipse 620px 320px at 100% 0, #000, transparent 100%);
}
.u-home .u-hero::before{
	background-image:radial-gradient(circle, var(--ugh-acc) 2.6px, transparent 3.2px);
	opacity:.45;
	-webkit-mask-image:radial-gradient(circle 150px at 90px 100%, #000 40%, transparent 100%);
	        mask-image:radial-gradient(circle 150px at 90px 100%, #000 40%, transparent 100%);
}
/* ชื่อเว็บ: บังคับสีให้อ่านชัดบนพื้นเข้ม (แทน $font_color1 ที่เป็น inline) */
.u-home .u-hero .u-hero__title{ color:var(--ugh-on) !important; text-shadow:0 2px 12px rgb(0 0 0 / .35); }
.u-home .u-hero .u-hero__sub{ color:rgb(255 255 255 / .95); text-shadow:0 1px 8px rgb(0 0 0 / .3); }

.u-home .u-hero .u-hero__frame{
	border-radius:28px; overflow:hidden;
	border:1px solid rgb(255 255 255 / .3);
	box-shadow:0 24px 60px rgb(0 0 0 / .28);
}
.u-home .u-hero .u-hero__btn{
	background:rgb(255 255 255 / .14); color:var(--ugh-on);
	border:1px solid rgb(255 255 255 / .45);
}
.u-home .u-hero .u-hero__btn:hover,
.u-home .u-hero .u-hero__btn:focus-visible{
	background:var(--ugh-acc); color:var(--u-on-accent, #101828); border-color:var(--ugh-acc);
}
.u-home .u-hero .u-hero__btn:focus-visible{ outline:3px solid var(--ugh-on); outline-offset:3px; }
.u-home .u-hero .u-hero__count{ color:var(--ugh-on); }

/* ---------- Media & Video: คืนพื้นเข้ม ตัวอักษรขาว ---------- */
.u-home.u-home section.u-media.u-media.u-media{
	--ugh-g3: color-mix(in srgb, var(--u-c2, #274690) 88%, #000);   /* Media: ปลายไม่สว่างเกิน เพื่อให้ View All สีขาวอ่านได้ */
	--ugb-main: #fff;                 /* จุดหลักของ ubu-section-bg.css เป็นสีขาว */
}
.u-home.u-home section.u-media.u-media.u-media::before{ opacity:.16; }
.u-home.u-home section.u-media.u-media.u-media .u-section__title,
.u-home.u-home section.u-media.u-media.u-media .u-link-more{ color:var(--ugh-on); text-shadow:0 1px 3px rgb(0 0 0 / .35); }
.u-home.u-home section.u-media.u-media.u-media .u-link-more:hover{ color:var(--ugh-acc); }
.u-home.u-home section.u-media.u-media.u-media .u-section__title::after{ background-image:radial-gradient(circle, var(--ugh-acc) 3.6px, transparent 4.2px); }
.u-home.u-home section.u-media.u-media.u-media .u-video{
	border-radius:24px; overflow:hidden;
	border:1px solid rgb(255 255 255 / .3);
	box-shadow:0 24px 60px rgb(0 0 0 / .28);
}
/* การ์ดวิดีโอรอง: พื้นขาวทึบ + ตัวอักษรเข้ม → อ่านได้ทุกสีพื้นหลังธีม */
.u-home.u-home section.u-media.u-media.u-media .u-hcard{
	background:#fff; color:#1f2937;
	border:1px solid rgb(255 255 255 / .6);
	box-shadow:0 10px 28px rgb(0 0 0 / .22);
}
.u-home.u-home section.u-media.u-media.u-media .u-hcard:hover{ background:color-mix(in srgb, var(--u-c2, #274690) 8%, #fff); }
.u-home.u-home section.u-media.u-media.u-media .u-hcard__date{ color:#4b5563; opacity:1; }
.u-home.u-home section.u-media.u-media.u-media .u-hcard__title a{ color:#111827; text-shadow:none; }
.u-home.u-home section.u-media.u-media.u-media .u-hcard__title a:hover{ color:color-mix(in srgb, var(--u-c2, #274690) 65%, #000); }
.u-home.u-home section.u-media.u-media.u-media .u-hcard__more{ color:color-mix(in srgb, var(--u-c2, #274690) 62%, #000); font-weight:600; }
.u-home.u-home section.u-media.u-media.u-media :focus-visible{ outline-color:var(--ugh-on); }
.u-home.u-home section.u-media.u-media.u-media .u-hcard :focus-visible{ outline-color:color-mix(in srgb, var(--u-c2, #274690) 62%, #000); }

@media (max-width:600px){
	.u-home .u-hero .u-hero__frame{ border-radius:20px; }
	.u-home.u-home section.u-media.u-media.u-media .u-video{ border-radius:18px; }
}
@media print{
	.u-home .u-hero,
	.u-home.u-home section.u-media.u-media.u-media{ background-image:none; color:#000; }
	.u-home .u-hero::before,
	.u-home .u-hero::after{ display:none; }
	.u-home .u-hero .u-hero__title{ color:#000 !important; }
	.u-home.u-home section.u-media.u-media.u-media .u-section__title, .u-home.u-home section.u-media.u-media.u-media .u-link-more, .u-home.u-home section.u-media.u-media.u-media .u-hcard__title a, .u-home.u-home section.u-media.u-media.u-media .u-hcard__date{ color:#000; }
}
@media (forced-colors:active){
	.u-home .u-hero::before,
	.u-home .u-hero::after{ display:none; }
}