/* /assets/css/campking-figma-sections.css */

/* =========================
Base
========================= */
.ck-figma {
–ck-bg: #ffffff;
–ck-ink: #0b0b0b;
–ck-muted: #6d6d6d;
–ck-soft: #989898;
–ck-surface: #fdfaf6;
–ck-tint: #f3eee7;
–ck-border: #dcdcdc;
–ck-radius: 16px;
–ck-radius-sm: 10px;
–ck-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
–ck-max: 1200px;
–ck-g: 24px;
color: var(–ck-ink);
background: var(–ck-bg);
}

.ck-container {
max-width: var(–ck-max);
margin: 0 auto;
padding: 0 18px;
}

.ck-section {
padding: 56px 0;
}

.ck-section–surface {
background: var(–ck-surface);
}

.ck-section–tint {
background: var(–ck-tint);
}

.ck-center { text-align: center; }
.ck-left { text-align: left; }

.ck-h2 {
margin: 0 0 10px;
font-size: clamp(24px, 2.6vw, 42px);
line-height: 1.1;
font-weight: 600;
letter-spacing: -0.02em;
}

.ck-h3 {
margin: 0 0 6px;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
color: #5b5b5b;
}

.ck-p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(–ck-soft);
}

.ck-lead {
margin: 0 auto;
max-width: 860px;
font-size: 14px;
line-height: 1.6;
color: var(–ck-muted);
}

.ck-section__head {
margin-bottom: 26px;
}

.ck-hero {
padding: 42px 0 18px;
background: var(–ck-bg);
}

.ck-hero__title {
margin: 0 0 8px;
font-size: clamp(28px, 3vw, 46px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 700;
}

.ck-hero__subtitle {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(–ck-muted);
max-width: 860px;
}

/* =========================
Grid Cards
========================= */
.ck-grid {
display: grid;
gap: var(–ck-g);
}

.ck-grid–4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ck-card {
background: #f9f7f4;
border: 1px solid var(–ck-border);
border-radius: 12px;
box-shadow: none;
overflow: hidden;
}

.ck-card–highlight {
display: grid;
grid-template-columns: 84px 1fr;
gap: 12px;
align-items: center;
padding: 18px 16px;
min-height: 140px;
}

.ck-card__icon {
display: grid;
place-items: center;
}

.ck-icon-img {
width: 54px;
height: 54px;
object-fit: contain;
}

.ck-card__body {
padding-right: 6px;
}

/* =========================
Media Cards / Images
========================= */
.ck-media {
border-radius: 12px;
overflow: hidden;
}

.ck-media__img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}

.ck-card–media {
background: transparent;
border: 0;
}

.ck-card–media .ck-card__body {
padding: 12px 4px 0;
}

.ck-card–image {
background: transparent;
border: 0;
}

/* =========================
Slider
========================= */
.ck-slider {
position: relative;
}

.ck-slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: var(–ck-g);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 2px 2px 10px;
}

.ck-slider__track::-webkit-scrollbar {
display: none;
}

.ck-slider__slide {
scroll-snap-align: start;
}

.ck-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(–ck-border);
background: rgba(255, 255, 255, 0.92);
box-shadow: var(–ck-shadow);
cursor: pointer;
display: grid;
place-items: center;
font-size: 24px;
line-height: 1;
color: #2f2f2f;
z-index: 2;
}

.ck-slider__btn–prev { left: -12px; }
.ck-slider__btn–next { right: -12px; }

.ck-slider__btn:hover {
background: #ffffff;
}

@media (max-width: 1024px) {
.ck-slider__btn { display: none; }
}

/* =========================
Feature Banner
========================= */
.ck-feature {
position: relative;
border-radius: var(–ck-radius);
overflow: hidden;
box-shadow: var(–ck-shadow);
}

.ck-feature__media {
position: relative;
}

.ck-feature__img {
width: 100%;
height: clamp(360px, 40vw, 620px);
object-fit: cover;
display: block;
}

.ck-feature__content {
position: absolute;
left: 22px;
bottom: 22px;
max-width: 560px;
padding: 18px 18px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.55));
}

.ck-invert { color: #ffffff; }
.ck-feature__content .ck-lead { color: rgba(255, 255, 255, 0.88); }

/* =========================
Layouts
========================= */
.ck-layouts .ck-slider__track {
grid-auto-columns: minmax(320px, 1fr);
}

.ck-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(–ck-g);
align-items: center;
background: transparent;
}

.ck-layout__media {
border-radius: var(–ck-radius);
overflow: hidden;
background: #eeeadf;
}

.ck-layout__img {
width: 100%;
height: clamp(360px, 40vw, 560px);
object-fit: cover;
display: block;
}

.ck-layout__panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border: 1px solid rgba(220, 220, 220, 0.9);
border-radius: var(–ck-radius);
padding: 18px;
}

.ck-spec {
border: 1px solid var(–ck-border);
border-radius: 10px;
overflow: hidden;
margin-top: 14px;
background: #ffffff;
}

.ck-spec__head {
background: #2f2f2f;
padding: 10px 14px;
}

.ck-spec__label {
color: #ffffff;
font-weight: 600;
font-size: 14px;
}

.ck-spec__desc {
padding: 12px 14px;
border-bottom: 1px solid #e0e0e0;
}

.ck-spec__list {
list-style: none;
margin: 0;
padding: 0;
}

.ck-spec__row {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 10px 14px;
border-bottom: 1px solid #e0e0e0;
font-size: 13px;
color: #4d4d4d;
}

.ck-spec__row:last-child { border-bottom: 0; }
.ck-spec__k { color: #4d4d4d; }
.ck-spec__v { font-weight: 600; text-align: right; }

/* =========================
WYSIWYG
========================= */
.ck-wysiwyg :where(h2,h3,h4,p,ul,ol) {
max-width: 860px;
}

/* =========================
Responsive
========================= */
@media (max-width: 1024px) {
.ck-grid–4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-layout { grid-template-columns: 1fr; }
.ck-layout__panel { order: 2; }
}

@media (max-width: 640px) {
.ck-section { padding: 38px 0; }
.ck-grid–4 { grid-template-columns: 1fr; }
.ck-card–highlight { grid-template-columns: 70px 1fr; min-height: 0; }
.ck-feature__content { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

// /assets/js/campking-figma-sections.js
(function () {
“use strict”;

function initSlider(root) {
const track = root.querySelector(“[data-ck-slider-track]”);
const prev = root.querySelector(“[data-ck-slider-prev]”);
const next = root.querySelector(“[data-ck-slider-next]”);
if (!track) return;

function getStep() {
// Move by ~90% of visible width for a clean snap feel
return Math.max(240, Math.floor(track.clientWidth * 0.9));
}

function scrollByDir(dir) {
track.scrollBy({ left: dir * getStep(), behavior: “smooth” });
}

if (prev) prev.addEventListener(“click”, function () { scrollByDir(-1); });
if (next) next.addEventListener(“click”, function () { scrollByDir(1); });
}

document.addEventListener(“DOMContentLoaded”, function () {
document.querySelectorAll(“[data-ck-slider]”).forEach(initSlider);
});
})();