/*
 * our-space-page.css — "พื้นที่ของเรา" page template (page-our-space.php).
 * Depends on inner-pages.css (shared .ip-* vocabulary: hero chrome,
 * petal/sparkle/deco-ring, eyebrow, scallop, quick-pill) and sitewide
 * style.css tokens — both declared as deps when this is enqueued, see
 * iw_enqueue_assets() in functions.php.
 * Ported from `Wellness Website/our-space-page-mockup.html`, which
 * already ships with the Sep 2026 ivory/gold retheme applied (same
 * palette as inner-pages.css after that retheme — see its own header
 * comment) — no separate color pass needed for this page.
 *
 * Unlike page-contact.php / page-why-inspire.php, this page has no
 * "placeholder vs real photo" branching: all 11 clinic photos already
 * exist (reused from the homepage's own Our Space gallery, same file
 * paths — see $iw_space_photos in page-our-space.php), so every image
 * slot here always renders a real <img>.
 */

/* ---------- reusable photo frame: rounded, clipped, gold shine-sweep on
   hover (same "diagonal gold sweep" device already used on the
   homepage's Our Space cards and the why-inspire page's Our Space
   teaser — see .ip-space-card::before in why-inspire-page.css). ---------- */
.ip-photo-frame{display:block;position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(150deg, var(--blush-soft), var(--mauve));}
.ip-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.ip-photo-frame::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;pointer-events:none;}
.ip-photo-frame:hover::before{left:130%;}

/* ---------- hero collage (3 overlapping tilted frames) ---------- */
.ip-hero-collage{position:relative;max-width:760px;margin:40px auto 0;height:320px;}
.ip-collage-frame{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 20px 45px rgba(200,162,172,0.3);border:4px solid var(--white);}
.ip-collage-frame.ip-c1{width:46%;height:260px;left:0;top:10px;transform:rotate(-4deg);z-index:2;}
.ip-collage-frame.ip-c2{width:42%;height:230px;right:2%;top:50px;transform:rotate(5deg);z-index:1;}
.ip-collage-frame.ip-c3{width:30%;height:150px;left:32%;bottom:-20px;transform:rotate(-2deg);z-index:3;}
.ip-collage-frame .ip-photo-frame{width:100%;height:100%;border-radius:0;}

/* ---------- gallery ---------- */
.ip-gallery-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-gallery-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;}
.ip-gallery-card{
	position:relative;border-radius:20px;overflow:hidden;height:220px;cursor:pointer;
	transition:transform .35s ease, box-shadow .35s ease;
	border:none;padding:0;background:none;font:inherit;text-align:left;display:block;width:100%;
}
.ip-gallery-card:hover,
.ip-gallery-card:focus-visible{transform:translateY(-5px);box-shadow:0 16px 32px rgba(217,140,168,0.24);}
.ip-gallery-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.ip-gallery-card .ip-photo-frame{width:100%;height:100%;border-radius:20px;}
.ip-gallery-card::after{content:'';position:absolute;top:12px;right:12px;width:10px;height:13px;background:linear-gradient(135deg, rgba(255,255,255,0.8), var(--gold));border-radius:0 60% 0 60%;opacity:.5;transform:rotate(15deg);z-index:3;pointer-events:none;}
.ip-photo-label{position:absolute;left:0;bottom:0;background:rgba(255,255,255,0.82);color:var(--heading-rose);font-family:var(--font-latin);font-size:.82rem;font-weight:600;padding:10px 18px;border-radius:0 16px 0 0;z-index:1;max-width:100%;}
/* mobile carousel dots (Sep 2026) — hidden by default (desktop/tablet
   keep the normal grid), shown inside @media(max-width:640px) below.
   Same pattern as page-why-inspire.php's .ip-pillar-dots/.ip-space-dots
   — see that file's comment for the full rationale. */
.ip-gallery-dots{display:none;}

/* ---------- lightbox ---------- */
.ip-lightbox-overlay{position:fixed;inset:0;background:rgba(74,59,63,0.78);display:none;align-items:center;justify-content:center;z-index:999;padding:24px;}
.ip-lightbox-overlay.ip-active{display:flex;}
.ip-lightbox-box{max-width:640px;width:100%;background:var(--white);border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.3);}
.ip-lightbox-photo{height:420px;background:var(--ip-blush-pale);display:flex;align-items:center;justify-content:center;}
.ip-lightbox-photo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.ip-lightbox-caption{padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ip-lightbox-caption span{font-family:var(--font-latin);font-weight:600;color:var(--heading-rose);font-size:1rem;}
/* close button is now .btn-icon-only (shared button system, see
   inner-pages.css) */
body.ip-lightbox-open{overflow:hidden;}

/* ---------- spotlight (alternating photo/text rows) ---------- */
.ip-spotlight-section{background:var(--ip-pearl);}
.ip-spotlight-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.ip-spotlight-row + .ip-spotlight-row{margin-top:80px;}
.ip-spotlight-row.ip-reverse .ip-spotlight-photo{order:2;}
.ip-spotlight-row.ip-reverse .ip-spotlight-text{order:1;}
.ip-spotlight-photo .ip-photo-frame{height:360px;border-radius:26px;}
.ip-spotlight-text h3{font-family:var(--font-th-display);font-size:1.5rem;font-weight:600;color:var(--heading-rose);margin-bottom:16px;}
.ip-spotlight-text p{font-size:1rem;color:var(--ip-ink);opacity:.85;margin-bottom:20px;}
.ip-spotlight-tag{display:inline-flex;align-items:center;gap:6px;background:var(--blush-soft);color:var(--heading-rose);font-family:var(--font-latin);font-size:.75rem;font-weight:600;padding:7px 16px;border-radius:999px;margin-bottom:14px;}
.ip-spotlight-tag svg{width:12px;height:12px;stroke:var(--heading-rose);fill:none;stroke-width:2;}

/* (Sep 2026: .ip-cta-section — the old blush→mauve CTA banner — was
   removed from page-our-space.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-gallery-grid{grid-template-columns:repeat(3, 1fr);}
	.ip-spotlight-row{gap:32px;}
}
@media (max-width:860px){
	.ip-spotlight-row,
	.ip-spotlight-row.ip-reverse{grid-template-columns:1fr;}
	.ip-spotlight-row.ip-reverse .ip-spotlight-photo{order:1;}
	.ip-spotlight-row.ip-reverse .ip-spotlight-text{order:2;}
	.ip-spotlight-photo .ip-photo-frame{height:260px;}
}
@media (max-width:768px){
	.ip-gallery-grid{grid-template-columns:repeat(2, 1fr);}
	.ip-hero-collage{height:260px;}
	.ip-collage-frame.ip-c1{height:210px;}
	.ip-collage-frame.ip-c2{height:180px;top:40px;}
	.ip-collage-frame.ip-c3{height:120px;}
	.ip-spotlight-row + .ip-spotlight-row{margin-top:56px;}
	.ip-lightbox-photo{height:320px;}
}
@media (max-width:480px){
	.ip-hero-collage{height:220px;}
	.ip-collage-frame.ip-c1{width:60%;height:170px;}
	.ip-collage-frame.ip-c2{width:55%;height:150px;top:35px;}
	.ip-collage-frame.ip-c3{width:42%;height:100px;}
	.ip-lightbox-photo{height:240px;}
	.ip-lightbox-box{border-radius:20px;}
	.ip-lightbox-caption{padding:16px 18px;}
}

/* ================= MOBILE CARD SLIDER (Sep 2026) =================
   .ip-gallery-grid (11 photo cards) becomes a single-row horizontal
   scroll-snap carousel below 640px — same technique/breakpoint used
   sitewide for this exact job (see .why-list/.philo-rows in style.css
   and page-why-inspire.php's .ip-pillar-grid/.ip-space-grid, added
   alongside this). Desktop/tablet above 640px are untouched — still a
   plain CSS grid (was previously a plain 1-column stack below 480px;
   now a swipeable slider instead). */
@media (max-width:640px){
	.ip-gallery-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-gallery-grid::-webkit-scrollbar{display:none;}
	.ip-gallery-card{
		scroll-snap-align:center;scroll-snap-stop:always;
		flex:0 0 84%;min-width:0;
	}
	.ip-gallery-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:16px;}
	.ip-gallery-dots .dot{
		width:7px;height:7px;border-radius:50%;
		background:var(--line);cursor:pointer;transition:.3s;
	}
	.ip-gallery-dots .dot.active{background:var(--gold-deep);width:22px;border-radius:5px;}
}