/*
Theme Name: PNC Child
Template: twentytwentyfive
Version: 1.0.0
Description: ไชลด์ธีมของ pnc.co.th — โหลด Design System ผ่าน theme.json
*/

/* ══ การ์ดสินค้า (ใช้กับ archive ของ software / hardware) ══ */
.pnc-card{
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pnc-card:hover{
	border-color: var(--wp--preset--color--navy-500);
	box-shadow: 0 6px 24px -8px rgba(10,34,64,.22);
	transform: translateY(-2px);
}
.pnc-card:focus-within{
	border-color: var(--wp--preset--color--navy-500);
	box-shadow: 0 0 0 3px rgba(30,91,150,.28);
}

/* พื้นที่รูปของการ์ด */
.pnc-card .wp-block-post-featured-image{
	margin: 0;
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pnc-card .wp-block-post-featured-image img{
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* พื้นที่รูปสำรอง เมื่อรายการยังไม่มี featured image
   WordPress ไม่เรนเดอร์บล็อกรูปเลยเมื่อไม่มีรูป จึงต้องดักด้วย :not(:has()) */
.pnc-card:not(:has(.wp-block-post-featured-image))::before{
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg,
		var(--wp--preset--color--surface) 0%,
		#E1EAF5 55%,
		#D5E2F1 100%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ทำให้ทั้งการ์ดคลิกได้ โดยยังมีลิงก์จริงเพียงอันเดียว */
.pnc-card .wp-block-post-title a{
	text-decoration: none;
	color: var(--wp--preset--color--navy-700);
}
.pnc-card .wp-block-post-title a::after{
	content: ""; position: absolute; inset: 0;
}
.pnc-card:hover .wp-block-post-title a{ color: var(--wp--preset--color--navy-900); }

.pnc-more{
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--wp--preset--color--navy-500);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	transition: gap .18s ease;
}
.pnc-card:hover .pnc-more{ gap: 10px; }

/* ══ คำโปรยใต้หัวข้อ ══
   constrained layout ใส่ margin auto ให้บล็อกที่มี max-width โดยอัตโนมัติ
   ทำให้ลอยไปกลางหน้า จึงต้องบังคับชิดซ้ายเอง */
.pnc-lede{
	max-width: 660px;
	margin-inline: 0 auto;
}

@media (prefers-reduced-motion: reduce){
	.pnc-card, .pnc-more{ transition: none; }
	.pnc-card:hover{ transform: none; }
}

/* ══ กล่อง "ผลิตภัณฑ์ที่เกี่ยวข้อง" ท้ายบทความ ══
   เรนเดอร์จาก Pods Template related-software */
.pnc-related{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.pnc-related li{ margin: 0; }
.pnc-related a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	color: var(--wp--preset--color--navy-700);
	transition: border-color .18s ease, background .18s ease;
}
.pnc-related a:hover{
	border-color: var(--wp--preset--color--navy-500);
	background: var(--wp--preset--color--surface-2, #EAF0F7);
}
.pnc-related a:focus-visible{
	outline: 3px solid var(--wp--preset--color--navy-500);
	outline-offset: 2px;
}
.pnc-related-empty{ color: var(--wp--preset--color--ink-soft); margin: 0; }

@media (prefers-reduced-motion: reduce){
	.pnc-related a{ transition: none; }
}

/* ══ แถบโลโก้ลูกค้า ══ */
.pnc-logo-strip .wp-block-post-featured-image{
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pnc-logo-strip .wp-block-post-featured-image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* โลโก้ลูกค้ามีสีหลากหลาย ทำให้แถบดูรก
	   ปรับเป็นโทนเดียวตอนพัก แล้วคืนสีจริงเมื่อชี้ */
	filter: grayscale(1);
	opacity: .72;
	transition: filter .2s ease, opacity .2s ease;
}
.pnc-logo-strip .wp-block-post-featured-image img:hover{
	filter: grayscale(0);
	opacity: 1;
}
.pnc-logo-item{ text-align: center; }
.pnc-logo-item .wp-block-post-title{ margin: 0; line-height: 1.4; }

/* หัวข้อ hero หน้าแรก — คุมความกว้างไม่ให้ยาวเกินอ่าน */
.pnc-hero-h1{ max-width: 880px; margin-inline: 0 auto; }

@media (prefers-reduced-motion: reduce){
	.pnc-logo-strip .wp-block-post-featured-image img{ transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

/* แถบบนสุด — ซ่อนบนจอเล็ก เพราะเบียดพื้นที่ที่ควรเป็นเนื้อหา
   เบอร์โทรยังเข้าถึงได้จากปุ่ม CTA และฟุตเตอร์ */
@media (max-width: 781px){
	.pnc-utilbar{ display: none; }
}
.pnc-utilbar p{ margin: 0; }
.pnc-utilbar a{ text-decoration: none; }
.pnc-utilbar a:hover{ text-decoration: underline; }

/* แถบเมนู — ติดบนสุดเมื่อเลื่อน
   พื้นโปร่งแสง + เบลอ ทำให้เนื้อหาที่เลื่อนผ่านใต้แถบยังรู้สึกต่อเนื่อง
   แทนที่จะเป็นแผ่นทึบวางทับ */
.pnc-nav{
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
}
/* เบราว์เซอร์ที่ไม่รองรับ backdrop-filter ต้องได้พื้นทึบ ไม่ใช่พื้นโปร่ง
   ไม่งั้นข้อความเมนูจะซ้อนกับเนื้อหาที่เลื่อนผ่านจนอ่านไม่ออก */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.pnc-nav{ background: var(--wp--preset--color--base); }
}

.pnc-nav .wp-block-site-logo img{ display: block; }

/* ลิงก์เมนู — ไม่ขีดเส้นใต้ตลอดเวลาแบบลิงก์ในเนื้อหา
   ใช้เส้นใต้ตอนชี้แทน โดยเว้นระยะจากตัวอักษรให้อ่านง่าย */
.pnc-nav .wp-block-navigation-item__content{
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
}
.pnc-nav .wp-block-navigation-item__content:hover,
.pnc-nav .wp-block-navigation-item__content:focus-visible{
	color: var(--wp--preset--color--navy-700);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}
.pnc-nav .current-menu-item > .wp-block-navigation-item__content{
	color: var(--wp--preset--color--navy-700);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* กล่องเมนูย่อย — ค่าเริ่มต้นของแกนเป็นกล่องเหลี่ยมชิดขอบ
   ปรับให้มีเงา มุมมน และระยะหายใจ */
.pnc-nav .wp-block-navigation__submenu-container{
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	box-shadow: 0 16px 40px -12px rgba(10, 34, 64, .28);
	padding: 8px;
	margin-top: 6px;
	min-width: 260px;
}
.pnc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	padding: 9px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.pnc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: var(--wp--preset--color--navy-700);
}

/* ซอฟต์แวร์มี 9 รายการ ฮาร์ดแวร์มี 6 — เรียงคอลัมน์เดียวจะยาวเกินจอ
   แตกเป็นสองคอลัมน์ตั้งแต่จอแท็บเล็ตขึ้นไป */
@media (min-width: 782px){
	.pnc-nav .pnc-mega > .wp-block-navigation__submenu-container{
		display: grid;
		grid-template-columns: repeat(2, minmax(210px, 1fr));
		gap: 2px 4px;
	}
	/* "ดูทั้งหมด" กินความกว้างเต็มแถวและมีเส้นคั่นเหนือ */
	.pnc-nav .pnc-mega .pnc-submenu-all{
		grid-column: 1 / -1;
		border-top: 1px solid var(--wp--preset--color--line);
		margin-top: 6px;
		padding-top: 6px;
	}
}
.pnc-nav .pnc-submenu-all .wp-block-navigation-item__content{
	color: var(--wp--preset--color--navy-500);
	font-weight: 600;
}

/* เมนูเต็มจอบนมือถือ — พื้น navy ต้องได้ตัวอักษรสว่างและเมนูย่อยโปร่ง */
.pnc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}
.pnc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: var(--wp--preset--spacing--40);
}
.pnc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--navy-200);
}

.pnc-nav-cta .wp-block-button__link{
	transition: background-color .18s ease, transform .18s ease;
}
.pnc-nav-cta .wp-block-button__link:hover{ transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
	.pnc-nav-cta .wp-block-button__link{ transition: none; }
	.pnc-nav-cta .wp-block-button__link:hover{ transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.pnc-footer-grid{
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}
@media (max-width: 1023px){
	.pnc-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px){
	.pnc-footer-grid{ grid-template-columns: 1fr; gap: var(--wp--preset--spacing--70); }
}

/* หัวคอลัมน์ — ตัวเล็กแต่มีน้ำหนัก ไม่แข่งกับเนื้อหาหลักของหน้า */
.pnc-footer-h{
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 12.5px;
	margin: 0 0 4px;
	color: var(--wp--preset--color--base);
}
.pnc-footer-grid p{ margin: 0; }
.pnc-footer-grid a{ text-decoration: none; }
.pnc-footer-grid a:hover{ text-decoration: underline; text-underline-offset: 4px; }

.pnc-footer-label{
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}
.pnc-footer-logo{ margin: 0; }
.pnc-footer-bottom p{ margin: 0; }
.pnc-footer-bottom a{ text-decoration: none; }
.pnc-footer-bottom a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════
   การเคลื่อนไหว
   ทุกกฎอยู่ใต้ .pnc-motion ซึ่ง assets/js/motion.js เป็นคนเติมให้
   ถ้า JS ไม่ทำงาน คลาสนี้จะไม่มี → ไม่มีอะไรถูกซ่อน → เนื้อหาแสดงครบ
   ═══════════════════════════════════════════════════════════ */

.pnc-motion .pnc-reveal{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s cubic-bezier(.16,.68,.43,.99),
	            transform .55s cubic-bezier(.16,.68,.43,.99);
	transition-delay: var(--pnc-delay, 0ms);
	will-change: opacity, transform;
}
.pnc-motion .pnc-reveal.is-visible{
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ระยะขยับสั้นแค่ 14px ตั้งใจให้รู้สึกว่า "เนื้อหามาถึงแล้ว"
   ไม่ใช่ให้รู้สึกว่า "มีอะไรวิ่งผ่านหน้า" — ระยะยาวกว่านี้จะกวนสายตาเวลาเลื่อนเร็ว */

@media (prefers-reduced-motion: reduce){
	.pnc-motion .pnc-reveal{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   วีดีโอและสื่อผลิตภัณฑ์
   ═══════════════════════════════════════════════════════════ */

.pnc-media{
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px -24px rgba(10,34,64,.35);
}
.pnc-media video,
.pnc-media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.pnc-media figure{ margin: 0; }

/* กรอบเลียนหน้าต่างโปรแกรม — ช่วยให้ผู้ชมอ่านออกทันทีว่ากำลังดูหน้าจอซอฟต์แวร์
   ไม่ใช่ภาพประกอบทั่วไป ซึ่งสำคัญมากเวลาขายซอฟต์แวร์ */
.pnc-media-window{ padding-top: 34px; }
.pnc-media-window::before{
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 34px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pnc-media-window::after{
	content: "";
	position: absolute;
	top: 12px;
	left: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--line-strong);
	box-shadow: 18px 0 0 var(--wp--preset--color--line-strong),
	            36px 0 0 var(--wp--preset--color--line-strong);
	opacity: .5;
}

/* ป้ายบอกว่าเป็นภาพจากระบบจริง */
.pnc-media-note{
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
	margin-top: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════════════════════
   วัตถุลอย — ทางเลือกแทนวีดีโอ 3D
   ใช้ภาพผลิตภัณฑ์พื้นโปร่ง (PNG) แล้วให้ CSS ทำให้ลอย
   เทียบกับวีดีโอ 3D จริง: ได้ความรู้สึกใกล้เคียงที่ขนาดไฟล์ ~150KB
   แทนที่จะเป็น 4MB และไม่กระทบคะแนน Core Web Vitals
   ═══════════════════════════════════════════════════════════ */

.pnc-stage{
	position: relative;
	display: grid;
	place-items: center;
	min-height: 380px;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
}

/* แสงนวลด้านหลังวัตถุ ทำให้ของไม่ลอยอยู่บนพื้นแบน */
.pnc-stage::before{
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%),
		linear-gradient(155deg, #EAF1F9 0%, #DCE7F4 45%, #CFDDEE 100%);
}

.pnc-stage img{
	position: relative;
	max-width: min(78%, 520px);
	height: auto;
	/* เงาใต้วัตถุ ไม่ใช่ box-shadow เพราะภาพพื้นโปร่งต้องการเงาตามรูปทรงจริง */
	filter: drop-shadow(0 34px 34px rgba(10,34,64,.30));
	animation: pnc-float 6.5s ease-in-out infinite;
}

@keyframes pnc-float{
	0%,100%{ transform: translateY(0) rotate(-.4deg); }
	50%    { transform: translateY(-16px) rotate(.4deg); }
}

/* หมุนช้ากว่าและสวนทางกันเล็กน้อยเมื่อมีหลายชิ้น
   ถ้าทุกชิ้นลอยพร้อมกันจังหวะเดียวจะดูเหมือนภาพทั้งภาพสั่น ไม่ใช่ของลอย */
.pnc-stage img:nth-of-type(2){ animation-duration: 8s;   animation-delay: -1.2s; }
.pnc-stage img:nth-of-type(3){ animation-duration: 7.2s; animation-delay: -2.6s; }

/* พื้นเวทีแบบเข้ม ใช้สลับกับแบบสว่างไม่ให้ทั้งหน้าโทนเดียว */
.pnc-stage.is-dark::before{
	background:
		radial-gradient(55% 50% at 50% 45%, rgba(30,91,150,.55) 0%, rgba(10,34,64,0) 72%),
		linear-gradient(160deg, #0E2A4C 0%, #0A2240 55%, #08192F 100%);
}
.pnc-stage.is-dark img{ filter: drop-shadow(0 34px 40px rgba(0,0,0,.55)); }

@media (max-width: 781px){
	.pnc-stage{ min-height: 280px; }
	.pnc-stage img{ max-width: 86%; }
}

/* คนที่ตั้งค่าลดการเคลื่อนไหวไว้ ต้องเห็นภาพนิ่ง ไม่ใช่ภาพที่ลอยช้าลง */
@media (prefers-reduced-motion: reduce){
	.pnc-stage img{ animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   วีดีโอกลืนพื้น — ใช้กับ section สีเข้ม
   วีดีโอจาก Flow มีพื้นหลัง navy อยู่แล้ว ถ้าใส่กรอบหรือเงาจะเห็นเป็น
   "กล่องวีดีโอวางบนหน้าเว็บ" แต่ถ้าฟุ้งขอบออก มันจะกลายเป็นส่วนหนึ่งของหน้า
   ซึ่งให้ความรู้สึกเหมือนงานที่ออกแบบมาด้วยกัน ไม่ใช่คลิปที่เอามาแปะ
   ═══════════════════════════════════════════════════════════ */

.pnc-media-bleed{ position: relative; }
.pnc-media-bleed figure{ margin: 0; }
.pnc-media-bleed video,
.pnc-media-bleed img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* ฟุ้งขอบทั้งสี่ด้าน ให้จางหายไปกับพื้นแทนที่จะตัดเป็นเส้นตรง
	   ต้องมีทั้ง -webkit- เพราะ Safari ยังต้องการ prefix */
	-webkit-mask-image:
		radial-gradient(115% 105% at 50% 50%, #000 52%, transparent 92%);
	mask-image:
		radial-gradient(115% 105% at 50% 50%, #000 52%, transparent 92%);
}

/* ปิดปุ่มควบคุมเวลาใช้เป็นภาพประกอบ — คลิปวนลูปไม่มีเสียง
   ไม่มีอะไรให้ผู้ใช้ควบคุม ปุ่มจึงเป็นแค่สิ่งรบกวนสายตา */
.pnc-media-bleed video::-webkit-media-controls{ display: none !important; }
.pnc-media-bleed video{ pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   Hero ที่มีภาพ/วีดีโอ
   ═══════════════════════════════════════════════════════════ */

.pnc-hero-media{
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--navy-900);
	box-shadow: 0 28px 64px -28px rgba(10,34,64,.45);
}
.pnc-hero-media video,
.pnc-hero-media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.pnc-hero-media figure{ margin: 0; }

/* วีดีโอที่นี่เป็นภาพประกอบ ไม่ใช่สื่อที่ผู้ใช้ต้องควบคุม */
.pnc-hero-media video{ pointer-events: none; }
.pnc-hero-media video::-webkit-media-controls{ display: none !important; }

/* คอลัมน์ hero — ตัวหนังสือต้องไม่แคบเกินไปบนจอกลาง
   ถ้าปล่อยให้ Columns แบ่งครึ่งเท่ากัน พาดหัวไทยจะตัดบรรทัดถี่จนอ่านสะดุด

   ⚠️ ต้องเขียน flex ครบสามค่า ห้ามใส่แค่ flex-basis
   WordPress ตั้ง flex-grow:1 ให้ทุกคอลัมน์ ถ้าใส่แค่ flex-basis:54%
   คอลัมน์แรกจะยังโตต่อจนกินพื้นที่ ~77% เหลือให้คอลัมน์สื่อแค่ ~23%
   ซึ่งเป็นบั๊คที่ทำให้วีดีโอเล็กเหลือ 247px บนจอ 1280px */
@media (min-width: 782px){
	.pnc-hero-cols > .wp-block-column:first-child{ flex: 0 1 54%; }
	.pnc-hero-cols > .wp-block-column:last-child { flex: 1 1 auto; }
}

/* hero ต้องไม่มีอนิเมชัน — มันอยู่ในจอตั้งแต่วินาทีแรก
   ถ้าให้มันค่อย ๆ จางเข้ามา ผู้ใช้จะเห็นหน้าเปล่าก่อนเห็นเนื้อหา
   และ Chrome จะนับ LCP ช้าลงเพราะองค์ประกอบยัง opacity 0 อยู่
   ต้องครอบลูกหลานทั้งหมดด้วย เพราะคลาส reveal ไปลงที่คอลัมน์ ไม่ใช่ที่ section */
.pnc-motion .pnc-hero-section .pnc-reveal,
.pnc-motion .pnc-hero-section.pnc-reveal{
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}