/* ==========================================================================
   Skytrain Cases (Before/After) — front-end styles. All scoped under .skba
   so the plugin never leaks into the theme. Cyan/navy to match Skytrain.
   Layouts: .skba-grid | .skba-carousel | .skba-full
   ========================================================================== */

.skba{
	--skba-accent:#0C9FBF;
	--skba-navy:#0B3A47;
	--skba-line:#E1EDF1;
	--skba-cols:3;
	position:relative;
	margin:22px 0;
	font-family:'Noto Sans Thai',system-ui,-apple-system,"Segoe UI",sans-serif;
}
.skba *{box-sizing:border-box;}

.skba-track{min-width:0;}

/* ---- shared card ---- */
.skba-item{
	margin:0;
	background:#fff;
	border:1px solid var(--skba-line);
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 6px 20px rgba(11,58,71,.06);
	display:flex;
	flex-direction:column;
}
.skba-imgbtn{
	position:relative;
	display:block;
	width:100%;
	padding:0;
	border:0;
	background:#eef5f7;
	cursor:zoom-in;
	line-height:0;
}
.skba-imgbtn img{
	display:block;
	width:100%;
	height:auto;      /* source images are square (1:1) already */
	transition:transform .35s ease;
}
.skba-imgbtn:hover img{transform:scale(1.03);}
.skba-imgbtn:focus-visible{outline:3px solid var(--skba-accent);outline-offset:-3px;}
.skba-zoom{
	position:absolute;top:10px;right:10px;
	width:30px;height:30px;border-radius:8px;
	display:grid;place-items:center;
	background:rgba(11,58,71,.55);color:#fff;font-size:15px;line-height:1;
	opacity:0;transition:opacity .2s ease;
}
.skba-imgbtn:hover .skba-zoom{opacity:1;}

.skba-item figcaption{
	display:flex;flex-direction:column;gap:7px;
	padding:13px 14px 15px;
}
.skba-item .skba-tags{display:flex;flex-wrap:wrap;gap:6px;}
.skba-item .skba-tag{
	font-size:.78rem;font-weight:600;line-height:1;
	color:#0E8CAE;background:#EAF6FA;
	padding:6px 11px;border-radius:999px;
}
.skba-item .skba-t{font-size:.95rem;font-weight:600;color:var(--skba-navy);line-height:1.35;}
.skba-item .skba-note{font-size:.82rem;color:#6E8B93;line-height:1.5;}

/* ---- GRID ---- */
.skba-grid .skba-track{
	display:grid;
	grid-template-columns:repeat(var(--skba-cols),1fr);
	gap:16px;
}

/* ---- FULL (one big case at a time, stacked) ---- */
.skba-full .skba-track{
	display:flex;
	flex-direction:column;
	gap:22px;
	max-width:720px;
	margin:0 auto;
}
.skba-full .skba-item{border-radius:20px;}

/* ---- CAROUSEL (horizontal scroll-snap, no library) ---- */
.skba-carousel{padding:0 44px;}
.skba-carousel .skba-track{
	display:flex;
	gap:16px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	padding-bottom:4px;
}
.skba-carousel .skba-track::-webkit-scrollbar{display:none;}
.skba-carousel .skba-item{
	flex:0 0 calc((100% - (var(--skba-cols) - 1) * 16px) / var(--skba-cols));
	scroll-snap-align:start;
}
.skba-nav{
	position:absolute;top:calc(50% - 22px);transform:translateY(-50%);
	width:40px;height:40px;border-radius:50%;
	border:1px solid var(--skba-line);background:#fff;color:var(--skba-navy);
	font-size:22px;line-height:1;cursor:pointer;z-index:2;
	box-shadow:0 4px 14px rgba(11,58,71,.14);
	display:grid;place-items:center;
}
.skba-nav:hover{background:var(--skba-accent);color:#fff;border-color:var(--skba-accent);}
.skba-nav:disabled{opacity:.35;cursor:default;}
.skba-prev{left:0;}
.skba-next{right:0;}

/* ---- disclaimer ---- */
.skba-disc{
	margin:12px 2px 0;
	font-size:.8rem;color:#8aa2aa;
	font-family:'Noto Sans Thai',sans-serif;
}

/* ---- lightbox (built by cases.js) ---- */
.skba-lb{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;
	background:rgba(6,30,37,.92);
	padding:24px;
}
.skba-lb[hidden]{display:none;}
.skba-lb img{
	max-width:min(92vw,900px);max-height:90vh;
	border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.skba-lb-close{
	position:absolute;top:18px;right:22px;
	width:44px;height:44px;border-radius:50%;
	border:0;background:rgba(255,255,255,.14);color:#fff;
	font-size:26px;line-height:1;cursor:pointer;
}
.skba-lb-close:hover{background:rgba(255,255,255,.28);}

/* ---- responsive ---- */
@media (max-width:900px){
	.skba-grid .skba-track{grid-template-columns:repeat(2,1fr);}
	.skba-carousel .skba-item{flex-basis:calc((100% - 16px) / 2);}
}
@media (max-width:560px){
	.skba-grid .skba-track{grid-template-columns:1fr 1fr;gap:12px;}
	.skba-carousel{padding:0 8px;}
	.skba-carousel .skba-item{flex-basis:82%;}
	.skba-carousel .skba-nav{display:none;}
	.skba-item figcaption{padding:10px 11px 12px;}
}

@media (prefers-reduced-motion:reduce){
	.skba-imgbtn img,.skba-carousel .skba-track{transition:none;scroll-behavior:auto;}
}

/* ---- heading-font fix for default WP pages that host [sk_ba] ----
   On the parent theme's default page template the page title (.title_wr h1) and
   content headings use "Prompt", which isn't loaded there and falls back to a
   serif that mangles Thai. Force the globally-loaded Noto Sans Thai so the
   gallery/demo pages read consistently. Scoped to pages that load this file. */
.title_wr h1,.title_wr h2,.title_wr h3,
.entry-content h1,.entry-content h2,.entry-content h3,
.wpb_wrapper h1,.wpb_wrapper h2,.wpb_wrapper h3{
	font-family:'Noto Sans Thai','Noto Sans',system-ui,sans-serif !important;
}

/* ---- treatment filter chips (filter="yes") ---- */
.skba-wrap{margin:22px 0}
.skba-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 0 22px}
.skba-chip{
	font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:13.5px;font-weight:500;
	color:#3C5C66;background:#F1F9FC;border:1px solid #DCEBF0;border-radius:999px;
	padding:7px 16px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.4;
}
.skba-chip:hover{border-color:#0E8CAE;color:#0E8CAE}
.skba-chip.is-on{background:#0E8CAE;border-color:#0E8CAE;color:#fff}
.skba-item[hidden]{display:none !important}

/* ---- card polish (lift on hover) ---- */
.skba-item{transition:box-shadow .2s ease,transform .2s ease}
.skba-grid .skba-item:hover,.skba-carousel .skba-item:hover{
	box-shadow:0 14px 32px rgba(11,58,71,.13);transform:translateY(-3px)
}

/* ---- on-theme gallery page wrapper (template-skytrain-cases.php) ----
   Mirrors the Reviews page hero (light radial-gradient band, breadcrumb, badge
   pill, big navy H1, summary stat card) so both pages read as one family. */
#sk-cases{font-family:'Noto Sans Thai',system-ui,sans-serif}
/* Parent theme forces "prompt"/"thsarabunnew" on h1/p with high priority — beat
   it so the whole page reads in Noto Sans Thai like the Reviews page. */
#sk-cases h1,#sk-cases h2,#sk-cases h3,#sk-cases p,
#sk-cases span,#sk-cases a,#sk-cases b,#sk-cases div,#sk-cases button{
	font-family:'Noto Sans Thai',system-ui,sans-serif !important;
}
#sk-cases .skba-hero{
	background:radial-gradient(1100px 520px at 82% -10%,#E4F6FB 0%,rgba(228,246,251,0) 60%),
	           radial-gradient(760px 420px at 4% 120%,#FDEDE4 0%,rgba(253,237,228,0) 62%),#FBFCFE;
	border-bottom:1px solid #E4EDF0;
}
#sk-cases .skba-hwrap{max-width:1240px;margin:0 auto;padding:54px 32px 52px}
#sk-cases .skba-crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:#6B838C}
#sk-cases .skba-crumb a{color:#6B838C;text-decoration:none}
#sk-cases .skba-crumb a:hover{color:#17B0D4}
#sk-cases .skba-crumb-sep{color:#C2D4DA}
#sk-cases .skba-crumb-here{color:#0E8CAE;font-weight:600}
#sk-cases .skba-badge{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:#fff;border:1px solid #E4EDF0;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:#0E8CAE;box-shadow:0 4px 14px rgba(11,58,71,.05)}
#sk-cases .skba-badge-dot{width:7px;height:7px;border-radius:50%;background:#F47B3F}
#sk-cases .skba-h1{font-family:'Noto Sans Thai',system-ui,sans-serif;font-weight:700;font-size:clamp(30px,3.4vw,52px);line-height:1.2;letter-spacing:-.01em;margin:18px 0 0;color:#0B3A47}
#sk-cases .skba-sub{font-size:18px;line-height:1.7;color:#4A6570;max-width:660px;margin:18px 0 0}
#sk-cases .skba-summary{display:inline-flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px;background:#fff;border:1px solid #E4EDF0;border-radius:20px;padding:20px 28px;box-shadow:0 10px 28px rgba(11,58,71,.06)}
#sk-cases .skba-sum-score{text-align:center}
#sk-cases .skba-sum-n{font-size:44px;font-weight:700;line-height:1;color:#0B3A47}
#sk-cases .skba-sum-label{font-size:13px;color:#5B7680;margin-top:6px}
#sk-cases .skba-sum-meta{display:flex;gap:26px;font-size:14px;color:#5B7680;flex-wrap:wrap}
#sk-cases .skba-sum-meta b{display:block;font-size:22px;color:#0B3A47;font-weight:700}
#sk-cases .skba-page-body{max-width:1240px;margin:0 auto;padding:34px 32px 64px}
#sk-cases .skba-page-body .skba-wrap{margin-top:0}
@media (max-width:600px){
	#sk-cases .skba-hwrap{padding:36px 18px 34px}
	#sk-cases .skba-page-body{padding:26px 18px 48px}
}