/* =====================================================================
   Public front page (HomeController#show).

   Deliberately one fixed palette, not theme-aware: every surface here
   sits on a photograph — the backdrop is one, each card is one, and the
   detail panel is a white card laid over them. None of that should
   invert with the viewer's OS theme.

   Values set from config/initializers/front_page.rb arrive as custom
   properties on .fp-root (see HomeHelper#front_page_style_vars); the
   fallbacks below are only what renders if that is ever absent.
   ===================================================================== */

.fp-root {
  --fp-ink: #070707;
  --fp-on-dark: #ffffff;

  --fp-card: #ffffff;
  --fp-text: #12161d;
  --fp-text-mid: #48505f;
  --fp-text-dim: #6b7484;
  --fp-line: #cdd3dd;

  --fp-accent: oklch(0.40 0.16 258);
  --fp-accent-hover: oklch(0.34 0.16 258);
  --fp-accent-wash: oklch(0.955 0.022 258);
  --fp-on-accent: #ffffff;

  /* Kept shallow enough not to reach into the next card in the stacked
     (mobile) layout — see the gap on .fp-cards below, which is sized to
     clear this. A card's shadow should read as its own, not bleed into
     a shared band between cards. */
  --fp-shadow: 0 16px 28px -18px #000000b8, 0 2px 8px #00000073;

  --hero-saturation: 0;
  --hero-dim: 0.62;
  --card-w: 460px;
  --wing-w: 380px;
  --wing-tuck: 28px;
  --blurb-lines: 3;

  min-height: 100vh;
  background: var(--fp-ink);
  color: var(--fp-text);
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.fp-root a { color: inherit; }

.fp-root :focus-visible {
  outline: 2px solid var(--fp-on-dark);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Backdrop --------------------------------------------
   Pinned to the viewport rather than sized to the content, so the
   slideshow never re-crops or appears to zoom as the board below it
   changes height — the same trick the event checkout page uses.     */

.fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--fp-ink);
}

.fp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}
.fp-slide.is-live { opacity: 1; }

.fp-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Desaturated so the backdrop reads as a neutral ground rather than a
     second colour story. The slight overscale exists only to give the
     drift somewhere to travel. */
  filter: saturate(var(--hero-saturation));
  transform: scale(1.08);
}
/* Runs for the full hold time (set per-slide by the controller as
   --fp-drift-duration) rather than a fixed length, so it never gets
   cut off mid-motion and has to resume from an arbitrary point next
   time the slide is live — that mismatch was the source of the snap.
   Paused until the controller marks a slide live, and only ever reset
   to its start frame while still fully transparent. */
.fp-slide img { animation: fp-drift var(--fp-drift-duration, 13s) ease-in-out forwards paused; }
.fp-slide.is-live img { animation-play-state: running; }

.fp-root.no-drift .fp-slide img { animation: none; transform: scale(1); }

@keyframes fp-drift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.00) translate3d(0, -0.9%, 0); }
}

.fp-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 42% 30%, transparent 0%, oklch(0.08 0 0 / calc(var(--hero-dim) * 0.9)) 100%),
    linear-gradient(oklch(0.08 0 0 / var(--hero-dim)), oklch(0.08 0 0 / var(--hero-dim)));
}

/* ---------- Page ------------------------------------------------- */

.fp-page {
  position: relative;
  z-index: 1;
  padding: 0 clamp(20px, 4.5vw, 64px) 96px;
}

.fp-brandbar {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 38px 0 0;
}
.fp-wordmark {
  display: inline-flex;
  text-decoration: none;
}
.fp-logo {
  display: block;
  width: min(217px, 50vw);
  height: auto;
  filter: drop-shadow(0 1px 20px oklch(0.09 0 0 / 0.7));
}
.fp-settings {
  position: absolute;
  top: 38px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: oklch(1 0 0 / 0.85);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.fp-settings:hover,
.fp-settings:focus-visible {
  color: oklch(1 0 0);
  background-color: oklch(1 0 0 / 0.12);
}
.fp-settings svg {
  width: 20px;
  height: 20px;
}

/* ---------- Board ------------------------------------------------
   The artwork column is --card-w; the strip to its right is reserved
   for the panel that slides out of each card. Centring the pair, not
   the column, means the panel always has somewhere to go.           */

.fp-board {
  width: 100%;
  /* card_width + wing_width - wing_tuck */
  max-width: calc(var(--card-w) + var(--wing-w) - var(--wing-tuck));
  margin: 0 auto;
  padding-top: 26px;
}

.fp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 2px 14px;
  max-width: var(--card-w);
  min-height: 34px;
}
.fp-count {
  font-size: 0.82rem;
  color: color-mix(in oklab, var(--fp-on-dark) 68%, transparent);
  text-shadow: 0 1px 14px oklch(0.09 0 0 / 0.85);
}

/* The campus picker. White in every context: it lives on the photo. */
.fp-campus {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #12161d;
  background-color: #ffffff;
  border: 0;
  border-radius: 10px;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  box-shadow: 0 3px 12px oklch(0.09 0 0 / 0.35);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6.5 8 10.5 12 6.5' stroke='%2312161d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 15px 15px;
}
.fp-campus:hover { background-color: #f2f4f8; }

.fp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fp-cards { display: flex; flex-direction: column; gap: 32px; }

/* ---------- Card --------------------------------------------------
   Base (and touch) shape: one column — 16:9 artwork on top, detail
   beneath. The slide-out only switches on where there is room for it
   and a pointer that can hover.                                      */

.fp-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--fp-card);
  border-radius: 18px;
  box-shadow: var(--fp-shadow);
}

/* Event artwork arrives as finished design with the name and logo
   already set into it, so nothing of ours is drawn on top — no
   gradient, no overlaid title. */
.fp-shot {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: var(--fp-ink);
}
.fp-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fp-wing {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 20px 20px;
  border-radius: 0 0 18px 18px;
  background: var(--fp-card);
}

.fp-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--fp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fp-date {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: -4px;
}
.fp-blurb {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fp-text-mid);
}

.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-tag {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--fp-accent-wash);
  color: var(--fp-accent);
}

.fp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--fp-text-dim);
}
.fp-meta span { display: inline-flex; align-items: center; gap: 7px; }
.fp-meta svg { flex: none; opacity: .75; }

.fp-book {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--fp-accent);
  color: var(--fp-on-accent);
  transition: background-color .18s ease;
}
.fp-card:hover .fp-book { background: var(--fp-accent-hover); }

.fp-empty {
  max-width: var(--card-w);
  padding: 30px 4px;
  color: color-mix(in oklab, var(--fp-on-dark) 72%, transparent);
  text-shadow: 0 1px 14px oklch(0.09 0 0 / 0.85);
}
.fp-empty strong {
  display: block;
  color: var(--fp-on-dark);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.fp-foot {
  width: 100%;
  max-width: calc(var(--card-w) + var(--wing-w) - var(--wing-tuck));
  margin: 30px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--fp-on-dark) 62%, transparent);
  text-shadow: 0 1px 12px oklch(0.09 0 0 / 0.8);
}

/* ---------- Slide-out ---------------------------------------------
   Only where a pointer can hover and the strip actually fits. The
   panel is tucked behind the artwork (lower z-index) and slides out
   from under its right edge.

   BREAKPOINT 1 of 2 — keep in step with card_width + wing_width in
   config/initializers/front_page.rb.                                 */

@media (min-width: 920px) and (hover: hover) {
  .fp-card {
    width: var(--card-w);
    background: transparent;
    box-shadow: none;
  }
  .fp-shot {
    border-radius: 18px;
    box-shadow: var(--fp-shadow);
  }

  .fp-wing {
    position: absolute;
    z-index: 1;
    left: calc(100% - var(--wing-tuck));
    top: 0;
    width: var(--wing-w);
    height: 100%;
    gap: 8px;
    padding: 14px 22px 14px calc(var(--wing-tuck) + 16px);
    border-radius: 0 18px 18px 0;
    box-shadow: var(--fp-shadow);
    opacity: 0;
    transform: translateX(-26px);
    pointer-events: none;
    transition: opacity .3s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
  }
  .fp-card.is-open .fp-wing,
  .fp-card:hover .fp-wing,
  .fp-card:focus-within .fp-wing {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  .fp-wing .fp-blurb {
    font-size: 0.85rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: var(--blurb-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .fp-wing .fp-meta { font-size: 0.79rem; gap: 3px 12px; }
  .fp-wing .fp-book { font-size: 0.82rem; padding: 9px 20px; }

  /* Lift the open card so its panel is never clipped by the next one. */
  .fp-card:hover, .fp-card:focus-within { z-index: 5; }
}

/* BREAKPOINT 2 of 2 — keep in step with BREAKPOINT 1. */
@media (max-width: 919px), (hover: none) {
  .fp-board { max-width: 460px; }
  .fp-head, .fp-empty { max-width: none; }
  .fp-foot { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-root *, .fp-root *::before, .fp-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fp-slide.is-live img { transform: scale(1); }
}