/* ============================================================================
 *  สไลด์หน้าแรก (_slider.php) + อัลบั้มภาพในข่าว (post-gallery.php)
 *  แทน LayerSlider และ unitegallery ที่เลิกใช้แล้ว (สไลด์ใช้สคริปต์ที่เขียนเอง: js/sp-slider.js)
 * ========================================================================== */

/* ---------- สไลด์หน้าแรก (js/sp-slider.js) สัดส่วนเดิม 1600 x 600 ---------- */
.sp-slider {
	position: relative;
	width: 100%;               /* เต็มความกว้างจอ ไม่จำกัดที่ 1600px และไม่มีระยะห่างด้านล่าง */
	aspect-ratio: 1600 / 600;
	overflow: hidden;
	background: #e9eef3;
	touch-action: pan-y;          /* ปัดซ้าย-ขวาให้สคริปต์จัดการ เลื่อนหน้าขึ้น-ลงได้ตามปกติ */
	user-select: none;
	-webkit-user-select: none;
}
.sp-slider-track,
.sp-slide,
.sp-slide > a {
	position: absolute;
	inset: 0;
}
.sp-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.sp-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease;
	z-index: 1;
}
.sp-slide > a { display: block; }
.sp-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-slider-prev,
.sp-slider-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	opacity: .75;
	transition: opacity .2s, background .2s;
}
.sp-slider-prev { left: 12px; }
.sp-slider-next { right: 12px; }
.sp-slider-prev svg,
.sp-slider-next svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}
.sp-slider:hover .sp-slider-prev,
.sp-slider:hover .sp-slider-next,
.sp-slider-prev:focus-visible,
.sp-slider-next:focus-visible { opacity: 1; background: rgba(0, 0, 0, .55); }

.sp-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.sp-slider-dots button {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	box-shadow: 0 0 3px rgba(0, 0, 0, .4);
	cursor: pointer;
}
.sp-slider-dots button[aria-current="true"] { background: #fff; }
.sp-slider button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }

@media (max-width: 600px) {
	.sp-slider-prev, .sp-slider-next { width: 34px; height: 34px; margin-top: -17px; }
	.sp-slider-prev svg, .sp-slider-next svg { width: 18px; height: 18px; }
	.sp-slider-dots { bottom: 6px; gap: 6px; }
	.sp-slider-dots button { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-slide, .sp-slide.is-active { transition: none; }
}

/* ---------- อัลบั้มภาพในข่าว (post-gallery.php) ---------- */
.sp-album {
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(30, 60, 90, .08);
}
.sp-album-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.sp-album-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: #24303c;
}
.sp-album-title svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #1aa3e0;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sp-album-count {
	padding: 3px 10px;
	border-radius: 999px;
	background: #eaf8fe;
	color: #0b7fae;
	font-size: 13px;
	font-weight: 600;
}

.sp-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

/* ทุกภาพเป็นสี่เหลี่ยมจัตุรัส 1:1 (ครอปกึ่งกลาง) */
.sp-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background: #eef2f6;
}

.sp-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
/* ชี้ / โฟกัส: ภาพขยายเล็กน้อย + ไอคอนแว่นขยาย */
.sp-gallery-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 35, 60, 0) no-repeat center / 34px 34px;
	transition: background-color .25s ease;
}
.sp-gallery-item:hover::after,
.sp-gallery-item:focus-visible::after {
	background-color: rgba(15, 35, 60, .35);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E");
}
.sp-gallery-item:hover img,
.sp-gallery-item:focus-visible img { transform: scale(1.06); }
.sp-gallery-item:focus-visible { outline: 3px solid #27c2f2; outline-offset: 2px; }

@media (max-width: 576px) {
	.sp-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.sp-album { padding: 10px; border-radius: 12px; }
	.sp-gallery { gap: 5px; }
	.sp-gallery-item { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-gallery-item img, .sp-gallery-item::after { transition: none; }
	.sp-gallery-item:hover img, .sp-gallery-item:focus-visible img { transform: none; }
}