/*
 * why-inspire-page.css — "ทำไมต้อง Inspire Wellness" page template
 * (page-why-inspire.php). Depends on inner-pages.css (shared .ip-*
 * vocabulary, incl. .ip-eyebrow) and sitewide style.css tokens — both
 * declared as deps when this is enqueued, see iw_enqueue_assets() in
 * functions.php.
 * Ported from `Wellness Website/why-inspire-page-mockup.html`.
 */

/* ---------- pillars (4 promise cards) ---------- */
.ip-pillars-section{
	background:
		radial-gradient(ellipse 55% 45% at 90% 5%, rgba(249,214,223,0.35), transparent 70%),
		radial-gradient(ellipse 50% 40% at 5% 95%, rgba(200,162,172,0.2), transparent 70%),
		var(--white);
}
.ip-pillar-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}

/* ===================================================================
   Sep 2026 redesign — ported from the approved mockup
   `pillar-cards-redesign-preview.html`. Every new element/keyframe is
   prefixed `.promise-card-` (checked against style.css + the theme's
   other CSS files first: bare `.icon-badge`/`.num`/`.spark` are all
   already used elsewhere sitewide — `.service-card .icon-badge`,
   `.philo-row`/`.service-card`/`.why-item` `.num`, `.fab-stack .spark`
   — different designs scoped under different ancestors, so a bare
   reuse here wouldn't have visually collided, but a dedicated prefix
   removes any doubt and matches the brief's explicit ask). Card font
   is Anuphan (inherited) except the "01–04" numerals, which use the
   real script font (--font-script = Mrs Saint Delafield, already
   loaded sitewide) in place of the mockup's placeholder Alex Brush —
   the "Our Promise" eyebrow above the grid already uses the real font
   too, via the shared .ip-script class (see inner-pages.css). */
.ip-pillar-card{
	position:relative;padding:38px 34px 34px;border-radius:28px;overflow:hidden;
	background:linear-gradient(150deg, var(--ip-blush-pale) 0%, var(--white) 60%);
	border:1px solid rgba(200,162,172,0.28);
	transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.ip-pillar-card:hover{
	transform:translateY(-7px);
	box-shadow:0 24px 46px rgba(217,140,168,0.26), 0 0 0 1px rgba(212,175,55,0.15) inset;
	border-color:var(--heading-rose);
}

/* decorative dotted ring watermark, top-right corner */
.promise-card-deco-dots{
	position:absolute;top:-30px;right:-30px;width:130px;height:130px;
	border:1px dashed rgba(212,175,55,0.3);border-radius:50%;
	pointer-events:none;
}
.promise-card-deco-dots::before{
	content:'';position:absolute;inset:14px;border:1px solid rgba(217,140,168,0.18);border-radius:50%;
}

/* faint handwritten "01–04" watermark */
.promise-card-num{
	position:absolute;right:22px;top:14px;
	font-family:var(--font-script);font-size:2.6rem;font-weight:400;color:var(--gold);
	opacity:.22;line-height:1;z-index:0;
}

/* icon badge: dashed gold ring (rotates, speeds up on card hover) +
   inner blush→white disc (continuous halo-pulse glow) + the icon svg */
.promise-card-badge{position:relative;width:74px;height:74px;margin-bottom:22px;z-index:1;}
.promise-card-ring-outer{
	position:absolute;inset:0;border-radius:50%;
	border:1px dashed rgba(212,175,55,0.55);
	animation:promiseCardSpin 14s linear infinite;
}
.ip-pillar-card:hover .promise-card-ring-outer{animation-duration:6s;}
@keyframes promiseCardSpin{to{transform:rotate(360deg);}}
.promise-card-ring-inner{
	position:absolute;inset:8px;border-radius:50%;
	background:linear-gradient(150deg, var(--blush-soft), var(--white));
	border:1px solid rgba(165,79,98,0.25);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 16px rgba(200,162,172,0.25);
	animation:promiseCardHalo 3.2s ease-in-out infinite;
}
@keyframes promiseCardHalo{
	0%,100%{box-shadow:0 6px 16px rgba(200,162,172,0.25), 0 0 0 0 rgba(212,175,55,0.3);}
	50%{box-shadow:0 6px 16px rgba(200,162,172,0.25), 0 0 0 8px rgba(212,175,55,0);}
}
.promise-card-badge svg{width:28px;height:28px;stroke:var(--heading-rose);fill:none;stroke-width:1.4;position:relative;z-index:2;}

/* small gold sparkle, appears near the badge on card hover */
.promise-card-spark{
	position:absolute;width:14px;height:14px;opacity:0;
	transition:opacity .4s ease, transform .4s ease;
	top:26px;right:44px;transform:scale(.5) rotate(-10deg);
	pointer-events:none;z-index:1;
}
.ip-pillar-card:hover .promise-card-spark{opacity:1;transform:scale(1) rotate(10deg);}
.promise-card-spark svg path{fill:var(--gold);}

.ip-pillar-card h3{font-family:var(--font-th-display);font-size:1.2rem;font-weight:600;color:var(--heading-rose);margin-bottom:10px;position:relative;z-index:1;}
.ip-pillar-card p{font-size:.94rem;color:var(--ip-ink);opacity:.82;position:relative;z-index:1;}

@media (prefers-reduced-motion: reduce){
	.promise-card-ring-outer,.promise-card-ring-inner{animation:none;}
}

/* ---------- checklist + portrait ---------- */
.ip-checklist-section{
	background:
		radial-gradient(ellipse 55% 45% at 10% 10%, rgba(249,214,223,0.4), transparent 70%),
		radial-gradient(ellipse 50% 40% at 95% 90%, rgba(200,162,172,0.2), transparent 70%),
		var(--ip-pearl);
}
.ip-checklist-split{display:grid;grid-template-columns:0.75fr 1.25fr;gap:44px;align-items:stretch;}
.ip-checklist-items{display:flex;flex-direction:column;gap:20px;justify-content:center;}
.ip-check-item{display:flex;gap:14px;align-items:flex-start;}
.ip-check-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--blush-soft);display:flex;align-items:center;justify-content:center;margin-top:2px;transition:transform .3s ease, box-shadow .3s ease;}
.ip-check-icon svg{width:13px;height:13px;stroke:var(--heading-rose);fill:none;stroke-width:2.2;}
.ip-check-item:hover .ip-check-icon{transform:scale(1.12);box-shadow:0 0 0 6px rgba(212,175,55,0.2);}
.ip-check-item p{font-size:.98rem;color:var(--ip-ink);}

/* ---------- quote + portrait ---------- */
.ip-quote-section{background:var(--white);}
/* Sep 2026 symmetry fix: was 0.75fr/1.25fr with the portrait on
   align-items:stretch + height:100% — but .ip-portrait-frame img sits
   in normal flow (not absolutely positioned, unlike e.g. .ip-space-card
   img), so height:100% only resolves once the ancestor chain has a
   definite height; when it didn't, the browser fell back to the img's
   own intrinsic aspect ratio scaled to the (very wide, 1.25fr) column
   width — producing a portrait far taller than the quote box next to
   it, with the shorter quote-panel then centered inside a tall row and
   leaving a lot of dead space below it. Fixed columns to an even split
   and BOTH boxes to the same explicit height (not stretch/100%) below,
   so sizing is direct and predictable regardless of source photo ratio. */
.ip-quote-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch;}
.ip-quote-split .ip-portrait-frame{height:450px;}
/* upper-body crop (face/shoulders), not full figure, now that the
   frame is a fixed, shorter height than the source photo's natural
   crop — see task brief. */
.ip-quote-split .ip-portrait-frame img{object-position:center 18%;}
.ip-quote-panel{
	height:450px;padding:48px 40px;border-radius:32px;background:linear-gradient(160deg, var(--ip-blush-pale), var(--white));
	border:1px solid rgba(217,140,168,0.28);box-shadow:0 22px 55px rgba(200,162,172,0.24), 0 0 0 1px rgba(212,175,55,0.08) inset;
	position:relative;display:flex;flex-direction:column;justify-content:center;
}
.ip-quote-panel .ip-quote-mark{font-family:'Cinzel', serif;font-size:2.6rem;color:var(--gold-deep);opacity:.6;line-height:1;}
.ip-quote-panel p.ip-quote-text{font-family:var(--font-th-display);font-size:1.15rem;color:var(--heading-rose);font-weight:500;margin:14px 0 18px;line-height:1.8;}
.ip-quote-panel .ip-quote-sub{font-size:.88rem;color:var(--ip-ink);opacity:.7;}

/* ---------- space teaser ---------- */
.ip-space-section{
	background:radial-gradient(ellipse 55% 45% at 90% 10%, rgba(249,214,223,0.35), transparent 70%), var(--ip-pearl);
	text-align:center;
}
.ip-space-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;}
.ip-space-card{
	border-radius:24px;overflow:hidden;position:relative;height:220px;
	background:linear-gradient(150deg, var(--blush-soft), var(--mauve));
	display:flex;align-items:flex-end;justify-content:flex-start;
	border:1px solid rgba(217,140,168,0.3);transition:transform .4s ease;
}
.ip-space-card:hover{transform:translateY(-5px);}
/* real clinic photo (Sep 2026 — replaces the placeholder icon): fills
   the card behind the shine sweep (z-index:2) and the label (z-index:1);
   the gradient background above stays as a color placeholder visible
   for a moment while the image loads, and as a safety net if a future
   card is ever added without a photo. */
.ip-space-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.ip-space-card::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg, transparent, rgba(255,223,140,0.55), transparent);transform:skewX(-20deg);transition:left .6s ease;z-index:2;}
.ip-space-card:hover::before{left:130%;}
.ip-space-card .ip-space-label{background:rgba(255,255,255,0.75);color:var(--heading-rose);font-family:var(--font-latin);font-size:.85rem;font-weight:600;padding:10px 18px;border-radius:0 16px 0 0;position:relative;z-index:1;}
/* .ip-space-more is now just a layout wrapper — the link itself is
   .btn-ghost (shared button system, see inner-pages.css). */
.ip-space-more{margin-top:30px;text-align:center;}

/* mobile carousel dots for .ip-pillar-grid / .ip-space-grid (Sep 2026)
   — hidden by default (desktop/tablet keep the normal grid), only
   shown inside the @media(max-width:640px) block below. Same dot
   look/JS hookup as the homepage's existing mobile carousels
   (.why-dots/.philo-dots/.stat-dots in style.css + iwInitCarouselDots()
   in main.js) — reused here for consistency rather than inventing a
   second pattern. */
.ip-pillar-dots,.ip-space-dots{display:none;}

/* (Sep 2026: .ip-cta-section — the old blush→mauve CTA banner — was
   removed from page-why-inspire.php's markup, replaced by the sitewide
   Contact Banner template-part above the footer. Its CSS is removed
   here too rather than left as dead weight.) */

/* ---------- responsive ---------- */
@media (max-width:1024px){
	.ip-pillar-grid{gap:18px;}
	.ip-checklist-split,.ip-quote-split{gap:30px;}
	.ip-space-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:860px){
	.ip-checklist-split,.ip-quote-split{grid-template-columns:1fr;}
	.ip-checklist-split .ip-portrait-frame,
	.ip-quote-split .ip-portrait-frame{max-width:360px;margin:0 auto;}
	.ip-checklist-items{align-items:center;text-align:left;}
	/* stacked single column: portrait no longer needs to match the
	   quote-panel's height (they're no longer side-by-side), so both
	   drop to a shorter, mobile-appropriate fixed height instead of the
	   450px desktop one. min-height must be reset too — the shared
	   .ip-stretch class (inner-pages.css) sets min-height:380px, which
	   otherwise silently overrides a smaller `height` here (min-height
	   always wins over a smaller height, they don't cascade against
	   each other). */
	.ip-quote-split .ip-portrait-frame{height:340px;min-height:0;}
	.ip-quote-panel{height:auto;min-height:320px;}
}
@media (max-width:768px){
	.ip-pillar-grid{grid-template-columns:1fr;}
	.ip-space-grid{grid-template-columns:1fr;}
	.ip-quote-panel{padding:40px 26px;}
}
@media (max-width:480px){
	.ip-quote-panel{padding:32px 20px;}
	.ip-quote-split .ip-portrait-frame{height:320px;min-height:0;}
}

/* ================= MOBILE CARD SLIDERS (Sep 2026) =================
   .ip-pillar-grid (4 cards) and .ip-space-grid (3 cards) become a
   single-row horizontal scroll-snap carousel below 640px — same
   breakpoint/technique already used sitewide for this exact job (see
   .why-list/.philo-rows in style.css): flex row + overflow-x:auto +
   scroll-snap-type:x mandatory, no JS carousel library. 640px (not
   480 or 768) matches that existing convention exactly, so this reads
   as the same component language as the rest of the site rather than
   a one-off. Desktop/tablet above this are untouched — still a plain
   CSS grid. */
@media (max-width:640px){
	.ip-pillar-grid{
		display:flex;flex-wrap:nowrap;gap:14px;
		overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:8%;
		padding:4px 2px 6px;
		-ms-overflow-style:none;scrollbar-width:none;
	}
	.ip-pillar-grid::-webkit-scrollbar{display:none;}
	.ip-pillar-card{
		scroll-snap-align:center;scroll-snap-stop:always;
		flex:0 0 84%;min-width:0;
	}
	.ip-pillar-dots{display:flex;justify-content:center;gap:9px;margin-top:16px;}

	.ip-space-grid{
		display:flex;flex-wrap:nowrap;gap:14px;
		overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:8%;
		padding:4px 2px 6px;
		-ms-overflow-style:none;scrollbar-width:none;
	}
	.ip-space-grid::-webkit-scrollbar{display:none;}
	.ip-space-card{
		scroll-snap-align:center;scroll-snap-stop:always;
		flex:0 0 84%;min-width:0;
	}
	.ip-space-dots{display:flex;justify-content:center;gap:9px;margin-top:16px;}

	/* shared dot look, matches .why-dots .dot / .philo-dots .dot in
	   style.css exactly */
	.ip-pillar-dots .dot,.ip-space-dots .dot{
		width:7px;height:7px;border-radius:50%;
		background:var(--line);cursor:pointer;transition:.3s;
	}
	.ip-pillar-dots .dot.active,.ip-space-dots .dot.active{
		background:var(--gold-deep);width:22px;border-radius:5px;
	}
}