/* ==========================================================================
   SDC FLAT — the shared design system for every page (Oct 2026).

   Taken from the homepage ("Club King", template-home.php) that the client
   signed off: flat colour blocks, no glows / gradients / glass / 3D buttons,
   dark night purple with violet, pink, yellow and lilac accents.

   Usage: wrap a page's content in <main class="sdc-flat"> and build with the
   fl-* components below. Everything is scoped to .sdc-flat so the shared
   header/footer are untouched. Add page-specific CSS in the template only
   when a component here genuinely doesn't fit — and keep it flat.
   ========================================================================== */

.sdc-flat{
	--ink:#2C1B58; --ink-2:#3D2470; --night:#1C1140; --night-2:#160d33;
	--lilac:#CFC2FF; --paper:#FBF9FF; --text:#F4F0FF; --muted:#C9BEEA;
	--r:16px; --r-sm:10px;
	background:var(--night);color:var(--text);font:400 16px/1.6 var(--ff-body);
	padding-top:84px;
}
@media (min-width:1024px){.sdc-flat{padding-top:112px}}
.sdc-flat *{box-sizing:border-box}
.sdc-flat img{max-width:100%;height:auto;display:block}
.sdc-flat a{color:inherit}
.sdc-flat :focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* ---------- layout ---------- */
.sdc-flat .fl-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.sdc-flat .fl-narrow{max-width:820px}
@media (max-width:640px){.sdc-flat .fl-wrap{padding:0 16px}}
.sdc-flat .fl-sec{padding:80px 0;background:var(--night)}
.sdc-flat .fl-sec--alt{background:var(--night-2)}
.sdc-flat .fl-sec--ink{background:var(--ink)}
.sdc-flat .fl-sec--ink2{background:var(--ink-2)}
.sdc-flat .fl-sec--tight{padding:56px 0}
@media (max-width:640px){.sdc-flat .fl-sec{padding:56px 0}.sdc-flat .fl-sec--tight{padding:40px 0}}
.sdc-flat .fl-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sdc-flat .fl-grid-2--top{align-items:start}
@media (max-width:900px){.sdc-flat .fl-grid-2{grid-template-columns:1fr;gap:28px}}
.sdc-flat .fl-sec-head{margin-bottom:36px;max-width:760px}
.sdc-flat .fl-sec-head p{color:var(--muted);margin:12px 0 0;max-width:56ch}

/* ---------- type ---------- */
.sdc-flat .fl-kick{font:500 14px/1 var(--ff-mono);color:var(--pink);margin:0 0 14px;display:block}
.sdc-flat .fl-kick--y{color:var(--yellow)}
.sdc-flat h1,.sdc-flat .fl-h1{font:800 clamp(42px,5.4vw,72px)/.98 var(--ff-display);letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance}
.sdc-flat h2,.sdc-flat .fl-h2{font:800 clamp(30px,3.8vw,50px)/1.03 var(--ff-display);letter-spacing:-.025em;margin:0;color:#fff;text-wrap:balance}
.sdc-flat h3,.sdc-flat .fl-h3{font:800 clamp(20px,1.8vw,24px)/1.15 var(--ff-display);letter-spacing:-.01em;margin:0;color:inherit}
.sdc-flat h1 em,.sdc-flat h2 em,.sdc-flat h3 em{font-style:normal;color:var(--pink)}
.sdc-flat .fl-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:40ch;margin:20px 0 0}
.sdc-flat .fl-kw{display:block;font:700 clamp(17px,1.6vw,21px)/1.25 var(--ff-display);color:var(--yellow);margin-bottom:14px;max-width:30ch}
.sdc-flat p{margin:0 0 14px}
.sdc-flat .fl-muted{color:var(--muted)}
.sdc-flat .fl-prose{max-width:68ch;color:var(--muted)}
.sdc-flat .fl-prose h2,.sdc-flat .fl-prose h3{color:#fff;margin:32px 0 12px}
.sdc-flat .fl-prose strong{color:#fff}
.sdc-flat .fl-prose a{color:var(--yellow)}
@media (max-width:640px){.sdc-flat .fl-lede{font-size:17px}}

/* ---------- page header (replaces the old full-bleed photo heroes) ---------- */
.sdc-flat .fl-head{background:var(--ink-2);padding:56px 0 64px;position:relative;isolation:isolate}
.sdc-flat .fl-head .fl-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.sdc-flat .fl-head--media .fl-wrap{grid-template-columns:6fr 5fr}
.sdc-flat .fl-head .fl-cta-row{margin-top:30px}
.sdc-flat .fl-head-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media (max-width:900px){.sdc-flat .fl-head{padding:36px 0 44px}.sdc-flat .fl-head--media .fl-wrap{grid-template-columns:1fr;gap:28px}}

/* doodle tile (notes, headphones, stars) — optional on .fl-head / sections */
.sdc-flat .fl-doodle::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.13;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%237A5CFF'%3E%3Cellipse cx='34' cy='62' rx='9' ry='7' transform='rotate(-20 34 62)'/%3E%3Cpath d='M42 58V24l22 6'/%3E%3C/g%3E%3Cg stroke='%23FF2E9A'%3E%3Cpath d='M150 70a26 26 0 0 1 52 0'/%3E%3Crect x='144' y='66' width='12' height='20' rx='5'/%3E%3Crect x='196' y='66' width='12' height='20' rx='5'/%3E%3C/g%3E%3Cpath stroke='%23F5E000' d='M96 120l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Cg stroke='%23F5E000'%3E%3Cellipse cx='206' cy='192' rx='8' ry='6' transform='rotate(-20 206 192)'/%3E%3Cellipse cx='234' cy='184' rx='8' ry='6' transform='rotate(-20 234 184)'/%3E%3Cpath d='M213 189v-30l28-7v29M213 166l28-7'/%3E%3C/g%3E%3Cpath stroke='%23CFC2FF' d='M30 200l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z'/%3E%3Cpath stroke='%23FF2E9A' d='M60 160q10-10 20 0t20 0'/%3E%3Cpath stroke='%237A5CFF' d='M128 230l4 0M130 228v4M240 40l4 0M242 38v4'/%3E%3C/svg%3E");
	background-size:260px 260px}
.sdc-flat .fl-doodle{position:relative;isolation:isolate}

/* ---------- perk strip (4 colour blocks) ---------- */
.sdc-flat .fl-perks{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.sdc-flat .fl-perks li{display:flex;align-items:center;gap:14px;padding:16px 22px;font:700 15px/1.25 var(--ff-display)}
.sdc-flat .fl-perks i{font-size:26px;flex:none}
@media (max-width:900px){.sdc-flat .fl-perks{grid-template-columns:repeat(2,1fr)}.sdc-flat .fl-perks li{padding:12px 14px;font-size:13.5px;gap:10px}.sdc-flat .fl-perks i{font-size:20px}}

/* colour block helpers (perks, tiles, steps) — the four channel colours */
.sdc-flat .c1{background:var(--violet);color:#fff}
.sdc-flat .c2{background:var(--pink);color:var(--ink)}
.sdc-flat .c3{background:var(--yellow);color:var(--ink)}
.sdc-flat .c4{background:var(--lilac);color:var(--ink)}

/* ---------- buttons & links ---------- */
.sdc-flat .fl-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.sdc-flat .fl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;text-decoration:none;font:700 16px/1 var(--ff-display);letter-spacing:.01em;border-radius:999px;padding:15px 24px;border:0;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.sdc-flat .fl-btn:active{transform:translateY(1px)}
.sdc-flat .fl-btn-y{background:var(--yellow);color:var(--ink)}
.sdc-flat .fl-btn-y:hover{background:#fff}
.sdc-flat .fl-btn-ink{background:var(--ink);color:#fff}
.sdc-flat .fl-btn-ink:hover{background:var(--pink);color:var(--ink)}
.sdc-flat .fl-btn-line{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(207,194,255,.45)}
.sdc-flat .fl-btn-line:hover{box-shadow:inset 0 0 0 2px var(--yellow);color:var(--yellow)}
.sdc-flat .fl-link{font:700 16px/1 var(--ff-display);color:var(--yellow);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px;white-space:nowrap}
.sdc-flat .fl-link:hover{color:#fff}
.sdc-flat .fl-call{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 17px/1 var(--ff-display);color:#fff;padding:12px 4px;border-bottom:2px solid rgba(245,224,0,.5)}
.sdc-flat .fl-call i{color:var(--yellow)}

/* ---------- tiles / cards ---------- */
.sdc-flat .fl-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0}
.sdc-flat .fl-tiles--3{grid-template-columns:repeat(3,1fr)}
.sdc-flat .fl-tiles--2{grid-template-columns:repeat(2,1fr)}
.sdc-flat .fl-tile{border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:8px;text-decoration:none;min-height:200px}
.sdc-flat .fl-tile i{font-size:44px;margin-bottom:auto}
.sdc-flat .fl-tile h3{margin-top:22px}
.sdc-flat .fl-tile p{margin:0;font-size:15px;line-height:1.5}
.sdc-flat .fl-tile.c1 p{color:#F1EDFF}
.sdc-flat a.fl-tile{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.sdc-flat a.fl-tile:hover{transform:translateY(-3px)}
@media (max-width:900px){.sdc-flat .fl-tiles,.sdc-flat .fl-tiles--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sdc-flat .fl-tiles,.sdc-flat .fl-tiles--3,.sdc-flat .fl-tiles--2{grid-template-columns:1fr;gap:12px}.sdc-flat .fl-tile{min-height:0;padding:20px}.sdc-flat .fl-tile i{font-size:32px}}

.sdc-flat .fl-card{background:var(--ink-2);border-radius:var(--r);padding:26px}
.sdc-flat .fl-card--night{background:var(--night-2)}
.sdc-flat .fl-card--paper{background:var(--paper);color:var(--ink)}
.sdc-flat .fl-card--paper h2,.sdc-flat .fl-card--paper h3{color:var(--ink)}
@media (max-width:480px){.sdc-flat .fl-card{padding:20px}}

/* photo card: image on top, flat text panel below (experiences, gallery links) */
.sdc-flat .fl-photo-card{display:flex;flex-direction:column;background:var(--ink-2);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.sdc-flat .fl-photo-card:hover{transform:translateY(-3px)}
.sdc-flat .fl-photo-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sdc-flat .fl-photo-card .fl-pc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.sdc-flat .fl-photo-card .fl-pc-body p{color:var(--muted);font-size:15px;margin:0}
.sdc-flat .fl-photo-card .fl-pc-go{margin-top:auto;padding-top:10px;font:700 15px/1 var(--ff-display);color:var(--yellow)}
.sdc-flat .fl-photo{width:100%;border-radius:var(--r);object-fit:cover}

/* ---------- hard numbers strip ---------- */
.sdc-flat .fl-nums{background:var(--night);border-bottom:1px solid rgba(207,194,255,.1)}
.sdc-flat .fl-nums dl{display:grid;grid-template-columns:repeat(var(--n,6),1fr);margin:0;padding:26px 0}
.sdc-flat .fl-nums div{padding:0 18px;border-left:1px solid rgba(207,194,255,.14)}
.sdc-flat .fl-nums div:first-child{border-left:0;padding-left:0}
.sdc-flat .fl-nums dt{font:800 clamp(28px,3vw,40px)/1 var(--ff-display);letter-spacing:-.03em;color:var(--c,var(--yellow))}
.sdc-flat .fl-nums dd{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.3}
@media (max-width:900px){.sdc-flat .fl-nums dl{grid-template-columns:repeat(3,1fr);gap:20px 0}.sdc-flat .fl-nums div:nth-child(3n+1){border-left:0;padding-left:0}}

/* ---------- price tickets (homepage) ---------- */
.sdc-flat .fl-tickets{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;padding:0;margin:0}
.sdc-flat .fl-ticket{--z:9px;position:relative;background:var(--paper);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 14px calc(26px + var(--z));border-radius:var(--r) var(--r) 0 0;
	-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(2*var(--z)) 100%;
	        mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(2*var(--z)) 100%;
	transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sdc-flat .fl-ticket:hover{transform:translateY(-4px)}
.sdc-flat .fl-ticket .t-ch{font:500 12px/1 var(--ff-mono);letter-spacing:.08em;color:var(--violet)}
.sdc-flat .fl-ticket .t-num{font:800 84px/.9 var(--ff-display);letter-spacing:-.05em;margin:14px 0 2px;position:relative;z-index:0;isolation:isolate}
.sdc-flat .fl-ticket .t-num::after{content:"";position:absolute;left:4%;right:4%;bottom:-2px;height:10px;border-radius:6px;background:var(--hl,var(--yellow));z-index:-1;transform:rotate(-2deg)}
.sdc-flat .fl-ticket .t-lbl{font:700 15px/1.2 var(--ff-display);margin-top:12px}
.sdc-flat .fl-ticket .t-rule{width:100%;border-top:2px dashed rgba(44,27,88,.22);margin:18px 0 16px}
.sdc-flat .fl-ticket .t-price{font:800 32px/1 var(--ff-display);letter-spacing:-.02em}
.sdc-flat .fl-ticket .t-vat{font-size:13px;color:#5d4f86;margin-top:4px}
.sdc-flat .fl-ticket .t-pop{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--pink);color:var(--ink);font:700 12px/1 var(--ff-display);padding:7px 12px;border-radius:0 0 10px 10px;white-space:nowrap}
.sdc-flat .fl-ticket.pop{padding-top:36px}
@media (max-width:1060px){.sdc-flat .fl-tickets{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.sdc-flat .fl-tickets{grid-template-columns:repeat(2,1fr);gap:12px}.sdc-flat .fl-ticket .t-num{font-size:64px}.sdc-flat .fl-ticket .t-price{font-size:26px}}

/* ---------- chips (extras etc.) ---------- */
.sdc-flat .fl-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0;margin:0}
.sdc-flat .fl-chips li{display:flex;align-items:center;gap:14px;border-radius:var(--r-sm);padding:14px 16px;background:var(--ink-2)}
.sdc-flat .fl-chips i{font-size:20px;color:var(--c,var(--yellow));width:28px;text-align:center;flex:none}
.sdc-flat .fl-chips b{display:block;font:700 15px/1.2 var(--ff-display);color:#fff}
.sdc-flat .fl-chips span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.sdc-flat .fl-chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.sdc-flat .fl-chips{grid-template-columns:1fr}}

/* tick list */
.sdc-flat .fl-ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.sdc-flat .fl-ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.sdc-flat .fl-ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C1B58' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.sdc-flat .fl-ticks strong{color:#fff}

/* ---------- yellow CTA band ---------- */
.sdc-flat .fl-band{background:var(--yellow);color:var(--ink);padding:44px 0}
.sdc-flat .fl-band .fl-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.sdc-flat .fl-band h2{color:var(--ink);font-size:clamp(28px,3.2vw,40px)}
.sdc-flat .fl-band h2 em{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:6px;text-underline-offset:6px}
.sdc-flat .fl-band p{margin:8px 0 0;font-size:16px;max-width:52ch}

/* ---------- FAQ ---------- */
.sdc-flat .fl-faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
@media (max-width:900px){.sdc-flat .fl-faq-grid{grid-template-columns:1fr;gap:24px}}
.sdc-flat .fl-faq{background:var(--ink-2);border-radius:var(--r-sm);margin:0 0 10px}
.sdc-flat .fl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font:700 17px/1.3 var(--ff-display);color:#fff}
.sdc-flat .fl-faq summary::-webkit-details-marker{display:none}
.sdc-flat .fl-faq summary i{color:var(--yellow);transition:transform .2s;flex:none}
.sdc-flat .fl-faq[open] summary i{transform:rotate(45deg)}
.sdc-flat .fl-faq .fl-faq-a{padding:0 20px 20px;color:var(--muted);line-height:1.6}
.sdc-flat .fl-faq .fl-faq-a p:last-child{margin:0}

/* ---------- forms ---------- */
.sdc-flat .fl-field{margin:0 0 14px;min-width:0}
.sdc-flat .fl-field label,.sdc-flat .fl-label{display:block;font:500 12px/1 var(--ff-mono);color:var(--lilac);margin:0 0 8px;letter-spacing:.02em}
.sdc-flat .fl-field input,.sdc-flat .fl-field textarea,.sdc-flat .fl-field select{width:100%;border-radius:var(--r-sm);border:2px solid transparent;background:#fff;color:var(--ink);font:500 16px/1.4 var(--ff-body);padding:13px 14px;color-scheme:light}
.sdc-flat .fl-field input:focus,.sdc-flat .fl-field textarea:focus,.sdc-flat .fl-field select:focus{outline:none;border-color:var(--yellow)}

/* ---------- gallery ---------- */
.sdc-flat .fl-gallery{columns:3 280px;column-gap:14px}
.sdc-flat .fl-gallery a,.sdc-flat .fl-gallery figure{display:block;margin:0 0 14px;break-inside:avoid;border-radius:var(--r-sm);overflow:hidden}
.sdc-flat .fl-gallery img{width:100%;height:auto}

@media (prefers-reduced-motion:reduce){.sdc-flat *{transition:none!important;animation:none!important}}