/* Events — a state of the hero stage, not a separate page. Requires
   base.css, hero.css, about.css and services.css.

   Clicking `events` continues the chain about/services/products already
   run, one lane further: quad (the new fourth chain chevron added for this
   section — see hero.css) travels toward the open ground since there is no
   further chevron for it to land on (see `.hero.is-events` in hero.css).
   Front, mid and now back all vanish instantly rather than travelling,
   matching their exit for every other section that doesn't own their lane
   — back is newly hidden here for the first time (it did its own travel
   for `products`, landing on quad, and has nothing further to do). `contact`
   plays this last leg in reverse — see contact.css. hero.css still plays
   the fourth (`.arrow--far`) chevron's arrival the same way it does for
   about/services/products/contact — that part of the curtain is shared and
   unrelated to quad, which is a separate element.

   What fills the stage: a top-left title + lead paragraph, then a
   four-panel bento grid — **the same layout services.css uses**, on
   request ("copy the style of the services page to the event page"), not
   the three-card row products/events used before. Geometry (left/right/
   grid-top/grid-height) is copied by value from services.css's own
   --bento-left/--bento-right/--grid-top/--grid-height rather than read
   live off it, since each section's own stylesheet still owns only what's
   specific to it (see CLAUDE.md) — the two sections just happen to land on
   the same footprint now. No reference mockup exists for this section yet;
   the copy is still a drafted placeholder (see hero.html), replace once a
   reference is supplied — see CLAUDE.md. */

.hero {
  /* --events-left is a live calc off --shift-quad, not a bare literal, on
     request ("widen the column to left side, by the amount that the quad
     arrow went left side") — the same treatment products.css already gives
     --products-left off --shift-back. Entering `events`, quad travels
     `--shift-quad` (-7.1vw, hero.css's `.hero.is-events`) toward the open
     ground; tying the column's own left edge to it widens the column left
     by that same amount, landing around 26% rather than staying at the
     base 33.1% services itself uses.

     A further 3 points widened off the left edge on a later, laptop-only
     request (see the "Laptop tier" block below) — a follow-up "make the
     column widen to the left by 4%" was reverted the same session, since
     it was asked for the desktop tier specifically, which didn't exist
     yet at that point; not re-applied here since it was never confirmed
     against the tier that now exists.

     Desktop tier itself later widened 2 points off the left edge, on
     request ("make the column wider to the left by 2% only on desktop
     version") — the `- 2%` term below, additive with --shift-quad the
     same way the laptop tier's own `- 3%` term is. */
  --events-left: calc(33.1% + var(--shift-quad) - 2%);
  /* Reads about.css's --copy-left, which is deliberately a bare literal
     (not tied to --shift-front) so this keeps resolving to the stable
     41.11% regardless of which section is current — custom properties
     resolve by cascade at the element that reads them, so a --copy-left
     tied to --shift-front would evaluate with --shift-front's base 0cqw
     here (inside .is-events), not about's -9cqw, landing 9 points too far
     right. See about.css's own --copy-left comment.

     Widened on the right, same laptop-only request as the left-edge
     widening above (see the "Laptop tier" block below). */
  --events-right: calc(var(--copy-left) + var(--copy-width));
  /* Pushed down from 40.5% and shortened from 36.45% (bottom edge held near
     the same ~77% it was at before) after a third lead paragraph was added
     above the grid — three paragraphs no longer fit in the 18%-40.5% band
     without the last line running under the grid's top edge; on request
     ("make the bento boxes under them reduce its height"), the grid gives
     up that overlapping room rather than the paragraphs' own spacing being
     tightened. A first pass (46%/31%) cleared the overlap but left the last
     paragraph touching the grid's top edge (~0.5% gap, measured pixel-to-
     pixel); pushed a further 2.5% on request ("make more space between the
     last paragraphs and the bento grid, like on the other subpages") to
     land near services'/products' own ~2% text-to-grid gap. */
  --events-grid-top: 48.5%;
  --events-grid-height: 28.5%;
  --events-gutter: 0.8cqw;
  --events-card-pad: 1.9cqw;
}

/* ---------- Laptop tier ----------

   Laptop-only geometry (aspect <= 1.85:1 — see about.css's own "Laptop
   tier" block for the fuller rationale, first introduced there this
   session). Outside this range the section falls back to
   --events-left/--events-right just above, i.e. today's pre-this-session
   geometry. */
@media (max-aspect-ratio: 1.85/1) {
  .hero {
    /* On request ("widen the column 2% on the right and 3% on the
       left"). */
    --events-left: calc(33.1% + var(--shift-quad) - 3%);
    --events-right: calc(var(--copy-left) + var(--copy-width) + 2%);
  }
}

/* ---------- State ---------- */

.is-events .events-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--ease-fade) var(--delay-settle),
    visibility 0s linear var(--delay-settle);
}

/* `events` is now the section that travels — its own quad chevron carries
   its label toward the open ground, the same self-hiding-as-current-section
   pattern `.hero-nav__link--products`/`--services`/`--about` already use.
   hero.css's unconditional rule delays `opacity` for the *leaving*
   direction (so the label stays hidden until the chevron has slid home,
   rather than fading back into view mid-flight), so this rule restates the
   eased transition to keep entering's fade-out-while-travelling
   unchanged. */
.is-events .hero-nav__link--events {
  opacity: 0;
  pointer-events: none;
  /* --ease-move-quad (hero.css), not --ease-move: this label rides the
     quad chevron, whose own travel into `events` was slowed by 100ms on
     request, 2026-09-14 — matching the duration here keeps the label's own
     fade-out landing at the same moment the chevron itself stops moving,
     instead of finishing 100ms early. */
  transition: transform var(--ease-move-quad), opacity var(--ease-move-quad),
    color var(--ease-ui);
}

/* ---------- No-theatre exit ---------- */

/* Copied verbatim from products.css's own equivalents — front and mid have
   already done their one job each and stay gone. */
.is-events .arrow--front {
  opacity: 0;
  transition: none;
}

.is-events .arrow--mid {
  opacity: 0;
  transition: none;
}

/* Back is hidden here for the first time: it travelled for `products`,
   landing on quad, and has nothing left to do once quad itself starts
   travelling. Back's own base rule (hero.css) now lists `opacity` in its
   transition (added alongside this change, so it can ease back in
   scrolling backward out of events/contact into products) — here that has
   to be overridden back to `none`, matching `.arrow--front`/`--mid` above,
   or it would ease instead of vanishing instantly. */
.is-events .arrow--back {
  opacity: 0;
  transition: none;
}

/* ---------- Header ---------- */

/* Same top-left convention `.about__title`/`.services__title`/
   `.products__title` use (11.2% top). */
.events__title {
  position: absolute;
  left: var(--events-left);
  top: 11%;
  width: calc(var(--events-right) - var(--events-left));
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-heading);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}

/* Top matches about's copy-column top / services' and products' own
   --bento-top (18%), by value, not by variable. */
.events__head {
  position: absolute;
  left: var(--events-left);
  top: 18%;
  width: calc(var(--events-right) - var(--events-left));
  text-align: left;
}

.events__lead {
  margin: 1.4cqh 0 0;
  max-width: 100%;
  font-family: var(--font-utility);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--paper);
}

/* ---------- Grid ---------- */

/* Three panels now, not four — on request ("lets merge the to little boxes
   bcasue i wnat to add a vertical image"), merging what used to be two
   side-by-side small cards (stat + note/QR, each one column wide) into one
   card spanning both of their columns on the top row. Still the same
   4-column/2-row grid underneath (unchanged from services' own template),
   and still the same two-row shape on the right side that services' own
   grid uses — top row is the merged image, bottom row is the cta, on
   request ("it should be 2 rows, one the vertical [box] and one the cta") —
   only the merged card's own `grid-column` span changed, from 1 column to
   2; the cta card is back to its original span-2/row-flex shape,
   unchanged from before this card existed. */
.events__grid {
  position: absolute;
  left: var(--events-left);
  top: var(--events-grid-top);
  width: calc(var(--events-right) - var(--events-left));
  height: var(--events-grid-height);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Row ratio inverted from services' own 1.39fr/1fr (top row taller) on
     request ("make the icpa logo box height less and make the lets meet box
     height bigger") — the logo card only ever holds a centered, `contain`-
     fit mark, so it doesn't need the taller row services' own photo/text
     top row does; the cta gets the room instead. */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--events-gutter);
}

/* Opaque and square-cornered, like every other panel on the site — same
   rule as `.services-card`. */
.events-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--events-card-pad);
  background: var(--panel-gallery);
  box-shadow: 0 0.5cqh 0.9cqw rgba(var(--shadow-ink), 0.22);
}

/* Full-bleed photo, same treatment `.services-card--lead` uses. Now a
   link (`<a>`, not `<article>` — added 2026-09-16, on request, "put the
   link on it") out to the ICPA 2026 conference page, same external-link
   convention `.events-card--stat` already uses: `target="_blank"
   rel="noopener noreferrer"`, `text-decoration: none`, and the same
   `.products-card__open`-style image-scale hover/active (see below)
   rather than a background-darken, since like that card this is really
   just an image with a link wrapped around it. `:focus-visible` comes
   from base.css's global rule, nothing card-specific needed. */
.events-card--lead {
  --lead-photo-zoom: 1.2;
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
}

.events-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zoomed in permanently (not just on hover) via a static `transform:
   scale()` on top of `object-fit: cover` — on request ("basically zoom
   in more into the photo"), once `object-position: left center` alone
   still left the blue sponsor panel reading smaller than wanted. The
   card's own `overflow: hidden` clips the excess; the scale's default
   center transform-origin zooms further into whatever `object-position`
   already centered in the box, so the two work together rather than
   fighting. Hover/active keep their own small bump multiplied on top of
   this base zoom (`--lead-photo-zoom * 1.03` / `* 1.01`), not a flat
   1.03/1.01, so the interaction nudge is still perceptible after the
   base zoom instead of the base overriding it. Retune `--lead-photo-zoom`
   alone if the photo ever needs a different crop tightness — nothing
   else here depends on its exact value.

   A `35%` `object-position-x` (shifting off `left`'s 0% to crop out a
   strip of unrelated dark building photo that sits left of the blue
   panel in the source file, so the panel's own left edge would land
   flush with the box's) was tried and reverted same-session, on request
   — back to plain `left`. */
.events-card--lead .events-card__image {
  object-position: left center;
  transform: scale(var(--lead-photo-zoom));
  transition: transform var(--ease-ui);
}

.events-card--lead:hover .events-card__image {
  transform: scale(calc(var(--lead-photo-zoom) * 1.03));
}

.events-card--lead:active .events-card__image {
  transform: scale(calc(var(--lead-photo-zoom) * 1.01));
}

/* Merged from the two former side-by-side small cards (see the grid
   comment above), so it now spans both of their columns on the top row,
   rather than sitting one column wide. Still just the top row, not both —
   the cta keeps the bottom row (see below).

   Holds the ICPA logo, on request ("put the icpalogo in it") —
   `assets/design/images/events/icpa_logo.png`, a wide (1546x480) mark on a
   transparent ground. Not the same full-bleed `cover` treatment the
   lead/cta-adjacent photo cards use: a logo cropped by `cover` would clip
   the wordmark itself, unlike a photo where a crop just trims empty
   background — `object-fit: contain` avoids that crop while still letting
   the mark scale up to fill the box (see below).

   Padding was briefly zeroed (was the card's own default
   `--events-card-pad`) on request ("icpa logo should fill the box") —
   `--events-card-pad` is sized in `cqw` (tracks the stage's *width*), so
   once the row ratio change above made this card much shorter than it is
   wide, that same padding value ate most of the row's own height, leaving
   the `contain`-fit logo tiny in the middle of a mostly-empty white box.
   Zero padding let the image's own 100%/100% box (see
   `.events-card__image` above) reach the card's actual edges — which then
   put the logo's own top/bottom flush against the card border, reported
   back as a defect ("the image which has a logo on it at the top meets the
   edge of the box"). Settled on a small `cqh`-based padding instead of
   zero or the `cqw`-based default: `cqh` tracks the row's own (short)
   height rather than the stage's width, so it scales sensibly with this
   particular row instead of either extreme.

   Ground is white (`--paper`), on request ("make this box background to
   white") — was `--panel-gallery`'s own blue, on the reasoning that a
   transparent-PNG mark could sit on a colour field the same way `.logo-main`
   does elsewhere on this page; overruled once the actual logo's own colours
   (a blue/teal mark, grey wordmark — see the source PNG) turned out to read
   better against white than against the panel's blue, the same "paper
   plate" treatment the QR code briefly used before that card was merged
   away (see the dead QR history above). */
/* Now a link (`<a>`, not `<article>`) — on request ("icpa image should
   link to: https://icpa.org/") — out to ICPA's own homepage in a new tab,
   the same `target="_blank" rel="noopener noreferrer"` convention the cta
   card below uses for its own external link. `text-decoration: none` is
   needed now that this is an anchor; the image-scale hover/active treatment
   mirrors `.products-card__open`'s own (products.css) rather than the cta
   card's background-darken, since like that button this card is really
   just an image with a link wrapped around it. `:focus-visible` is covered
   by base.css's global rule, not restated here. */
.events-card--stat {
  grid-column: span 2;
  padding: 1.4cqh 1.5cqw;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  text-decoration: none;
}

/* Scaled up to fill the box, on request ("fit the box") — was a
   conservative fixed 60% width; now the shared 100%/100% box with
   `object-fit: contain` overriding the shared `cover`, so the mark scales
   up as large as it can go without cropping, letterboxed only on whichever
   axis its own 1546:480 aspect doesn't match the card's. `object-position:
   center` is `contain`'s own default and so redundant in principle, but is
   stated explicitly on request ("place the icpa logo vertically and
   horizontally centered in the box") since the surrounding padding/hover-
   scale changes made this card's exact centering worth pinning down
   rather than leaving implicit. */
.events-card--stat .events-card__image {
  object-fit: contain;
  object-position: center;
  transition: transform var(--ease-ui);
}

.events-card--stat:hover .events-card__image {
  transform: scale(1.03);
}

.events-card--stat:active .events-card__image {
  transform: scale(1.01);
}

.events-card__name {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-body);
  font-weight: normal;
  line-height: 1.15;
  color: var(--paper);
}

.events-card__meta {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--paper);
}

/* ---------- Call to action ---------- */

/* Bottom row, spanning the same two columns the merged image card spans on
   the top row (see the grid comment above) — unchanged from its original
   shape, name/meta beside the arrow glyph. Forward one lane in the chain,
   the same way services' own cta links to products — events' next lane is
   contact. */
.events-card--cta {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--events-card-pad);
  --events-card-pad: 1.5cqw;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-ui);
}

/* `.events-card--cta:hover` background and the `.events-card__go`
   plate/chevron (including its hover/active nudge) moved to base.css's
   "Card CTA chevron" section 2026-09-16 — byte-identical to
   `.services-card--cta`/`.services-card__go`, so shared from one place
   instead of duplicated per file. This rule (the CTA card's own layout)
   stays here since its `gap` reads a locally-scoped `--events-card-pad`
   override that `.services-card--cta` doesn't share the name of. */

.events-card__copy {
  display: flex;
  flex-direction: column;
  gap: 1.6cqh;
}

/* ---------- Mobile flow ---------- */

@media (max-width: 1024px), (max-aspect-ratio: 1/1) {
  .events__title,
  .events__head,
  .events__grid {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }

  .events__title,
  .events__head {
    padding: 0 5vw;
  }

  .events__title {
    padding-top: 6vh;
  }

  .events__grid {
    height: auto;
    padding: 3vh 5vw 5vh;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 3vh;
  }

  .events-card--lead,
  .events-card--stat,
  .events-card--cta {
    grid-column: auto;
    grid-row: auto;
  }

  .events-card--lead .events-card__image {
    aspect-ratio: 4 / 3;
  }

  .events-card--stat {
    aspect-ratio: 1546 / 480;
  }

  .events-card--cta {
    flex-direction: row;
  }

  /* Plain, non-interactive box on mobile/tablet — no link, no red arrow
     chevron (matching `.services-card--cta`'s own mobile/tablet treatment;
     about.js also skips the goTo() navigation for this card whenever
     `!stageQuery.matches`). */
  .events-card--cta {
    cursor: default;
    pointer-events: none;
  }

  .events-card__go {
    display: none;
  }
}

/* Tablet tier: same single-column stack as phone, above, with content
   running near-full-width (a flat 32px side gutter, not a centered
   narrower column — a wide, centered `max-width` column was tried first
   and reverted on request: it read as too much dead margin on a
   768-1024px screen) and grid/card spacing scaled up for the larger
   screen. First pass, no tablet reference exists yet. */
@media (min-width: 768px) and (max-width: 1024px) {
  .events__title,
  .events__head {
    padding: 0 32px;
  }

  .events__title {
    padding-top: 8vh;
  }

  .events__grid {
    padding: 4vh 32px 6vh;
    gap: 3.5vh;
  }
}