/*
 * about-page.css — "เกี่ยวกับเรา" page template (page-about.php).
 * Depends on inner-pages.css (shared .ip-* vocabulary: hero chrome,
 * eyebrow, portrait-frame placeholder, section heading, divider-fade,
 * button system) and sitewide style.css tokens — both declared as deps
 * when this is enqueued, see iw_enqueue_assets() in functions.php.
 * Ported from `Wellness Website/about-us-page-mockup.html`.
 *
 * Collision check (Sep 2026): grepped the whole theme for `.drop-cap`,
 * `.story-grid`, `.cross-divider`, `.emblem`, `.value-row`, `.value-num`
 * before writing this file — none exist anywhere else in the theme.
 * Still prefixed every new class `.about-` below (matching the
 * `.promise-card-`/`.visit-card-`/`.reach-card-` convention from
 * earlier rounds) so this stays safely self-contained even if a bare
 * name like that is ever introduced elsewhere later.
 *
 * The Team section (below) was redesigned again in a later round —
 * see its own header comment for that collision check + why it uses
 * `.team-` instead of `.about-team-`.
 */

/* ---------- hero: centered emblem + cross-divider (no split/photo,
   unlike the other 3 inner pages' hero — this one has no portrait,
   just the emblem mark). Reuses .ip-hero for the background
   wash/petals/sparkles/deco-rings. ---------- */
.about-hero-content{max-width:640px;margin:0 auto;text-align:center;}

/* ---------- hero emblem (Sep 2026 redesign) — ported from the
   approved mockup `hero-emblem-redesign-preview.html`. Replaces the
   hand-drawn lotus SVG with the theme's real logo (same file as
   header.php's `.brand img`, via iw_get_logo_url()) sitting on a
   white->blush glow plate so the multi-color logo reads crisply.
   One deliberate omission from the mockup: the diagonal "shine sweep"
   across the logo (`.shine` / `@keyframes sweep`) — tested in a
   browser and found to render as a hard gold triangle sliding across
   rather than a soft light sweep, so it's left out entirely per the
   brief rather than patched; every other decorative layer (rings,
   halo glow, sparkles, petals) is kept.
   Bug fixed while porting: the mockup positions its 4 sparkles/3
   petals with `:nth-of-type(n)` — since every sibling in `.emblem-wrap`
   is a `<div>`, `:nth-of-type` counts across ALL of them (rings included),
   not just the sparkles/petals themselves, so e.g. `.sparkle:nth-of-type(1)`
   never matches anything (position 1 is a ring, not a sparkle) and every
   sparkle/petal would've silently kept its default (unpositioned)
   placement. Switched to `:nth-child`, matching the exact DOM order
   below — same convention already used sitewide for `.ip-petal`/
   `.ip-sparkle` in inner-pages.css.
   Prefixed `.about-emblem-` — the shared hero-wide `.ip-deco-ring`/
   `.ip-sparkle`/`.ip-petal` already use different sizes/positions/
   keyframe names for the whole hero background, and `.about-emblem-*`
   only ever appears inside this one wrapper, so a dedicated prefix
   keeps the two systems from ever interfering with each other. */
.about-emblem-wrap{position:relative;width:180px;height:180px;margin:0 auto 26px;}

.about-emblem-ring{position:absolute;border-radius:50%;pointer-events:none;}
.about-emblem-ring.r1{inset:0;border:1px solid rgba(212,175,55,0.22);}
.about-emblem-ring.r2{inset:11%;border:1px dashed rgba(212,175,55,0.35);animation:aboutEmblemSpin 20s linear infinite;}
@keyframes aboutEmblemSpin{to{transform:rotate(360deg);}}

.about-emblem-glow{
	position:absolute;inset:22%;border-radius:50%;
	background:radial-gradient(circle, var(--white) 55%, var(--blush-soft) 100%);
	box-shadow:0 18px 40px rgba(200,162,172,0.35);
	animation:aboutEmblemHalo 3.4s ease-in-out infinite;
	display:flex;align-items:center;justify-content:center;
}
@keyframes aboutEmblemHalo{
	0%,100%{box-shadow:0 18px 40px rgba(200,162,172,0.35), 0 0 0 0 rgba(212,175,55,0.3);}
	50%{box-shadow:0 18px 40px rgba(200,162,172,0.35), 0 0 0 14px rgba(212,175,55,0);}
}
.about-emblem-logo{width:78%;height:78%;object-fit:contain;border-radius:50%;}

.about-emblem-spark{position:absolute;opacity:0;animation:aboutEmblemTwinkle 3.2s ease-in-out infinite;pointer-events:none;}
.about-emblem-spark svg{width:100%;height:100%;}
.about-emblem-spark svg path{fill:var(--gold);}
.about-emblem-spark:nth-child(3){width:14px;height:14px;top:8%;left:12%;animation-delay:.2s;}
.about-emblem-spark:nth-child(4){width:10px;height:10px;top:15%;right:10%;animation-delay:1.3s;}
.about-emblem-spark:nth-child(5){width:12px;height:12px;bottom:10%;left:8%;animation-delay:2.1s;}
.about-emblem-spark:nth-child(6){width:9px;height:9px;bottom:14%;right:14%;animation-delay:.8s;}
@keyframes aboutEmblemTwinkle{
	0%,100%{opacity:0;transform:scale(.4) rotate(0deg);}
	50%{opacity:.9;transform:scale(1) rotate(25deg);}
}

.about-emblem-petal{position:absolute;width:10px;height:13px;background:linear-gradient(135deg, var(--blush-soft), var(--mauve));border-radius:0 60% 0 60%;opacity:.6;animation:aboutEmblemDrift 6s ease-in-out infinite;pointer-events:none;}
.about-emblem-petal:nth-child(7){top:2%;left:48%;animation-delay:0s;}
.about-emblem-petal:nth-child(8){top:20%;left:85%;animation-delay:1.5s;}
.about-emblem-petal:nth-child(9){top:75%;left:5%;animation-delay:3s;}
@keyframes aboutEmblemDrift{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(15deg);}}

@media (prefers-reduced-motion: reduce){
	.about-emblem-ring.r2,.about-emblem-glow,.about-emblem-spark,.about-emblem-petal{animation:none;}
	.about-emblem-spark{opacity:0;}
}
@media (max-width:480px){
	.about-emblem-wrap{width:140px;height:140px;}
}

.about-hero-cross{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 30px;width:160px;}
.about-hero-cross-line{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--gold));}
.about-hero-cross-line.about-hero-cross-line-r{background:linear-gradient(90deg, var(--gold), transparent);}
.about-hero-cross-plus{width:12px;height:12px;position:relative;flex-shrink:0;}
.about-hero-cross-plus::before,
.about-hero-cross-plus::after{content:'';position:absolute;background:var(--heading-rose);}
.about-hero-cross-plus::before{width:100%;height:1.4px;top:50%;left:0;transform:translateY(-50%);}
.about-hero-cross-plus::after{height:100%;width:1.4px;left:50%;top:0;transform:translateX(-50%);}

/* ---------- brand story (editorial drop-cap + real clinic photo) ---------- */
.about-story-section{background:var(--white);}
.about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-story-text h2{font-family:var(--font-th-display);font-size:clamp(1.5rem, 3vw, 1.9rem);font-weight:600;color:var(--heading-rose);margin-bottom:22px;line-height:1.4;}
.about-story-text p{font-size:1rem;color:var(--ip-ink);opacity:.85;margin-bottom:16px;}
.about-drop-cap::first-letter{font-family:'Cinzel',serif;font-size:3.4rem;color:var(--gold-deep);float:left;line-height:.8;margin:6px 10px 0 0;font-weight:600;}

/* ---------- vision (split with portrait + editorial pull-quote) ---------- */
.about-vision-section{background:var(--ip-pearl);}
.about-vision-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;}
.about-vision-text h2{font-family:var(--font-th-display);font-size:clamp(1.5rem, 3vw, 1.9rem);font-weight:600;color:var(--heading-rose);margin-bottom:20px;line-height:1.4;}
.about-vision-text p{font-size:1.02rem;color:var(--ip-ink);opacity:.85;margin-bottom:16px;}
.about-vision-statement{
	font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-deep);font-weight:500;line-height:1.7;
	padding-left:20px;border-left:2px solid var(--gold);margin-top:24px;opacity:1 !important;
}

/* ---------- philosophy (split with portrait + roman-numeral list) ---------- */
.about-philosophy-section{background:var(--white);}
.about-philosophy-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:52px;align-items:stretch;}
.about-value-list{display:flex;flex-direction:column;justify-content:center;}
.about-value-row{display:grid;grid-template-columns:70px 1fr;gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid rgba(200,162,172,0.25);}
.about-value-row:first-child{border-top:1px solid rgba(200,162,172,0.25);}
.about-value-num{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--gold);opacity:.5;text-align:right;font-weight:500;}
.about-value-body h3{font-family:var(--font-th-display);font-size:1.1rem;font-weight:600;color:var(--heading-rose);margin-bottom:6px;}
.about-value-body p{font-size:.94rem;color:var(--ip-ink);opacity:.82;}

/* ---------- team (Sep 2026 redesign — ported from the approved mockup
   `team-section-redesign-preview.html`). Every new element/keyframe is
   prefixed `.team-` (checked against style.css + the theme's other CSS
   files first: bare `.portrait`/`.circle`/`.role-tag`/`.accent-badge`/
   `.ring-mid` don't exist anywhere else in the theme; bare
   `.deco-dots`/`.spark` only ever appear already namespaced elsewhere
   — `.promise-card-deco-dots`/`.visit-card-spark`/etc. — so a dedicated
   prefix here matches that established convention and removes any
   doubt, per the brief's explicit ask). Card font is Anuphan (inherited);
   the mockup's `.script`/Alex Brush rule isn't reproduced here since
   nothing inside the team cards themselves uses script type — the
   "Our Team" eyebrow above the grid already uses the real script font
   (Mrs Saint Delafield, --font-script) via the shared .ip-script class,
   see inner-pages.css. */
.about-team-section{background:var(--ip-pearl);}
.team-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:26px;}
/* mobile carousel dots (Sep 2026) — hidden by default, only shown
   inside the @media(max-width:640px) block further down; same
   dot look/JS hookup as the other 3 card sliders sitewide. */
.team-dots{display:none;}

.team-card{
	position:relative;padding:38px 24px 30px;border-radius:26px;overflow:hidden;
	background:linear-gradient(150deg, var(--ip-blush-pale) 0%, var(--white) 65%);
	border:1px solid rgba(200,162,172,0.28);text-align:center;
	transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.team-card:hover{
	transform:translateY(-7px);
	box-shadow:0 22px 42px rgba(217,140,168,0.25), 0 0 0 1px rgba(212,175,55,0.14) inset;
	border-color:var(--heading-rose);
}

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

/* small gold sparkle, appears top-left on card hover */
.team-spark{
	position:absolute;width:14px;height:14px;opacity:0;top:22px;left:26px;
	transform:scale(.5) rotate(-10deg);
	transition:opacity .4s ease, transform .4s ease;
	pointer-events:none;
}
.team-card:hover .team-spark{opacity:1;transform:scale(1) rotate(10deg);}
.team-spark svg path{fill:var(--gold);}

/* profile portrait: 3-layer ring badge (outer dashed gold, spins,
   speeds up on card hover; mid thin blush-mauve hairline; inner
   blush->mauve gradient circle with a thick white border and a
   continuous halo-pulse glow) + a small role-accent icon badge pinned
   to its bottom-right corner. */
.team-portrait{position:relative;width:120px;height:120px;margin:0 auto 20px;}
.team-ring-outer{
	position:absolute;inset:0;border-radius:50%;
	border:1px dashed rgba(212,175,55,0.55);
	animation:teamRingSpin 16s linear infinite;
}
.team-card:hover .team-ring-outer{animation-duration:7s;}
@keyframes teamRingSpin{to{transform:rotate(360deg);}}
.team-ring-mid{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(217,140,168,0.3);}
.team-circle{
	position:absolute;inset:12px;border-radius:50%;
	background:linear-gradient(150deg, var(--blush-soft), var(--mauve));
	border:3px solid var(--white);box-shadow:0 12px 26px rgba(200,162,172,0.32);
	display:flex;align-items:center;justify-content:center;
	animation:teamHalo 3.4s ease-in-out infinite;
}
@keyframes teamHalo{
	0%,100%{box-shadow:0 12px 26px rgba(200,162,172,0.32), 0 0 0 0 rgba(212,175,55,0.28);}
	50%{box-shadow:0 12px 26px rgba(200,162,172,0.32), 0 0 0 8px rgba(212,175,55,0);}
}
.team-circle svg{width:46px;height:46px;stroke:var(--white);fill:none;stroke-width:1.1;}

.team-accent-badge{
	position:absolute;bottom:-2px;right:2px;width:30px;height:30px;border-radius:50%;
	background:var(--white);border:1.5px solid var(--gold);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 10px rgba(0,0,0,0.12);
}
.team-accent-badge svg{width:14px;height:14px;stroke:var(--heading-rose);fill:none;stroke-width:1.6;}

.team-card h4{font-family:var(--font-th-display);font-size:1.05rem;font-weight:500;color:var(--heading-rose);margin-bottom:10px;position:relative;z-index:1;}

.team-role-tag{
	display:inline-flex;align-items:center;gap:6px;background:var(--blush-soft);color:var(--gold-deep);
	font-family:var(--font-latin);font-size:.7rem;font-weight:400;letter-spacing:.04em;
	padding:6px 14px;border-radius:999px;position:relative;z-index:1;
}
.team-role-tag svg{width:9px;height:9px;}
.team-role-tag svg path{fill:var(--gold-deep);}

@media (prefers-reduced-motion: reduce){
	.team-ring-outer,.team-circle{animation:none;}
}
/* Sep 2026: desktop/tablet keep the plain 3-column grid all the way
   down to the mobile slider breakpoint below (was a single-centered-
   column stack at <=860px per the team mockup's own breakpoint —
   changed on request to match the sitewide convention used by the
   other 3 card sliders instead: tablet stays a normal grid, only
   mobile becomes a slider). */
@media (max-width:1024px){
	.team-grid{gap:18px;}
}

/* ================= MOBILE CARD SLIDER (Sep 2026) =================
   .team-grid becomes a single-row horizontal scroll-snap carousel
   below 640px — exact same technique already used sitewide for this
   job (why-inspire pillars/space-teaser, our-space gallery): flex row +
   overflow-x:auto + scroll-snap-type:x mandatory, no JS carousel
   library. 640px (not 768/860) matches that existing convention.
   Desktop/tablet above this are untouched — still a plain CSS grid. */
@media (max-width:640px){
	.team-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;
	}
	.team-grid::-webkit-scrollbar{display:none;}
	.team-card{
		scroll-snap-align:center;scroll-snap-stop:always;
		flex:0 0 84%;min-width:0;
	}
	.team-dots{display:flex;justify-content:center;gap:9px;margin-top:16px;}
	.team-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.3s;}
	.team-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}
}

/* ---------- closing (split with portrait beside the final quote) ---------- */
.about-closing-section{
	background:
		radial-gradient(ellipse 60% 50% at 50% 100%, rgba(212,175,55,0.08), transparent 70%),
		var(--ip-pearl);
}
.about-closing-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:52px;align-items:stretch;}
.about-closing-panel{
	display:flex;flex-direction:column;justify-content:center;text-align:left;padding:44px;
	border-radius:6px 40px 6px 40px;
	background:linear-gradient(150deg, var(--ip-blush-pale), var(--white));
	border:1px solid rgba(217,140,168,0.28);box-shadow:0 22px 50px rgba(200,162,172,0.2);
}
.about-closing-panel p{font-family:'Cinzel',serif;font-size:1.15rem;color:var(--heading-rose);line-height:1.8;font-weight:500;margin-bottom:14px;}
.about-closing-panel .ip-script{display:block;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
	.about-story-grid,.about-vision-grid,.about-philosophy-grid,.about-closing-grid{gap:36px;}
}
@media (max-width:860px){
	.about-story-grid,.about-vision-grid,.about-philosophy-grid,.about-closing-grid{grid-template-columns:1fr;}
	.about-story-grid .ip-portrait-frame,
	.about-vision-grid .ip-portrait-frame,
	.about-philosophy-grid .ip-portrait-frame,
	.about-closing-grid .ip-portrait-frame{max-width:360px;margin:0 auto;}
	.about-value-row{grid-template-columns:56px 1fr;gap:16px;padding:22px 0;}
	.about-value-num{font-size:1.4rem;}
	.about-vision-text,.about-story-text{text-align:center;}
	.about-vision-statement{margin-left:auto;margin-right:auto;text-align:left;max-width:420px;}
	.about-closing-panel{text-align:center;align-items:center;}
}
@media (max-width:768px){
	.about-closing-panel{padding:36px 26px;}
}
@media (max-width:480px){
	.about-hero-cross{width:120px;}
	.about-drop-cap::first-letter{font-size:2.6rem;}
	.about-closing-panel{padding:30px 20px;}
}