/* ===================================================================
   HK Tango Challenge 2024 — per-event theme ("Brick & Seal").
   Loaded after style.css only on this event's pages (see _theme_css in
   app/public/routes.py); every rule is scoped under the body class so
   nothing here can leak into other events (HKTE 2026 keeps Blue Stage).

   Derived from the 2024 poster set (iCloud tango/hktc2024):
   - purple canvas (#9D3065, organizer pick) alternating with true black
     sections; the banner/nav/footer keep the warm near-black
   - distressed white stencil display type (the logo's grunge caps —
     Rubik Distressed is the closest Google Fonts cut)
   - cream body text (workshop poster), NOT pure white
   - accents: seal red (the 挑戰/探戈 chop), poster yellow, hot magenta
     (the "21-25 Nov" pill); olive green as a muted supporting tone
   =================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap");

.event-theme--hk-tango-challenge-2024 {
  /* canvas */
  --blue:      #9D3065; /* stage purple (organizer pick, 2026-09-03) — the
                           canvas and odd sections; even sections alternate
                           to the true-black --alt below */
  --blue-deep: #100A09; /* navbar, hero base, section menu, footer */
  --pc-teacher-bg: #100A09; /* private-class grid's pinned teacher column follows the canvas here */
  --alt:       #000000; /* alternating sections: true black (the logo's ground) */
  --on-blue:   #F3EBDD; /* cream, not white — poster body text */
  --on-blue-muted: #CDBFA9;

  /* translucent bands become warm glass lifted off the dark canvas */
  --band:       rgba(255, 235, 210, 0.07);
  --band-hover: rgba(255, 235, 210, 0.14);

  /* ink on light functional panels — warmed to match */
  --ink:      #2A1E18;
  --ink-soft: #6B584A;
  --surface:  #FFFFFF;
  --surface-tint: #F4EBDD;

  /* accents from the posters: seal red + yellow carry the contrast; the
     rules keep Blue Stage's red → yellow → azure gradient (--duo/--azure
     inherited from style.css), same design as HKTE 2026 */
  --red:    #C43A2B;
  --yellow: #FFC94D;

  --grad-sun: linear-gradient(135deg, var(--yellow), var(--red));

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);

  /* distressed stencil display type (logo look); body stays Barlow */
  --font-display: "Rubik Distressed", "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --font-hero: "Rubik Distressed", "Anton", "Arial Narrow", Impact, system-ui, sans-serif;

  --bs-body-bg: var(--blue);
  --bs-body-color: var(--on-blue);
}

/* cover-photo scrim: warm black, not the Blue Stage navy */
.event-theme--hk-tango-challenge-2024 .event-hero.has-cover {
  box-shadow: inset 0 0 0 100vmax rgba(16, 8, 5, 0.55);
}

/* Rubik Distressed is wider than Anton — ease the tracking so the big
   section titles don't overflow on phones */
.event-theme--hk-tango-challenge-2024 .event-section-title { letter-spacing: 0.03em; }

/* crew tiles: the name bar and hover details panel are navy in Blue
   Stage — re-tint them warm black here */
.event-theme--hk-tango-challenge-2024 .crew-label {
  background: linear-gradient(to top, rgba(24, 12, 6, 0.92) 30%, transparent);
}
.event-theme--hk-tango-challenge-2024 .crew-details { background: rgba(26, 14, 8, 0.96); }

/* the DJ TV wall: swap Blue Stage's gray-blue set for poster olive */
.event-theme--hk-tango-challenge-2024 .crew-tile:nth-child(3n) {
  --tv: #6B7045;
  --tv-dim: #3D4026;
  --tv-glow: rgba(154, 163, 96, 0.14);
}

/* the banner line under the logo ("HONG KONG TANGO CHALLENGE · dates") is
   Barlow elsewhere; here it takes the stencil display face like the
   section titles, so the whole hero speaks the logo's type */
.event-theme--hk-tango-challenge-2024 .event-hero-meta {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* the rainbow rule under the banner line runs much longer here — nearly the
   width of the line itself; section rules keep the base 10rem */
.event-theme--hk-tango-challenge-2024 .event-hero-rule { width: min(36rem, 84vw); }

/* the rules under the banner line and the section titles: poster purple
   (#9D3065) running into azure, with a matching LED glow */
.event-theme--hk-tango-challenge-2024 .event-hero-rule,
.event-theme--hk-tango-challenge-2024 .event-section-rule {
  background: linear-gradient(90deg, #9D3065 0%, #4FD3FF 100%);
  box-shadow: 0 0 10px rgba(157, 48, 101, 0.45), 0 0 22px rgba(79, 211, 255, 0.28);
}

/* the round logo sits a size larger in the banner */
.event-theme--hk-tango-challenge-2024 .event-hero-logo {
  width: min(60vw, 480px);
  max-height: min(46vh, 430px);
}