/* Events page: loaded after site.css, premium.css and products.css */

/* Hero: full-bleed night aerial with the copy on the dark sky */
.ev-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(620px, 88vh, 900px); padding-block: 0 clamp(56px, 8vw, 110px); overflow: hidden; background: #0c1024; color: #fff; }
.ev-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ev-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 30, .88) 0%, rgba(8, 12, 30, .6) 45%, rgba(8, 12, 30, .1) 80%), linear-gradient(180deg, rgba(8, 12, 30, 0) 55%, rgba(8, 12, 30, .8) 100%); }
.ev-hero-copy { max-width: 1200px; }
.ev-crumbs { justify-content: flex-start; color: rgba(255, 255, 255, .7); }
.ev-crumbs a { color: #fff; }
.ev-crumbs a:hover { color: #fff; }
.ev-hero h1 { max-width: 24ch; font-size: clamp(1.9rem, 3.4vw, 3.2rem); font-weight: 700; line-height: 1; line-height: 1.08; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.ev-hero h1 em, .ev-band h2 em { font-style: normal; color: #FF7A45; }
.ev-hero-copy > p { max-width: 54ch; margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.ev-pill { min-height: 52px; padding: 0 28px; background: #fff; color: var(--ink); font-size: 1.02rem; }
.ev-pill:hover { background: var(--orange); color: #fff; }
.ev-link { display: inline-flex; align-items: center; gap: 4px; font-size: 1.02rem; font-weight: 500; color: var(--navy); }
.ev-link > span { font-size: 1.3em; line-height: 1; transition: transform .3s ease; }
.ev-link:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.ev-link:hover > span { transform: translateX(2px); }
.ev-hero .ev-link, .ev-band .ev-link { color: #fff; }
.ev-hero .ev-link:hover, .ev-band .ev-link:hover { color: #fff; }

/* Event types: horizontally scrolling tall photo cards */
.ev-types { background: #fff; padding-bottom: clamp(56px, 7vw, 96px); }
.ev-types .pd-h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.ev-rail.is-loop .ev-list { scroll-snap-type: none; scroll-behavior: auto; }
.ev-rail.is-draggable { cursor: grab; }
.ev-rail.is-dragging { cursor: grabbing; }
.ev-rail.is-dragging .ev-list { scroll-snap-type: none; scroll-behavior: auto; }
.ev-rail { position: relative; }
.ev-list { gap: 18px; padding-bottom: 8px; }
.ev-list li { flex: none; }
.ev-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; width: clamp(280px, 30vw, 380px); height: clamp(440px, 46vw, 560px); overflow: hidden; border-radius: 28px; background: #0c1024; color: #fff; }
.ev-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.ev-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 30, 0) 30%, rgba(8, 12, 30, .78) 62%, rgba(8, 12, 30, .95) 100%); }
.ev-card.is-contain { background: var(--bg-soft); color: var(--ink); }
.ev-card.is-contain img { inset: 24px 0 auto; height: 58%; object-fit: contain; }
.ev-card.is-contain::before { content: none; }
.ev-card:hover img { transform: scale(1.03); }
.ev-card-copy { padding: 26px 28px 30px; }
.ev-card h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.035em; color: inherit; }
.ev-card p { margin: 10px 0 14px; font-size: .97rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.ev-list a.ev-link { display: inline-flex; flex-direction: row; width: auto; padding: 0; border-radius: 0; text-align: left; }
.ev-card .ev-link { color: #fff; font-size: .95rem; }
.ev-card-copy { text-shadow: 0 1px 14px rgba(8, 12, 30, .5); }
.ev-card.is-contain .ev-card-copy { text-shadow: none; }
.ev-card.is-contain p { color: var(--grey); }
.ev-card.is-contain .ev-link { color: var(--navy); }
.ev-rail .range-arrow { top: 50%; }

/* Planning guide */
.ev-plan { background: var(--bg-soft); }
.ev-plan .pd-h2 { margin-bottom: 16px; }
.ev-plan-lead { max-width: 56ch; margin-bottom: clamp(32px, 4.5vw, 56px); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--grey); }
.ev-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ev-rules li { padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: #fff; }
.ev-rule-n { font-size: clamp(2.6rem, 4.6vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--orange); font-variant-numeric: tabular-nums; }
.ev-rule-u { margin-top: 6px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ev-rule-d { margin-top: 10px; font-size: .97rem; line-height: 1.55; color: var(--grey); }
.ev-example { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: baseline; margin-top: 20px; padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--navy); color: #fff; }
.ev-example-k { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ev-example-t { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(255, 255, 255, .92); }
.ev-example-t strong { font-weight: 700; color: #fff; }

/* Picks */
.ev-picks .pc { background: var(--bg-soft); }

/* Steps */
.ev-steps { background: #fff; padding-top: 0; }
.ev-step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.ev-step-list li { padding-top: 24px; border-top: 1px solid #d6d9e2; }
.ev-step-n { font-size: clamp(2.2rem, 3.2vw, 3rem); font-weight: 700; letter-spacing: -.04em; color: var(--orange); }
.ev-step-list h3 { margin-top: 12px; font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ev-step-list p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--grey); }

/* Event day: sticky photo that follows the step being read */

/* Night band */
.ev-band { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(520px, 60vw, 720px); overflow: hidden; background: #0c1024; color: #fff; text-align: center; }
.ev-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ev-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 12, 30, .62); }
.ev-band-copy { max-width: 860px; }
.ev-band h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.ev-band p { margin: 18px auto 20px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, .88); }

/* Event day storyboard: four tall frames, photographs and short films side by side */
.ev-story { padding-block: clamp(56px, 8vw, 100px); background: var(--bg-soft); }
.ev-story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; list-style: none; }
.ev-story-frame { position: relative; border-radius: 26px; overflow: hidden; background: #0c1024; }
.ev-story-media { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ev-story-when { margin: 18px 0 6px; font-size: .88rem; font-weight: 600; color: var(--orange-text); }
.ev-story-grid h3 { margin: 0 0 10px; max-width: 16ch; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.ev-story-text { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--grey); }

@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
  .ev-card img, .ev-link > span { transition: none; }
  .ev-card:hover img { transform: none; }
}
@media (max-width: 1024px) {
  .ev-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ev-hero-vid { display: none; }
  .ev-film { border-radius: 20px; }
  .ev-reels { grid-template-columns: 1fr; }
  .ev-story-grid { grid-template-columns: 1fr; }
  .ev-hero { min-height: 640px; }
  .ev-hero::before { background: linear-gradient(180deg, rgba(8, 12, 30, .45) 0%, rgba(8, 12, 30, .75) 45%, rgba(8, 12, 30, .92) 100%); }
  .ev-rules, .ev-step-list { grid-template-columns: 1fr; }
  .ev-example { grid-template-columns: 1fr; }
  .ev-card { width: 280px; height: 440px; }
}

@media (max-width: 1000px) and (min-width: 721px) {
  .ev-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ev-plan-lead:has(+ .ev-plan-cta) { margin-bottom: 0; }
.ev-plan-cta { margin: clamp(22px, 2.6vw, 30px) 0 clamp(32px, 4.5vw, 56px); }

/* Touch screens have no hover, so the hero's quote button and phone number show their orange straight away */
@media (hover: none) {
  .ev-hero .ev-pill { background: var(--orange); color: #fff; }
  .ev-hero .ev-pill:active { background: #d9481a; }
  .ev-hero .ev-link.hero-call, .ev-hero .ev-link.hero-call > span { color: #FF7A45; }
}
/* touch: the script settles the row on a card after each swipe (js/rail.js), so native snapping is off */
.ev-rail.is-touch .ev-list { scroll-snap-type: none; }