/* ==========================================================================
   Events — /acara
   --------------------------------------------------------------------------
   Loaded only on the events pages (head.php $EXTRA_CSS). A whole section's
   styles do not belong in the stylesheet every page on the site downloads.

   THE PALETTE IS MEASURED, NOT INVENTED.
   The first event's poster was sampled: the gold of the title and of the
   date/time/venue band clusters at #e0a830 / #d8a028 / #d8a840, and the field
   behind it at #001028. The site's own --royal-900 is #050f2b, within a few
   points of that field, so the navy here IS the site navy and only the gold is
   new — the site's --yellow (#fedb00) is a bright signal yellow and reading it
   next to the poster is what shows the difference.

   The gold is scoped to this file. It is the events section's accent, not a new
   brand colour, and nothing outside /acara may pick it up.
   ========================================================================== */

:root{
  --ev-gold:#dda52e;
  --ev-gold-lo:#a97d1c;
  --ev-gold-hi:#eecb84;
  --ev-navy:#050f2b;
  --ev-navy-2:#0a1c46;
  --ev-rule:rgba(221,165,46,.42);
}

/* ---------------------------------------------------------------- listing */
.evhead{
  position:relative;background:var(--ev-navy);color:#fff;overflow:hidden;
  padding:calc(var(--nav-h,76px) + 64px) 0 64px;
}
.evhead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ev-gold),transparent);
}
.evhead__inner{position:relative;z-index:2;max-width:760px}
.evhead h1{color:#fff;margin:.35em 0 .4em}
.evhead p{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.75;margin:0}
.evhead .crumbs a,.evhead .crumbs span{color:rgba(255,255,255,.6)}
.evhead .crumbs{color:rgba(255,255,255,.85)}

.evgroup{margin-top:8px}
.evgroup__t{
  display:flex;align-items:center;gap:16px;margin:0 0 24px;
  font-family:var(--display);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.evgroup__t::after{content:"";flex:1;height:1px;background:var(--line)}

.evlist{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.evcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.evcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ev-rule)}
.evcard--past{opacity:.72}
.evcard__media{position:relative;display:block;aspect-ratio:4/3;background:var(--ev-navy);overflow:hidden}
.evcard__media img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.evcard__date{
  position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;background:rgba(5,15,43,.88);
  border:1px solid var(--ev-rule);color:var(--ev-gold-hi);
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.06em;
}
.evcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:10px}
.evcard__kicker{
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ev-gold-lo);
}
.evcard__body h3{margin:0;font-size:1.18rem;line-height:1.35;color:var(--ink)}
.evcard__meta{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}
.evcard__foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.evcard__price{font-family:var(--display);font-weight:700;color:var(--ink)}
.evcard__price small{display:block;font-weight:500;color:var(--muted);font-size:.76rem;letter-spacing:.04em}

.evempty{
  border:1px dashed var(--line);border-radius:var(--r);padding:48px 24px;
  text-align:center;color:var(--muted);
}

/* status pill, shared by the listing and the detail page */
.evpill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid transparent;white-space:nowrap;
}
.evpill--open{background:rgba(13,116,72,.1);color:#0d7448;border-color:rgba(13,116,72,.22)}
.evpill--soon{background:rgba(221,165,46,.14);color:var(--ev-gold-lo);border-color:var(--ev-rule)}
.evpill--shut{background:var(--line-2);color:var(--muted);border-color:var(--line)}

/* the draft banner, pinned clear of the fixed site nav */
.evdraft{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#8c1d18;color:#fff;padding:10px 16px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.04em;
}

/* ------------------------------------------------------------ event hero */
.evhero{position:relative;background:var(--ev-navy);color:#fff;overflow:hidden;
  padding:calc(var(--nav-h,76px) + 56px) 0 0}
.evhero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 78% 12%,rgba(26,84,176,.42),transparent 62%),
             linear-gradient(180deg,#050f2b 0%,#071d49 62%,#050f2b 100%);
}
.evhero__inner{position:relative;z-index:2;display:grid;gap:48px;grid-template-columns:1.05fr .95fr;
  align-items:center;padding-bottom:56px}
.evhero .crumbs{color:rgba(255,255,255,.85);margin-bottom:22px}
.evhero .crumbs a{color:rgba(255,255,255,.62)}
.evhero .crumbs a:hover{color:var(--ev-gold-hi)}
.evhero__kicker{
  font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ev-gold);margin:0 0 14px;
}
.evhero h1{
  color:#fff;font-size:clamp(2rem,3.4vw,3rem);line-height:1.14;margin:0 0 18px;
  letter-spacing:-.01em;
}
.evhero__tagline{
  color:var(--ev-gold-hi);font-style:italic;font-size:1.06rem;line-height:1.7;margin:0 0 22px;
  max-width:34em;
}
.evhero__lead{color:rgba(255,255,255,.84);font-size:1.02rem;line-height:1.8;margin:0 0 26px;max-width:38em}
.evhero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.evhero__poster{
  position:relative;justify-self:center;width:100%;max-width:420px;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--ev-rule);box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.evhero__poster img{display:block;width:100%;height:auto}

/* the gold-framed fact band, the poster's own device */
.evfacts{position:relative;z-index:2;padding-bottom:56px}
.evfacts__frame{
  border:1px solid var(--ev-rule);border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  display:grid;grid-template-columns:repeat(3,1fr);
}
.evfact{padding:26px 24px;text-align:center;border-left:1px solid rgba(221,165,46,.22)}
.evfact:first-child{border-left:0}
.evfact__ic{display:block;margin:0 auto 12px;width:26px;height:26px;color:var(--ev-gold)}
.evfact__t{
  display:block;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ev-gold);margin-bottom:8px;
}
.evfact__v{display:block;color:#fff;font-size:1.02rem;line-height:1.5;font-weight:600}

/* -------------------------------------------------------------- the body */
.evbody{display:grid;gap:48px;grid-template-columns:1.35fr .65fr;align-items:start}
.evprose h2{font-size:1.5rem;margin:0 0 16px}
.evprose h3{font-size:1.1rem;margin:28px 0 10px}
.evprose p{color:var(--body);line-height:1.85;margin:0 0 16px}

.evspeaker{
  border:1px solid var(--line);border-left:3px solid var(--ev-gold);
  border-radius:var(--r-sm);background:var(--tint);padding:24px 26px;
}
.evspeaker__t{
  font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ev-gold-lo);margin:0 0 10px;
}
.evspeaker__n{font-family:var(--display);font-size:1.06rem;line-height:1.5;color:var(--ink);margin:0 0 6px}
.evspeaker__r{color:var(--muted);margin:0;font-size:.95rem}

/* the sticky booking rail */
.evbook{
  position:sticky;top:calc(var(--nav-h,76px) + 24px);
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.evbook__top{background:var(--ev-navy);color:#fff;padding:20px 24px}
.evbook__top .evpill{background:rgba(255,255,255,.1);color:var(--ev-gold-hi);border-color:var(--ev-rule)}
.evbook__body{padding:22px 24px 24px}
.evtickets{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.evticket{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.evticket__n{display:block;font-weight:600;color:var(--ink)}
.evticket__note{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.evticket__p{display:block;font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--ink);margin-top:8px}
.evticket__p--tbc{font-size:1rem;font-weight:600;color:var(--muted)}
.evbook .btn{width:100%;justify-content:center}
.evbook__note{color:var(--muted);font-size:.86rem;line-height:1.6;margin:14px 0 0}
.evseats{color:var(--muted);font-size:.88rem;margin:0 0 14px}
.evseats b{color:var(--ink)}

/* ------------------------------------------------- registration + payment */
.evpanel{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow-sm);padding:28px;
}
.evpanel + .evpanel{margin-top:24px}
.evpanel__t{
  font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--ink);
  margin:0 0 6px;
}
.evpanel__s{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0 0 22px}

.evsplit{display:grid;gap:32px;grid-template-columns:1.3fr .7fr;align-items:start}

.evfield{margin-bottom:18px}
.evfield label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:.95rem}
.evfield .req{color:#b3261e;margin-left:3px}
.evfield input[type=text],.evfield input[type=email],.evfield input[type=tel],
.evfield select,.evfield textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-xs);
  font:inherit;color:var(--ink);background:#fff;transition:border-color .18s ease,box-shadow .18s ease;
}
.evfield input:focus,.evfield select:focus,.evfield textarea:focus{
  outline:none;border-color:var(--ev-gold);box-shadow:0 0 0 3px rgba(221,165,46,.16);
}
.evfield textarea{min-height:110px;resize:vertical}
.evfield small{display:block;color:var(--muted);font-size:.84rem;margin-top:6px}
/* The payment slip field.
   A file input cannot be told what is already in it, so the chosen filename and
   any refusal are printed underneath it — otherwise a registrant whose form came
   back has no way to tell whether their slip survived the bounce. */
.evfield input[type=file]{
  display:block;width:100%;font:inherit;font-size:.94rem;color:var(--ink);
  padding:11px 12px;border:1px solid rgba(11,29,58,.18);border-radius:10px;
  background:#fff;cursor:pointer
}
.evfield input[type=file]:focus{outline:2px solid var(--ev-gold-lo);outline-offset:1px}
.evfield input[type=file]::file-selector-button{
  font:inherit;font-size:.88rem;font-weight:600;margin-right:12px;cursor:pointer;
  padding:7px 14px;border:0;border-radius:7px;
  background:rgba(11,29,58,.06);color:var(--ink)
}
.evfield input[type=file]::file-selector-button:hover{background:rgba(221,165,46,.22)}
.evslipname{color:var(--ink)!important;word-break:break-all}
.evslipname b{font-weight:600}
.evsliperr{color:#b3261e!important;font-weight:600}
.evslipname[hidden],.evsliperr[hidden]{display:none!important}

.evfield--check{display:flex;gap:11px;align-items:flex-start}
/* 20px, not 17: this is the consent tick and the one control on the form a
   thumb has to hit precisely. The label beside it is clickable too. */
.evfield--check input{margin-top:3px;flex:0 0 auto;width:20px;height:20px;accent-color:var(--ev-gold-lo)}
.evfield--check label{margin:0;font-weight:500;color:var(--body);line-height:1.65;font-size:.93rem}
.evgrid2{display:grid;gap:0 20px;grid-template-columns:1fr 1fr}

/* the chosen rate, as radio cards */
.evchoose{display:grid;gap:12px;margin-bottom:22px}
.evchoose__i{position:relative;display:block}
.evchoose__i input{position:absolute;opacity:0;pointer-events:none}
.evchoose__i span.box{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.evchoose__i input:checked + span.box{
  border-color:var(--ev-gold);background:rgba(221,165,46,.06);box-shadow:0 0 0 3px rgba(221,165,46,.13);
}
.evchoose__i input:focus-visible + span.box{outline:2px solid var(--royal-600);outline-offset:2px}
.evchoose__n{font-weight:600;color:var(--ink)}
.evchoose__note{display:block;color:var(--muted);font-size:.85rem;font-weight:400;margin-top:3px}
.evchoose__p{font-family:var(--display);font-weight:800;color:var(--ink);white-space:nowrap}

.evalert{border-radius:var(--r-xs);padding:14px 16px;margin-bottom:22px;font-size:.94rem;line-height:1.6}
.evalert--bad{background:#fdecea;border:1px solid #f3c3bd;color:#8c1d18}
.evalert--ok{background:#e7f5ee;border:1px solid #b6ded0;color:#0d5b3c}
.evalert--info{background:rgba(221,165,46,.1);border:1px solid var(--ev-rule);color:#6d5210}
.evalert ul{margin:8px 0 0;padding-left:20px}
.evalert li{margin:3px 0}

/* summary rail */
.evsum{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.evsum__top{background:var(--ev-navy);color:#fff;padding:18px 20px}
.evsum__top strong{display:block;font-family:var(--display);font-size:1.02rem;line-height:1.4}
.evsum__top span{display:block;color:var(--ev-gold-hi);font-size:.88rem;margin-top:5px}
.evsum dl{margin:0;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:11px 16px}
.evsum dt{color:var(--muted);font-size:.9rem}
.evsum dd{margin:0;text-align:right;color:var(--ink);font-size:.94rem;font-weight:600}
.evsum dd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;letter-spacing:.04em}
.evsum .amt{font-family:var(--display);font-size:1.16rem;font-weight:800}

.evbank{border:1px solid var(--ev-rule);border-radius:var(--r-sm);background:rgba(221,165,46,.05);padding:4px 18px}
.evbank dl{margin:0;padding:14px 0;display:grid;grid-template-columns:auto 1fr;gap:11px 16px}
.evbank dt{color:var(--muted);font-size:.9rem}
.evbank dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}

.evsteps{list-style:none;counter-reset:s;margin:0 0 22px;padding:0;display:grid;gap:14px}
.evsteps li{counter-increment:s;position:relative;padding-left:42px;color:var(--body);line-height:1.65}
.evsteps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--ev-navy);color:var(--ev-gold-hi);
  font-family:var(--display);font-size:.86rem;font-weight:700;
}

.evref{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--ev-navy);color:var(--ev-gold-hi);padding:7px 14px;border-radius:var(--r-xs);
  letter-spacing:.1em;font-size:1rem;
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .evhero__inner{grid-template-columns:1fr;gap:36px}
  .evhero__poster{max-width:360px;order:-1}
  .evbody{grid-template-columns:1fr;gap:36px}
  .evbook{position:static}
  .evsplit{grid-template-columns:1fr}
}
@media (max-width:760px){
  .evhead{padding:calc(var(--nav-h,68px) + 44px) 0 44px}
  .evhero{padding:calc(var(--nav-h,68px) + 36px) 0 0}
  .evhero__inner{padding-bottom:40px}
  .evhero h1{font-size:clamp(1.6rem,7vw,2.1rem)}
  /* The poster's three-across band becomes three stacked rows rather than three
     squeezed columns: at 390px the venue line is two words wide and the divider
     rules read as noise. */
  .evfacts__frame{grid-template-columns:1fr}
  .evfact{border-left:0;border-top:1px solid rgba(221,165,46,.22);padding:20px 18px}
  .evfact:first-child{border-top:0}
  .evlist{grid-template-columns:1fr;gap:22px}
  .evgrid2{grid-template-columns:1fr}
  .evpanel{padding:22px 18px}
  .evsum dl,.evbank dl{grid-template-columns:1fr;gap:4px}
  .evsum dd,.evbank dd{text-align:left;margin-bottom:8px}
  .evchoose__i span.box{flex-direction:column;align-items:flex-start;gap:8px}
}