/* ============================================
   Maternité — Single Événement (mat_evenement)
   ============================================ */

.mat-evt {
	color: var(--mat-bleu-fonce);
	font-family: var(--mat-font-sans);
}

/* ── Hero ── */

.mat-evt__hero {
	background: var(--mat-rose-clair);
	padding: 48px 0 64px;
	position: relative;
	overflow: hidden;
}

/* Le fil d'Ariane occupe sa propre rangee, pleine largeur (14/08/2026) : il
   etait dans la colonne de texte, ce qui poussait le titre 44px plus bas que
   l'image. « Aligner le fil d'Ariane a gauche » et « aligner le haut de
   l'image avec le haut du titre » se resolvent ensemble en le sortant. */
.mat-evt__hero-top {
	max-width: var(--mat-container-max);
	margin: 0 auto 6px;
	padding: 0 var(--mat-container-pad);
}
/* ⚠️ Le composant fil d'Ariane est centré par défaut (`justify-content:
   center`) : élargir son conteneur ne suffisait donc pas, le premier item
   démarrait toujours à x=343 au lieu de 24. « Aligner le fil d'Ariane à
   gauche » (14/08) demande les DEUX, le conteneur et l'alignement interne. */
.mat-evt__hero-top .mat-breadcrumb__list {
	justify-content: flex-start;
	text-align: left;
}

.mat-evt__hero-inner {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.mat-evt__hero-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Taille d'image alignee sur les deux maquettes du 14/08 (Maternite ET CHRU,
   « mettre la meme taille de l'image du heros ») : mesurees a 43 % de la
   largeur de contenu pour un ratio de 1,15. Sur un contenu de 1392px, cela
   donne 598x520 — l'image faisait 460x360, soit 33 % et un ratio de 1,28. */
.mat-evt__hero-image {
	flex-shrink: 0;
	width: 598px;
	max-width: 43%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--mat-shadow-soft);
}

.mat-evt__hero-image img,
.mat-evt__hero-image-placeholder {
	width: 100%;
	/* `aspect-ratio` et pas une hauteur fixe : la colonne se reduit sous 1100px,
	   la hauteur doit suivre sans recadrer davantage le sujet. */
	aspect-ratio: 598 / 520;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Decor vegetal jaune (14/08/2026). Hors flux et non cliquable : il ne doit
   jamais deplacer le contenu ni creer de debordement horizontal — d'ou
   l'`overflow: hidden` du hero. */
.mat-evt__hero { position: relative; overflow: hidden; }
.mat-evt__deco {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.mat-evt__deco img { display: block; width: 100%; height: auto; }
/* ⚠️ Le decor de GAUCHE est en bas, pas a hauteur du titre comme sur la
   maquette : la maquette a une marge laterale large, le site sert son contenu
   a 24px du bord. Pose au niveau du titre, il passait DERRIERE le texte
   (mesure du 21/09). En bas, il occupe le seul vide reel de la colonne. */
.mat-evt__deco--left  { left: -46px; bottom: -10px; width: 124px; }
.mat-evt__deco--right { right: -26px; bottom: 18px; width: 190px; transform: scaleX(-1); }
.mat-evt__hero-top,
.mat-evt__hero-inner { position: relative; z-index: 1; }

@media (max-width: 1100px) {
	.mat-evt__deco { display: none; }
}

.mat-evt__hero-image-placeholder {
	background: var(--mat-aplat-bleu-vert);
}

/* Breadcrumb */
.mat-evt__breadcrumb { margin-bottom: 4px; }

/* Titre — Coniferous script, bleu foncé, comme le reste du thème. */
.mat-evt__title {
	font-family: var(--mat-font-script);
	font-weight: 600;
	font-size: 56px;
	line-height: 1.05;
	color: var(--mat-bleu-fonce);
	margin: 0;
}

/* Méta : badge + texte + auteur */
.mat-evt__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.mat-evt__badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: 1px solid var(--mat-rose-blush);
	border-radius: var(--mat-radius-pill);
	font-size: 14px;
	font-weight: 600;
	color: var(--mat-rose-blush);
	background: transparent;
}

.mat-evt__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mat-bleu-fonce);
}

.mat-evt__meta-item svg { flex-shrink: 0; color: var(--mat-rose-blush); }

/* Prix / gratuité */
.mat-evt__price {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mat-bleu-fonce);
}

.mat-evt__price-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3FA535;
	display: inline-block;
}

/* Tarif payant (champ « Tarif / accès » renseigné avec autre chose que gratuit) :
   la pastille perd son vert — un feu vert sur un événement payant tromperait le
   lecteur. Même règle que sur le CHRU (28/07/2026).
   Couleur imposée par Marie le 14/08/2026 : « Lorsque l'événement n'est pas
   gratuit, la pastille passe au rouge : #b01f1f » (elle était bleu foncé). */
.mat-evt__price--paid .mat-evt__price-dot {
	background: #b01f1f;
}

/* Le tarif accepte plusieurs lignes depuis le 14/08/2026 (« champ libre avec
   saut de ligne pris en compte dans le cas où il y a des prix différents selon
   les différents profils ») : la pastille reste alignée sur la PREMIÈRE ligne,
   pas centrée sur un pavé de trois lignes. */
.mat-evt__price { align-items: flex-start; }
.mat-evt__price-dot { margin-top: 7px; }

/* Lignes d'information du hero (public, tarif, organisateurs) : un picto rose
   en tête, aligné sur la première ligne de texte. */
.mat-evt__info {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--mat-bleu-fonce);
}
.mat-evt__info-icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--mat-rose-blush);
	margin-top: 1px;
}

.mat-evt__orgs { display: flex; flex-direction: column; gap: 4px; }
.mat-evt__orgs-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 34px; /* aligne la liste sous le libellé, pas sous le picto */
}
.mat-evt__orgs-item {
	position: relative;
	padding-left: 14px;
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
	color: var(--mat-bleu-fonce);
}
.mat-evt__orgs-item::before {
	content: "-";
	position: absolute;
	left: 0;
	font-style: normal;
}

/* Organisateur cliquable (répéteur « Organisateurs », 13/08/2026).
   ⚠️ Le soulignement a été RETIRÉ le 14/08/2026 sur demande de Marie
   (« lorsqu'un organisateur est cliquable, on ne le souligne pas mais on met
   une flèche au bout »). Le lien n'est donc plus signalé par la seule couleur,
   ce que RGAA 10.6 interdirait : c'est la FLÈCHE qui porte le signal, et elle
   est visible au repos, pas seulement au survol. Le soulignement revient au
   survol et au focus clavier. */
.mat-evt__orgs-link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.mat-evt__orgs-link svg { flex-shrink: 0; }

.mat-evt__orgs-link:hover,
.mat-evt__orgs-link:focus-visible {
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Boutons du bloc lieu : « S'y rendre » / « Stationnement » (14/08/2026). */
.mat-evt__datecard-row--place { flex-wrap: wrap; }
.mat-evt__datecard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}
.mat-evt__place-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: var(--mat-radius-pill, 30px);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}
.mat-evt__place-btn:hover,
.mat-evt__place-btn:focus-visible {
	background: #fff;
	color: var(--mat-rose-blush, #9E5B5C);
	text-decoration: none;
}

/* Date card — fond rose-blush, texte blanc, séparateurs semi-transparents */
.mat-evt__datecard {
	background: #9E5B5C;
	color: #FFFFFF;
	border-radius: 16px;
	padding: 16px 22px;
	max-width: 540px;
	box-shadow: var(--mat-shadow-soft);
}

.mat-evt__datecard-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 0;
}

.mat-evt__datecard-icon {
	flex-shrink: 0;
	width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
}

.mat-evt__datecard-sep {
	display: block;
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
}

.mat-evt__datecard-sep--light { background: rgba(255, 255, 255, 0.2); }

.mat-evt__datecard-info,
.mat-evt__datecard-location { display: flex; flex-direction: column; }

.mat-evt__datecard-date,
.mat-evt__datecard-city {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.mat-evt__datecard-year {
	/* 15px depuis le 14/08/2026 (« Taille des textes 2026, adresse complète :
	   15px »), contre 14px auparavant. */
	font-size: 15px;
	font-weight: 400;
	opacity: 0.82;
}

.mat-evt__datecard-times {
	font-size: 15px;
	font-weight: 600;
}

.mat-evt__datecard-times .mat-evt-sep {
	margin: 0 4px;
	opacity: 0.6;
}

.mat-evt__datecard-divider {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
	margin: 4px 0;
}

.mat-evt__datecard-details {
	/* 15px depuis le 14/08/2026, contre 13,5px. */
	font-size: 15px;
	font-weight: 400;
	opacity: 0.82;
	line-height: 1.4;
}

/* Actions hero */
.mat-evt__hero-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.mat-evt__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mat-rose-blush);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mat-evt__back-link:hover,
.mat-evt__back-link:focus { color: var(--mat-bleu-fonce); }

.mat-evt__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 26px;
	background: var(--mat-rose-blush);
	color: #FFFFFF;
	border-radius: var(--mat-radius-pill);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid var(--mat-rose-blush);
	transition: background-color .15s ease, color .15s ease;
}

.mat-evt__cta:hover,
.mat-evt__cta:focus {
	background: transparent;
	color: var(--mat-rose-blush);
}

.mat-evt__cta--ghost {
	background: transparent;
	color: var(--mat-rose-blush);
}

.mat-evt__cta--ghost:hover,
.mat-evt__cta--ghost:focus {
	background: var(--mat-rose-blush);
	color: #FFFFFF;
}

/* ── Body (2 cols) ── */

.mat-evt__body {
	padding: 64px 0 80px;
	background: #FFFFFF;
}

.mat-evt__body-inner {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.mat-evt__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mat-evt__separator {
	width: 1px;
	background: var(--mat-gris-border-soft);
	align-self: stretch;
	flex-shrink: 0;
}

.mat-evt__sidebar {
	flex-shrink: 0;
	width: 380px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mat-evt__sidebar-title {
	font-family: var(--mat-font-sans);
	font-size: 22px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	margin: 0 0 6px;
	line-height: 1.3;
}

.mat-evt__sidebar-empty {
	color: var(--mat-gris-dark);
	font-style: italic;
	margin: 0;
}

.mat-evt__accent {
	font-family: var(--mat-font-script);
	font-weight: 600;
	color: var(--mat-rose-blush);
	font-size: 1.25em;
	line-height: 1;
}

/* Contenu éditorial
   -------------------------------------------------------------------------
   ⚠️ AUCUNE de ces règles ne doit atteindre l'intérieur d'un bloc
   `maternite/*`. Un sélecteur descendant (spécificité 0,1,1) bat les
   sélecteurs de classe du plugin (0,1,0) : la typo du gabarit repeint alors
   la typo interne des blocs. C'est le défaut signalé par Marie KUSY le
   13/08/2026 (« incohérences de CSS sur les pages événements ») — mesuré :
   le titre d'« Information utile » sortait en BLEU 20px sur son aplat rose
   au lieu de blanc 24px, et les liens de « Aller plus loin » en rose
   souligné au lieu de bleu foncé.
   C'est exactement le débordement corrigé le 08/07/2026 sur
   `.mat-page-std__content`, jamais porté sur ce gabarit-ci.

   Pourquoi une EXCLUSION et pas un scoping en enfant direct (`>`) comme sur
   les pages standard : le contenu des événements imbrique de l'éditorial
   dans des `wp:columns` (cas de la journée SAF, page 1967) — un `>` lui
   ferait perdre toute sa typo. L'exclusion, elle, libère les blocs à
   n'importe quelle profondeur sans toucher à l'éditorial imbriqué.
   Même idiome que la règle de couleur des liens de `maternite.css`
   (11/08/2026). Si le navigateur ne sait pas lire `:not()` avec un
   combinateur descendant, les règles sont ignorées : l'éditorial retombe
   sur les styles par défaut du navigateur — jamais un rendu cassé. */
.mat-evt__content {
	color: var(--mat-bleu-fonce);
	font-size: 16px;
	line-height: 1.7;
}

.mat-evt__content h2:not(:is([class*="maternite-"] *)) {
	font-family: var(--mat-font-sans);
	font-size: 26px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	margin: 32px 0 14px;
}

.mat-evt__content h3:not(:is([class*="maternite-"] *)) {
	font-size: 20px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	margin: 24px 0 10px;
}

.mat-evt__content p:not(:is([class*="maternite-"] *)) { margin: 0 0 16px; }
/* Liens : même liste d'exclusions que la règle de couleur des pages standard
   (`maternite.css`, § liens 11/08/2026). Un BOUTON n'est pas un lien de
   texte : mesuré le 13/08/2026, le même bouton core « En savoir + » sortait
   souligné sur un événement et net sur une page — une pilule vert-bleu avec
   son libellé souligné. */
.mat-evt__content a:not(.wp-block-button__link):not(.wp-element-button):not([class*="__btn"]):not([class*="__cta"]):not([class*="-button"]):not([class*="-btn"]):not(.mat-res-card):not([class*="maternite-"]):not(:is([class*="maternite-"] *)) {
	color: var(--mat-rose-blush);
	text-decoration: underline;
}
.mat-evt__content ul:not(:is([class*="maternite-"] *)),
.mat-evt__content ol:not(:is([class*="maternite-"] *)) { margin: 0 0 16px 22px; }
.mat-evt__content li:not(:is([class*="maternite-"] *)) { margin-bottom: 6px; }

/* Hauteur de ligne : seule propriété qui reste HÉRITÉE par les blocs (le
   conteneur est à 1.7, celui des pages standard à 1.65). On la cale sur les
   pages pour que le même bloc rende à l'identique d'un gabarit à l'autre ;
   l'éditorial de l'événement, lui, garde sa hauteur de ligne aérée. */
.mat-evt__content [class*="wp-block-maternite-"] { line-height: 1.65; }

/* Pour aller plus loin */
.mat-evt__further {
	border: 1px solid var(--mat-gris-border-soft);
	border-radius: 20px;
	padding: 28px 30px;
	background: #FFFFFF;
}

.mat-evt__further-title {
	font-family: var(--mat-font-sans);
	font-size: 22px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
	margin: 0 0 20px;
	line-height: 1.3;
}

.mat-evt__further-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mat-evt__further-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--mat-rose-clair);
	border-radius: 14px;
	padding: 14px 22px;
	text-decoration: none;
	transition: background-color .15s ease;
	color: var(--mat-bleu-fonce);
}

.mat-evt__further-item:hover,
.mat-evt__further-item:focus { background: #FBE6E0; }

.mat-evt__further-item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mat-evt__further-item-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--mat-bleu-fonce);
}

.mat-evt__further-item-domain {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mat-gris-dark);
}

.mat-evt__further-item svg { flex-shrink: 0; color: var(--mat-rose-blush); }

.mat-evt__back-link--body { align-self: flex-start; }

/* ── Prochains événements ── */

.mat-evt__next {
	background: var(--mat-rose-clair);
	padding: 64px 0 80px;
}

.mat-evt__next-inner {
	max-width: var(--mat-container-max);
	margin: 0 auto;
	padding: 0 var(--mat-container-pad);
}

.mat-evt__next-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 32px;
}

.mat-evt__next-eyebrow {
	font-size: 14px;
	font-weight: 600;
	color: var(--mat-rose-blush);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mat-evt__next-title {
	font-family: var(--mat-font-script);
	font-weight: 600;
	font-size: 44px;
	color: var(--mat-bleu-fonce);
	margin: 0 0 12px;
	line-height: 1.1;
}

.mat-evt__next-header .mat-evt__cta { align-self: flex-start; }

.mat-evt__next-track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── Responsive ── */

/* ── Retours du doc de Marie du 17/08/2026, traités le 05/10/2026 ── */

/* « L'image doit prendre la moitié de la largeur et pas qu'un tiers » + « même
   taille d'image du héros sur toutes les fiches ». La colonne image prend
   exactement la moitié de la rangée (gouttière comprise : 2 colonnes de
   (1392 - 56) / 2 = 668px sur un contenu de 1392px). Le ratio fixe 598/520
   des maquettes est conservé : toutes les fiches ont donc la même image,
   quelles que soient les dimensions du fichier téléversé. */
.mat-evt__hero-image {
	flex: 0 0 calc(50% - 28px);
	width: auto;
	max-width: none;
}

/* Bouton « S'y rendre » seul : il garde sa place à droite du lieu. */
.mat-evt__datecard-actions { align-self: center; }

/* Tuiles de la colonne de droite (« beaucoup trop grandes », capture 20 du
   doc). Cause mesurée : la colonne est un conteneur flex VERTICAL, or la tuile
   porte `flex: 0 0 413px`, pensé pour le carrousel horizontal de l'accueil.
   Dans une colonne, ce 413px devient une HAUTEUR imposée : la tuile faisait
   413px quel que soit son contenu, d'où le vide. On rend la hauteur au
   contenu et on resserre la tuile, ici seulement : le composant partagé
   (accueil, agenda, pages) n'est pas touché. */
.mat-evt__sidebar .mat-event-card {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	border-radius: 20px;
}
.mat-evt__sidebar .mat-event-card__image { height: 150px; }
.mat-evt__sidebar .mat-event-card__date { padding: 7px 14px; gap: 10px; }
.mat-evt__sidebar .mat-event-card__date-sep { height: 30px; }
.mat-evt__sidebar .mat-event-card__date-day { font-size: 18px; }
.mat-evt__sidebar .mat-event-card__date-year { font-size: 15px; }
.mat-evt__sidebar .mat-event-card__body { padding: 12px 18px 14px; }
.mat-evt__sidebar .mat-event-card__title { font-size: 16px; line-height: 1.35; }
.mat-evt__sidebar .mat-event-card__footer { padding-top: 8px; }
.mat-evt__sidebar .mat-event-card__location { font-size: 14px; line-height: 1.4; }
.mat-evt__sidebar { gap: 16px; }

/* Bouton « Tous nos événements », systématique en bas de fiche. Même pilule
   vert-bleu que les autres CTA du thème (libellé bleu foncé : 5,57:1), survol
   par la teinte seule, sans translation ni ombre qui fait sauter le bouton. */
.mat-evt__all {
	display: flex;
	justify-content: center;
	padding: 0 var(--mat-container-pad) 80px;
	background: #FFFFFF;
}
/* À la suite de « Prochains événements », il prolonge son aplat rose. */
.mat-evt__next + .mat-evt__all { background: var(--mat-rose-clair); }
.mat-evt__next:has(+ .mat-evt__all) { padding-bottom: 40px; }
.mat-evt__all-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px 34px;
	background: var(--mat-vert-bleu);
	color: var(--mat-bleu-fonce);
	border-radius: var(--mat-radius-pill, 30px);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease;
}
.mat-evt__all-btn svg { flex-shrink: 0; transition: transform .15s ease; }
.mat-evt__all-btn:hover,
.mat-evt__all-btn:focus-visible {
	background: var(--mat-vert-bleu-hover, #86BCC4);
	color: var(--mat-bleu-fonce);
	text-decoration: none;
}
.mat-evt__all-btn:hover svg,
.mat-evt__all-btn:focus-visible svg { transform: translateX(3px); }
.mat-evt__all-btn:focus-visible { outline: 2px solid var(--mat-bleu-fonce); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.mat-evt__all-btn svg { transition: none; }
}

@media (max-width: 1024px) {
	.mat-evt__hero-inner,
	.mat-evt__body-inner { flex-direction: column; gap: 36px; }
	/* ⚠️ `max-width` ET `aspect-ratio` doivent être neutralisés ici, pas
	   seulement `width` : la règle desktop du 21/09 pose `max-width: 43%`
	   (l'image y fait 43 % de la largeur de contenu, mesure des maquettes) et
	   un ratio 598/520. Laissées en place, elles rendaient l'image à 147x260
	   dans un écran de 390. */
	.mat-evt__hero-image { width: 100%; max-width: 100%; flex: 0 0 auto; }
	.mat-evt__hero-image img,
	.mat-evt__hero-image-placeholder { height: 260px; aspect-ratio: auto; }
	.mat-evt__separator { display: none; }
	.mat-evt__sidebar { width: 100%; }
	.mat-evt__next-track { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.mat-evt__hero { padding: 32px 0 48px; }
	.mat-evt__title { font-size: 42px; }
	.mat-evt__datecard { padding: 14px 18px; }
	.mat-evt__datecard-row { flex-wrap: wrap; gap: 10px; }
	.mat-evt__datecard-sep { display: none; }
	.mat-evt__body { padding: 40px 0 56px; }
	.mat-evt__further { padding: 22px 20px; }
	.mat-evt__next { padding: 48px 0 56px; }
	.mat-evt__next-track { grid-template-columns: 1fr; }
	.mat-evt__next-title { font-size: 36px; }
	.mat-evt__hero-actions { gap: 16px; }
	.mat-evt__cta { padding: 11px 22px; }
	.mat-evt__all { padding-bottom: 56px; }
}