/* ============================================================
   OnDestination - Gelegenheden page styles
   Builds on home.css + colors_and_type.css
   ============================================================ */

/* ============================================================
   PAGE HEADER
   ============================================================ */
.pg-header {
  background: #000;
  color: #F8F5EE;
  padding: 108px 0 84px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pg-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 100% at 0% 70%, rgba(111,224,0,.13), transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 10%, rgba(111,224,0,.07), transparent 55%);
  pointer-events: none;
}
.pg-header .wrap { position: relative; z-index: 2; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255,255,255,.32);
  margin-bottom: 26px;
  letter-spacing: .05em;
}
.breadcrumb a { color: rgba(255,255,255,.32); transition: color 160ms; }
.breadcrumb a:hover { color: #6FE000; }
.breadcrumb .sep { color: rgba(255,255,255,.16); }
.breadcrumb .cur { color: rgba(255,255,255,.62); }

.pg-h1 {
  font-family: 'Kardige', sans-serif;
  font-size: clamp(46px, 7.5vw, 104px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.025em;
  margin: 0 0 28px;
  color: #F8F5EE;
  max-width: 16ch;
}
.pg-h1 em {
  font-style: normal;
  color: #6FE000;
  text-shadow: 0 0 52px rgba(111,224,0,.38);
}

.pg-lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.58;
  font-weight: 300;
  color: #C0C0C0;
  max-width: 54ch;
  margin: 0 0 52px;
}

/* Stats strip */
.pg-stats {
  display: flex;
  gap: 0;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.09);
  flex-wrap: wrap;
}
.pg-stat {
  padding-right: 40px;
  margin-right: 40px;
  border-right: 1px solid rgba(255,255,255,.09);
}
.pg-stat:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}
.pg-stat-num {
  font-family: 'Kardige', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: #6FE000;
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 5px;
}
.pg-stat-label {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  font-weight: 700;
  display: block;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.035);
  position: relative;
  z-index: 50;
}
.filter-bar .wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.filter-btn {
  appearance: none;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.13);
  color: rgba(248,245,238,.6);
  font-family: 'Luxe Uno', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.22,.61,.36,1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.filter-btn .fcount {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.36);
  padding: 1px 7px;
  border-radius: 999px;
  transition: all 200ms;
}
.filter-btn:hover {
  border-color: rgba(255,255,255,.28);
  color: #F8F5EE;
}
.filter-btn.is-active {
  background: #6FE000;
  border-color: #6FE000;
  color: #000;
}
.filter-btn.is-active .fcount {
  background: rgba(0,0,0,.15);
  color: rgba(0,0,0,.48);
}

/* ============================================================
   GELEGENHEDEN SECTIONS
   ============================================================ */
.gel-main {
  background: #000;
  padding: 80px 0 60px;
}

.gel-group {
  margin-bottom: 80px;
}
.gel-group.is-hidden {
  display: none;
}

.gel-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gel-group-head h2 {
  font-family: 'Kardige', sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
  color: #F8F5EE;
}
.gel-group-head .ct {
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
  font-weight: 700;
  white-space: nowrap;
}

/* Particulier: 4-col */
.gel-part-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Featured card - 2 cols wide, same height as siblings */
.gel-card.gc-wide {
  grid-column: span 2;
  aspect-ratio: auto; /* unsets the 3/4 from home.css; row height set by sibling cards */
}
.gel-card.gc-wide .gc-letter {
  font-size: 300px;
  bottom: 40%;
}
.gel-card.gc-wide h3 {
  font-size: 42px;
}

/* Zakelijk: 2-col */
.gel-zak-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.gel-zak-grid .gel-card {
  aspect-ratio: 7/4;
}
.gel-zak-grid .gel-card .gc-letter {
  font-size: 270px;
}
.gel-zak-grid .gel-card h3 {
  font-size: 34px;
}

/* Tagline on all cards */
.gc-line {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(248,245,238,.38);
  margin: 8px 0 16px;
  max-width: 24ch;
  transition: color 220ms;
}
.gel-card:hover .gc-line {
  color: rgba(248,245,238,.62);
}

/* ============================================================
   CTA - reuses .band.dark.advies.grain from home.css
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .gel-part-grid { grid-template-columns: repeat(3, 1fr); }
  .gel-card.gc-wide { grid-column: span 3; }
  .gel-card.gc-wide .gc-letter { font-size: 220px; }
}
@media (max-width: 900px) {
  .pg-header { padding: 80px 0 60px; }
  .pg-h1 { font-size: clamp(38px, 12vw, 64px); }
  .pg-stats { gap: 0; }
  .pg-stat { padding-right: 28px; margin-right: 28px; }
  .pg-stat-num { font-size: 34px; }
  .gel-part-grid { grid-template-columns: repeat(2, 1fr); }
  .gel-card.gc-wide { grid-column: span 2; aspect-ratio: auto; }
  .gel-card.gc-wide .gc-letter { font-size: 200px; }
  .gel-zak-grid { grid-template-columns: 1fr; }
  .gel-zak-grid .gel-card { aspect-ratio: 3/2; }
}
@media (max-width: 580px) {
  .gel-part-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gel-card.gc-wide { grid-column: span 2; }
  .pg-stat { padding-right: 18px; margin-right: 18px; }
  .filter-btn .fcount { display: none; }
  /* Smaller titles zo lange namen niet worden afgesneden */
  .gel-card h3 { font-size: 19px; line-height: 1.1; }
  .gel-card.gc-wide h3 { font-size: 26px; }
  .gc-num { font-size: 9.5px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gc-line { font-size: 12px; margin: 4px 0 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .gel-card { padding: 20px 16px 18px; }
}