/* Cendekia Slider — front end. Colors follow the active theme (Cendekia variables) with fallbacks. */
.cslider {
	--cs-primary: var(--teal, #0b8a97);
	--cs-primary-dark: var(--teal-dark, #08707b);
	--cs-ink: var(--navy, #0c3557);
	--cs-text: var(--ink, #24323f);
	--cs-muted: var(--muted, #5d6b78);
	--cs-accent: var(--orange, #f58a1f);
	--cs-yellow: var(--yellow, #fbcb2a);
	--cs-yellow-soft: var(--yellow-soft, #fff6d6);
	--cs-container: var(--container, 1200px);
	--cs-shadow: var(--shadow-lg, 0 18px 45px rgba(12, 53, 87, .12));
	--cs-hand: var(--font-hand, "Caveat", cursive);
	position: relative;
	color: var(--cs-text);
}
.cslider *, .cslider *::before, .cslider *::after { box-sizing: border-box; }

/* Slides are stacked in one grid cell: the slider is as tall as its tallest slide, nothing jumps. */
.cslider__track { display: grid; }
.cslide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; background: var(--cs-bg, transparent); transition: opacity .7s ease, visibility .7s, transform .7s ease; }
.cslide.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.cslider--slide .cslide.is-hidden { transform: translateX(48px); }
.cslider--slide .cslide.is-before { transform: translateX(-48px); }
.cslide--valign-top { align-items: flex-start; }
.cslide--valign-bottom { align-items: flex-end; }

.cslide__inner { position: relative; z-index: 1; width: 100%; max-width: var(--cs-container); margin: 0 auto; padding: 0 24px; }
.cslider--padded .cslide--card, .cslider--padded .cslide--text, .cslide--has-bg.cslide--card, .cslide--has-bg.cslide--text { padding-block: 80px; }
.cslide__content { min-width: 0; }
.cslide--align-center .cslide__content { text-align: center; }
.cslide--align-right .cslide__content { text-align: right; }
.cslide__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cs-focus, 50% 50%); }

/* Layout: image in a card */
.cslide--card .cslide__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.cslide--valign-top.cslide--card .cslide__inner { align-items: start; }
.cslide--valign-bottom.cslide--card .cslide__inner { align-items: end; }
.cslide--card.cslide--side-right .cslide__media { order: 2; }
.cslide__media { position: relative; margin: 0; }
.cslide__frame { overflow: hidden; aspect-ratio: var(--cs-ratio, 16/10); border-radius: 22px; box-shadow: var(--cs-shadow); }
.cslide__badge {
	position: absolute; z-index: 2; left: 24px; bottom: -22px; max-width: 260px;
	background: var(--cs-yellow-soft); color: var(--cs-ink); border: 2px solid #fff;
	font: 700 1.35rem/1.15 var(--cs-hand); text-align: center; padding: 12px 20px; border-radius: 14px;
	box-shadow: 0 10px 30px rgba(12, 53, 87, .08); transform: rotate(-3deg);
}
.cslide--side-right .cslide__badge { left: auto; right: 24px; transform: rotate(3deg); }

/* Layout: full-width image, text on top */
.cslide--full { min-height: var(--cs-min-h, 520px); overflow: hidden; }
.cslide__bg { position: absolute; inset: 0; }
.cslide__bg::after { content: ""; position: absolute; inset: 0; background: var(--cs-overlay, rgba(12, 53, 87, .45)); }
.cslide--full .cslide__inner, .cslide--half .cslide__inner { padding-block: 64px; }
.cslide--full .cslide__content, .cslide--text .cslide__content { max-width: var(--cs-width, 560px); }
.cslide--align-center .cslide__content { margin-inline: auto; }
.cslide--align-right.cslide--full .cslide__content, .cslide--align-right.cslide--text .cslide__content { margin-left: auto; }

/* Layout: image on half the screen (edge to edge) */
.cslide--half { min-height: var(--cs-min-h, 520px); overflow: hidden; }
.cslide__half { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; }
.cslide--side-right .cslide__half { left: auto; right: 0; }
.cslide__half .cslide__badge { left: auto; right: 32px; bottom: 32px; }
.cslide--side-right .cslide__half .cslide__badge { left: 32px; right: auto; }
.cslide--half .cslide__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.cslide--half.cslide--side-left .cslide__content { grid-column: 2; }
.cslide--half.cslide--side-right .cslide__content { grid-column: 1; }

/* Text colors */
.cslide--light { color: rgba(255, 255, 255, .9); }
.cslide--light .cs-heading, .cslide--light .cs-stat dd { color: #fff; }
.cslide--light .cs-text, .cslide--light .cs-stat dt { color: rgba(255, 255, 255, .86); }
.cslide--light .cs-label { color: var(--cs-yellow); }
.cslide--light .cs-list .cs-icon { color: var(--cs-yellow); }
.cslide--light .cs-accent { color: var(--cs-yellow); }

/* ---------- Blocks ---------- */
.cs-label { display: flex; align-items: center; gap: 10px; margin: 0 0 .6em; font-weight: 700; font-size: .92rem; color: #c98a00; }
.cs-label::before { content: ""; flex: none; width: 28px; height: 4px; border-radius: 4px; background: var(--cs-yellow); }
.cslide--align-center .cs-label { justify-content: center; }
.cslide--align-right .cs-label { justify-content: flex-end; }
.cs-heading { margin: 0 0 .45em; color: var(--cs-ink); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.cs-heading--s { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.cs-heading--m { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.cs-heading--l { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.cs-accent { color: var(--cs-accent); }
.cs-text { margin: 0 0 1em; color: var(--cs-muted); line-height: 1.7; }
.cs-text--s { font-size: .9rem; }
.cs-text--l { font-size: 1.15rem; }
.cs-list { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 12px; counter-reset: cs; }
.cs-list--cols-2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.cslide--align-center .cs-list { justify-content: center; text-align: left; }
.cs-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .95rem; line-height: 1.45; }
.cs-list .cs-icon { flex: none; width: 22px; height: 22px; color: var(--cs-primary); stroke-width: 3; }
.cs-list--dot li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--cs-accent); }
.cs-list--number li { counter-increment: cs; }
.cs-list--number li::before { content: counter(cs); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cs-primary); color: #fff; font-size: .78rem; font-weight: 800; }
.cs-quote { position: relative; margin: 0 0 1.2em; padding: 22px; background: #fff8e3; border: 1px solid #fde8a6; border-radius: 18px; box-shadow: 0 10px 30px rgba(12, 53, 87, .08); text-align: left; }
.cs-quote .cs-icon { width: 30px; height: 30px; color: var(--cs-yellow); }
.cs-quote p { margin: 8px 0; font-style: italic; font-weight: 600; color: var(--cs-ink); line-height: 1.5; }
.cs-quote cite { font-size: .8rem; font-style: normal; color: var(--cs-muted); }
.cs-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: .4em 0 1.2em; }
.cslide--align-center .cs-buttons { justify-content: center; }
.cslide--align-right .cs-buttons { justify-content: flex-end; }
.cs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.5em;
	border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: .95rem; line-height: 1.2;
	text-decoration: none; white-space: nowrap; transition: transform .2s, background .2s, color .2s;
}
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn--primary { background: var(--cs-primary); color: #fff; }
.cs-btn--primary:hover { background: var(--cs-primary-dark); color: #fff; }
.cs-btn--accent { background: var(--cs-yellow); color: var(--cs-ink); }
.cs-btn--accent:hover { background: #f4bd0a; color: var(--cs-ink); }
.cs-btn--outline { background: #fff; color: var(--cs-primary); border-color: var(--cs-primary); }
.cs-btn--outline:hover { background: var(--cs-primary); color: #fff; }
.cs-btn--light { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cs-btn--light:hover { background: #fff; color: var(--cs-ink); }
.cs-btn--link { padding: .4em 0; color: var(--cs-primary); }
.cs-btn--link .cs-icon { width: 18px; height: 18px; }
.cslide--light .cs-btn--link { color: #fff; }
.cs-stats { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: .4em 0 1.2em; }
.cslide--align-center .cs-stats { justify-content: center; }
.cslide--align-right .cs-stats { justify-content: flex-end; }
.cs-stat { display: flex; flex-direction: column-reverse; }
.cs-stat dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-stat dt { font-size: .85rem; font-weight: 600; color: var(--cs-muted); }
.cs-spacer--s { height: 8px; }
.cs-spacer--m { height: 20px; }
.cs-spacer--l { height: 44px; }
.cslide__content > :last-child { margin-bottom: 0; }

/* ---------- Navigation ---------- */
.cslider__nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cslider__nav--below { padding: 24px 0; }
.cslider--padded .cslider__nav--below { padding-bottom: 48px; }
/* With the navigation below, card/text slides need less space at the bottom. */
.cslider--padded:not(.cslider--single) .cslide--card, .cslider--padded:not(.cslider--single) .cslide--text { padding-bottom: 16px; }
.cslider__nav--overlay { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); }
.cslider__dots { display: flex; gap: 8px; }
.cslider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(12, 53, 87, .25); transition: width .3s, background .3s; }
.cslider__dot.is-active { width: 28px; background: var(--cs-primary); }
.cslider__arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: var(--cs-ink); box-shadow: 0 6px 18px rgba(12, 53, 87, .12); transition: background .2s; }
.cslider__nav--overlay .cslider__arrow { width: 32px; height: 32px; box-shadow: none; background: transparent; }
.cslider__arrow:hover, .cslider__arrow:focus-visible { background: var(--cs-yellow); }
.cslider__arrow .cs-icon { width: 20px; height: 20px; }
.cslider__arrow--prev .cs-icon { transform: rotate(90deg); }
.cslider__arrow--next .cs-icon { transform: rotate(-90deg); }

/* ---------- Phones & tablets ---------- */
@media (max-width: 900px) {
	.cslide--card .cslide__inner { grid-template-columns: 1fr; gap: 40px; }
	.cslide--card.cslide--side-right .cslide__media { order: 0; }
	.cslide--full { min-height: min(var(--cs-min-h, 520px), 520px); }
	.cslide--half { flex-direction: column; align-items: stretch; min-height: 0; }
	.cslide__half { position: relative; width: 100%; height: 280px; }
	.cslide--half .cslide__inner { display: block; padding-block: 40px; }
	.cslider--padded .cslide--card, .cslider--padded .cslide--text { padding-block: 56px; }
	.cslide--valign-top, .cslide--valign-bottom { align-items: center; }
}
@media (max-width: 600px) {
	.cslide__inner { padding: 0 16px; }
	.cs-list--cols-2 { grid-template-columns: 1fr; }
	.cs-stat dd { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cslide, .cs-btn, .cslider__dot { transition: none; }
}
