/* Pana Puri — content pages (เรื่องราวของเรา / น้ำปานะคืออะไร / ติดต่อเรา).
   Builds on home.css: same tokens, same shared classes (.ph-*). */

/* ---------- colour / type locks (theme + Elementor kit set bare tag colours) ---------- */
.pana-page h1, .pana-page h2, .pana-page h3, .pana-page p, .pana-page li, .pana-page summary, .pana-page blockquote {
	font-family: var(--ph-sans) !important;
	color: var(--ph-ink) !important;
}
.pana-page .ph-eyebrow { color: var(--ph-gold-text) !important; }
.pana-page .ph-lead, .pana-page .pp-card-desc, .pana-page .pp-note, .pana-page .ph-reason p { color: var(--ph-muted) !important; }
.pana-page .ph-num, .pana-page .pp-pana8-num { color: var(--ph-gold-text) !important; }
.pana-page a:not(.ph-btn) { color: var(--ph-ink) !important; text-decoration: none !important; }
.pana-page a.ph-link, .pana-page a.ph-link:visited { color: var(--ph-gold-text) !important; }
.pana-page .ph-cta h2 { color: #fff !important; }
.pana-page .ph-cta .ph-lead { color: #fff !important; }

/* ---------- hero ---------- */
.pp-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.pp-hero h1 {
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.28;
	font-weight: 400;
	max-width: 24ch;
	margin: .2rem 0 1.2rem;
}
.pp-hero .pp-lead { max-width: 60ch; font-size: 1.08rem; line-height: 1.8; }

/* ---------- sections ---------- */
.pp-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.pp-section-tight { padding-top: clamp(1rem, 2.5vw, 2rem); }
.pp-h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; font-weight: 400; margin: .2rem 0 1rem; }
.pp-note { font-size: .98rem; line-height: 1.75; max-width: 52ch; }
.pp-note em { font-style: normal; font-weight: 500; color: var(--ph-ink) !important; }
.pp-note-wide { grid-column: 1 / -1; max-width: 72ch; padding-top: 1.4rem; border-top: 1px solid var(--ph-line); }

/* ---------- prose ---------- */
.pp-prose { max-width: 64ch; }
.pp-prose p { font-size: 1.08rem; line-height: 1.95; font-weight: 300; margin: 0 0 1.3rem; }
.pp-prose p:last-child { margin-bottom: 0; }
.pp-prose .ph-eyebrow { font-size: .78rem; line-height: 1.4; margin-bottom: 1rem; }
.pp-prose em { font-style: normal; font-weight: 500; color: var(--ph-gold-text) !important; }
.pp-prose-center { margin-left: auto; margin-right: auto; text-align: center; }
.pp-prose-center .ph-eyebrow { text-align: center; }

/* ---------- split (image + text) ---------- */
.pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.pp-split-top { align-items: start; }
.pp-split-media img { width: 100%; height: auto; display: block; border-radius: 6px; }
.pp-banner img { width: 100%; height: auto; display: block; border-radius: 6px; max-height: 520px; object-fit: cover; }

/* ---------- pull quote ---------- */
.pp-quote {
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	padding: 0;
	max-width: 32ch;
	text-align: center;
	font-size: clamp(1.45rem, 3vw, 2.15rem);
	line-height: 1.5;
	font-weight: 300;
	border: 0;
}
.pp-quote::before { content: ""; display: block; width: 48px; height: 1px; background: var(--ph-gold); margin: 0 auto 1.4rem; }

/* ---------- numbered steps (whatis) ---------- */
.pp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ph-line); }
.pp-step {
	display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.2rem;
	padding: clamp(1.6rem, 3vw, 2.4rem) 0;
	border-bottom: 1px solid var(--ph-line);
}
.pp-step .ph-num { margin: .35rem 0 0; }
.pp-step h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.4; margin: 0 0 .6rem; }
.pp-step p { max-width: 64ch; font-size: 1.04rem; line-height: 1.85; font-weight: 300; }

/* ---------- 8 panas ---------- */
.pp-band { background: #F1EEE2; }
.pp-pana8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.pp-pana8 li {
	display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .6rem;
	padding: .7rem 0; border-bottom: 1px solid rgba(56, 45, 22, .12);
}
.pp-pana8-num { font-size: .95rem; line-height: 1.6; }
.pp-pana8-name { font-weight: 500; font-size: 1.02rem; line-height: 1.6; }
.pp-pana8-gloss { grid-column: 2; font-size: .92rem; color: var(--ph-muted) !important; line-height: 1.5; }

/* ---------- FAQ ---------- */
.pp-faq-wrap { max-width: 860px; }
.pp-faq { border-top: 1px solid var(--ph-line); }
.pp-faq details { border-bottom: 1px solid var(--ph-line); }
.pp-faq summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.1rem 0;
	font-size: 1.1rem; font-weight: 500; line-height: 1.5;
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after {
	content: "+"; flex: 0 0 auto;
	font-family: var(--ph-serif); font-size: 1.6rem; line-height: 1;
	color: var(--ph-gold) !important;
	transition: transform .18s ease;
}
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq details p { padding: 0 2.4rem 1.3rem 0; font-size: 1.02rem; line-height: 1.85; font-weight: 300; max-width: 66ch; }
.pp-faq-wrap .ph-actions { gap: 1.6rem; }

/* ---------- contact cards ---------- */
.pp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pp-card {
	border: 1px solid var(--ph-line); border-radius: 8px; background: #fff;
	padding: clamp(1.4rem, 2.6vw, 2rem);
	display: flex; flex-direction: column;
}
.pp-card .ph-eyebrow { margin-bottom: .8rem; }
.pp-card-value { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 400; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: .01em; }
.pp-card-value-sm { font-size: 1.08rem; word-break: break-all; }
.pp-card-desc { font-size: .95rem; line-height: 1.7; margin: 0; flex: 1; }
.pp-card .ph-actions { margin-top: 1.4rem; }
.pp-company { font-size: 1.25rem; font-weight: 400; margin: 0 0 .3rem; }
.pana-page .ph-btn-light { font-weight: 700 !important; font-size: 1.05rem !important; }

/* ---------- misc ---------- */
.pp-values .ph-reason-grid { margin-top: 0; }
.pp-actions-center { justify-content: center; margin-top: 2.4rem; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
	.pp-split { grid-template-columns: 1fr; gap: 1.8rem; }
	.pp-split-media { order: -1; }
	.pp-cards { grid-template-columns: 1fr; }
	.pp-pana8 { grid-template-columns: 1fr; }
	.pp-step { grid-template-columns: 2.6rem 1fr; gap: .8rem; }
	.pp-banner img { max-height: 340px; }
}

/* breathing room before the trailing links */
.pp-values .ph-reason-grid { margin-bottom: .5rem; }
.pp-actions-center { margin-top: 3rem; }
.pp-faq-wrap .ph-actions { margin-top: 2.4rem; }

/* ---------- about: contrast pair + how-we-do-it list ---------- */
.pp-contrast {
	list-style: none; margin: clamp(1.6rem, 4vw, 2.6rem) auto; padding: 0;
	max-width: 900px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
}
.pp-contrast li {
	border: 1px solid var(--ph-line); border-radius: 8px; background: #fff;
	padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
.pp-contrast-tag {
	display: inline-block; margin-bottom: .7rem;
	font-size: .8rem; font-weight: 500; letter-spacing: .12em;
	color: var(--ph-gold-text) !important;
	border-bottom: 1px solid var(--ph-gold);
	padding-bottom: .25rem;
}
.pp-contrast p { margin: 0; font-size: 1.02rem; line-height: 1.8; font-weight: 300; }
.pp-contrast strong { font-weight: 500; }
.pp-how { list-style: none; margin: 0; padding: 0; }
.pp-how li {
	display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem;
	padding: 1.2rem 0; border-top: 1px solid var(--ph-line);
}
.pp-how li:last-child { border-bottom: 1px solid var(--ph-line); }
.pp-how .ph-num { margin: .2rem 0 0; font-size: 1.2rem; }
.pp-how h3 { font-size: 1.1rem; font-weight: 500; line-height: 1.4; margin: 0 0 .35rem; }
.pp-how p { margin: 0; font-size: .98rem; line-height: 1.75; font-weight: 300; color: var(--ph-muted) !important; }
.pp-values-label { text-align: center; margin-bottom: 0; }
.pp-band .pp-quote::before { background: var(--ph-gold); }

/* ---------- whatis: คิลานเภสัช ---------- */
.pp-gilana-grid {
	display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.6rem, 5vw, 4rem);
	margin: clamp(2rem, 5vw, 3.2rem) 0;
	align-items: start;
}
.pp-gilana-def {
	border: 1px solid var(--ph-line); border-radius: 8px; background: #fff;
	padding: clamp(1.4rem, 2.8vw, 2.2rem);
}
.pp-gilana-word { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 400; line-height: 1.2; margin: 0 0 .3rem; }
.pp-gilana-read { font-size: .9rem; letter-spacing: .06em; color: var(--ph-gold-text) !important; margin: 0 0 1rem; }
.pp-gilana-def p:last-child { margin: 0; font-size: 1.02rem; line-height: 1.85; font-weight: 300; }
.pp-gilana-def em, .pp-gilana-sum em, .pp-gilana .pp-prose em { font-style: normal; font-weight: 500; color: var(--ph-gold-text) !important; }
.pp-kalika { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ph-line); }
.pp-kalika li {
	display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .4rem 1rem; align-items: baseline;
	padding: .8rem 0; border-bottom: 1px solid var(--ph-line);
}
.pp-kalika-name { font-weight: 500; font-size: 1.02rem; }
.pp-kalika-what { font-size: .98rem; line-height: 1.6; font-weight: 300; }
.pp-kalika-when { font-size: .85rem; color: var(--ph-muted) !important; white-space: nowrap; }
.pp-kalika li.is-hit { background: #F1EEE2; margin: 0 -.8rem; padding-left: .8rem; padding-right: .8rem; }
.pp-kalika li.is-hit .pp-kalika-name::after { content: " ยา"; font-size: .72rem; letter-spacing: .1em; color: var(--ph-gold-text); vertical-align: .2em; margin-left: .3rem; }
.pp-gilana-list .pp-note { margin-top: 1.2rem; max-width: none; }
.pp-gilana-sum {
	max-width: 860px; margin: 0 auto;
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
	border-left: 3px solid var(--ph-gold);
	background: #F1EEE2; border-radius: 0 8px 8px 0;
}
.pp-gilana-sum p:last-child { margin: 0; font-size: 1.04rem; line-height: 1.9; font-weight: 300; }

@media (max-width: 860px) {
	.pp-contrast { grid-template-columns: 1fr; }
	.pp-gilana-grid { grid-template-columns: 1fr; }
	.pp-kalika li { grid-template-columns: 1fr; gap: .15rem; }
	.pp-kalika-when { white-space: normal; }
}