/* ============================================================================
   events.css — shared by events.html AND the individual event detail pages.
   Shared reset/tokens/fonts/navbar/footer live in default.css.
   Navy #16469c is the ONE accent (no gold). Plain HTML/CSS/JS, no libraries.

   Sections:  listing (head · upcoming · past grid · newsletters · follow)
              detail  (event hero · content · gallery · other events)
   ============================================================================ */

.events_page, .event_page { width: 100%; }


.ev_btn { display:inline-block; padding:.8rem 1.6rem; border-radius:8px; font:inherit; font-weight:600; font-size:.95rem; line-height:1; cursor:pointer; border:1.5px solid transparent; transition:background .2s,transform .15s,border-color .2s,color .2s; }
.ev_btn--primary { background:#16469c; color:#fff; }
.ev_btn--primary:hover { background:#0f2b5c; transform:translateY(-1px); }
.ev_btn--ghost { background:transparent; color:#16469c; border-color:#d6e0f0; }
.ev_btn--ghost:hover { border-color:#16469c; background:#f6f8fc; }
.ev_btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,70,156,.3); }

.ev_link { display:inline-flex; align-items:center; gap:.45rem; color:#16469c; font-weight:600; font-size:.92rem; text-decoration:none; }
.ev_link .ic { font-size:.8rem; transition:transform .2s; }
.ev_link:hover .ic { transform:translateX(3px); }

/* width helper */
.ev_head, .ev_sec_head, .ev_up_grid, .ev_past_grid, .ev_more_wrap,
.ev_news_inner, .ev_follow_inner, .evd_head, .evd_body, .evd_other_inner {
  width:82%; max-width:1120px; margin-left:auto; margin-right:auto;
}

/* ---------------------------------------------------------------- HEADER */
.ev_head { padding: calc(80px + clamp(1.75rem,4vw,3rem)) 0 clamp(1.25rem,2.5vw,2rem); }
.ev_head h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0; color:#141821; }
.ev_head_hl { color:#16469c; }            /* the highlighted word, as on the Partners page */
.ev_head_sub { margin:1rem 0 0; font-size:clamp(1.05rem,1.6vw,1.25rem); color:#5b6472; max-width:60ch; line-height:1.65; }

.ev_sec_head { margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.ev_sec_head h2 { font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:800; letter-spacing:-.02em; margin:0; color:#141821; }
.ev_sec_head p { margin:.75rem 0 0; color:#5b6472; font-size:1.02rem; max-width:60ch; }

/* ---------------------------------------------------------------- UPCOMING */
.ev_upcoming { padding: clamp(.5rem,1vw,1rem) 0 clamp(2rem,4vw,3rem); }
/* NOTE: `margin:0` here would override the margin-left/right:auto set by the
   width helper above, dropping this grid hard against the left edge while its
   own heading stayed centred. Zero only the vertical margins. */
.ev_up_grid { list-style:none; margin-top:0; margin-bottom:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.ev_up_card { display:flex; gap:1.25rem; background:#fff; border:1px solid #e7ebf1; border-left:4px solid #16469c; border-radius:14px; padding:1.5rem; transition:box-shadow .2s,transform .15s; }
.ev_up_card:hover { box-shadow:0 10px 28px rgba(10,40,90,.1); transform:translateY(-2px); }
.ev_up_when { flex:0 0 auto; text-align:center; min-width:74px; padding-right:1.25rem; border-right:1px solid #e7ebf1; display:flex; flex-direction:column; justify-content:center; }
.ev_up_month { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#16469c; }
.ev_up_day { font-size:1.5rem; font-weight:800; color:#141821; letter-spacing:-.02em; line-height:1.1; }
.ev_up_year { font-size:.8rem; color:#9aa4b2; }
.ev_up_body h3 { font-size:1.25rem; font-weight:700; margin:0 0 .5rem; color:#141821; }
.ev_up_meta { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; margin:0 0 1rem; font-size:.88rem; color:#5b6472; }
.ev_up_meta .ic { color:#9aa4b2; margin-right:.2rem; }
.ev_up_booth { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#16469c; background:#eef2fb; padding:.2rem .6rem; border-radius:999px; }
@media(max-width:760px){ .ev_up_grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- PAST GRID */
.ev_past { padding: clamp(2rem,4vw,3rem) 0; background:#fafbfc; border-top:1px solid #e7ebf1; }
/* Same as above: zero the vertical margins only, or the auto centring is lost. */
.ev_past_grid { list-style:none; margin-top:0; margin-bottom:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.ev_card { background:#fff; border:1px solid #e7ebf1; border-radius:14px; overflow:hidden; transition:box-shadow .2s,transform .15s,border-color .2s; }
.ev_card:hover { box-shadow:0 12px 30px rgba(10,40,90,.12); transform:translateY(-3px); border-color:#d6e0f0; }
.ev_card_link { display:block; text-decoration:none; color:inherit; }
.ev_card_media { display:block; aspect-ratio:16/10; overflow:hidden; background:#eef2fb; }
.ev_card_media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.ev_card:hover .ev_card_media img { transform:scale(1.04); }
.ev_card_body { display:block; padding:1.1rem 1.25rem 1.35rem; }
.ev_card_date { display:block; font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#16469c; }
.ev_card_title { display:block; font-size:1.05rem; font-weight:700; color:#141821; margin-top:.4rem; line-height:1.3; }
.ev_card_loc { display:block; font-size:.85rem; color:#5b6472; margin-top:.5rem; }
.ev_card_loc .ic { color:#9aa4b2; margin-right:.2rem; }
@media(max-width:900px){ .ev_past_grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ev_past_grid{ grid-template-columns:1fr; } }

.ev_more_wrap { text-align:center; margin-top:1.5rem; }

/* ---------------------------------------------------------------- NEWSLETTERS */
.ev_news { padding: clamp(2rem,4vw,3rem) 0; }
.ev_news_inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,4vw,4rem); align-items:center; }
.ev_news_copy h2 { font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:800; letter-spacing:-.02em; margin:0; color:#141821; }
.ev_news_list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ev_news_list a { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; background:#fff; border:1px solid #e7ebf1; border-radius:12px; text-decoration:none; color:#141821; font-weight:600; font-size:.95rem; transition:border-color .2s,box-shadow .2s; }
.ev_news_list a:hover { border-color:#c3d0e6; box-shadow:0 8px 20px rgba(10,40,90,.07); }
.ev_news_list a > .ic:first-child { color:#16469c; font-size:1.15rem; }
.ev_news_list span { flex:1; }
.ev_news_arrow { color:#c3d0e6; font-size:.8rem; transition:transform .2s,color .2s; }
.ev_news_list a:hover .ev_news_arrow { color:#16469c; transform:translateX(3px); }
@media(max-width:760px){ .ev_news_inner{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- FOLLOW */
.ev_follow { background:#16469c; }
.ev_follow_inner { padding:clamp(1.25rem,2.5vw,1.75rem) 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.ev_follow h2 { color:#fff; font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:700; margin:0; letter-spacing:-.01em; }
.ev_social { display:flex; gap:.75rem; }
.ev_social a { width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; font-size:1.2rem; text-decoration:none; transition:background .2s,transform .15s; }
.ev_social a:hover { background:#fff; color:#16469c; transform:translateY(-2px); }

/* ============================================================================
   EVENT DETAIL PAGE  (shared by the individual event pages)
   ============================================================================ */
.evd_hero { padding: calc(80px + clamp(2rem,5vw,4rem)) 0 clamp(1.5rem,3vw,2.5rem); }
/* default.css sets `a:hover { text-decoration: underline }`. Left alone, that
   underlines the arrow icon along with the text, which looks like a mistake.
   Colour change and a small arrow nudge carry the hover instead. */
.evd_back { display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600; color:#5b6472; text-decoration:none; margin-bottom:1.25rem; }
.evd_back:hover, .evd_back:focus-visible { color:#16469c; text-decoration:none; }
.evd_back .ic { font-size:.8rem; transition:transform .2s; }
.evd_back:hover .ic { transform:translateX(-3px); }
.evd_head h1 { font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; margin:0; color:#141821; max-width:22ch; }
.evd_meta { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem; font-size:.95rem; color:#5b6472; }
.evd_meta .ic { color:#16469c; margin-right:.35rem; }
.evd_banner { width:82%; max-width:1120px; margin:clamp(1.5rem,3vw,2.5rem) auto 0; border-radius:16px; overflow:hidden; background:#eef2fb; }
.evd_banner img { width:100%; height:auto; display:block; }

/* The article column is narrower than the banner and gallery on purpose: text
   is only comfortable to read at roughly 65-75 characters a line. It used to be
   a 70ch paragraph left-aligned inside a 1120px box, which left a third of the
   page empty on the right and read as unfinished. Now the column itself is the
   measure, and it sits centred between the full-width media above and below. */
.evd_body { padding: clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,3.5rem); max-width:74ch; }
.evd_body p { color:#3a4250; line-height:1.75; font-size:1.05rem; margin:0 0 1.35rem; }
.evd_body h2 { font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:800; letter-spacing:-.02em; color:#141821; margin:2rem 0 .85rem; }
.evd_body ul { margin:0 0 1.25rem; padding-left:1.2rem; }
.evd_body li { color:#5b6472; line-height:1.65; margin-bottom:.45rem; }

/* gallery (replaces the old OwlCarousel collage) */
/* ---------------------------------------------------------------- GALLERY
   Only used by pages with one or two photos. Three or more get the reel below.

   Deliberately plain: photos side by side at their own 2.50:1 shape, nothing
   clever. Two pictures do not need a carousel, and a grid built for eight makes
   two look like six are missing.

   The mosaic that used to live here is gone. It forced 2.50:1 photos into 3:2
   cells and cut 40% off each one, and every pattern it had for 3, 4, 6 and 8
   photos is now handled by the reel.
   -------------------------------------------------------------------------- */
.evd_gallery {
  width:82%; max-width:1120px; margin:0 auto clamp(2.5rem,5vw,3.5rem);
  display:flex; gap:20px;
}
.evd_gallery img {
  flex:1 1 0; min-width:0;
  aspect-ratio:2.504;                 /* the photos' real shape, so no crop */
  object-fit:cover; display:block;
  border-radius:12px; background:#eef2fb; cursor:zoom-in;
  transition:filter .2s ease;
}
.evd_gallery img:hover { filter:brightness(1.05); }
/* a lone photo shouldn't stretch the full width and act as a second banner */
.evd_gallery img:only-child { flex:0 1 auto; max-width:min(760px,100%); margin-inline:auto; }
@media(max-width:620px){ .evd_gallery { flex-direction:column; gap:12px; } }

/* ============================================================================
   GALLERY REEL — TEST, currently only on teledyne-lecroy-seminar-2026.html

   Three photos across, the middle one active. Cards keep the photos' own
   2.50:1 shape at every size, so nothing is ever cropped or squashed: to fit
   more on screen the card gets SMALLER, it never changes shape.

     1440px   3 cards at 440x176, 46px of the next one showing either side
     1280px   3 cards at 397x158
     1100px   3 cards at 341x136
     below that three would drop under 130px tall, so it steps to two, then one

   The active card lifts 10px and sits at full opacity. The rest stay down at
   30%, so the eye knows where it is without anything being hidden.
   ============================================================================ */
.evd_reel { width:100%; margin:0 0 clamp(2.5rem,5vw,3.5rem); }

.evd_reel_track {
  /* NOTE: viewport units, not percentages. padding-inline below is derived
     from --card, so a percentage would resolve against a width that --card
     itself determines and the browser settles on a smaller card. */
  --card: min(440px, 31vw);
  --gap: 20px;                    /* room to breathe; 14px read as cramped */
  display:flex; gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-inline:calc((100% - var(--card)) / 2);   /* lets the first and last centre */
  padding-block:16px 6px;                          /* room for the 10px lift */
  scrollbar-width:none;
}
.evd_reel_track::-webkit-scrollbar { display:none; }

.evd_reel_track img {
  flex:0 0 var(--card);
  width:var(--card); aspect-ratio:2.504; height:auto;
  object-fit:cover; display:block;
  border-radius:12px; background:#eef2fb;
  scroll-snap-align:center;
  /* a side photo slides over when clicked, the centre one opens larger, so the
     cursor changes to match */
  cursor:pointer;
  opacity:.3;
  /* 350ms felt sluggish: the highlight arrived long after the photo had. 180ms
     lands with the scroll instead of trailing it. */
  transition:opacity .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.evd_reel_track img.is-current {
  cursor:zoom-in;
  opacity:1;
  transform:translateY(-10px);
  box-shadow:0 14px 30px rgba(10,40,90,.18);
}

.evd_reel_dots { display:flex; justify-content:center; gap:.45rem; margin-top:.9rem; }
.evd_reel_dots button {
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:#c3d0e6; cursor:pointer; transition:background .2s, transform .2s;
}
.evd_reel_dots button[aria-current="true"] { background:#16469c; transform:scale(1.35); }
.evd_reel_dots button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,70,156,.3); }

/* two across once three would fall below ~130px tall */
@media(max-width:1099px){ .evd_reel_track { --card: min(430px, 42vw); } }
/* one across, with the neighbours peeking, on phones */
@media(max-width:700px){  .evd_reel_track { --card: 78vw; --gap:14px; } }

/* No automatic movement for anyone who has asked their system for less of it.
   The script checks the same thing before starting the timer. */
@media (prefers-reduced-motion: reduce) {
  .evd_reel_track { scroll-behavior:auto; }
  .evd_reel_track img { transition:none; }
  .evd_reel_track img.is-current { transform:none; }
}

/* lightbox */
.evd_lb { position:fixed; inset:0; background:rgba(13,18,32,.9); display:none; place-items:center; z-index:3000; padding:2rem; }
.evd_lb.open { display:grid; }
.evd_lb img, .evd_lb_fig img { max-width:100%; max-height:90vh; border-radius:10px; }
.evd_lb_fig { margin:0; display:grid; place-items:center; }
.evd_lb_close { position:absolute; top:1.25rem; right:1.5rem; width:40px; height:40px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.5rem; cursor:pointer; }
.evd_lb_close:hover { background:rgba(255,255,255,.3); }

/* other events strip on detail pages */
.evd_other { padding: clamp(2.5rem,5vw,4rem) 0; background:#fafbfc; border-top:1px solid #e7ebf1; }
/* .ev_past_grid is in the width helper at the top, which centres it at 82%.
   That is right on events.html where it is a direct section child, and wrong
   here, where .evd_other_inner already provides the column: it became 82% of
   82% and sat ~100px inside its own heading. Reset it for the nested case. */
.evd_other_inner .ev_past_grid { width:100%; max-width:none; margin-left:0; margin-right:0; }
.evd_other_inner h2 { font-size:clamp(1.4rem,2.8vw,1.9rem); font-weight:800; letter-spacing:-.02em; margin:0 0 1.5rem; color:#141821; }

@media (max-width:900px) {
  .ev_head, .ev_sec_head, .ev_up_grid, .ev_past_grid, .ev_more_wrap,
  .ev_news_inner, .ev_follow_inner, .evd_head, .evd_body, .evd_other_inner,
  .evd_banner, .evd_gallery { width:88%; }
}
@media (prefers-reduced-motion: reduce) {
  .ev_btn, .ev_card, .ev_card_media img, .ev_up_card, .ev_news_list a, .ev_social a, .evd_gallery img, .ev_link .ic { transition:none; }
}