/* ============================================================
   ORRA EVENT LANDING PAGE — styles for event-landing.php.
   Derived from bin/event-landing-page/index.html.

   Enqueued by the Template Include widget only on pages that
   render this template, versioned by the file's mtime.

   Scoping strategy (two layers, both deliberate):
   1. Every selector is scoped under the wrapper the widget emits
      for this template, .eti-tpl--theme-event-landing-php, so
      nothing here can reach the Elementor header/footer or any
      other part of the page. Tokens live on the wrapper, not
      :root, for the same reason.
   2. Every classname is prefixed `oel-` and every custom
      property is prefixed `--oel-` so unrelated site/Elementor
      rules for generic names (.card, .wrap, .section, .badge,
      .icon, --accent) cannot reach IN and restyle us either.

   Layer 1 alone would only protect the rest of the site from us.
   Layer 2 is what protects us from the rest of the site.
   ============================================================ */

@font-face { font-family:"ORRARoboto"; src:url("../lib/fonts/event-landing/roboto-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"ORRARoboto"; src:url("../lib/fonts/event-landing/roboto-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"ORRARoboto"; src:url("../lib/fonts/event-landing/roboto-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"ORRARoboto"; src:url("../lib/fonts/event-landing/roboto-700.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

.eti-tpl--theme-event-landing-php{
  /* design tokens — prefixed so site-level --accent etc. cannot collide */
  --oel-bg:#ffffff;
  --oel-surface:#f5f5f5;
  --oel-fg:#000000;
  --oel-muted:#8c8c8c;
  --oel-border:#dbdbdb;
  --oel-accent:#cd010d;
  --oel-accent-hover:color-mix(in srgb, var(--oel-accent) 84%, black);
  --oel-accent-active:color-mix(in srgb, var(--oel-accent) 72%, black);
  --oel-accent-bg:color-mix(in srgb, var(--oel-accent) 8%, white);
  --oel-accent-secondary:#f6ed41;
  --oel-font:"ORRARoboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --oel-radius:8px;
  --oel-line:1px;

  /* was `body { ... }` in the standalone mockup */
  font-family:var(--oel-font);
  font-size:16px;
  line-height:1.6;
  color:var(--oel-fg);
  background:var(--oel-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* was `* { box-sizing:border-box }` */
.eti-tpl--theme-event-landing-php,
.eti-tpl--theme-event-landing-php *,
.eti-tpl--theme-event-landing-php *::before,
.eti-tpl--theme-event-landing-php *::after{ box-sizing:border-box; }

/* element-level resets, now confined to the landing page subtree */
.eti-tpl--theme-event-landing-php h1,
.eti-tpl--theme-event-landing-php h2,
.eti-tpl--theme-event-landing-php h3,
.eti-tpl--theme-event-landing-php h4{
  margin:0;
  font-family:var(--oel-font);
  font-weight:700;
  line-height:1.15;
  color:var(--oel-fg);
  overflow-wrap:break-word;
}
.eti-tpl--theme-event-landing-php p{ margin:0; overflow-wrap:break-word; }
.eti-tpl--theme-event-landing-php img,
.eti-tpl--theme-event-landing-php svg{ max-width:100%; display:block; }
.eti-tpl--theme-event-landing-php a{ color:inherit; text-decoration:none; }
.eti-tpl--theme-event-landing-php a:focus-visible{ outline:3px solid var(--oel-accent); outline-offset:2px; border-radius:2px; }

.eti-tpl--theme-event-landing-php .oel-wrap{
  max-width:1120px;
  margin:0 auto;
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
}
.eti-tpl--theme-event-landing-php .oel-section{ padding:clamp(56px,8vw,96px) 0; }

.eti-tpl--theme-event-landing-php .oel-kicker{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:13px;
  font-weight:700;
  color:var(--oel-accent);
  margin-bottom:12px;
}
.eti-tpl--theme-event-landing-php .oel-kicker-inverse{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:13px;
  font-weight:700;
  color:var(--oel-accent-secondary);
  margin-bottom:16px;
}

/* buttons — foreground/background verified as a pair in every state */
.eti-tpl--theme-event-landing-php .oel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 24px;
  border-radius:var(--oel-radius);
  font-family:var(--oel-font);
  font-weight:700;
  font-size:16px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  border:var(--oel-line) solid transparent;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.eti-tpl--theme-event-landing-php .oel-btn:focus-visible{ outline:3px solid var(--oel-accent-secondary); outline-offset:2px; }
.eti-tpl--theme-event-landing-php .oel-btn-primary{ background:var(--oel-accent); color:#ffffff; border-color:var(--oel-accent); }
.eti-tpl--theme-event-landing-php .oel-btn-primary:hover{ background:var(--oel-accent-hover); border-color:var(--oel-accent-hover); color:#ffffff; }
.eti-tpl--theme-event-landing-php .oel-btn-primary:active{ background:var(--oel-accent-active); border-color:var(--oel-accent-active); }
/* Tertiary tier's middle step: used only when the hero shows three CTAs, so the
   ghost button can drop to third place instead of carrying second. Solid white
   reads louder than the brand red against a dark hero (17.4:1 vs 3.0:1), so the
   red label and leftmost position are what keep the primary button primary. */
.eti-tpl--theme-event-landing-php .oel-btn-inverse{ background:#ffffff; color:var(--oel-accent); border-color:#ffffff; }
.eti-tpl--theme-event-landing-php .oel-btn-inverse:hover{ background:var(--oel-accent-bg); border-color:var(--oel-accent-bg); color:var(--oel-accent-hover); }
.eti-tpl--theme-event-landing-php .oel-btn-inverse:active{ background:color-mix(in srgb, var(--oel-accent) 14%, white); border-color:color-mix(in srgb, var(--oel-accent) 14%, white); }
.eti-tpl--theme-event-landing-php .oel-btn-outline-inverse{ background:transparent; color:#ffffff; border-color:rgba(255,255,255,0.55); }
.eti-tpl--theme-event-landing-php .oel-btn-outline-inverse:hover{ background:rgba(255,255,255,0.14); border-color:#ffffff; color:#ffffff; }
.eti-tpl--theme-event-landing-php .oel-btn-outline{ background:var(--oel-bg); color:var(--oel-fg); border-color:var(--oel-border); }
.eti-tpl--theme-event-landing-php .oel-btn-outline:hover{ background:var(--oel-surface); border-color:var(--oel-muted); }
.eti-tpl--theme-event-landing-php .oel-btn-sm{ height:40px; padding:0 18px; font-size:14px; }

.eti-tpl--theme-event-landing-php .oel-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  background:var(--oel-surface);
  border:var(--oel-line) solid var(--oel-border);
  color:var(--oel-fg);
}
.eti-tpl--theme-event-landing-php .oel-badge-inverse{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 14px;
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,0.14);
  border:var(--oel-line) solid rgba(255,255,255,0.4);
  color:#ffffff;
  backdrop-filter:blur(4px);
}
.eti-tpl--theme-event-landing-php .oel-icon{
  flex:0 0 auto;
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ------------------------------------------------------------
   Hero.
   The image is the one per-event value, so the template passes
   it in as --oel-hero-image and everything else lives here.
   Height follows the content; min-height is only a floor for
   events with a short title and no excerpt.
   ------------------------------------------------------------ */
.eti-tpl--theme-event-landing-php .oel-hero{
  position:relative;
  min-height:min(500px,86vh);
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.86) 100%),
    var(--oel-hero-image, none) center 62% / cover no-repeat;
}
.eti-tpl--theme-event-landing-php .oel-hero__inner{
  width:100%;
  /* Clears the fixed site header (103px desktop, 94px mobile). */
  padding-top:120px;
  padding-bottom:clamp(40px,6vw,64px);
}
/*
 * Aim: one line wherever the title fits. 24ch at 72px is ~990px, most of
 * the 1040px content width, so titles up to ~25 characters set on one line
 * at desktop. When a title must wrap, `balance` evens the lines instead of
 * leaving one word stranded on the last.
 */
.eti-tpl--theme-event-landing-php .oel-hero__title{
  font-size:clamp(40px,6.2vw,72px);
  letter-spacing:-0.02em;
  color:#ffffff;
  max-width:24ch;
  margin-bottom:18px;
  text-wrap:balance;
}
/* Titles over 25 characters (flagged by the template): smaller type, and
   more characters per line so the box stays about the same width. One line
   holds ~35 characters at this size. */
.eti-tpl--theme-event-landing-php .oel-hero__title.is-long{
  font-size:clamp(32px,4.6vw,56px);
  max-width:30ch;
}
.eti-tpl--theme-event-landing-php .oel-hero__excerpt{
  font-size:clamp(17px,2vw,20px);
  color:rgba(255,255,255,0.92);
  max-width:64ch;
  line-height:1.55;
  margin-bottom:28px;
  text-wrap:pretty;
}
.eti-tpl--theme-event-landing-php .oel-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:32px;
}
.eti-tpl--theme-event-landing-php .oel-hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .eti-tpl--theme-event-landing-php .oel-hero__title{ margin-bottom:12px; }
  .eti-tpl--theme-event-landing-php .oel-hero__excerpt{ margin-bottom:20px; }
  .eti-tpl--theme-event-landing-php .oel-hero__badges{ margin-bottom:24px; }
  .eti-tpl--theme-event-landing-php .oel-hero__actions{ gap:10px; }
  /*
   * Buttons grow to fill each row: two short labels share a row, a long one
   * takes the full width. Labels never wrap (.oel-btn is nowrap), so a
   * strict two-per-row grid would overflow on real labels such as
   * "Volunteer Registration". 44px keeps the minimum comfortable tap target.
   */
  .eti-tpl--theme-event-landing-php .oel-hero__actions .oel-btn{
    flex:1 1 auto;
    height:44px;
  }
}

.eti-tpl--theme-event-landing-php .oel-card{
  background:var(--oel-bg);
  border:var(--oel-line) solid var(--oel-border);
  border-radius:var(--oel-radius);
  padding:24px;
}
.eti-tpl--theme-event-landing-php .oel-stat-tile{
  background:var(--oel-bg);
  border:var(--oel-line) solid var(--oel-border);
  border-radius:var(--oel-radius);
  padding:20px 22px;
}
.eti-tpl--theme-event-landing-php .oel-stat-num{
  font-family:var(--oel-font);
  font-weight:900;
  font-size:clamp(28px,3.4vw,38px);
  letter-spacing:-0.02em;
  color:var(--oel-fg);
  line-height:1;
}
.eti-tpl--theme-event-landing-php .oel-stat-label{
  margin-top:6px;
  font-size:13px;
  color:var(--oel-muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:700;
}

/* small uppercase label — was `.footer-head`, reused inside the detail cards */
.eti-tpl--theme-event-landing-php .oel-label{
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--oel-muted);
}

/* Anchor targets for the hero's "View Event Details" button. The site
   header is position:fixed (103px tall), so without this offset the
   linked section scrolls up underneath it. */
.eti-tpl--theme-event-landing-php #oel-key-details,
.eti-tpl--theme-event-landing-php #oel-details{ scroll-margin-top:120px; }

.eti-tpl--theme-event-landing-php .oel-grid-1{ display:grid; grid-template-columns:1fr; gap:16px; }
.eti-tpl--theme-event-landing-php .oel-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* Key Details stat tiles. Four-up by default; exactly three tiles get their
   own third-width row rather than leaving a ragged gap in a four-column grid. */
.eti-tpl--theme-event-landing-php .oel-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.eti-tpl--theme-event-landing-php .oel-stat-grid.is-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){
  .eti-tpl--theme-event-landing-php .oel-stat-grid,
  .eti-tpl--theme-event-landing-php .oel-stat-grid.is-3{ grid-template-columns:repeat(2,1fr); }
}

/* Event Details card values. Bare counts get stat-sized type so they read
   as figures rather than as a one-character sentence. */
.eti-tpl--theme-event-landing-php .oel-detail-value{ font-size:18px; font-weight:700; }
.eti-tpl--theme-event-landing-php .oel-detail-value.is-stat{ font-size:36px; line-height:1.1; letter-spacing:-0.02em; }

/* Sidebar links repeated as cards inside the Event Details grid. The button
   sits on the card's bottom edge so a card with no text still lines up with
   its neighbours. */
.eti-tpl--theme-event-landing-php .oel-link-card{
  border-top:4px solid var(--oel-accent);
  display:flex;
  flex-direction:column;
}
.eti-tpl--theme-event-landing-php .oel-link-card > .oel-btn{ margin-top:auto; }
.eti-tpl--theme-event-landing-php .oel-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.eti-tpl--theme-event-landing-php .oel-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){
  .eti-tpl--theme-event-landing-php .oel-grid-4{ grid-template-columns:repeat(2,1fr); }
  .eti-tpl--theme-event-landing-php .oel-grid-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .eti-tpl--theme-event-landing-php .oel-grid-4{ grid-template-columns:1fr 1fr; }
  .eti-tpl--theme-event-landing-php .oel-grid-2{ grid-template-columns:1fr; }
}

/* Long-form body copy from post_content. The element reset above zeroes
   p margins, so rhythm is restored explicitly here rather than relying on
   whatever the surrounding theme happens to set. */
.eti-tpl--theme-event-landing-php .oel-prose > * + *{ margin-top:16px; }
.eti-tpl--theme-event-landing-php .oel-prose ul,
.eti-tpl--theme-event-landing-php .oel-prose ol{ padding-left:1.4em; margin:0; }
.eti-tpl--theme-event-landing-php .oel-prose li + li{ margin-top:6px; }
.eti-tpl--theme-event-landing-php .oel-prose h2,
.eti-tpl--theme-event-landing-php .oel-prose h3,
.eti-tpl--theme-event-landing-php .oel-prose h4{ margin-top:28px; }
/* post_content often opens with its own heading — that one sits directly
   under the kicker and must not carry the mid-content heading offset. */
.eti-tpl--theme-event-landing-php .oel-prose > *:first-child{ margin-top:0; }
.eti-tpl--theme-event-landing-php .oel-prose a{ color:var(--oel-accent); text-decoration:underline; }

.eti-tpl--theme-event-landing-php .oel-about-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:40px;
  align-items:start;
}
@media (max-width:880px){
  .eti-tpl--theme-event-landing-php .oel-about-layout{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------
   Host-container neutralisation.
   The landing page manages its own full-bleed sections, so the
   wrapper carries no spacing of its own. The host container
   must also be full width with its padding zeroed — see the
   Event Landing Page section of AGENTS.md.
   ------------------------------------------------------------ */
.eti-tpl--theme-event-landing-php{ margin:0; }