/* =========================================================
   SPORT IN INDONESIA — Design System
   Kementerian Pemuda dan Olahraga Republik Indonesia
   Style: light editorial travel — white canvas, serif display
   headlines, rounded photo cards, pill buttons, warm accent
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Robelia — local display serif. Declared across the full weight range so the
   single available cut renders as-is instead of being synthetically bolded.
   size-adjust compensates for Robelia's small x-height (48/1000 vs Plus
   Jakarta Sans' 54/1000): without it, serif headings read smaller than
   adjacent sans body copy at the same nominal font-size. */
@font-face{
  font-family: 'Robelia';
  src: url('assets/fonts/Robelia.woff') format('woff'),
       url('assets/fonts/Robelia.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 114%;
}

:root{
  /* --- Core palette: white + near-black + warm desert accent --- */
  --red: #D9772F;          /* warm desert orange — the accent colour */
  --red-deep: #A4531B;     /* deep amber — hover states */
  --red-bright: #E8833A;   /* lifted orange — emphasis */
  --red-soft: #FBF1E6;     /* pale sand — soft fills, tag backgrounds */
  --red-line: #ECE7E1;     /* hairline dividers, warm grey */
  --blush: #F2C48D;        /* light sand — accents on dark photos */
  --blush-pale: #FAE8D2;   /* pale sand text on dark surfaces */

  --ink: #101014;          /* near-black for headings & dark surfaces */
  --ink-soft: #71716F;     /* muted grey for body copy */
  --cream: #FFFFFF;        /* page background — clean white */
  --paper: #FFFFFF;
  --alt: #F7F5F2;          /* warm off-white alternate section background */
  --line: var(--red-line);

  /* Tonal variants for the sport categories — warm neutral family */
  --c-motorsport: #D9772F;
  --c-motorsport-dark: #7C3D0E;
  --c-running: #B0651F;
  --c-running-dark: #6B3D10;
  --c-heritage: #9C6B34;
  --c-heritage-dark: #5C3D1B;
  --c-badminton: #8A6A3F;
  --c-badminton-dark: #4E3A20;
  --c-others: #A87642;
  --c-others-dark: #5F4223;
  --c-visa: #B07434;
  --c-visa-dark: #63401A;
  --c-here: #9A6A32;
  --c-here-dark: #553A1B;

  /* legacy aliases kept for compatibility */
  --red-dark: var(--red-deep);
  --gold: var(--blush);
  --gold-soft: var(--blush-pale);

  /* --- Photography (Wikimedia Commons, openly-licensed CC BY / CC BY-SA — see credits.txt) --- */
  --photo-hero: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Beautiful_Raja_Ampat.jpg');
  --photo-beach: url('https://upload.wikimedia.org/wikipedia/commons/0/0b/Kuta_Beach_Lombok.JPG');
  --photo-motorsport: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Main_Straight_of_Mandalika_International_Circuit.jpg');
  --photo-running: url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Runners_at_Mile_19_Boston_Marathon_2021.agr.jpg');
  --photo-heritage: url('https://upload.wikimedia.org/wikipedia/commons/1/1c/Olah_Pencak_Silat_Warisan_Dunia_Dari_Indonesia.jpg');
  --photo-badminton: url('assets/istora-gbk.jpg');
  --photo-others: url('https://upload.wikimedia.org/wikipedia/commons/6/61/TDS_%28_TOUR_DE_SINGKARAK_%29.jpg');
  --photo-calendar: url('https://upload.wikimedia.org/wikipedia/commons/3/37/Istora_Gelora_Bung_Karno_%28Jakarta%2C_INA%29.jpg');
  --photo-invest: url('https://upload.wikimedia.org/wikipedia/commons/b/b6/Jakarta_Skyline_Part_2.jpg');
  --photo-visa: url('https://upload.wikimedia.org/wikipedia/commons/4/42/Borobudur_temple_from_above.jpg');
  --photo-here: url('/assets/trip/soekarno-hatta-t3.jpg');
  --photo-investors: url('https://upload.wikimedia.org/wikipedia/commons/b/b6/Jakarta_Skyline_Part_2.jpg');

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 2px 6px rgba(16,16,20,.05), 0 18px 40px rgba(16,16,20,.07);
  --shadow-lg: 0 30px 70px rgba(16,16,20,.14);

  --font-display: 'Robelia', 'Georgia', serif;
  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;   /* UI / labels / nav / buttons */
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.16;
  margin: 0 0 .5em 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
p{ margin: 0 0 1em 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ width:100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section{ padding: 104px 0; }
.section--tight{ padding: 64px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-weight:700; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  background: #fff;
  margin-bottom: 20px;
}
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--red); display:inline-block; }
.lead{ font-size: 17.5px; color: var(--ink-soft); max-width: 640px; font-weight:400; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.center .eyebrow::before{ display:inline-block; }

/* Buttons — soft pills, black primary, quiet confidence */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-head); font-weight:600; font-size:14px;
  letter-spacing: .01em;
  padding: 15px 30px; border-radius: 999px;
  border: 1px solid transparent; cursor:pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--ink); color:#fff; }
.btn--primary:hover{ background: var(--red-deep); }
.btn--gold{ background: var(--blush); color: var(--ink); }
.btn--gold:hover{ background: var(--blush-pale); }
.btn--ghost{ background: #fff; color: var(--ink); border-color: #fff; }
.btn--ghost:hover{ background: var(--blush-pale); border-color: var(--blush-pale); }
.btn--outline{ background: transparent; color: var(--ink); border-color: rgba(16,16,20,.25); }
.btn--outline:hover{ background: var(--ink); border-color: var(--ink); color:#fff; }
.btn--sm{ padding: 10px 20px; font-size: 13px; }

/* ===== Header / Nav ===== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(16,16,20,.05);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; font-family: var(--font-head); font-weight:700; }
.brand-mark{
  height:42px; flex:none;
  display:flex; align-items:center;
}
.brand-mark img{ width:auto; height:100%; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; border-left:1px solid var(--line); padding-left:12px; }
.brand-text b{ font-family: var(--font-head); font-size:16px; letter-spacing:-.01em; font-weight:800; }
.brand-text span{ font-size:9.5px; font-weight:600; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.12em; }

.nav-links{ display:flex; align-items:center; gap: 2px; }
.nav-links a{
  font-family: var(--font-head); font-weight:500; font-size: 13.5px;
  padding: 9px 15px; color: rgba(16,16,20,.65);
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
  letter-spacing:.01em;
}
.nav-links a:hover{ color: var(--ink); background: var(--alt); }
.nav-links a.active{ color: var(--ink); background: var(--alt); font-weight:700; }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{
  display:inline-flex; align-items:center; font-family: var(--font-head); font-weight:700; font-size:13px;
  color:#fff; background: var(--red); border-radius: 999px; padding: 9px 16px; white-space:nowrap;
  transition: background .15s ease, transform .15s ease;
}
.nav-cta:hover{ background: #A4531B; color:#fff; transform: translateY(-1px); }
@media (max-width: 1240px){ .nav-cta{ padding: 8px 13px; font-size: 12.5px; } }
@media (max-width: 980px){ .nav-cta{ padding: 8px 14px; } }
@media (max-width: 400px){ .nav-cta{ padding: 7px 11px; font-size: 12px; } }
.lang-toggle{
  display:flex; border: 1px solid rgba(16,16,20,.15); border-radius:999px; overflow:hidden;
  font-family: var(--font-head); font-weight:700; font-size:11.5px;
  padding: 3px; gap:2px; background:#fff;
}
.lang-toggle button, .lang-toggle a{
  border:0; background:transparent; padding: 6px 13px; cursor:pointer;
  color: var(--ink); transition: background .15s ease, color .15s ease;
  letter-spacing:.04em; border-radius:999px;
  font-family: inherit; font-weight:inherit; font-size:inherit;
}
.lang-toggle button.is-active, .lang-toggle a.is-active{ background: var(--ink); color:#fff; }

.nav-burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-burger span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; }

@media (max-width: 980px){
  .nav-links{
    position:fixed; inset: 70px 16px auto 16px; flex-direction:column; align-items:stretch;
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 10px; gap:2px; border:1px solid var(--line);
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-links.is-open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 13px 16px; border-radius: 12px; }
  .nav-links a.active{ background: var(--red-soft); }
  .nav-burger{ display:block; }
}

/* ===== Hero — inset photo with rounded corners, centered editorial type ===== */
.hero{
  position:relative; color:#fff;
  background: var(--ink);
  padding: 120px 0 110px;
  margin: 10px 14px 0;
  border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(12,11,10,.25) 0%, rgba(12,11,10,.25) 45%, rgba(12,11,10,.62) 100%);
}
.hero::after{ content:none; }
.hero-inner{ position:relative; z-index:2; max-width: 840px; margin: 0 auto; text-align:center; }
.hero-inner .eyebrow{
  color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.hero h1{
  font-size: clamp(40px, 6vw, 74px); color:#fff; font-weight:500;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero .lead{ color: rgba(255,255,255,.92); font-size:17.5px; margin-left:auto; margin-right:auto; }
.hero-cta{ display:flex; gap:12px; margin-top: 34px; flex-wrap:wrap; }
.hero .hero-cta{ justify-content:center; }   /* centered only inside page heroes */

.hero{ margin-bottom: 10px; }
@media (max-width:760px){
  .hero{ margin-bottom: 8px; }
}

.page-hero{ padding: 96px 0 96px; }
.page-hero .kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px;
  color: #fff; margin-bottom:18px;
  border:1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12);
  border-radius:999px; padding:8px 18px; backdrop-filter: blur(6px);
}
.page-hero h1{ color:#fff; font-size: clamp(34px,4.8vw,56px); max-width: 860px; margin-left:auto; margin-right:auto; }
.page-hero .lead{ color: rgba(255,255,255,.92); max-width: 640px; }

.hero--motorsport{ background-color:#1A1512; }
.hero--running{ background-color:#191410; }
.hero--heritage{ background-color:#1A1410; }
.hero--badminton{ background-color:#171310; }
.hero--calendar{ background-color:#1A1512; }
.hero--invest{ background-color:#181311; }
.hero--plan{ background-color:#1A1410; }

/* Photo-backed heroes: neutral scrim over a real photo */
.hero--photo{ background-size: cover; background-position: center; }
.hero--photo.hero--about-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), url('assets/hero-motogp.jpeg'); }
.hero--photo.hero--todo-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.38) 0%, rgba(14,12,10,.62) 100%), url('/assets/things-to-do-hero.jpg'); }
.hero--photo.hero--hub-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.38) 0%, rgba(14,12,10,.62) 100%), url('/assets/trip/plan-your-trip-hero.jpg'); }
.hero--photo.hero--plan-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.62) 100%), var(--photo-beach); }
.hero--photo.hero--calendar-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.46) 0%, rgba(14,12,10,.66) 100%), url('assets/football-hero.jpg'); background-position: center 15%; }
.hero--photo.hero--invest-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), url('assets/invest-hero.jpeg'); }

/* ===== Plan Your Trip: sticky sub-nav + category bands ===== */
.subnav{
  position: sticky; top: 69px; z-index: 400;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(16,16,20,.05);
}
.subnav-inner{ display:flex; gap:8px; padding-top: 14px; padding-bottom: 14px; overflow-x:auto; }
.subnav a{
  font-family: var(--font-head); font-weight:600; font-size:13px;
  white-space:nowrap; padding:9px 20px; border-radius:999px; color: var(--ink-soft);
  border:1px solid var(--line); background:#fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.subnav a:hover{ color: var(--ink); border-color: var(--ink); }
.subnav a .num{ font-family: var(--font-display); font-weight:600; margin-right:6px; color: var(--red); }

.cat-band{
  position:relative; overflow:hidden; color:#fff; padding: 88px 0 72px;
  scroll-margin-top: 130px;
  margin: 0 14px 10px; border-radius: var(--radius-lg);
}
.cat-band::after{ content:none; }
.cat-band-inner{ position:relative; z-index:2; max-width: 740px; }
.cat-band .num{ font-family: var(--font-head); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color: rgba(255,255,255,.75); margin-bottom:10px; display:block; }
.cat-band h2{ color:#fff; font-size: clamp(30px,4.4vw,48px); margin-bottom:14px; font-weight:500; }
.cat-band p{ color: rgba(255,255,255,.9); font-size:17px; max-width:640px; }
.cat-band{ background-size: cover; background-position: center; }
.cat-band--motorsport{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), url('assets/full-throttle-mandalika.jpeg'); }
.cat-band--running{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), url('assets/every-finish-line.jpg'); }
.cat-band--heritage{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), var(--photo-heritage); }
.cat-band--badminton{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), url('assets/sport-stops-nation.jpg'); background-position: center 22%; }
.cat-band--football{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), url('assets/football-hero.jpg'); background-position: center 15%; }
.cat-band--others{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), var(--photo-others); }
.cat-band--visa{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), var(--photo-visa); }
.cat-band--here{ background-image: linear-gradient(180deg, rgba(16,13,10,.55), rgba(16,13,10,.72)), var(--photo-here); }
.trip-section{ scroll-margin-top: 130px; }
.trip-section + .trip-section{ border-top: 1px solid var(--line); }
.trip-section [data-cat]{ scroll-margin-top: 150px; }

/* ===== About page ===== */
.about-intro{ max-width: 760px; margin: 0 auto; text-align:center; }
.about-intro .lead{ margin-left:auto; margin-right:auto; }
.fact-trio{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 56px; }
.fact{
  text-align:center; padding: 36px 28px; background: var(--paper); border-radius: var(--radius);
  border: 1px solid rgba(16,16,20,.06); box-shadow: var(--shadow);
}
.fact-ico{
  width: 64px; height: 64px; border-radius: 50%; background: var(--red-soft); color: var(--red-deep);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.fact-ico svg{ width: 28px; height: 28px; }
.fact h3{ font-size: 22px; margin-bottom: 8px; font-weight:600; }
.fact p{ font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.fact a{ font-family: var(--font-head); font-weight:700; font-size: 13px; color: var(--red-deep); }
.fact a:hover{ text-decoration: underline; }
@media (max-width: 900px){ .fact-trio{ grid-template-columns: 1fr; } }

.pillar-card--host{ min-height: 340px; }
.pillar-card--host .meta{ font-family: var(--font-head); font-size: 11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.75); margin-bottom: 8px; }
.pillar-card--host h3{ font-size: 25px; }
.pillar-card.pillar-card--host::before{ content:none; }

.card--trad h3{ font-size: 23px; }
.card--trad .where{ display:block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }

.sport-panel{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items:center; }
.sport-panel .media-block{ min-height: 340px; }
.sport-panel h3{ font-size: clamp(26px,3vw,34px); margin-bottom: 12px; }
.sport-panel p{ color: var(--ink-soft); font-size: 15.5px; }
.sport-panel .stat{ display:flex; gap: 32px; margin: 22px 0 26px; flex-wrap:wrap; }
.sport-panel .stat b{ display:block; font-family: var(--font-display); font-size: 30px; font-weight:600; line-height:1.1; }
.sport-panel .stat span{ font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 860px){ .sport-panel{ grid-template-columns: 1fr; gap: 28px; } }

.timeline--about{ gap: 30px; max-width: 820px; }
.timeline--about .yr{ font-size: 22px; font-style: normal; margin-bottom: 4px; }
.timeline--about h4{ font-family: var(--font-head); font-size: 16.5px; font-weight:700; margin: 0 0 4px; }
.timeline--about p{ margin:0; color: var(--ink-soft); font-size: 14.5px; max-width: 640px; }

.card--link{ display:flex; flex-direction:column; }
.card--link .arrow{ margin-top:auto; padding-top: 18px; font-family: var(--font-head); font-weight:700; font-size: 13px; color: var(--red-deep); }
.card--link:hover .arrow{ text-decoration: underline; }

/* ===== Cards / Grids ===== */
.grid{ display:grid; gap: 26px; }
.grid--2{ grid-template-columns: repeat(2,1fr); }
.grid--3{ grid-template-columns: repeat(3,1fr); }
.grid--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px){ .grid--3, .grid--4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr;} }

.card{
  background: var(--paper); border-radius: var(--radius); border:1px solid rgba(16,16,20,.06);
  padding: 30px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.card-photo{
  height: 170px; margin: -30px -30px 24px -30px; background-size: cover; background-position:center;
}
.card-photo--motorsport{ background-image: var(--photo-motorsport); }
.card-photo--running{ background-image: var(--photo-running); }
.card-photo--heritage{ background-image: var(--photo-heritage); }
.card-photo--badminton{ background-image: var(--photo-badminton); }
.card-photo--others{ background-image: var(--photo-others); }
.card .btn--ticket.btn--sm{ margin-top: 16px; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3{ font-size: 27px; line-height:1.2; margin-bottom:10px; font-weight:600; }
.card p{ color: var(--ink-soft); font-size: 14px; margin-bottom: 0; }
.tag{
  display:inline-block; font-family: var(--font-head); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; padding:7px 14px; border-radius:999px;
  margin-bottom:16px; background: var(--red-soft) !important; color: var(--red-deep) !important;
  align-self: flex-start;
}

.pillar-card{
  position:relative; border-radius: 22px; overflow:hidden; color:#fff; min-height: 400px;
  display:flex; flex-direction:column; justify-content:flex-end; padding: 28px;
  box-shadow: var(--shadow); counter-increment: pillar;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pillar-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 32%, rgba(10,8,6,.85) 100%); z-index:1; }
.pillar-card::before{
  content: counter(pillar, decimal-leading-zero); position:absolute; top:20px; right:20px; z-index:2;
  font-family: var(--font-head); font-weight:700; font-size:11px; color: var(--ink);
  background:#fff; border-radius:999px; padding:7px 13px; letter-spacing:.08em;
}
.pillar-card > *{ position:relative; z-index:2; }
.pillar-card .tag{ background: rgba(255,255,255,.18) !important; color:#fff !important; backdrop-filter: blur(6px); }
.pillar-card h3{ font-size: 29px; color:#fff; font-weight:600; }
.pillar-card p{ color: rgba(255,255,255,.88); font-size:14px; }
#pillars{ counter-reset: pillar; }
.pillar-card{ background-size: cover; background-position: center; }
.pillar--motorsport{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), var(--photo-motorsport); }
.pillar--running{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), var(--photo-running); }
.pillar--heritage{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), url('assets/cards/traditional-sports.jpg'); }
.pillar--badminton{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), var(--photo-badminton); }
.pillar--legacy{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), url('assets/cards/major-sports.jpg'); }
.pillar--events{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), url('assets/cards/sport-events.webp'); }
.pillar--industry{ background-image: linear-gradient(180deg, rgba(14,11,9,.12), rgba(14,11,9,.45)), url('assets/cards/sport-industry.jpeg'); }

/* Event cards */
.event-card{
  display:grid; grid-template-columns: 64px 96px 1fr auto; gap:20px; align-items:center;
  background: var(--paper); border:1px solid rgba(16,16,20,.06);
  border-radius: var(--radius);
  padding: 22px 26px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.event-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.event-thumb{
  width:64px; height:64px; border-radius: 16px; background-size:cover; background-position:center;
  flex:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.event-thumb--motorsport{ background-image: var(--photo-motorsport); }
.event-thumb--running{ background-image: var(--photo-running); }
.event-thumb--heritage{ background-image: var(--photo-heritage); }
.event-thumb--badminton{ background-image: var(--photo-badminton); }
.event-thumb--others{ background-image: var(--photo-others); }
.event-date{
  text-align:center; border-right:1px solid var(--line); padding-right:18px;
  font-family: var(--font-display);
}
.event-date .d{ font-size:28px; font-weight:600; line-height:1; }
.event-date .m{ font-family: var(--font-head); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); margin-top:4px; }
.event-card h4{ font-family: var(--font-display); font-weight:600; font-size:23px; margin:0 0 5px 0; }
.event-card .meta{ font-size:13.5px; color: var(--ink-soft); }
.event-card .cat{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px; margin-top:9px; }
.event-card .event-actions{ display:flex; flex-direction:column; gap:8px; }
@media (max-width:760px){
  .event-card{ grid-template-columns: 52px 62px 1fr; }
  .event-card .event-actions{ grid-column: 1 / -1; flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:480px){
  .event-thumb{ display:none; }
  .event-card{ grid-template-columns: 62px 1fr; }
}

.cat--motorsport{ background: var(--red-soft); color: var(--c-motorsport-dark); }
.cat--running{ background: var(--red-soft); color: var(--c-running-dark); }
.cat--heritage{ background: var(--red-soft); color: var(--c-heritage-dark); }
.cat--badminton{ background: var(--red-soft); color: var(--c-badminton-dark); }
.cat--others{ background: var(--red-soft); color: var(--c-others-dark); }

/* Buy Ticket button — a distinct accent so it reads as a transaction, not navigation */
.btn--ticket{ background: var(--red); color:#fff; }
.btn--ticket:hover{ background: var(--red-deep); }
.btn--ticket .ticket-icon{ margin-right: 2px; }

/* Filter pills */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 40px; }
.filter-pill{
  font-family: var(--font-head); font-weight:600; font-size:13px;
  letter-spacing:.01em;
  padding:11px 22px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer; color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-pill:hover{ color: var(--ink); border-color: var(--ink); }
.filter-pill.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* Stat strip — inset dark panel with rounded corners */
.stat-strip{
  background: var(--ink); color:#fff;
  margin: 0 14px; border-radius: var(--radius-lg);
}
.stat-strip .grid{ text-align:center; }
.stat-strip .grid b{ display:block; font-family: var(--font-display); font-size: 40px; font-weight:500; margin-bottom:8px; }
.stat-strip .grid > div > span{ font-size:12.5px; color: rgba(255,255,255,.6); }
.stat-strip .eyebrow{
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85);
}

/* Timeline */
.timeline{ border-left: 1px solid var(--line); padding-left: 30px; display:flex; flex-direction:column; gap:36px; }
.timeline-item{ position:relative; }
.timeline-item::before{ content:""; position:absolute; left:-35px; top:5px; width:10px; height:10px; border-radius:50%; background: var(--red); border:2px solid var(--cream); }
.timeline-item .yr{ font-family: var(--font-display); font-weight:600; font-size: 17px; color: var(--red-deep); margin-bottom:6px; }

/* Quote / callout */
.callout{
  background: var(--alt); border-radius: var(--radius);
  padding: 40px 48px; font-family: var(--font-display);
  color: var(--ink); font-size:20px; line-height:1.6;
  text-align:center;
}
.callout .source-note{ font-family: var(--font-body); font-style:normal; }

/* Two-col section */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:36px; } }
.media-block{
  border-radius: var(--radius-lg); min-height: 380px; position:relative; overflow:hidden; isolation:isolate;
  box-shadow: var(--shadow-lg); display:flex; align-items:flex-end; padding: 26px; color:#fff;
  font-family: var(--font-head); font-weight:600; font-size:11px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.media-block span{ position:relative; z-index:2; }
/* Overlay sits under the caption text (the build unwraps bilingual spans into bare text, which cannot be z-indexed) */
.media-block::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, transparent 45%, rgba(10,8,6,.6)); }

/* Section header w/ CTA */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom: 48px; flex-wrap:wrap; }

/* Table */
.data-table{ width:100%; border-collapse: separate; border-spacing:0; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(16,16,20,.06); }
.data-table th, .data-table td{ text-align:left; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size:14.5px; }
.data-table th{ font-family: var(--font-head); background: var(--ink); color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; border-bottom:0; }
.data-table tr:last-child td{ border-bottom:0; }
.data-table tr:hover td{ background: var(--red-soft); }

/* Footer — inset dark panel echoing the hero frame */
.site-footer{
  background: var(--ink); color: rgba(255,255,255,.72); padding: 72px 0 32px;
  margin: 0 14px 14px; border-radius: var(--radius-lg);
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h5{ color:#fff; font-family: var(--font-head); font-size:11px; text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px; font-weight:700; }
.site-footer ul li{ margin-bottom:11px; font-size:14px; }
.site-footer ul li a{ transition: color .15s ease; }
.site-footer ul li a:hover{ color: var(--blush); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color: rgba(255,255,255,.45); }
.footer-brand p{ color: rgba(255,255,255,.6); font-size:14.5px; max-width: 320px; }
/* Footer uses the pre-made white "Sport in Indonesia by Kemenpora" lockup — no invert needed */
.site-footer .brand-mark{ height: 78px; }
.site-footer .brand-text{ border-left-color: rgba(255,255,255,.2); }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.badge-row span{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.22); padding:7px 15px; border-radius:999px; }

.source-note{ font-size:12.5px; color: var(--ink-soft); opacity:.85; margin-top:6px; }

/* Brand-card logo panel — uniform white box, logo contained (not cropped) */
.card-logo{
  height: 120px; margin: -30px -30px 24px -30px;
  background-color: #fff;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-origin: content-box; padding: 22px;
  border-bottom: 1px solid var(--line);
}

/* Inline fact-list icons (replace emoji bullets) */
.li-ico{ width:17px; height:17px; color: var(--red); vertical-align:-3px; margin-right:9px; flex:none; display:inline-block; }

/* =========================================================
   Indonesia Sport Calendar — featured hero, filters sidebar,
   image-card grid, pagination, event detail page
   ========================================================= */

/* Featured-event hero (replaces the generic hero once events load) */
.cal-hero--featured{ padding: 96px 0 88px; }
.cal-hero--featured .cal-hero-inner{
  position:relative; z-index:2; display:grid; grid-template-columns: auto 1fr; gap: 36px; align-items:center;
  max-width:1180px; text-align:left;
}
.cal-hero--featured .cal-hero-copy h1{ font-size: clamp(34px,4.6vw,58px); margin: 14px 0 12px; max-width: 760px; }
.cal-hero--featured .cal-hero-copy .lead{ margin: 0 0 26px; max-width: 620px; }
.cal-hero--featured .tag{ margin-bottom: 0; }
.cal-hero-labels{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; }
.cal-hero-flag{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-head); font-weight:800; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink); background: var(--blush); border-radius:999px; padding:7px 14px;
}
.cal-hero-flag::before{ content:"★"; font-size:11px; line-height:1; }
.cal-hero-date .ev-badge{ position:static; flex-direction:column; padding: 18px 20px; min-width: 96px; text-align:center; gap: 6px; }
.cal-hero-date .ev-badge-d b{ font-size: 34px; }
.cal-hero-date .ev-badge-to{ padding: 0; }
.cal-hero-date .ev-badge--note{ font-size: 13px; max-width: 160px; }
@media (max-width: 720px){
  .cal-hero--featured .cal-hero-inner{ grid-template-columns: 1fr; gap: 20px; }
  .cal-hero-date .ev-badge{ flex-direction:row; display:inline-flex; }
}

/* Toolbar: count · clear · search */
.cal-section{ padding-top: 56px; }
.cal-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap: 18px; flex-wrap:wrap;
  padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.cal-toolbar-left{ display:flex; align-items:center; gap: 16px; flex-wrap:wrap; }
.cal-count{ font-size: 14.5px; color: var(--ink-soft); }
.cal-count b{ color: var(--ink); font-weight:700; }
.cal-clear{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family: var(--font-head); font-weight:600; font-size: 13px; color: var(--red-deep); padding: 0;
}
.cal-clear[hidden]{ display:none; }
.cal-clear svg{ width:14px; height:14px; }
.cal-clear:hover{ text-decoration: underline; }
.cal-search{
  display:flex; align-items:center; gap:10px; flex: 1 1 320px; max-width: 520px;
  background:#fff; border:1px solid var(--line); border-radius: 999px; padding: 0 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cal-search:focus-within{ border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,20,.06); }
.cal-search svg{ width:17px; height:17px; color: var(--ink-soft); flex:none; }
.cal-search input{
  flex:1; border:0; outline:0; background:transparent; padding: 13px 0;
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
}
.cal-search input::-webkit-search-cancel-button{ cursor:pointer; }

/* Sidebar + results */
.cal-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 44px; align-items:start; }
.cal-filters{ position: sticky; top: 92px; display:flex; flex-direction:column; gap: 28px; }
.cal-filter-group h5{
  font-family: var(--font-head); font-size: 11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}
.cal-checks{ display:flex; flex-wrap:wrap; gap: 8px; }
.cal-check{ position:relative; cursor:pointer; }
.cal-check input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cal-check > span{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-weight:600; font-size: 13px; color: var(--ink-soft);
  padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid var(--line); background:#fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cal-check > span::before{
  content:""; width:14px; height:14px; border-radius: 4px; border: 1.5px solid rgba(16,16,20,.3); background:#fff; flex:none;
  transition: background .15s ease, border-color .15s ease;
}
.cal-check input[type=radio] + span::before{ border-radius: 50%; }
.cal-check:hover > span{ color: var(--ink); border-color: var(--ink); }
.cal-check input:checked + span{ background: var(--ink); color:#fff; border-color: var(--ink); }
.cal-check input:checked + span::before{ background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 2.5px var(--ink); }
.cal-check input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(217,119,47,.35); }
@media (max-width: 900px){
  .cal-layout{ grid-template-columns: 1fr; gap: 28px; }
  .cal-filters{ position: static; gap: 18px; }
}

/* Card grid */
.cal-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1100px){ .cal-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cal-grid{ grid-template-columns: 1fr; } }

.ev-card{
  display:flex; flex-direction:column; background: var(--paper); border-radius: var(--radius);
  border: 1px solid rgba(16,16,20,.06); box-shadow: var(--shadow); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ev-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ev-card-media{ position:relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--alt); }
.ev-media--motorsport{ background-image: var(--photo-motorsport); }
.ev-media--running{ background-image: var(--photo-running); }
.ev-media--heritage{ background-image: var(--photo-heritage); }
.ev-media--badminton{ background-image: var(--photo-badminton); }
.ev-media--football{ background-image: url('assets/football-hero.jpg'); }
.ev-media--others{ background-image: var(--photo-others); }

/* Status badge on cards, hero and detail */
.ev-status{ position:absolute; top:14px; right:14px; z-index:2; font-family: var(--font-head); font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:999px; background: var(--ink); color:#fff; }
.ev-status--registration-open{ background:#2E7D4F; }
.ev-status--sold-out{ background:#6B6B6B; }
.ev-status--postponed{ background:#B3261E; }
.cal-hero-labels .ev-status, .detail-card .ev-status{ position:static; }

/* Date badge — "09 Oct · to · 11 Oct" */
.ev-badge{
  position:absolute; top: 14px; left: 14px; z-index:2;
  display:inline-flex; align-items:center; gap: 10px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); color: var(--ink);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(16,16,20,.15);
}
.ev-badge-d{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.ev-badge-d b{ font-family: var(--font-display); font-size: 24px; font-weight:600; }
.ev-badge-d span{ font-family: var(--font-head); font-size: 10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-top: 4px; }
.ev-badge-to{ font-family: var(--font-head); font-size: 10.5px; color: var(--ink-soft); padding: 0 2px; }
.ev-badge--note{ font-family: var(--font-head); font-size: 10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding: 10px 14px; max-width: calc(100% - 28px); line-height:1.35; }

.ev-card-body{ display:flex; flex-direction:column; flex:1; padding: 20px 22px 22px; }
.ev-venue{ display:flex; align-items:center; gap:6px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.ev-pin{ width:14px; height:14px; color: var(--red); flex:none; }
.ev-card h3{ font-size: 22px; line-height:1.2; margin: 0 0 8px; font-weight:600; }
.ev-card p{ font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; }
.ev-card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.ev-card .cat{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px; }
.ev-more{ font-family: var(--font-head); font-weight:700; font-size: 13px; color: var(--ink); white-space:nowrap; }
.ev-more i{ font-style:normal; transition: transform .15s ease; display:inline-block; }
.ev-card:hover .ev-more i{ transform: translateX(3px); }

.cal-empty{
  background: var(--alt); border-radius: var(--radius); padding: 48px 32px; text-align:center;
  color: var(--ink-soft); font-size: 15px; max-width: 560px; margin: 0 auto;
}

/* Pagination */
.cal-pagination{ display:flex; justify-content:center; align-items:center; gap: 6px; margin-top: 40px; }
.cal-pagination:empty{ display:none; }
.pg-num, .pg-arrow{
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background:#fff;
  font-family: var(--font-head); font-weight:600; font-size: 13.5px; color: var(--ink-soft); cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pg-arrow{ font-size: 20px; line-height:1; }
.pg-num:hover, .pg-arrow:hover:not(:disabled){ color: var(--ink); border-color: var(--ink); }
.pg-num.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.pg-arrow:disabled{ opacity:.35; cursor:default; }

/* Organizer CTA panel */
.cal-cta{
  display:grid; grid-template-columns: 1fr auto; gap: 32px; align-items:center;
  background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: 52px 56px;
}
.cal-cta .eyebrow{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.85); }
.cal-cta h2{ color:#fff; font-size: clamp(26px,3.2vw,36px); max-width: 620px; }
.cal-cta p{ color: rgba(255,255,255,.7); font-size: 15px; max-width: 560px; margin:0; }
@media (max-width: 760px){ .cal-cta{ grid-template-columns: 1fr; padding: 36px 28px; } }

/* Event detail page */
.detail-section{ padding-top: 28px; padding-bottom: 40px; }
.detail-back{
  display:inline-flex; align-items:center; gap: 8px; font-family: var(--font-head); font-weight:600; font-size: 13.5px;
  color: var(--ink-soft); margin-bottom: 22px; transition: color .15s ease;
}
.detail-back:hover{ color: var(--ink); }
.detail-hero{
  position:relative; border-radius: var(--radius-lg); aspect-ratio: 21 / 9; min-height: 260px;
  background-size: cover; background-position: center; background-color: var(--alt); box-shadow: var(--shadow-lg);
}
.detail-hero .ev-badge{ top: 22px; left: 22px; }
.detail-grid{ display:grid; grid-template-columns: 1fr 340px; gap: 56px; align-items:start; margin-top: 44px; }
.detail-main h1{ font-size: clamp(32px,4.4vw,52px); margin: 14px 0 14px; }
.detail-main .lead{ max-width: 720px; }
.detail-body{ margin-top: 22px; max-width: 720px; font-size: 16px; color: var(--ink); }
.detail-body p{ margin-bottom: 1.1em; }
.detail-side{ position: sticky; top: 92px; }
.detail-card{ background:#fff; border: 1px solid rgba(16,16,20,.06); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.detail-card dl{ margin: 0 0 22px; display:grid; grid-template-columns: 1fr; gap: 14px; }
.detail-card dt{ font-family: var(--font-head); font-size: 10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.detail-card dd{ margin:0; font-size: 15px; font-weight:500; }
.detail-actions{ display:flex; flex-direction:column; gap: 10px; }
.detail-actions .btn{ width:100%; }
.detail-missing{ text-align:center; padding: 80px 0; }
.detail-missing .btn{ margin-top: 12px; }
@media (max-width: 900px){
  .detail-grid{ grid-template-columns: 1fr; gap: 32px; }
  .detail-side{ position: static; }
  .detail-hero{ aspect-ratio: 16 / 10; }
}

/* ===== Plan Your Trip hub + sub-pages ===== */
.split--reverse > :first-child{ order: 2; }
.split--reverse > :last-child{ order: 1; }
@media (max-width: 860px){ .split--reverse > :first-child{ order: 1; } .split--reverse > :last-child{ order: 2; } }
.hub-row{ padding: 56px 0; }
.hub-row + .hub-row{ border-top: 1px solid var(--line); }
.hub-row h2{ font-size: clamp(28px,3.4vw,38px); margin-bottom: 12px; }
.hub-row .lead{ margin-bottom: 26px; }
.hub-row .media-block{ min-height: 340px; }
.hub-visa{ text-align:center; max-width: 720px; margin: 0 auto; padding: 72px 0 24px; }
.hub-visa .lead{ margin-left:auto; margin-right:auto; margin-bottom: 26px; }
.hub-explore{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 860px){ .hub-explore{ grid-template-columns: 1fr; } }

.breadcrumb{
  display:flex; align-items:center; gap: 8px; flex-wrap:wrap;
  font-family: var(--font-head); font-size: 12.5px; font-weight:600; color: var(--ink-soft);
  padding: 14px 24px 0;
}
@media (max-width: 760px){ .breadcrumb{ padding: 12px 30px 0; font-size: 12px; } }
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .here{ color: var(--ink); }

.hero--photo.hero--visa-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), var(--photo-visa); }
.hero--photo.hero--here-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), var(--photo-here); }
.hero--photo.hero--around-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), url('assets/invest-hero.jpeg'); }
.hero--photo.hero--stay-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), url('assets/kek-mandalika-panorama.jpeg'); }
.hero--photo.hero--host-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.66) 100%), url('/assets/events/gbk-aerial.webp'); background-position: center 40%; }
.hero--photo.hero--tips-photo{ background-image: linear-gradient(180deg, rgba(14,12,10,.42) 0%, rgba(14,12,10,.64) 100%), var(--photo-hero); }
.hero--sub{ padding: 72px 0 72px; }
.hero--sub h1{ font-size: clamp(32px,4.4vw,52px); }

.sub-section{ padding: 64px 0; }
.sub-section + .sub-section{ border-top: 1px solid var(--line); }
.sub-section h2{ font-size: clamp(26px,3.2vw,34px); margin-bottom: 10px; }
.sub-section > .container > .lead{ margin-bottom: 30px; }
.sub-section [data-cat]{ scroll-margin-top: 120px; }

.airline-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.airline-list a{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 14px 18px;
  font-family: var(--font-head); font-weight:600; font-size: 13.5px;
  transition: border-color .15s ease, transform .15s ease;
}
.airline-list a:hover{ border-color: var(--ink); transform: translateY(-2px); }
.airline-list a span{ font-size: 11px; color: var(--ink-soft); font-weight:600; white-space:nowrap; }
@media (max-width: 960px){ .airline-list{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .airline-list{ grid-template-columns: 1fr; } }

.data-table td:first-child{ font-weight:700; }
.table-wrap{ overflow-x:auto; }
.table-wrap .data-table{ min-width: 720px; }

.know-strip{ padding: 8px 14px 24px; }
.know-strip .container{ background: var(--alt); border-radius: var(--radius-lg); padding: 40px 40px 36px; max-width: 1180px; }
.know-strip-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 16px; flex-wrap:wrap; margin-bottom: 22px; }
.know-strip-head h2{ font-size: clamp(22px,2.6vw,28px); margin:0; }
.know-strip-head a{ font-family: var(--font-head); font-weight:700; font-size: 13px; color: var(--red-deep); }
.know-strip-head a:hover{ text-decoration: underline; }
.know-strip-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.know-strip-grid a{
  display:flex; flex-direction:column; gap: 6px; background:#fff; border:1px solid rgba(16,16,20,.06);
  border-radius: 16px; padding: 20px 22px; font-size: 13px; color: var(--ink-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.know-strip-grid a:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.know-strip-grid b{ font-family: var(--font-head); font-size: 14.5px; color: var(--ink); }
@media (max-width: 900px){ .know-strip-grid{ grid-template-columns: repeat(2,1fr); } .know-strip .container{ padding: 28px 22px; } }
@media (max-width: 520px){ .know-strip-grid{ grid-template-columns: 1fr; } }
@media (max-width: 1080px){ .nav-links a{ padding: 9px 11px; font-size: 13px; } }

/* Photo slots: show a labelled placeholder until the file named in data-photo exists (script.js swaps it in) */
.photo-slot{ background-size:cover; background-position:center; }
.photo-slot.is-placeholder{
  background: repeating-linear-gradient(135deg, #F3EFE9 0 14px, #ECE6DE 14px 28px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding: 16px;
}
.photo-slot.is-placeholder span{
  font-family: var(--font-head); font-size: 11.5px; font-weight:600; color: var(--ink-soft); line-height:1.4; text-transform:none; letter-spacing:0; text-shadow:none;
  background: rgba(255,255,255,.85); border:1px dashed rgba(16,16,20,.25); border-radius: 10px; padding: 8px 12px; max-width: 260px;
}
.photo-slot:not(.is-placeholder) span{ display:none; }
.media-block.photo-slot.is-placeholder{ min-height: 240px; margin-bottom: 28px; }
.media-block.photo-slot.is-placeholder::after{ content:none; }
.media-block.photo-slot:not(.is-placeholder){ min-height: 240px; margin-bottom: 28px; }
.media-block.photo-slot:not(.is-placeholder) span{ display:inline; }

/* ===== Host an Event ===== */
.host-support{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 960px){ .host-support{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .host-support{ grid-template-columns: 1fr; } }
.host-support .fact{ text-align:left; }
.host-support .fact-ico{ margin-bottom: 14px; }
.venue-card .meta{ display:flex; gap: 10px; flex-wrap:wrap; font-family: var(--font-head); font-size: 12px; font-weight:600; color: var(--ink-soft); margin: -6px 0 10px; }
.venue-card .meta b{ color: var(--ink); font-weight:700; }
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 960px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; background:#fff; border:1px solid rgba(16,16,20,.06); border-radius: var(--radius); padding: 28px 26px 26px; box-shadow: var(--shadow); counter-increment: step; }
.step::before{ content: counter(step, decimal-leading-zero); display:inline-block; font-family: var(--font-display); font-size: 30px; font-weight:600; color: var(--red-deep); margin-bottom: 8px; }
.step h3{ font-size: 21px; margin-bottom: 8px; }
.step p{ font-size: 14px; color: var(--ink-soft); margin:0; }
.step .who{ display:block; margin-top: 12px; font-family: var(--font-head); font-size: 11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.rules-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px 28px; margin-top: 8px; }
@media (max-width: 760px){ .rules-list{ grid-template-columns: 1fr; } }
.rules-list li{ display:flex; gap: 10px; align-items:flex-start; font-size: 14.5px; color: var(--ink); }
.rules-list li::before{ content:""; flex:none; width: 8px; height: 8px; border-radius:50%; background: var(--red); margin-top: 9px; }

.form-card{ background:#fff; border:1px solid rgba(16,16,20,.06); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }
.form-grid .span2{ grid-column: 1 / -1; }
.form-field{ display:flex; flex-direction:column; gap: 6px; }
.form-field label{ font-family: var(--font-head); font-size: 11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background:#fff; outline:none; width:100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,20,.06); }
.form-field textarea{ min-height: 130px; resize: vertical; }
.needs-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 720px){ .needs-grid{ grid-template-columns: 1fr; } }
.needs-grid label{ display:flex; align-items:center; gap: 10px; font-size: 14px; border:1px solid var(--line); border-radius: 12px; padding: 11px 14px; cursor:pointer; }
.needs-grid input{ width: 17px; height: 17px; accent-color: var(--ink); }
.form-note{ font-size: 12.5px; color: var(--ink-soft); }
.form-msg{ padding: 12px 16px; border-radius: 12px; font-family: var(--font-head); font-weight:600; font-size: 14px; }
.form-msg.err{ background: #FCE8E6; color: #B3261E; }
.form-msg.ok{ background: #E6F4EC; color: #2E7D4F; }
.form-msg[hidden]{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.two-ways{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px){ .two-ways{ grid-template-columns: 1fr; } }
@media (max-width: 1240px){ .nav-links a{ padding: 9px 10px; font-size: 13px; } }
html[lang="id"] .nav-links a{ padding: 9px 11px; font-size: 13px; }
@media (max-width: 1300px){ html[lang="id"] .nav-links a{ padding: 8px 8px; font-size: 12.5px; } }

[data-i18n-id]{ display: none; }
html.lang-id [data-i18n-id]{ display: initial; }
html.lang-id [data-i18n-en]{ display: none; }