/* =====================================================================
   Eventos: the events hub and the 19 event pages. Prefixes: ev- (hub), evd- (event).
   Ported from the inline <style> block of the delivered 2026-10-05 pages,
   eventos.html lines 23-100 (T4, reviewed-pages-batch-4). The block is
   byte-identical across all 20 delivered files (one sha256 over 20 pages,
   7,604 B, 66 rules, 222 declarations), so it is taken once and shared.

   Faithful port. Nothing is retyped; 9 declarations were rewritten, all onto
   tokens whose value is identical:
     #fff -> var(--mb-white)      (3x, a light surface; the token is #ffffff)
     #fff -> var(--ms-on-dark)    (3x, a colour on the dark band; also #ffffff)
     999px -> var(--ms-radius-pill)   (2x; the token is exactly 999px)
     -4px -> var(--ms-lift)           (1x; the token is exactly -4px)
     0.5s -> var(--ms-dur-ui)         (2x, one declaration; the token is 0.5s)
   The last three restore the house form: components.css:186-188 already writes
   this same card motion as transform var(--ms-dur-ui) / translateY(var(--ms-lift)),
   and the delivery re-spelt it with literals.

   Three literals stay, each with its declared exemption below: the two #000
   mask-gradient stops (alpha, not colour) and the two #f6f3f2 / #f3efee
   fallbacks of --ms-surface-2, a custom property defined nowhere in this system
   or in the delivery, so the fallback is what renders and no token matches it.
   The 13 rgb() values are left as delivered: none of them equals a token
   (--ms-on-dark-soft is 0.74 against the delivered 0.72, --ms-on-dark-subtle 0.6
   against 0.62, --ms-line-on-dark 0.22 against 0.14), and inventing one is
   Mari's decision, not a port's. Geometry and duration literals without an
   exact token (1px, 2px, 4px, 0.9s, 0.4s, and the 1.1s of the animation
   shorthand, which page.css also keeps literal in its own four pg-fade rules)
   are left alone per the 2026-09-22 decision recorded in build/lint.py.

   Motion: compliant. Three transitions (transform, box-shadow, opacity), one
   animation - pg-fade, declared in page.css:219, which animates opacity and
   transform only, runs once (forwards, not infinite), and is switched off with
   the transitions in the delivered prefers-reduced-motion block at the foot of
   this file.

   Loads on the whole family and nowhere else, AFTER components.css, page.css
   and polish.css - the exact set, and the exact order, the delivered files link
   before this block. marble_current_page_key() resolves all 20 to `shared` (pg-
   sections, no tp-), which is a family key, not a page key, so the sheet is
   enqueued by name the way the template family's is rather than through the
   '/assets/css/' . $page . '.css' convention. It cannot meet templates.css:
   marble_enqueue_styles() returns inside the template branch.
   ===================================================================== */
/* ---------- Eventos (2026-10-05): hub with allies, forum cards and the executive meetings list; event pages ---------- */
@media (min-width: 64.01rem) {
	/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
	.ev-hero .pg-hero__media { inset-inline-start: 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
	.ev-hero .pg-hero__media img { object-position: 50% 45%; }
}
.ev-intro__allies { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.ev-intro__allies li { padding: 0.5rem 1rem; border-radius: var(--ms-radius-pill); border: 1px solid rgb(0 0 0 / 0.12); background: var(--mb-white);
	font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-soft); }
.ev-statement { margin: 0; max-width: 30ch; font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
	line-height: 1.12; letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.ev-statement strong { font-weight: 600; color: var(--ms-brand); }

.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.ev-card { display: flex; }
.ev-card__in { display: grid; grid-template-rows: auto 1fr; width: 100%; text-decoration: none; color: inherit; border-radius: 1.5rem; overflow: hidden;
	background: var(--mb-white); border: 1px solid rgb(0 0 0 / 0.08); box-shadow: 0 1.5rem 3rem -2.25rem rgb(30 12 16 / 0.45);
	transition: transform var(--ms-dur-ui) var(--ms-ease), box-shadow var(--ms-dur-ui) var(--ms-ease); }
.ev-card__in:hover, .ev-card__in:focus-visible { transform: translateY(var(--ms-lift)); box-shadow: 0 2rem 3.5rem -2.25rem rgb(30 12 16 / 0.55); }
.ev-card__in:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ev-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ms-ink); }
.ev-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ms-ease); }
.ev-card__in:hover .ev-card__img img { transform: scale(1.03); }
.ev-card__body { display: grid; align-content: start; gap: 0.6rem; padding: 1.4rem 1.5rem 1.6rem; }
.ev-card__meta { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.ev-card__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem); line-height: 1.15; color: var(--ms-ink); text-wrap: balance; }
.ev-card__d { margin: 0; font-size: var(--ms-body-sm); line-height: 1.55; color: var(--ms-ink-soft); }
.ev-card__go { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; font-family: var(--ms-font-label); font-weight: 600;
	font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink); }
@media (max-width: 64rem) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ev-grid { grid-template-columns: 1fr; } }

.ev-past { background: var(--ms-dark); color: var(--ms-on-dark); }
.ev-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.ev-row__in { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0;
	border-top: 1px solid rgb(255 255 255 / 0.14); text-decoration: none; color: inherit; }
.ev-row__in:focus-visible { outline: 2px solid var(--ms-on-dark); outline-offset: 4px; }
.ev-row__img { display: block; aspect-ratio: 4 / 3; border-radius: 0.9rem; overflow: hidden; background: rgb(255 255 255 / 0.06); }
.ev-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.4s ease; }
.ev-row__in:hover .ev-row__img img { opacity: 1; }
.ev-row__txt { display: grid; gap: 0.3rem; min-width: 0; }
.ev-row__meta { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.62); }
.ev-row__t { margin: 0; font-family: var(--ms-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--ms-on-dark); }
.ev-row__d { margin: 0; font-size: var(--ms-body-sm); line-height: 1.5; color: rgb(255 255 255 / 0.72); }
@media (max-width: 64rem) { .ev-list { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .ev-row__in { grid-template-columns: 5.5rem minmax(0, 1fr); } .ev-row__in .ms-cta__circle { display: none; } }

/* event page: dark hero with the photo framed on the right (the source photos are small for a full bleed) */
.evd-hero .pg-hero__media { display: none; }
.evd-hero .pg-hero__scrim { background: radial-gradient(55% 60% at 16% 46%, color-mix(in srgb, var(--ms-brand) 38%, transparent), transparent 72%),
	radial-gradient(40% 50% at 90% 90%, rgb(0 0 0 / 0.45), transparent 70%); }
.evd-hero__fig { position: absolute; z-index: 1; inset-inline-end: var(--ms-container-edge); inset-block: clamp(8.5rem, 17vh, 10.5rem) clamp(2.5rem, 7vh, 4.5rem);
	width: min(34vw, 34rem); margin: 0; border-radius: 1.5rem; overflow: hidden; background: rgb(255 255 255 / 0.06);
	box-shadow: 0 2.5rem 4rem -2.5rem rgb(0 0 0 / 0.8); opacity: 0; animation: pg-fade 1.1s var(--ms-ease) 0.4s forwards; }
.evd-hero__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64.01rem) {
	.evd-hero .pg-hero__content { width: min(36rem, 40vw); }
	.evd-hero .pg-hero__display { font-size: clamp(2.6rem, 1.2rem + 2.9vw, 4.4rem); }
}
@media (max-width: 64rem) {
	.evd-hero .pg-hero__content { padding-bottom: 2.5rem; }
	.evd-hero__fig { position: relative; inset: auto; width: auto; margin: 0 var(--ms-gutter) 3rem; aspect-ratio: 4 / 3; }
}
.evd-hero .pg-hero__meta { margin: 1.25rem 0 0; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm);
	letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.72); }
.evd-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); row-gap: 2rem; }
.evd-body__side { grid-column: 1 / span 4; }
.evd-body__main { grid-column: 6 / span 7; display: grid; gap: 1.1rem; }
.evd-body__main p { margin: 0; max-width: 62ch; font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.evd-list { margin: 1rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgb(0 0 0 / 0.1); }
.evd-list__label { margin: 0 0 0.9rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.evd-list ul { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
/* token-exempt: --ms-surface-2 is defined nowhere in this design system (0 definitions in tokens/, marble-child/ and the delivery's own assets/css/), so the fallback #f3efee is the value that actually renders: the pill behind each agenda item. No token carries #f3efee - the nearest, --mb-vino-01 (--ms-brand-tint), is #f2eeee, one step off on the red channel, so substituting it would change the rendered surface, and defining an --ms-surface-2 token is a token-layer decision (Sebastian and Mari), not a port decision. The delivered declaration is kept byte for byte and the gap is reported. Same precedent as the --ms-paper fallback in headhunting.css. */
.evd-list li { padding: 0.55rem 1rem; border-radius: var(--ms-radius-pill); background: var(--ms-surface-2, #f3efee); font-size: var(--ms-body-sm); color: var(--ms-ink); }
@media (max-width: 64rem) { .evd-body__side, .evd-body__main { grid-column: 1 / -1; } }
/* token-exempt: --ms-surface-2 is defined nowhere in this design system (0 definitions in tokens/, marble-child/ and the delivery's own assets/css/), so the fallback #f6f3f2 is the value that actually renders: the ground of the chronicle section. No token carries #f6f3f2 - the nearest, --mb-bone (--ms-ground), is #f6f6f6, off on the green and blue channels, so substituting it would change the rendered surface, and defining an --ms-surface-2 token is a token-layer decision (Sebastian and Mari), not a port decision. The delivered declaration is kept byte for byte and the gap is reported. Same precedent as the --ms-paper fallback in headhunting.css. */
.evd-chronicle { background: var(--ms-surface-2, #f6f3f2); }
.evd-chronicle .evd-list li { background: var(--mb-white); }
@media (prefers-reduced-motion: reduce) { .ev-card__in, .ev-card__img img, .ev-row__img img { transition: none; } .evd-hero__fig { animation: none; opacity: 1; } }