/* RajaClub — reference-led skin (poster archetype)
   Visual language only: neon magenta/purple stage, gold crown/coin accents,
   glossy gold CTA. No reference copy, no other brand names, no promo numbers. */

body.variant-poster {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(235, 81, 234, .28), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(199, 20, 226, .18), transparent 65%),
    #0a0014;
  color: var(--text);
}
body.variant-poster::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("assets/rajaclub-bg.webp");
  background-size: cover;
  background-position: center;
  opacity: .55;
  pointer-events: none;
}
body.variant-poster ::selection { background: var(--accent2); color: #1a0026; }

/* ---------- header ---------- */
.po-header {
  background: linear-gradient(180deg, rgba(26, 0, 45, .96), rgba(10, 0, 20, .92));
  border-bottom: 3px solid var(--accent2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.po-navrow { min-height: 78px; }
.po-brand-logo,
.po-navrow .brand-logo {
  height: 58px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(235, 81, 234, .55));
}
.po-nav a {
  color: var(--text);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 9px;
  opacity: .92;
}
.po-nav a:hover { color: var(--accent2); }
.po-band {
  background: linear-gradient(90deg, #f3d27f, #ffe9a8 45%, #e8b84b);
  color: #240030;
  border-top: 1px solid #fff2c4;
  font-weight: 800;
}

/* ---------- hero ---------- */
.po-hero {
  padding: 34px 0 0;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(235, 81, 234, .20), transparent 70%);
}
.po-kicker { color: var(--accent2); letter-spacing: .24em; font-weight: 800; }
.hero-logo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 6px;
}
.hero-brand-logo {
  height: 180px;
  max-height: 180px;
  width: auto;
  max-width: min(240px, 46vw);
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(235, 81, 234, .65))
    drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
}
.hero-logo-tag {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .24em;
  color: #240030;
  background: linear-gradient(180deg, #ffe9a8, #e8b84b);
  border: 1px solid #fff2c4;
  border-radius: 3px;
  padding: 4px 9px;
  font-weight: 900;
}
.po-hero-figure {
  margin: 18px 0 0;
  border: 3px solid var(--accent2);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 18px 45px rgba(0, 0, 0, .55),
    0 0 34px rgba(235, 81, 234, .30);
  overflow: hidden;
  background: #16002a;
}
.po-hero-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
body.variant-poster .po-hero .po-title {
  font-family: var(--display);
  color: transparent;
  -webkit-text-stroke: 2px var(--accent2);
  text-shadow: 0 0 26px rgba(235, 81, 234, .35);
  font-size: clamp(54px, 7vw, 100px);
  line-height: .9;
  margin-top: 16px;
}
.po-rule span:nth-child(1) { background: linear-gradient(90deg, #ffe9a8, #e8b84b); }
.po-rule span:nth-child(2) { background: linear-gradient(90deg, #ff7bf6, #b512d6); }
.po-rule span:nth-child(3) { border-color: var(--accent2); }
.po-deck { color: #e7d8f3; font-size: 16px; line-height: 1.7; }
.po-hero-actions .btn { text-transform: uppercase; letter-spacing: .06em; }
.po-arrow { color: var(--accent2); }
.po-strip { border-top: 3px solid var(--accent2); border-bottom: 1px solid var(--line); color: #cdb9dd; }
.po-strip b { color: var(--accent2); }

/* ---------- buttons ---------- */
.btn {
  font-weight: 900;
  letter-spacing: .04em;
  border-radius: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: linear-gradient(180deg, #ffe9a8 0%, #f3d27f 38%, #e8a51d 100%);
  color: #2a0438;
  border-color: #fff4cf;
  box-shadow:
    0 4px 0 #8a5a00,
    0 10px 24px rgba(243, 210, 127, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost {
  background: linear-gradient(180deg, #a327d6 0%, #6a0fa3 55%, #47066e 100%);
  color: #fff4e6;
  border-color: var(--accent2);
  box-shadow:
    0 4px 0 #2a0340,
    0 10px 24px rgba(0, 0, 0, .45);
}
.btn-ghost:hover { filter: brightness(1.1); }
.btn-lg { min-height: 52px; font-size: 15px; }
.btn-sm { min-height: 40px; font-size: 11px; padding: 0 13px; }

/* ---------- sections ---------- */
.section {
  border-top: 1px solid rgba(243, 210, 127, .16);
  background: linear-gradient(180deg, rgba(22, 0, 42, .55), rgba(10, 0, 20, .2));
}
.sec-head h2,
.sec-head .kicker { text-shadow: 0 2px 18px rgba(235, 81, 234, .35); }
.sec-head h2 { color: #fff4e6; }
.kicker { color: var(--accent2); }
.sec-head p { color: #cdb9dd; }
.po-pull {
  color: #fff4e6;
  border-left: 10px solid var(--accent2);
  text-shadow: 0 0 24px rgba(235, 81, 234, .3);
}
.po-mini-facts span,
.po-factgrid div { background: rgba(29, 5, 51, .7); border-color: rgba(243, 210, 127, .22); }
.po-mini-facts b,
.po-factgrid b { color: var(--accent2); }
.po-factgrid { border-top-color: var(--accent2); }

/* route cards */
.variant-poster .route-grid { border-top: 3px solid var(--accent2); }
.variant-poster .route-card {
  border-right: 1px solid rgba(243, 210, 127, .2);
  background: rgba(22, 0, 42, .35);
  transition: background .18s ease, transform .18s ease;
}
.variant-poster .route-card:hover { background: rgba(235, 81, 234, .14); transform: translateY(-2px); }
.variant-poster .route-card.primary {
  background:
    linear-gradient(180deg, rgba(235, 81, 234, .32), rgba(87, 26, 125, .22));
}
.variant-poster .route-card h3 { color: #fff4e6; }
.variant-poster .route-no { color: var(--accent2); }
.variant-poster .route-card p { color: #cdb9dd; }
.variant-poster .route-link { color: var(--accent2); }

/* activity cards from the brand's own H5 artwork */
.card-grid.variant-cards { gap: 14px; }
.promo-card {
  background: linear-gradient(180deg, rgba(38, 6, 66, .96), rgba(16, 0, 30, .96));
  border: 1px solid rgba(243, 210, 127, .34);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 0 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.promo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid rgba(243, 210, 127, .45);
  margin-bottom: 12px;
}
.promo-card .label,
.promo-card h3,
.promo-card p { padding-left: 16px; padding-right: 16px; }
.promo-card .label { color: var(--accent2); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.promo-card h3 { color: #fff4e6; font-size: 19px; margin: 4px 0 6px; }
.promo-card p { color: #c9b6d9; font-size: 13px; line-height: 1.65; }

/* FAQ */
.po-faq { border-top-color: var(--accent2); }
.po-faq h3 { color: #fff4e6; }
.po-faq p { color: #c9b6d9; }
.po-num { color: var(--accent2); }

/* footer */
.ed-footer, .po-footer, .site-footer {
  background: linear-gradient(180deg, rgba(16, 0, 30, .7), #080011);
  border-top: 3px solid var(--accent2);
}
.po-footer-mark { color: var(--accent2); text-shadow: 0 0 30px rgba(235, 81, 234, .35); }
.po-footer-row a { color: #cdb9dd; }
.po-footer-row a:hover { color: var(--accent2); }


/* ---------- showcase: six activity artworks ---------- */
.sec-showcase .h03-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.h03-tile {
  margin: 0;
  border: 1px solid rgba(243, 210, 127, .38);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 6, 66, .96), rgba(16, 0, 30, .96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}
.h03-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid rgba(243, 210, 127, .4);
}
.h03-tile figcaption {
  padding: 10px 14px;
  color: var(--accent2);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.h03-band {
  margin: 16px 0 0;
  border: 2px solid rgba(243, 210, 127, .36);
  border-radius: 12px;
  overflow: hidden;
}
.h03-band img { display: block; width: 100%; height: auto; }

/* ---------- mobile: one image, fixed dual CTA ---------- */
@media (max-width: 700px) {
  .po-navrow { min-height: 62px; }
  .po-brand-logo,
  .po-navrow .brand-logo { height: 52px; max-width: 190px; }
  .hero-brand-logo {
    height: 84px;
    max-height: 84px;
    max-width: 160px;
  }
  .hero-logo-tag { font-size: 8px; padding: 3px 7px; }
  .po-hero { padding: 22px 0 0; }
  .po-hero-figure { border-width: 2px; border-radius: 8px; }
  .po-hero-figure img { max-height: none; }
  .po-band .wrap span:last-child { display: none; }
  .po-band .wrap span:first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .sec-showcase .h03-tiles { grid-template-columns: 1fr 1fr; gap: 9px; }
  .h03-tile figcaption { padding: 7px 9px; font-size: 8px; }
  body.variant-poster .po-hero .po-title { font-size: clamp(46px, 13.5vw, 72px); margin-top: 14px; }
  .po-deck { font-size: 14px; }
  .po-hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .po-hero-actions .btn { width: 100%; }
  .po-strip { font-size: 8px; gap: 8px 14px; }
  .promo-card h3 { font-size: 17px; }
  .po-faq { grid-template-columns: 1fr; }
  body.variant-poster { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }

  body.variant-poster .bottom-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    gap: 8px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(20, 2, 34, .97), rgba(8, 0, 16, .99));
    border-top: 2px solid var(--accent2);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .55);
  }
  body.variant-poster .bottom-cta .btn {
    flex: 1;
    min-height: 50px;
    height: 50px;
    font-size: 13px;
    letter-spacing: .03em;
    border-radius: 8px;
  }
  body.variant-poster .bottom-cta .btn-ghost { border-color: var(--accent2); }
}

/* reduce-motion friendly */
@media (prefers-reduced-motion: reduce) {
  .variant-poster .route-card,
  .btn { transition: none !important; }
}