/* ticket.webrandca.com — public storefront
   Colours come from CSS custom properties written inline per organizer, so
   the same stylesheet renders every client's brand. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.15}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
.main{min-height:60vh;padding-bottom:64px}

/* ---------------------------------------------------------------- header */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:82px}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
/* Client logos carry the white label, so give them real room. object-fit keeps
   a wide wordmark and a square badge both intact inside the same box. */
.brand-logo{height:56px;width:auto;max-width:320px;object-fit:contain;object-position:left center}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);flex:none}
.brand-name{font-weight:770;font-size:20px;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;color:var(--muted)}
.head-nav a:hover{color:var(--text)}
.nav-find{font-weight:600;color:var(--accent)!important}
/* Platform bar, used when a platform logo is set: the WE Brand mark is drawn
   for dark grounds and must sit on black. Client bars keep their own theme. */
.site-head-dark{background:#000;border-bottom-color:#000}
.site-head-dark .brand-name{color:#fff}
.site-head-dark .head-nav{color:rgba(255,255,255,.62)}
.site-head-dark .head-nav a:hover{color:#fff}
@media (max-width:640px){
  .head-nav a:not(.nav-find){display:none}
  .head-inner{height:68px}
  .brand-logo{height:44px;max-width:210px}
  .brand-mark{width:29px;height:29px}
  .brand-name{font-size:17.5px}
}
@media (max-width:520px){.hero-logo{height:74px;max-width:260px}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;overflow:hidden;margin-bottom:44px;background:var(--surface);border-bottom:1px solid var(--line)}
/* A soft wash of the brand colour, so the band reads as designed rather than
   as a grey slab. Sits behind the text and never intercepts clicks. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 150% at 88% -20%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 62%),
    radial-gradient(90% 120% at -5% 110%, color-mix(in srgb,var(--accent) 11%,transparent), transparent 58%)}
/* padding-left/right must be restated: this shorthand would otherwise wipe
   the 20px that .wrap sets, and the hero text would sit flush to the edge. */
.hero-inner{position:relative;z-index:1;padding:66px 20px 58px;display:grid;gap:18px;justify-items:start}
.hero h1{font-size:clamp(31px,5.2vw,50px);font-weight:820;letter-spacing:-.035em;line-height:1.06;max-width:19ch}
.hero p{margin:0;color:var(--muted);font-size:17.5px;line-height:1.6;max-width:56ch}
.hero-logo{height:104px;width:auto;max-width:420px;object-fit:contain;object-position:left center;margin-bottom:4px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:750;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;flex:none}

/* Three plain promises under the hero copy. */
.hero-points{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:6px;padding:0;list-style:none;
  font-size:14px;color:var(--muted)}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* --------------------------------------------------------- section headers */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.section-head h2{font-size:20px;font-weight:760;letter-spacing:-.02em}
.section-head .count{font-size:13.5px;color:var(--muted);white-space:nowrap}
.section + .section{margin-top:52px}

/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,20,28,.04);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -12px rgba(16,20,28,.22);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Media tiles show the WHOLE image, never a cropped slice. The image is drawn
   with background-size:contain over a blurred, enlarged copy of itself, so a
   portrait or square photo keeps all four edges and the tile still looks full.
   The element's own background is suppressed; ::before is the blurred bed and
   ::after is the crisp image. */
.card-media{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden;
  background-color:var(--surface);
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));
  background-size:0 0;display:grid;place-items:center}
.card-media::before,.card-media::after{content:"";position:absolute;inset:0;
  background-image:inherit;background-position:center;background-repeat:no-repeat}
.card-media::before{background-size:cover;transform:scale(1.15);filter:blur(22px) brightness(.9) saturate(1.1)}
.card-media::after{background-size:contain}
.card-media-fallback{position:relative;z-index:2;font-size:54px;font-weight:800;color:color-mix(in srgb,var(--accent) 55%,transparent)}
.card-date{position:absolute;z-index:2;left:12px;top:12px;background:var(--surface);border-radius:10px;padding:6px 9px;
  display:grid;justify-items:center;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.card-date b{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.card-date i{font-style:normal;font-size:19px;font-weight:800;margin-top:3px}
.card-body{padding:16px 17px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-org{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card-body h3{font-size:18.5px;font-weight:740;letter-spacing:-.02em;line-height:1.25}
.card-meta{font-size:13.5px;color:var(--muted);line-height:1.45}
.card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.card-body > *:last-child.card-foot{margin-top:auto}
.price{font-weight:750;letter-spacing:-.01em}
.go{color:var(--accent);font-weight:640;white-space:nowrap;transition:transform .18s ease}
.card:hover .go{transform:translateX(3px)}

/* ------------------------------------------------------------ event page */
.event-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;padding:38px 0 30px}
@media (max-width:860px){.event-hero{grid-template-columns:1fr;gap:24px}}
/* Same no-crop treatment as the cards, at feature size. A 16:9 photo fills the
   frame edge to edge; anything taller or squarer is shown whole, centred, with
   the blurred bed filling the rest instead of the image being cut. */
.event-art{position:relative;isolation:isolate;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background-color:var(--surface);
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 25%,var(--surface)),var(--surface));
  background-size:0 0}
.event-art::before,.event-art::after{content:"";position:absolute;inset:0;
  background-image:inherit;background-position:center;background-repeat:no-repeat}
.event-art::before{background-size:cover;transform:scale(1.15);filter:blur(30px) brightness(.88) saturate(1.1)}
.event-art::after{background-size:contain}
.event-art-empty{display:grid;place-items:center}
.art-date{position:relative;z-index:2;display:grid;justify-items:center;line-height:1;color:color-mix(in srgb,var(--accent) 80%,var(--text))}
.art-date b{font-size:15px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.art-date i{font-style:normal;font-size:64px;font-weight:800;letter-spacing:-.04em;margin:8px 0 6px}
.art-date u{text-decoration:none;font-size:13px;letter-spacing:.2em;color:var(--muted)}
.event-title{font-size:clamp(26px,4vw,38px);font-weight:800;margin-bottom:8px}
.event-sub{color:var(--muted);font-size:17px;margin:0 0 18px}
.facts{display:grid;gap:12px;margin:22px 0}
.fact{display:flex;gap:12px;align-items:flex-start}
.fact-ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.fact-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fact-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fact-v{font-size:15.5px}
.prose{color:var(--text);font-size:15.5px;line-height:1.7}
.prose p{margin:0 0 12px}

/* ------------------------------------------------------------- ticket box */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.panel h2{font-size:19px;font-weight:750;margin-bottom:4px}
.panel-note{font-size:13.5px;color:var(--muted);margin:0 0 16px}
.tt{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.tt:first-of-type{border-top:0}
.tt-info{flex:1;min-width:0}
.tt-name{font-weight:680}
.tt-desc{font-size:13px;color:var(--muted)}
.tt-left{font-size:12px;color:var(--muted);margin-top:2px}
.tt-price{font-weight:700;white-space:nowrap}
.sold-out{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.qty{display:flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.qty button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--text);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.qty button:hover:not(:disabled){background:var(--line)}
.qty button:disabled{opacity:.3;cursor:default}
.qty output{min-width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.totals{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:7px;font-size:14.5px}
.totals .row{display:flex;justify-content:space-between}
.totals .grand{font-size:18px;font-weight:780;padding-top:7px;border-top:1px solid var(--line)}
.muted{color:var(--muted)}

/* ---------------------------------------------------------------- inputs */
label.f{display:grid;gap:6px;font-size:13.5px;font-weight:600;margin-bottom:14px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=url],select,textarea{
  font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);color:var(--text);width:100%;font-weight:400}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:96px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:15.5px;padding:14px 26px;border-radius:999px;
  background:var(--accent);color:#fff;transition:filter .15s,transform .1s;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--line);filter:none}
.btn-sm{padding:9px 16px;font-size:14px}

.flash{padding:12px 16px;border-radius:12px;margin:0 0 18px;font-size:14.5px;border:1px solid}
.flash-ok{background:#ecfdf3;border-color:#a7e8c0;color:#0d6b3d}
.flash-err{background:#fef2f2;border-color:#f6b8b8;color:#991b1b}
.flash-info{background:#eff6ff;border-color:#b9d7fb;color:#14508f}
body.dark .flash-ok{background:#0d2a1c;border-color:#1c5c3b;color:#8ee7b5}
body.dark .flash-err{background:#2c1414;border-color:#6b2626;color:#f7a8a8}
body.dark .flash-info{background:#11243b;border-color:#264a75;color:#9fc9f7}

/* --------------------------------------------------------------- tickets */
.order-head{padding:34px 0 8px}
.order-head h1{font-size:clamp(25px,4vw,34px);font-weight:800}
.ticket-list{display:grid;gap:18px;margin:24px 0}
.ticket{display:grid;grid-template-columns:1fr 218px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
@media (max-width:640px){.ticket{grid-template-columns:1fr}}
.ticket-main{padding:22px 24px;display:grid;gap:12px;align-content:start}
.ticket-accent{height:6px;background:var(--accent);grid-column:1/-1}
.ticket-ev{font-size:20px;font-weight:760;letter-spacing:-.02em}
.ticket-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14.5px}
.ticket-kv dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);align-self:center}
.ticket-kv dd{margin:0}
.ticket-qr{border-left:1px dashed var(--line);padding:20px 16px;display:grid;justify-items:center;align-content:center;gap:8px;background:var(--bg)}
@media (max-width:640px){.ticket-qr{border-left:0;border-top:1px dashed var(--line)}}
.ticket-qr svg{width:150px;height:150px;border-radius:8px;background:#fff;padding:6px}
.ticket-code{font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.badge{display:inline-block;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}
.badge-valid{background:#e7f8ee;color:#0d6b3d}
.badge-redeemed{background:#fff4e5;color:#92400e}
.badge-void{background:#fdeaea;color:#991b1b}
body.dark .badge-valid{background:#0d2a1c;color:#8ee7b5}
body.dark .badge-redeemed{background:#33240d;color:#f2c187}
body.dark .badge-void{background:#2c1414;color:#f7a8a8}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}

/* ---------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--line);padding:34px 0;font-size:13.5px;color:var(--muted);background:var(--surface)}
.foot-inner{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:baseline}
.site-foot b{color:var(--text);font-weight:700}
.site-foot a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.site-foot a:hover{text-decoration-color:currentColor}
.dot{margin:0 8px;opacity:.5}
.empty{text-align:center;padding:58px 24px;color:var(--muted);background:var(--surface);
  border:1px dashed var(--line);border-radius:18px}
.empty h2{font-size:20px;margin-bottom:8px;color:var(--text);font-weight:740}
.empty p{margin:0 auto;max-width:46ch;font-size:14.5px}

/* ----------------------------------------------------------------- print */
@media print{
  .site-head,.site-foot,.actions,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .main{padding:0}
  .ticket{border:1.2px solid #000;border-radius:12px;break-inside:avoid;page-break-inside:avoid;margin-bottom:14px;background:#fff}
  .ticket-qr{background:#fff;border-left:1.2px dashed #666}
  .ticket-accent{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ticket-kv dt{color:#555}
  @page{margin:12mm}
}