/* VC4 blue version: the Events page (blue/events.html) in the Home style, with the reference site's events blocks
   (its events.html: upcoming event cards with a date tile, the stay-in-the-loop and can't-travel cards, the past
   events timeline by year and the recap player). Reference tokens written out in the VC4 palette (navy #02263F, teal
   #138E96, bright teal #3FC1C9, orange #EB552C, paper #F3F7FA, line #E3E7EE) and set in Lato. */

/* ---------- Sections: Home spacing, headings with their intro beside them ---------- */
html[data-blue] .ev-zone { padding: 56px 0; background: #fff; }
html[data-blue] .ev-zone.ev-past { background: #F3F7FA; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) { html[data-blue] .ev-zone { padding: 48px 0; } }
@media (max-width: 900px) { html[data-blue] .ev-zone { padding: 40px 0; } }
html[data-blue] .ev-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: 32px; }
html[data-blue] .ev-head h2.b-h2 { margin: 12px 0 0 !important; }
html[data-blue] .ev-head .section-sub { margin: 0; color: rgba(2, 38, 63, .75) !important; max-width: 520px; }
html[data-blue] .ev-zone .oversize-label { display: block; color: #138E96 !important; }
@media (max-width: 860px) { html[data-blue] .ev-head { grid-template-columns: 1fr; } }

/* ---------- Upcoming event cards (reference .up / .ucard) ---------- */
html[data-blue] .up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
html[data-blue] .ucard { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid #E3E7EE; box-shadow: 0 22px 44px -34px rgba(2, 38, 63, .35); }
html[data-blue] .ucard .imw { position: relative; }
html[data-blue] .ucard .im { position: relative; aspect-ratio: 16 / 8; border-radius: 24px 24px 0 0; overflow: hidden; background: #02263F; }
html[data-blue] .ucard .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
html[data-blue] .ucard:hover .im img { transform: scale(1.04); }
html[data-blue] .ucard .im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2, 38, 63, .55)); }
html[data-blue] .ucard .when { position: absolute; left: 22px; bottom: -30px; z-index: 2; width: 84px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -16px rgba(2, 38, 63, .4); text-align: center; overflow: hidden; }
html[data-blue] .ucard .when small { display: block; background: #EB552C; color: #fff; font: 900 10px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 7px 0; }
html[data-blue] .ucard .when b { display: block; font: 900 24px/1 'Lato', sans-serif; color: #02263F; padding: 12px 0 4px; letter-spacing: -.03em; }
html[data-blue] .ucard .when span { display: block; font: 700 10.5px/1 'Lato', sans-serif; color: rgba(2, 38, 63, .5); padding-bottom: 10px; }
html[data-blue] .ucard .tag { position: absolute; right: 16px; top: 16px; z-index: 2; font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
    background: rgba(2, 38, 63, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 11px; border-radius: 999px; }
html[data-blue] .ucard .bd { padding: 48px 28px 28px; display: flex; flex-direction: column; flex: 1; }
html[data-blue] .ucard h3 { font: 800 clamp(22px, 2.2vw, 28px)/1.15 'Lato', sans-serif; letter-spacing: -.03em; color: #02263F; margin: 0; }
html[data-blue] .ucard .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 14px; font: 600 14px/1.4 'Lato', sans-serif; color: rgba(2, 38, 63, .7); }
html[data-blue] .ucard .meta span { display: inline-flex; align-items: center; gap: 7px; }
html[data-blue] .ucard .meta svg { color: #138E96; }
html[data-blue] .ucard p { color: rgba(2, 38, 63, .75); font-size: 15.5px; line-height: 1.6; margin: 0; }
html[data-blue] .ucard .acts { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: auto; padding-top: 22px; }
html[data-blue] .ev-link { display: inline-flex; align-items: center; gap: 6px; font: 800 14px/1 'Lato', sans-serif; color: #138E96; text-decoration: none; }
html[data-blue] .ev-link:hover { color: #EB552C; }
@media (max-width: 860px) { html[data-blue] .up { grid-template-columns: 1fr; } }

/* ---------- Stay in the loop / Can't travel (reference .nt / .ncard) ---------- */
html[data-blue] .nt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; }
html[data-blue] .ncard { border-radius: 24px; padding: clamp(26px, 3vw, 40px); border: 1px solid #E3E7EE; background: #F3F7FA; }
html[data-blue] .ncard h3 { font: 800 clamp(20px, 2vw, 26px)/1.2 'Lato', sans-serif; letter-spacing: -.025em; color: #02263F; margin: 10px 0 8px; }
html[data-blue] .ncard p { color: rgba(2, 38, 63, .75); font-size: 15px; line-height: 1.6; margin: 0; }
html[data-blue] .ncard .newsletter-form--hs { max-width: 460px; margin-top: 18px; }
html[data-blue] .ncard.dk { background: linear-gradient(150deg, #02263F 0%, #0B3554 60%, #0E4A75 100%); border-color: #02263F; display: flex; flex-direction: column; align-items: flex-start; }
html[data-blue] .ncard.dk h3 { color: #fff; }
html[data-blue] .ncard.dk p { color: rgba(220, 236, 246, .85); margin-bottom: 22px; }
html[data-blue] .ncard.dk .oversize-label { color: #3FC1C9 !important; }
html[data-blue] .ncard.dk .b-mbtn { margin-top: auto; }
@media (max-width: 860px) { html[data-blue] .nt { grid-template-columns: 1fr; } }

/* ---------- Where we've been: the timeline by year (reference .past / .yr / .pcard) ---------- */
html[data-blue] .past { position: relative; display: grid; gap: 14px; }
html[data-blue] .yr { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: start; }
html[data-blue] .yr > b { position: sticky; top: 110px; font: 900 clamp(30px, 3.2vw, 44px)/1 'Lato', sans-serif; letter-spacing: -.04em; color: #02263F; padding-top: 22px; }
html[data-blue] .yr > div { display: grid; gap: 14px; }
html[data-blue] .pcard { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 14px; border-radius: 22px; border: 1px solid #E3E7EE; background: #fff; transition: border-color .3s, box-shadow .4s; }
html[data-blue] .pcard:hover { border-color: rgba(19, 142, 150, .35); box-shadow: 0 22px 44px -30px rgba(2, 38, 63, .4); }
html[data-blue] .pcard .im { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #E3F1F2, #ADDDF6); }
html[data-blue] .pcard .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-blue] .pcard .im.ph { display: grid; place-items: center; font: 900 22px/1 'Lato', sans-serif; color: #02263F; letter-spacing: -.03em; }
html[data-blue] .pcard small { font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #138E96; }
html[data-blue] .pcard h3 { font: 800 19px/1.25 'Lato', sans-serif; letter-spacing: -.02em; color: #02263F; margin: 8px 0 6px; }
html[data-blue] .pcard p { font-size: 14.5px; line-height: 1.55; color: rgba(2, 38, 63, .75); margin: 0; }
html[data-blue] .pcard .go { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; padding-right: 10px; }
html[data-blue] .pcard .go :is(a, button) { display: inline-flex; align-items: center; gap: 6px; font: 800 14px/1 'Lato', sans-serif; color: #138E96; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 6px 0; white-space: nowrap; }
html[data-blue] .pcard .go :is(a, button):hover { color: #EB552C; }
html[data-blue] .more-past { margin-top: 20px; padding-left: 148px; }
html[data-blue] .ev-more { font: 800 14px/1 'Lato', sans-serif; color: #02263F; background: #fff; border: 1px solid #D9E6EF; border-radius: 999px; padding: 13px 22px; cursor: pointer; transition: border-color .2s, color .2s; }
html[data-blue] .ev-more:hover { border-color: #EB552C; color: #EB552C; }
@media (max-width: 900px) { html[data-blue] .pcard { grid-template-columns: 150px minmax(0, 1fr); } html[data-blue] .pcard .go { grid-column: 2; flex-direction: row; align-items: center; gap: 18px; padding: 0; } }
@media (max-width: 640px) {
    html[data-blue] .yr { grid-template-columns: 1fr; gap: 10px; } html[data-blue] .yr > b { position: static; padding-top: 8px; }
    html[data-blue] .pcard { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; } html[data-blue] .pcard .go { grid-column: 1 / -1; }
    html[data-blue] .pcard h3 { font-size: 17px; } html[data-blue] .more-past { padding-left: 0; }
}

/* ---------- Recap player (reference .vm) ---------- */
html[data-blue] .vm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
html[data-blue] .vm.open { visibility: visible; opacity: 1; transition: opacity .35s ease; }
html[data-blue] .vm-bg { position: absolute; inset: 0; background: rgba(1, 22, 40, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-blue] .vm-box { position: relative; width: min(1100px, 100%, calc((100svh - 150px) * 16 / 9)); }
html[data-blue] .vm-v { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
html[data-blue] .vm-v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html[data-blue] .vm-x { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; cursor: pointer; }
html.vm-lock, html.vm-lock body { overflow: hidden; }
/* Home style fixes: eyebrows bold uppercase teal as on Home; the intro copy left-aligned under each heading; the card
   actions as plain links with double chevrons along the foot of the card (as on the resource cards), no button boxes */
html[data-blue] body:has(.ev-zone) main .oversize-label { font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .16em !important; }
html[data-blue] .ev-head { display: block; margin-bottom: 32px; }
html[data-blue] .ev-head .section-sub { margin: 14px 0 0; max-width: 680px; text-align: left; }
html[data-blue] .ucard .acts { justify-content: space-between; gap: 16px; padding-top: 16px; margin-top: auto; border-top: 1px solid #E3E7EE; }
html[data-blue] .ucard .bd > .acts { margin-top: auto; }
html[data-blue] :is(.ucard .ev-link, .pcard .go :is(a, button)) { display: inline-flex; align-items: center; gap: 5px; font: 800 13px/1 'Lato', sans-serif !important; color: #02263F !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; text-decoration: none; cursor: pointer; }
html[data-blue] :is(.ucard .ev-link, .pcard .go :is(a, button)) .ti { color: #138E96; font-size: 13px; transition: transform .25s ease; }
html[data-blue] :is(.ucard .ev-link, .pcard .go :is(a, button)):hover { color: #EB552C !important; }
html[data-blue] :is(.ucard .ev-link, .pcard .go :is(a, button)):hover .ti { color: #EB552C; transform: translateX(3px); }
html[data-blue] .pcard .go { align-self: end; padding-bottom: 6px; }
html[data-blue] .ev-more { display: inline-flex; align-items: center; gap: 6px; }
html[data-blue] .ev-more .ti { color: #138E96; font-size: 14px; }
html[data-blue] .ev-more:hover .ti { color: #EB552C; }
/* Upcoming cards: room between the copy and the hairline, Book a meeting on its own at the right */
html[data-blue] .ucard .bd > p { margin-bottom: 24px; }
html[data-blue] .ucard .acts { justify-content: flex-end; }
/* Past events: Event site in the teal of its chevrons, regular weight */
html[data-blue] .pcard .go a { font-weight: 400 !important; color: #138E96 !important; }
html[data-blue] .pcard .go a:hover { color: #EB552C !important; }
/* Show earlier events: the teal-to-navy gradient of the blue buttons */
html[data-blue] .ev-more { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important; background-position: 0 50%; color: #fff !important; border: 0 !important;
    box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45); transition: background-position .4s ease, transform .25s ease; }
html[data-blue] .ev-more .ti { color: #fff !important; }
html[data-blue] .ev-more:hover { background-position: 100% 50% !important; transform: translateY(-2px); color: #fff !important; }
/* Can't travel: a compact card that keeps to its content instead of stretching to the newsletter card */
html[data-blue] .nt { align-items: start; }
html[data-blue] .ncard.dk { padding: 22px 24px; border-radius: 20px; }
html[data-blue] .ncard.dk h3 { font-size: 19px; margin: 8px 0 6px; }
html[data-blue] .ncard.dk p { font-size: 14px; margin-bottom: 14px; }
html[data-blue] .ncard.dk .b-mbtn { margin-top: 0; padding: 10px 18px; font-size: 13px; }