/* ==========================================================================
   ubu-section-bg.css (v6 — พื้นขาว + กราฟิกสี theme + dot กว้างขึ้น)
   เปลี่ยนจาก v4:
   1) section ที่เคยพื้นเทา (.u-section--alt, .u-media ฯลฯ) → พื้นขาว
   2) ลายจุดใช้สี theme (--u-c1 / --u-accent) + แถบสี theme บางๆ ด้านบน + เงารูปทรงจางๆ มุมบน
   3) dot ใหญ่ขึ้นและห่างขึ้น (ปรับได้ที่ตัวแปร --ugb-dot / --ugb-gap / --ugb-dot2 / --ugb-gap2)
   ใช้กับ: section ข่าวทุกหมวด (aria-labelledby="u-news-*") และ Media & Video (.u-media)
   ลบ <link> ใน index_main_v3.php บรรทัดเดียวเพื่อยกเลิกทั้งหมด

   ปรับได้ที่:
     --ugb-dot    รัศมีจุดหลัก        (v4 = 2px)
     --ugb-gap    ระยะห่างจุดหลัก     (v4 = 18px)
     --ugb-dot2   รัศมีจุดสีเน้น      (v4 = 2.8px)
     --ugb-gap2   ระยะห่างจุดสีเน้น   (v4 = 20px)
     --ugb-circle รัศมีกลุ่มจุดวงกลม  (v4 = 100-150px)
   ========================================================================== */

/* ---------- พื้นขาวทุก section ที่เคยเป็นสีเทา ---------- */
#u-main,
.u-home,
.u-home .u-section,
.u-home .u-section--alt,
.u-home .u-contact-wrap,
.u-home section.u-media,
.u-home section[aria-labelledby^="u-news-"]{
	background-color: #fff;
}

.u-home section[aria-labelledby^="u-news-"],
.u-home section.u-media{
	--ugb-main: var(--u-c1, #11285c);          /* จุดหลัก / แถบบน = สี theme */
	--ugb-acc:  var(--u-accent, #f5b301);      /* จุดเน้น + เส้นใต้หัวข้อ */
	--ugb-dot:  2.4px;                         /* รัศมีจุดหลัก */
	--ugb-gap:  26px;                          /* ระยะห่างจุดหลัก */
	--ugb-dot2: 3px;                           /* รัศมีจุดเน้น */
	--ugb-gap2: 28px;                          /* ระยะห่างจุดเน้น */
	--ugb-circle: clamp(120px, 13vw, 180px);   /* รัศมีวงกลมจุด */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
	/* gradient อ่อนมาก ซ้าย→ขวา จากสี theme: section ปกติ = c2 → c1 (จาง 5%) */
	--ugb-ca: var(--u-c1, #11285c);
	--ugb-cb: var(--u-c2, var(--u-c1, #274690));
	background-image: linear-gradient(90deg,
		color-mix(in srgb, var(--ugb-cb) 5%, #fff),
		color-mix(in srgb, var(--ugb-ca) 5%, #fff));
}
/* section สลับ (--alt และ Media & Video ที่ตามหลังหมวดปกติ): c1 → c2 (จาง 10%) */
.u-home .u-section--alt[aria-labelledby^="u-news-"],
.u-home section[aria-labelledby^="u-news-"]:not(.u-section--alt) + .u-media{
	background-image: linear-gradient(90deg,
		color-mix(in srgb, var(--ugb-ca) 10%, #fff),
		color-mix(in srgb, var(--ugb-cb) 10%, #fff));
}

/* ---------- ชั้นจุดสี theme: กลุ่มจุดมุมบนซ้าย (B) + วงกลมจุดมุมบนขวา (C) ---------- */
.u-home section[aria-labelledby^="u-news-"]::before,
.u-home section.u-media::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--ugb-main) var(--ugb-dot), transparent calc(var(--ugb-dot) + .6px));
	background-size: var(--ugb-gap) var(--ugb-gap);
	opacity: .4;
	-webkit-mask-image:
		radial-gradient(ellipse 520px 160px at 0 0, rgba(0,0,0,.7), transparent 100%),
		radial-gradient(circle var(--ugb-circle) at calc(100% - 120px) 110px, #000 45%, transparent 100%);
	        mask-image:
		radial-gradient(ellipse 520px 160px at 0 0, rgba(0,0,0,.7), transparent 100%),
		radial-gradient(circle var(--ugb-circle) at calc(100% - 120px) 110px, #000 45%, transparent 100%);
}

/* ---------- ชั้นจุดสีเน้น: วงกลมจุดมุมล่างซ้าย (C) ---------- */
.u-home section[aria-labelledby^="u-news-"]::after,
.u-home section.u-media::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--ugb-acc) var(--ugb-dot2), transparent calc(var(--ugb-dot2) + .6px));
	background-size: var(--ugb-gap2) var(--ugb-gap2);
	opacity: .6;
	-webkit-mask-image: radial-gradient(circle var(--ugb-circle) at 100px calc(100% - 60px), #000 45%, transparent 100%);
	        mask-image: radial-gradient(circle var(--ugb-circle) at 100px calc(100% - 60px), #000 45%, transparent 100%);
}

/* ---------- เส้นจุดสีเน้นใต้หัวข้อ (B) — จุดใหญ่/ห่างขึ้น ---------- */
.u-home section[aria-labelledby^="u-news-"] .u-section__title::after,
.u-home section.u-media .u-section__title::after{
	content: "";
	display: block;
	width: clamp(120px, 12vw, 168px);
	height: 12px;
	margin-top: 16px;
	background: radial-gradient(circle, var(--ugb-acc) 3.6px, transparent 4.2px) 0 50% / 26px 12px repeat-x;
}

/* ---------- section สลับสี (--alt): กลับด้านซ้าย-ขวา ---------- */
.u-home .u-section--alt[aria-labelledby^="u-news-"]::before,
.u-home section[aria-labelledby^="u-news-"]:not(.u-section--alt) + .u-media::before{
	-webkit-mask-image:
		radial-gradient(ellipse 520px 160px at 100% 0, rgba(0,0,0,.7), transparent 100%),
		radial-gradient(circle var(--ugb-circle) at 120px 110px, #000 45%, transparent 100%);
	        mask-image:
		radial-gradient(ellipse 520px 160px at 100% 0, rgba(0,0,0,.7), transparent 100%),
		radial-gradient(circle var(--ugb-circle) at 120px 110px, #000 45%, transparent 100%);
}
.u-home .u-section--alt[aria-labelledby^="u-news-"]::after,
.u-home section[aria-labelledby^="u-news-"]:not(.u-section--alt) + .u-media::after{
	-webkit-mask-image: radial-gradient(circle var(--ugb-circle) at calc(100% - 100px) calc(100% - 60px), #000 45%, transparent 100%);
	        mask-image: radial-gradient(circle var(--ugb-circle) at calc(100% - 100px) calc(100% - 60px), #000 45%, transparent 100%);
}

/* ---------- v6: พื้นต่อเนื่องไม่มีแถบขาวคั่น ----------
   สาเหตุแถบขาว (ubu-modern-v3.css): .u-section--alt{margin-top} และ .u-media{margin-top; border-radius}
   ทำให้เห็นพื้นขาวของ .u-home คั่นระหว่าง section → ตัด margin ออก ใช้ padding ภายในแทน (ระยะเนื้อหาเท่าเดิม)
   และเอาขอบโค้งของ Media ออกให้เป็นแถบเต็มความกว้างเหมือนหมวดข่าว */
.u-home section[aria-labelledby^="u-news-"],
.u-home section.u-media{
	margin-block: 0;
	border-radius: 0;
	padding-block: clamp(48px, 7vw, 96px);      /* ล่าง/บนเท่ากัน (เดิมหมวดปกติล่างเหลือ 8px) */
}
.u-home .u-section--alt[aria-labelledby^="u-news-"]{ margin-top: 0; }

/* ---------- Media & Video: เดิมพื้นกรมท่า ตัวอักษรขาว → พื้นอ่อนแล้วต้องใช้ตัวอักษรเข้ม ---------- */
.u-home section.u-media{ color: var(--u-ink); }
.u-home section.u-media .u-section__title{ color: var(--u-c3); }
.u-home section.u-media .u-link-more{ color: var(--u-c1); }
.u-home section.u-media .u-hcard{ background: #fff; box-shadow: var(--u-shadow-1); }
.u-home section.u-media .u-hcard:hover{ background: var(--u-tint); }
.u-home section.u-media .u-hcard__date{ color: var(--u-muted); opacity: 1; }
.u-home section.u-media .u-hcard__title a:hover{ color: var(--u-c1); }
.u-home section.u-media .u-hcard__more{ color: var(--u-c1); }
.u-home section.u-media :focus-visible{ outline-color: var(--u-c1); }

/* ---------- มือถือ: เล็กลง ไม่บังข้อความ ---------- */
@media (max-width: 600px){
	.u-home section[aria-labelledby^="u-news-"],
	.u-home section.u-media{
		--ugb-circle: 100px;
		--ugb-dot: 2px;    --ugb-gap: 21px;
		--ugb-dot2: 2.6px; --ugb-gap2: 23px;
	}
	.u-home section[aria-labelledby^="u-news-"]::before,
	.u-home section.u-media::before{ opacity: .32; }
	.u-home section[aria-labelledby^="u-news-"]::after,
	.u-home section.u-media::after{ opacity: .5; }
}

/* ---------- พิมพ์ / high-contrast: ไม่แสดงลวดลาย ---------- */
@media print{
	.u-home section[aria-labelledby^="u-news-"],
	.u-home section.u-media{ background-image: none; }
	.u-home section[aria-labelledby^="u-news-"]::before,
	.u-home section[aria-labelledby^="u-news-"]::after,
	.u-home section.u-media::before,
	.u-home section.u-media::after,
	.u-home section[aria-labelledby^="u-news-"] .u-section__title::after,
	.u-home section.u-media .u-section__title::after{ display: none; }
}
@media (forced-colors: active){
	.u-home section[aria-labelledby^="u-news-"]::before,
	.u-home section[aria-labelledby^="u-news-"]::after,
	.u-home section.u-media::before,
	.u-home section.u-media::after,
	.u-home section[aria-labelledby^="u-news-"] .u-section__title::after,
	.u-home section.u-media .u-section__title::after{ display: none; }
}