/* ============================================================
   LiQUiD Festival — Tickets page styles
   ============================================================
   Extracted from liquid-festival/assets/css/style.css
   (2026-08-25 unification)

   This file contains only the styles needed for the /tickets/
   page. It is loaded conditionally on the festival host only.

   CSS variables are aliased to the mobius-storefront tokens
   (--ms-*) where they overlap, and defined locally where they
   do not.
   ============================================================ */

/* ----------------------------------------------------------------- tokens */

:root {
  /* Festival colour tokens — aliased to mobius-storefront where possible.
     The mobius palette (design.css) uses --ms-*, the festival uses bare
     names. This file bridges the gap so the tickets CSS works without
     rewriting every selector. */

  /* Colours — mobius already defines these via --ms-* tokens, but the
     tickets CSS references them by bare names. Provide them here. */
  --ink:    var(--ms-ground, #0b0f16);
  --ink-2:  var(--ms-surface, #151b26);
  --ink-3:  #111631;
  --mist:   var(--ms-heading, #f3f6fb);
  --foam:   rgba(255, 255, 255, .72);
  --gold:   #d9b36a;

  /* Festival gradient — matches the player's own gradient (--ms-grad).
     The mobius gradient is identical, so alias it. */
  --teal:   #2fd4ff;
  --violet: #3b5bff;
  --pink:   #8a4cff;
  --amber:  #ff8a3c;
  --grad:   var(--ms-grad, linear-gradient(115deg, var(--teal), var(--violet) 38%, var(--pink) 68%, var(--amber)));

  /* Typography — already loaded by mobius-sf-fonts, just alias the names. */
  --font-d: var(--ms-font-display, "Space Grotesk", system-ui, sans-serif);
  --font-b: var(--ms-font-body, "Inter", system-ui, sans-serif);
  --font-s: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Easing — matches design.css button transitions. */
  --ease-l: cubic-bezier(.23, 1, .32, 1);
}

/* ----------------------------------------------------------------- tickets */

/* ---------- tickets ladder: VIP villa rows ---------- */
.tier-vhead {
  font-family: var(--font-d);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.tier .v-ctas {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* live remaining-count on add-on cards */
.card.addon .a-left {
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: .35rem;
}

/* Section headings: balance the lines instead of stranding one word, and
   keep the kicker small with wide tracking. */
.shead h2 {
  text-wrap: balance;
}

/* ========== BLOCK OVERRIDES ==========
 * These overrides map Gutenberg block class names to the
 * CSS structure expected by the festival tickets page.
 * The blocks use different class names than the original
 * shortcode markup, so we bridge the gap here.
 */

/* Tier rows: map block structure to CSS expectations */
.tier-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.tier-info h3 {
  font-family: var(--font-d);
  letter-spacing: .06em;
  font-size: 1.02rem;
  margin: 0;
}

.tier-info p {
  font-size: .8rem;
  color: var(--foam);
  opacity: .8;
  margin: .2rem 0 0;
}

.tier-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.tier-price .price {
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}

/* Add-on cards: map .addon-card to .addon structure */
.addon-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .45s var(--ease-l), border-color .35s, background .35s;
}

.addon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .25);
}

.addon-card h4 {
  font-size: 1.05rem;
  letter-spacing: .06em;
  margin: 0 0 .7rem;
}

.addon-card p {
  font-size: .86rem;
  color: var(--foam);
  margin: 0 0 1.4rem;
  flex: 1;
}

.addon-card .price {
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* CTA band: ensure proper structure */
.cta-band {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}

.cta-band .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 15, .68);
  z-index: 1;
}

.cta-band > [class*="wp-block-group"] {
  position: relative;
  z-index: 2;
}

/* Ensure WooCommerce product buttons work in tiers */
.tier .wp-block-woocommerce-product-button {
  margin-top: .5rem;
}

/* Fix column widths for tier rows */
.tier > [class*="wp-block-columns"] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tier > [class*="wp-block-columns"] > [class*="wp-block-column"]:first-child {
  flex: 0 0 60%;
}

.tier > [class*="wp-block-columns"] > [class*="wp-block-column"]:last-child {
  flex: 0 0 40%;
  text-align: right;
}

/* Section headings */
.ladder-section .shead,
.addons-section .shead,
.flat-tiers-section .shead,
.villa-section .shead {
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Add-on grid layout */
.addons-section > [class*="wp-block-columns"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Special pricing section */
.flat-tiers-section {
  margin-top: 3rem;
}

/* Villa section */
.villa-section {
  margin-top: 3rem;
}

/* Hero section */
.page-hero--tight {
  position: relative;
  z-index: 5;
}

.page-hero--tight .kicker {
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-hero--tight .chrome-text {
  font-family: var(--font-d);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 600;
  margin: .5rem 0;
}

.page-hero--tight .lead {
  font-size: 1.05rem;
  color: var(--foam);
  margin: 1rem 0 0;
}

/* Ensure all sections have proper spacing */
.ladder-section,
.addons-section,
.flat-tiers-section,
.villa-section {
  padding: 4rem 0;
}

/* Fix for WooCommerce product button styling */
.wp-block-woocommerce-product-button .wp-block-button__link {
  font-family: var(--font-d);
  font-size: .9rem;
  padding: .8rem 1.5rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all .3s ease;
}

.wp-block-woocommerce-product-button .btn-primary .wp-block-button__link {
  background: var(--grad);
  color: white;
  border: none;
}

.wp-block-woocommerce-product-button .btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.wp-block-woocommerce-product-button .btn-primary .wp-block-button__link:hover {
  background: linear-gradient(120deg, rgba(47, 212, 255, .8), rgba(59, 91, 255, .8));
  transform: translateY(-2px);
}

.wp-block-woocommerce-product-button .btn-ghost .wp-block-button__link:hover {
  background: var(--gold);
  color: #03202e;
}