/* Event landing page (holiday-happy-hour/): the design handed over for the FinOps Holiday Happy
 * Hour. A dark hero over the sunset backdrop, with CSS string lights and snow and the sign-up
 * card beside the copy; then the timeline and the hosts on white. */

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: #000; color: #fff; padding: 8px 12px; border-radius: 6px; text-decoration: none;
}
.skip:focus { left: 16px; color: #fff; }

/* ───── hero ───── */

.ev-hero {
  position: relative; overflow: hidden; color: var(--white);
  background: #212121 url(/resources/assets/events/holiday-happy-hour-backdrop.jpg) center 35% / cover;
}
.ev-hero::before { content: ""; position: absolute; inset: 0; background: rgba(18, 18, 18, .74); }
.ev-snow {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 98%, transparent), radial-gradient(1px 1px at 28% 62%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff 98%, transparent), radial-gradient(1px 1px at 63% 74%, #fff 98%, transparent),
    radial-gradient(1.3px 1.3px at 78% 22%, #fff 98%, transparent), radial-gradient(1px 1px at 90% 58%, #fff 98%, transparent),
    radial-gradient(1.1px 1.1px at 6% 84%, #fff 98%, transparent), radial-gradient(1px 1px at 54% 90%, #fff 98%, transparent);
  background-size: 260px 260px;
}
.ev-lights { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; }
.ev-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev-lights path { fill: none; stroke: rgba(242, 240, 234, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ev-lights .bulb {
  position: absolute; width: 7px; height: 10px; margin: -1px 0 0 -3.5px;
  border-radius: 50% / 40% 40% 60% 60%; background: oklch(.86 .12 80);
  box-shadow: 0 0 6px 2px oklch(.86 .12 80 / .45), 0 0 18px 6px oklch(.86 .12 80 / .18);
}
.ev-lights .bulb.dim { opacity: .7; }

.ev-hero-grid {
  position: relative; padding: 104px 0 64px;
  display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center;
}
.ev-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ev-sponsor { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--bg); }
.ev-sponsor img { height: 22px; width: auto; display: block; }
.ev-eyebrow {
  margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 13px; line-height: 1.2;
  letter-spacing: .04em; text-transform: uppercase; color: var(--green-bright);
}
.ev-title {
  margin: 0; max-width: 11ch; font-family: var(--font-head); font-weight: 500;
  font-size: clamp(40px, 9vw, 72px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
}
.ev-lede { margin: 0; max-width: 560px; font-size: clamp(16px, 2.4vw, 18px); line-height: 1.5; font-weight: 500; color: var(--bg); text-wrap: pretty; }
.ev-venue { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--bg); }
.ev-jump { --btn-bg: var(--green-bright); --btn-fg: var(--ink); --btn-hover: #00B836; }
.ev-reg { max-width: 640px; margin: 0 auto; color: var(--ink); scroll-margin-top: 24px; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35); }

@media (min-width: 900px) {
  .ev-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding: 120px 0 88px; }
  .ev-reg { margin: 0; }
  .ev-jump { display: none; }
}

/* ───── sections ───── */

.ev-section { background: var(--white); padding: 64px 0; }
.ev-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.ev-hosts-s { padding-top: 0; padding-bottom: 120px; }

.ev-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.ev-tl li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; padding-bottom: 28px; position: relative; }
.ev-tl li::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--rule); }
.ev-tl li:last-child::before { display: none; }
.ev-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--green-bright); box-shadow: inset 0 0 0 5px var(--green-dark); margin-top: 2px; }
.ev-time { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--green-dark); }
.ev-tl h3 { margin: 8px 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ev-tl p:not(.ev-time) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.ev-note { margin: 8px 0 0; font-size: 15px; color: var(--body); }
@media (min-width: 760px) {
  .ev-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ev-tl li { grid-template-columns: 1fr; padding: 0; }
  .ev-tl li::before { left: 28px; right: -32px; top: 9px; bottom: auto; width: auto; height: 2px; }
  .ev-note { margin-top: 32px; }
}

.ev-hosts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ev-host { display: flex; align-items: center; gap: 16px; background: var(--bg); border-radius: 10px; padding: 16px; }
.ev-host-photo { width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden; }
.ev-host-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 30%; }
.ev-host-photo-zoom img { transform: scale(1.4); transform-origin: 50% 38%; }
.ev-host-name { margin: 0 0 4px; font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.ev-host-role { margin: 0; font-size: 15px; color: var(--body); }
@media (min-width: 760px) { .ev-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }