/* ==========================================================================
   Landingspagina "Riverland: Greatest Hits!" (theatershows oktober 2026)
   ========================================================================== */

.gh { --gh-bg: #0c0a14; --gh-bg-2: #15111f; --gh-card: #1c1728; --gh-line: rgba(255,255,255,.1); --gh-gold: #ffcf3f; background: var(--gh-bg); color: rgba(255,255,255,.78); overflow: hidden; }
.gh h1, .gh h2, .gh h3 { color: #fff; text-transform: none; }
.gh-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gh-gold); margin-bottom: 12px; }
.gh-head { text-align: center; margin-bottom: 56px; }
.gh-head h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 700; margin: 0; letter-spacing: -.02em; }
.gh-head p { font-family: 'Lora', serif; font-style: italic; font-size: 18px; color: rgba(255,255,255,.65); margin: 12px 0 0; }

/* ---------- Hero ---------- */
.gh-hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; text-align: center; padding: calc(var(--rl-nav-h) + 40px) 0 90px; isolation: isolate; }
.gh-hero__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: saturate(1.2) brightness(.45); transform: scale(1.08); animation: gh-zoom 24s ease-in-out infinite alternate; z-index: -3; }
@keyframes gh-zoom { to { transform: scale(1.18) translateY(-10px); } }
.gh-hero:after { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 30%, rgba(12,10,20,0) 0%, rgba(12,10,20,.55) 55%, var(--gh-bg) 100%), linear-gradient(180deg, rgba(12,10,20,.3) 0%, rgba(12,10,20,0) 40%, var(--gh-bg) 100%); }
.gh-hero__glow { position: absolute; left: 50%; top: 55%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 152, 34, .35), rgba(240, 36, 25, .15) 50%, transparent); filter: blur(30px); z-index: -1; animation: gh-glow 6s ease-in-out infinite alternate; }
@keyframes gh-glow { from { opacity: .6; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } }

/* Lichtbundels */
.gh-beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gh-beams span { position: absolute; top: -20%; width: 180px; height: 140%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 75%); filter: blur(8px); mix-blend-mode: screen; opacity: .55; }
.gh-beams span:nth-child(1) { left: 8%;  background: linear-gradient(180deg, rgba(255, 207, 63, .45), transparent 70%); animation: gh-sweep 7s ease-in-out infinite alternate; }
.gh-beams span:nth-child(2) { left: 28%; background: linear-gradient(180deg, rgba(240, 36, 25, .4), transparent 70%); animation: gh-sweep 9s ease-in-out -2s infinite alternate-reverse; }
.gh-beams span:nth-child(3) { left: 48%; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 70%); animation: gh-sweep 8s ease-in-out -4s infinite alternate; }
.gh-beams span:nth-child(4) { left: 66%; background: linear-gradient(180deg, rgba(101, 172, 76, .45), transparent 70%); animation: gh-sweep 10s ease-in-out -1s infinite alternate-reverse; }
.gh-beams span:nth-child(5) { left: 84%; background: linear-gradient(180deg, rgba(160, 80, 255, .4), transparent 70%); animation: gh-sweep 7.5s ease-in-out -3s infinite alternate; }
@keyframes gh-sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }

.gh-kicker { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0 0 18px; }
.gh-title { margin: 0 0 26px; line-height: .9; }
.gh-title__small { display: block; font-family: 'Lora', serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); color: #fff; margin-bottom: 6px; letter-spacing: 0; }
.gh-title__big {
  display: block; font-size: clamp(64px, 13vw, 168px); font-weight: 700; letter-spacing: -.045em; text-transform: uppercase;
  background: linear-gradient(100deg, #fff6c9 0%, var(--gh-gold) 20%, #ff9822 45%, #f02419 70%, #ff9822 85%, var(--gh-gold) 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gh-shine 6s linear infinite; filter: drop-shadow(0 6px 40px rgba(240, 36, 25, .35));
}
@keyframes gh-shine { to { background-position: 200% center; } }
.gh-hero__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; font-size: 17px; font-weight: 500; color: #fff; margin: 0 0 34px; }
.gh-hero__meta .fa { color: var(--gh-gold); margin-right: 8px; }

.gh-countdown { display: inline-flex; gap: 12px; margin-bottom: 38px; }
.gh-countdown > div { min-width: 84px; padding: 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.gh-countdown strong { display: block; font-size: 34px; font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.gh-countdown span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; }
.gh-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.gh-hero__actions .rl-btn { padding: 17px 32px; font-size: 15px; }
.gh-pulse { position: relative; }
.gh-pulse:before { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid rgba(255, 152, 34, .7); animation: gh-ring 2s ease-out infinite; }
@keyframes gh-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } }
.gh-hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 34px; animation: gh-bounce 2s ease-in-out infinite; }
.gh-hero__scroll:hover { color: #fff; }
@keyframes gh-bounce { 50% { transform: translate(-50%, 8px); } }

/* ---------- Tickets ---------- */
.gh-tickets { padding: 100px 0 90px; background: linear-gradient(180deg, var(--gh-bg) 0%, var(--gh-bg-2) 100%); }
.gh-ticket-list { display: grid; gap: 22px; max-width: 920px; margin: 0 auto; }
.gh-ticket {
  position: relative; display: grid; grid-template-columns: 170px 1fr auto; align-items: center;
  background: var(--gh-card); border-radius: 22px; border: 1px solid var(--gh-line); overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gh-ticket:hover { transform: translateY(-4px) scale(1.01); border-color: rgba(255, 152, 34, .5); box-shadow: 0 20px 60px rgba(240, 36, 25, .2); }
/* Perforatie tussen datum en inhoud */
.gh-ticket:before, .gh-ticket:after { content: ''; position: absolute; left: 158px; width: 24px; height: 24px; border-radius: 50%; background: var(--gh-bg-2); }
.gh-ticket:before { top: -12px; }
.gh-ticket:after { bottom: -12px; }
.gh-ticket__date {
  align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 12px;
  background: linear-gradient(160deg, #ffcf3f 0%, #ff9822 45%, #f02419 100%); color: #1a0f05; text-align: center;
  border-right: 2px dashed rgba(12, 10, 20, .35);
}
.gh-ticket__day { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gh-ticket__num { font-size: 62px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.gh-ticket__month { font-size: 13px; font-weight: 500; }
.gh-ticket__body { padding: 24px 28px; }
.gh-ticket__body h3 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.gh-ticket__body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.gh-ticket__body .fa { color: var(--gh-gold); margin-right: 6px; }
.gh-ticket__cta { padding: 24px 28px 24px 0; }
.gh-ticket__cta .rl-btn { padding: 15px 28px; }
.gh-soldout { display: inline-block; padding: 10px 18px; border: 2px solid rgba(255,255,255,.35); border-radius: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: rgba(255,255,255,.75); transform: rotate(-6deg); }
.gh-ticket.is-soldout .gh-ticket__date { filter: grayscale(1) brightness(.8); }
.gh-ticket.is-soldout:hover { transform: none; box-shadow: none; border-color: var(--gh-line); }
.gh-tickets__note { text-align: center; font-size: 14px; color: rgba(255,255,255,.5); margin: 32px 0 0; }
.gh-tickets__note .fa { margin-right: 6px; }

@media (max-width: 767px) {
  .gh-ticket { grid-template-columns: 110px 1fr; }
  .gh-ticket:before, .gh-ticket:after { left: 98px; }
  .gh-ticket__num { font-size: 46px; }
  .gh-ticket__day, .gh-ticket__month { font-size: 11px; }
  .gh-ticket__body { padding: 20px 18px 8px; }
  .gh-ticket__body h3 { font-size: 17px; }
  .gh-ticket__body ul { flex-direction: column; font-size: 14px; }
  .gh-ticket__cta { grid-column: 2; padding: 8px 18px 20px; }
  .gh-countdown > div { min-width: 68px; }
  .gh-countdown strong { font-size: 26px; }
}

/* ---------- Over de show ---------- */
.gh-about { padding: 110px 0; background: var(--gh-bg-2); }
.gh-about__row { display: flex; flex-wrap: wrap; align-items: center; }
.gh-about__row > [class*="col-"] { width: 100%; }
@media (min-width: 992px) { .gh-about__row > [class*="col-"] { width: 50%; } }
.gh-about__text h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.15; margin: 0 0 22px; letter-spacing: -.02em; }
.gh-about__text p { font-size: 16.5px; line-height: 1.85; margin-bottom: 1.1em; }
.gh-about__text strong { color: #fff; }
.gh-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.gh-facts > div { padding: 18px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--gh-line); text-align: center; }
.gh-facts strong, .gh-facts .fa { display: block; font-size: 30px; font-weight: 700; color: var(--gh-gold); line-height: 1; margin-bottom: 8px; }
.gh-facts span { font-size: 13px; line-height: 1.4; display: block; }
.gh-collage { position: relative; height: 520px; margin-bottom: 40px; }
.gh-collage img { position: absolute; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.5); border: 4px solid rgba(255,255,255,.06); }
.gh-collage__a { left: 0; top: 0; width: 52%; height: 78%; transform: rotate(-3deg); z-index: 2; }
.gh-collage__b { right: 0; top: 8%; width: 62%; height: 52%; transform: rotate(2deg); z-index: 1; }
.gh-collage__c { right: 6%; bottom: 0; width: 42%; height: 48%; transform: rotate(4deg); z-index: 3; }
@media (max-width: 991px) { .gh-collage { height: 420px; } }
@media (max-width: 600px) { .gh-collage { height: 340px; } .gh-facts { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .gh-facts > div { padding: 14px 8px; } }

/* ---------- Fotostrip ---------- */
.gh-strip { padding: 0 0 100px; background: var(--gh-bg-2); }
.gh-strip__track { display: flex; gap: 16px; width: max-content; animation: gh-marquee 50s linear infinite; }
.gh-strip:hover .gh-strip__track { animation-play-state: paused; }
.gh-strip img { height: 260px; width: auto; border-radius: 16px; object-fit: cover; filter: saturate(1.1); }
@keyframes gh-marquee { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .gh-strip img { height: 180px; } }

/* ---------- Praktisch ---------- */
.gh-info { padding: 90px 0; background: var(--gh-bg); }
.gh-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 767px) { .gh-info__grid { grid-template-columns: 1fr; } }
.gh-info__card { padding: 32px 28px; border-radius: 20px; background: var(--gh-card); border: 1px solid var(--gh-line); }
.gh-info__card > .fa { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #1a0f05; background: linear-gradient(160deg, #ffcf3f, #ff9822 55%, #f02419); margin-bottom: 18px; }
.gh-info__card h3 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
.gh-info__card p { font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
.gh-info__card em { color: rgba(255,255,255,.5); }
.gh .rl-link { color: var(--gh-gold); }
.gh .rl-link:hover { color: #fff; }

/* ---------- Slot CTA ---------- */
.gh-final { position: relative; padding: 130px 0 140px; text-align: center; isolation: isolate; }
.gh-final__bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; z-index: -2; }
.gh-final:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--gh-bg) 0%, rgba(12,10,20,.6) 35%, rgba(12,10,20,.6) 65%, var(--gh-bg) 100%), linear-gradient(110deg, rgba(255, 152, 34, .35), rgba(240, 36, 25, .35)); }
.gh-final h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.gh-final p { font-family: 'Lora', serif; font-style: italic; font-size: 19px; color: rgba(255,255,255,.85); margin: 0 0 34px; }
.gh-final__dates { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.gh-chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; backdrop-filter: blur(6px); transition: background .2s ease, color .2s ease, transform .2s ease; }
.gh-chip:hover, .gh-chip:focus { background: #fff; color: #1a0f05; transform: translateY(-2px); }
.gh-chip.is-soldout { opacity: .55; text-decoration: line-through; }

/* ---------- Sticky CTA (mobiel) ---------- */
.gh-sticky { display: none; }
@media (max-width: 767px) {
  .gh-sticky {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 998; display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-radius: 999px; color: #fff; background: linear-gradient(110deg, #ff9822, #f02419); box-shadow: 0 10px 30px rgba(240, 36, 25, .45); font-size: 14px;
  }
  .gh-sticky:hover, .gh-sticky:focus { color: #fff; }
}

/* Footer en Instagram-blok passend bij de donkere pagina */
body:has(.gh) .rl-section--tight { background: var(--gh-bg, #0c0a14); }
body:has(.gh) .rl-cta { background: #1c1728; border-color: rgba(255,255,255,.1); }
body:has(.gh) .rl-cta h3 { color: #fff; }
body:has(.gh) .rl-cta p { color: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
  .gh-hero__bg, .gh-beams span, .gh-hero__glow, .gh-title__big, .gh-strip__track, .gh-pulse:before, .gh-hero__scroll { animation: none !important; }
}