/**
 * GB Events — archive and card presentation.
 *
 * This lives in the plugin, not the theme. Events are the plugin's content, and
 * a card that renders one belongs with whatever owns it — a theme that travels
 * between projects should not be carrying this.
 *
 * Colours come from --wp--preset--* with a literal fallback, never from
 * --gboneai-*: those exist only while GBOneAI is active, so a plugin written
 * against them breaks under any other theme. See docs/theme-vs-plugin.md.
 *
 * Measured from Figma 494:5082 and 494:5096:
 *   card 680 x 482, image 345, panel 137
 *   meta row 20 from the panel top, title at 50, button 88 x 30 at 87
 *   grid 1400 band, two columns, 40 gap
 *   filters 560 centred
 */

.gb-events-archive {
	/* The plugin sets its own measure rather than borrowing a theme container
	   class. 1400 is the band the design draws the grid in. */
	box-sizing: border-box;

	/* 1400 exactly at the drawn width, with a gutter only once the viewport is
	   narrower than that. Padding would have taken the gutter out of the 1400
	   instead of out of the space around it - measured as a 1368 grid. */
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;

	/*
	 * The gap under the navy intro band. It was 0 on every CPT archive, which
	 * is what made some pages look flush to the band and others not.
	 *
	 * The drawing does not use one number for all of them - it depends on what
	 * comes first. The band ends at 257 everywhere; the event archive opens
	 * with the filter at 311, and the gallery archive goes straight to its
	 * cards at 347.
	 */
	padding-block-start: 54px;

	--gb-events-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-events-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-events-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-events-white: var(--wp--preset--color--white, #fff);
	/* 20, as drawn on 494:5092 and 353:2833. Was 12. */
	--gb-events-radius: 20px;
}

/* --------------------------------------------------------------- filters --- */

/*
 * 1309:9700 - 560 x 126, centred on the 1400 band.
 *
 * Two 270 fields with a 20 gap, and a centred chip row 20 below them. District
 * was a third field until 25/08; it is not in the drawing and it is gone.
 *
 * Every number here is the drawing's: label 18/Light at leading 1 with 7 under
 * it, a 46-high pill at radius 25 with the 0 0 10 shadow and no border, its text
 * 15 in from the start, and the chevron 21 in from the end.
 */
.gb-event-filters {
	inline-size: 560px;
	max-inline-size: 100%;
	margin-inline: auto;

	/* Filter ends 437, cards start 490. */
	margin-block-end: 53px;
}

.gb-event-filters__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: end;
}

.gb-event-filters__field {
	flex: 1 1 240px;
	margin: 0;
}

/*
 * Weight 100 on the two layers 1309:9700 draws in Discovery_Fs:Light.
 *
 * The family we have is Regular and Bold, so 100 resolves to Regular today: CSS
 * font matching walks DOWN from the requested weight first and falls back to the
 * lightest face it can find. That is the point - the moment a Light face is added
 * to the @font-face block in style.css, whatever weight it is declared at, these
 * pick it up on their own and nothing here has to change.
 */
.gb-event-filters__field label {
	display: block;
	margin-block-end: 7px;
	color: var(--gb-events-navy);
	font-size: 18px;
	font-weight: 100;
	letter-spacing: 0.18px;
	line-height: 1;
}

/* Wraps the select so the chevron can be a pseudo-element placed with logical
   properties, rather than a background-position that has to name a side. */
.gb-event-filters__control {
	position: relative;
	display: block;
}

.gb-event-filters__control::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 21px;
	inline-size: 9px;
	block-size: 4px;
	background-color: var(--gb-events-navy);
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-event-filters__field select {
	appearance: none;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 46px;

	/* 15 in from the start as drawn; the end has to clear the chevron. */
	padding-inline: 15px 40px;
	border: 0;
	border-radius: 25px;
	background: var(--gb-events-white);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	color: var(--gb-events-navy);
	cursor: pointer;
	font-family: inherit;
	font-size: 18px;

	/* Light, as 100 - see the label above. */
	font-weight: 100;
	letter-spacing: 0.18px;
}

.gb-event-filters__field select:focus-visible {
	outline: 2px solid var(--gb-events-navy);
	outline-offset: 2px;
}

/*
 * The drawing has no button: choosing from a list is the whole interaction. It
 * is here so the filter works with JavaScript off, and archive-filters.js adds
 * `is-live` to take it away as soon as there is any.
 */
.gb-event-filters__submit {
	margin: 20px 0 0;
	text-align: center;
}

.gb-event-filters.is-live .gb-event-filters__submit {
	display: none;
}

.gb-event-filters__submit button {
	block-size: 45px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
}

/* Fields end at 71, chips start at 91. */
.gb-event-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.gb-event-filters__chip {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--gb-events-navy);
	border-radius: 50px;
	color: var(--gb-events-navy);
	font-size: 17px;
	line-height: 1.2;
	text-decoration: none;
}

/* Masked rather than an inline SVG or a "times" glyph, so it takes the chip's
   colour on hover instead of staying navy on a navy field. */
.gb-event-filters__chip-remove {
	inline-size: 8px;
	block-size: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M.7.7l6.6 6.6M7.3.7L.7 7.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M.7.7l6.6 6.6M7.3.7L.7 7.3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-event-filters__chip:hover,
.gb-event-filters__chip:focus-visible {
	border-color: var(--gb-events-navy);
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
}

/* ------------------------------------------------------------------ grid --- */

.gb-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));

	/* Not one number: the drawing sets the columns 40 apart and the rows 38
	   (cards at 490 and 1010, 482 tall). */
	gap: 38px 40px;
}

/* Two to a row is the drawn layout; below that the grid falls to one on its own. */
@media (min-width: 1000px) {
	.gb-events-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------------------------ card --- */

.gb-event-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border-radius: var(--gb-events-radius, 20px);
	background: var(--gb-events-blue);
}

.gb-event-card__media {
	position: relative;
	background: var(--wp--preset--color--grey, #f3f3f5);

	/* The card is a column flex container, so this is a flex item. Without
	   `flex: 0 0 auto` it is sized from its content and stretches. */
	flex: 0 0 auto;
}

/*
 * 680 x 345 as drawn, as a ratio so the card keeps its proportions when the
 * column narrows.
 *
 * The ratio goes on the IMAGE, not on the wrapper. On the wrapper it loses to
 * the image's intrinsic height and silently does nothing - the third time that
 * has caught me on this project, after the team-member figure and the CTA panel.
 * Lesson 13 in docs/open-items.md.
 */
.gb-event-card__image {
	display: block;
	inline-size: 100%;
	aspect-ratio: 680 / 345;
	block-size: auto;
	object-fit: cover;
}

.gb-event-card__badge {
	position: absolute;
	inset-block-start: 22px;
	/* Physical, not logical: the badge sits in the top-RIGHT of the drawing and
	   stays there. It is a corner, not a reading position. */
	right: 22px;
	/* 494:5096: 17 Regular, 7/15, a full pill at radius 50. */
	padding: 7px 15px;
	border-radius: 50px;
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1;
}

/* The countdown is shared between the card and the single event, so it only
   describes itself here. The card positions it; the single event centres it. */
.gb-countdown {
	display: flex;
	gap: 14px;
}

.gb-event-card__media .gb-countdown {
	position: absolute;
	inset-block-start: 20px;
	left: 20px;
	gap: 10px;
}

/*
 * The card's own countdown, 494:5096: a 65 x 70 unit at radius 10 with 10 of
 * padding, a 16 label 5 above a 36 figure, units 10 apart. Scoped to the card
 * so the single event's large countdown, drawn separately, does not move.
 */
.gb-event-card__media .gb-countdown__unit {
	box-sizing: border-box;
	min-inline-size: 65px;
	block-size: 70px;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	border-radius: 10px;
}

.gb-event-card__media .gb-countdown__label {
	font-size: 1rem;
	line-height: 1;
}

.gb-event-card__media .gb-countdown__value {
	font-size: 2.25rem;
	line-height: 0.8;
}

.gb-countdown__unit {
	display: flex;
	min-inline-size: 62px;
	flex-direction: column;
	align-items: center;
	padding: 0.4rem 0.35rem 0.55rem;
	border-radius: 8px;
	background: var(--gb-events-amber);
	color: var(--gb-events-white);
	line-height: 1.1;
}

.gb-countdown__label {
	font-size: 0.75rem;
}

.gb-countdown__value {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.gb-event-card__panel {
	flex: 1 1 auto;
	padding: 20px 30px;
	text-align: center;
	color: var(--gb-events-white);
}

/*
 * The drawn meta row is 20 tall for 18px text - 494:5096 Frame 115 - which is a
 * leading of 1.1, not the 1.6 the page inherits. Left inherited it measured 29
 * and pushed the whole panel down.
 */
.gb-event-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: center;
	margin: 0 0 10px;
	font-size: 1.125rem;
	line-height: 1.1;
}

.gb-event-card__meta-item {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.gb-event-card__icon {
	flex: 0 0 auto;
}

/* Panel, top to bottom: 20, meta 20, 10, title 27, 10, button 30, 20 = 137.
   The title is 30 Bold at leading .9 - which is where its 27 comes from. */
.gb-event-card__title {
	margin: 0 0 10px;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.3px;
}

/* The 304 carousel cards at 390 cannot carry a 30px title. Leading 1.1, not 1:
   the whole title is the link, and 22 tall is under the 24px tap-target floor. */
@media (max-width: 767px) {
	.gb-event-card__title {
		font-size: 1.375rem;
		line-height: 1.1;
	}
}

/* Block, not inline: the whole title is the target rather than the glyph box,
   which measured 23 against the 24 WCAG 2.5.8 asks for. */
.gb-event-card__title a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gb-event-card__title a:hover,
.gb-event-card__title a:focus-visible {
	text-decoration: underline;
}

.gb-event-card__action {
	margin: 0;
}

.gb-event-card__button {
	display: inline-flex;
	min-inline-size: 88px;
	box-sizing: border-box;
	block-size: 30px;
	align-items: center;
	justify-content: center;
	/* 18 at 6/12, as drawn: 6 + 18 + 6 is the 30. */
	padding: 6px 12px;
	border: 1px solid var(--gb-events-white);
	border-radius: 999px;
	color: var(--gb-events-white);
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease, color 280ms ease;
}

.gb-event-card__button:hover,
.gb-event-card__button:focus-visible {
	background: var(--gb-events-white);
	color: var(--gb-events-blue);
}

/* ------------------------------------------------------- more and empty --- */

.gb-events-more {
	margin-block: 3.5rem 0;
	text-align: center;
}

.gb-events-more__button {
	display: inline-flex;
	min-inline-size: 194px;
	block-size: 40px;
	align-items: center;
	justify-content: center;
	padding-inline: 1.5rem;
	border-radius: 999px;
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
	font-weight: 700;
	text-decoration: none;
	transition: background 280ms ease;
}

.gb-events-more__button:hover,
.gb-events-more__button:focus-visible {
	background: var(--gb-events-amber);
}

.gb-events-empty {
	margin-block: 3rem;
	text-align: center;
	color: var(--gb-events-navy);
}

@media (prefers-reduced-motion: reduce) {
	.gb-event-card__button,
	.gb-events-more__button {
		transition: none;
	}
}

/* ===========================================================================
 * Single event — Figma 497:5246
 *
 * The title, breadcrumb and date strip come from the theme's event secondary
 * header, so this starts at the hero image. Sections share one rhythm rather
 * than each carrying its own margins.
 * ========================================================================= */

.gb-event {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;

	--gb-events-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-events-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-events-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-events-white: var(--wp--preset--color--white, #fff);
	--gb-events-grey: var(--wp--preset--color--grey, #f3f3f5);

	/*
	 * THE RADIUS WAS DECLARED ONLY ON `.gb-events-archive`, so every rule on this
	 * page that read it got nothing and rendered a square corner. The related
	 * events row was the visible one — three cards with no radius at all, where
	 * `497:5246` draws 20.
	 *
	 * A custom property scoped to one container and read from another is silent:
	 * `var()` with no fallback resolves to the initial value and no tool reports
	 * it. Declared here as well, and every `var(--gb-events-*)` in this file now
	 * has a literal fallback for the same reason.
	 */
	--gb-events-radius: 20px;
}

/*
 * ONE GAP PER PAIR, because `497:5246` draws nine different ones.
 *
 * This was `margin-block: 4rem` on every section, which put 64 between all ten
 * of them and made a page whose rhythm the drawing varies from 27 to 91 read as
 * a single uniform column. `conform.sh event-single` failed seven of the nine
 * pairs on it.
 *
 * Each section's `margin-block-start` is its gap FROM WHAT PRECEDES IT, so the
 * numbers below read down the page in the order they apply. Bottom margins are
 * zero throughout: with both ends set, a collapsed pair silently takes the
 * larger of two intentions and one of them is always wrong.
 *
 * `opening -> programme` has the intro copy and the register button between
 * them, so part of that gap is the height of an editor's paragraph. The drawn
 * chain around them is set further down, where the intro is present (27/09).
 */
.gb-event__section {
	margin-block: 0;
}

.gb-event__opening {
	margin-block-start: 45px;
}

/*
 * The two that carry the intro chain, at the 64 they effectively had — and the
 * register button between them, but ONLY where it stands on its own.
 *
 * `.gb-event__cta` is shared: the same block sits inside both price sections
 * and inside the registration form, where its own 2rem is right. It rendered
 * at 4rem here only because the intro's bottom margin collapsed with it, and
 * the moment the sections stopped setting bottom margins it jumped 32px up the
 * page. Raising the component itself put those 32px inside three other
 * sections; the sibling selector puts them only where they were.
 */
.gb-event__intro,
.gb-event__section + .gb-event__cta,
.gb-event__programme {
	margin-block-start: 64px;
}

/*
 * Where the intro IS there, the chain is the drawing's, measured off the render
 * of 497:5246 (27/09): the copy starts about 40 under the countdown, the member
 * line runs 20 onto the register button, and the programme heading starts ~100
 * below the button's top. At a flat 64 each the pair measured 504 top to top
 * against a drawn 435. 33 and 41 rather than the drawing's 37 and 48 because
 * the built countdown sits 7 lower in its section and the button is 45 tall
 * where it is drawn 40; both are shared parts, so the slack is taken here.
 */
.gb-event__opening + .gb-event__intro {
	margin-block-start: 33px;
}

.gb-event__intro + .gb-event__cta {
	margin-block-start: 20px;
}

.gb-event__intro + .gb-event__cta + .gb-event__programme {
	margin-block-start: 41px;
}

.gb-event__lectures {
	margin-block-start: 67px;
}

.gb-event__pricing--first {
	margin-block-start: 91px;
}

.gb-event__travel {
	margin-block-start: 41px;
}

.gb-event__sponsors {
	margin-block-start: 90px;
}

.gb-event__pricing--second {
	margin-block-start: 36px;
}

.gb-event__register {
	margin-block-start: 27px;
}

/* The last one owes the archive footer the space the uniform rule used to give it. */
.gb-event__related {
	margin-block: 88px 64px;
}

/*
 * 32/1.4, which is the file's own `h2` token — not 28/1.6.
 *
 * Every section heading on this page was 1.75rem with the inherited 1.6 leading,
 * so all nine were 4px short and each one sat in a box 10px too tall. A heading
 * size is the worst thing to get wrong on a page this long: it moves everything
 * below it, and the section positions then look like their own faults.
 *
 * Two headings are 36 rather than 32 in the drawing and say so themselves,
 * below: the registration form's and the related events'.
 */
.gb-event__heading {
	margin-block: 0 1.75rem;
	color: var(--gb-events-navy);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* 36, inside the panel — `1323:12419`. */
.gb-event__register > .gb-event__heading {
	font-size: 2.25rem;
}

/*
 * THE BANNER RIDES UP OVER THE NAVY BAND. `497:5255` is 1400 x 488 at radius 20
 * with its top at 285, while the band runs to 384 - so the drawing overlaps them
 * by 99, and the build had the banner sitting 40 clear below instead.
 *
 * The negative margin is measured from the band, not guessed: with margin 0 the
 * figure starts level with the band's bottom edge, so -99 puts it 99 inside.
 * `position: relative` and a z-index because the band is painted by the theme's
 * secondary header, which comes earlier in the document.
 */
.gb-event__hero {
	position: relative;
	z-index: 1;
	margin: -99px 0 0;
}

/* A banner shape, so an image of the wrong proportions is cropped rather than
   allowed to take over the page. The real asset is a wide event poster. */
.gb-event__hero-image {
	display: block;
	inline-size: 100%;

	/* 1400 x 488 - `497:5255`. It was 1400/420, which is the demo photograph's
	   own shape rather than the box the drawing gives the banner. */
	aspect-ratio: 1400 / 488;
	block-size: auto;
	object-fit: cover;

	/* 20, as `497:5255` draws it. */
	border-radius: 20px;
}

/* The prose the editor wrote. Held to a reading measure rather than the full
   1400 band — a 1400px line of Hebrew is not readable. */
/*
 * A 700 MEASURE, not 1040. The drawing sets this copy over three short centred
 * lines whose longest runs 648..1278 — 630 wide — and at 1040 the same paragraph
 * came out as one long line across most of the band, which is a different shape
 * on the page even when the words are the same.
 *
 * 700 rather than 630 exactly: 630 is where the drawing's own sentence happened
 * to break, and pinning a measure to one string's line breaks makes every other
 * event's intro the odd one out.
 */
.gb-event__intro {
	max-inline-size: 700px;
	margin-inline: auto;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.25rem;
	line-height: 1.2;
	text-align: center;
}

/* The member line is drawn at 24 Bold, a size up from the copy above it. */
.gb-event__intro strong {
	font-size: 1.5rem;
}

/*
 * Flex rather than `text-align: center`, so the gap between the register button
 * and the calendar chooser is a number instead of whatever a whitespace
 * character happens to measure. `497:5246` sets the two 20 apart.
 *
 * `align-items: flex-start` keeps the chooser's absolutely-positioned menu from
 * stretching the row when it opens.
 */
.gb-event__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	margin-block: 2rem 0;
	text-align: center;
}

/* The icon `497:5577` and `1323:12219` put inside their buttons. `gap` is theirs
   too - 5 on the download, 7 on the calendar; 6 splits the difference and keeps
   one rule. */
.gb-event__icon {
	flex: 0 0 auto;
	fill: currentColor;
}

.gb-event__button {
	display: inline-flex;
	gap: 6px;
	min-inline-size: 194px;
	block-size: 45px;
	align-items: center;
	justify-content: center;
	padding-inline: 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--gb-events-blue);
	color: var(--gb-events-white);
	font: inherit;

	/*
	 * REGULAR 20, not Bold 18. Every button on this screen is
	 * `Discovery_Fs:Regular` at 20 in the drawing - `497:5568`, `1122:8536` and
	 * the two under the programme - and they were all inheriting the page's 18
	 * at weight 700. The archive card's pill is a different class and is drawn
	 * Regular 18, so it is not touched.
	 */
	font-size: 1.25rem;
	font-weight: 400;

	/* `leading-[normal]` in the drawing; the page sets 1.6 and it inherited. */
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 280ms ease, color 280ms ease;
}

.gb-event__button:hover,
.gb-event__button:focus-visible {
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
}

.gb-event__button--outline {
	border-color: var(--gb-events-navy);
	background: transparent;
	color: var(--gb-events-navy);
}

.gb-event__button--outline:hover,
.gb-event__button--outline:focus-visible {
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
}

/*
 * ON THE SINGLE EVENT, EVERY BUTTON IS BLUE. `497:5246` fills all six of them —
 * both under the programme, both under each price block — at `#1043FF` and
 * radius 50. The outline treatment is the archive card's, where a white outline
 * sits on the card's blue panel, and it had been inherited here where the
 * background is the page's own white and the button read as secondary.
 *
 * Scoped to `.gb-event`, which is the single template's main element and appears
 * nowhere else, so the card and the archive keep theirs.
 */
.gb-event .gb-event__button--outline {
	border-color: transparent;
	background: var(--gb-events-blue, #1043ff);
	color: var(--gb-events-white, #fff);
}

.gb-event .gb-event__button--outline:hover,
.gb-event .gb-event__button--outline:focus-visible {
	background: var(--gb-events-navy, #1b2b50);
	color: var(--gb-events-white, #fff);
}

/* Disabled is a real state here, not decoration: registration is not wired yet
   and the button says so. Make that unmistakable rather than subtle. */
.gb-event__button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.gb-event__opening .gb-countdown {
	justify-content: center;
}

/*
 * THE SINGLE EVENT'S COUNTDOWN IS BIGGER THAN THE CARD'S, and these were the
 * card's numbers wearing the large class. `497:5548` draws a 94.714 x 102 box at
 * radius 14.571 with a 50px figure and a 24px label over it; this said 78 wide,
 * 32px figure, and the difference showed on the page where it is the first thing
 * under the hero.
 *
 * Scoped to `is-large`: the archive card's countdown is `494:5096`'s, it
 * conforms, and it must not move.
 */
.gb-countdown.is-large {
	gap: 20px;
}

.gb-countdown.is-large .gb-countdown__unit {
	min-inline-size: 94.714px;
	block-size: 102px;
	justify-content: center;
	padding: 0;
	border-radius: 14.571px;
}

.gb-countdown.is-large .gb-countdown__value {
	font-size: 3.125rem;
	line-height: 0.9;
}

.gb-countdown.is-large .gb-countdown__label {
	font-size: 1.5rem;
	line-height: 1.2;
}

/*
 * The drawn size is a 1920 number and four 94.7 units with three 20 gaps need
 * 439 — more than a 390 screen has, so the page scrolled sideways at the
 * narrowest breakpoint the moment the large countdown was built correctly.
 *
 * Conformance is checked at 1920 only; below it the rule is that the row fits.
 */
@media (max-width: 700px) {
	.gb-countdown.is-large {
		gap: 10px;
	}

	.gb-countdown.is-large .gb-countdown__unit {
		min-inline-size: 72px;
		block-size: 82px;
	}

	.gb-countdown.is-large .gb-countdown__value {
		font-size: 2rem;
	}

	.gb-countdown.is-large .gb-countdown__label {
		font-size: 1rem;
	}
}

/* ------------------------------------------------------- calendar menu --- */

/*
 * A `details` styled as the drawn outline button, with the destinations in a
 * card beneath it. Closed, it is exactly `497:5246`'s button; the chooser is
 * what §"הוספת האירוע הרלוונטי ליומן" asks for on top of it.
 */
.gb-event__calendar {
	position: relative;
	display: inline-block;
}

/* The marker is the disclosure triangle browsers add to every summary. The
   button is drawn without one. */
.gb-event__calendar-toggle {
	list-style: none;
	cursor: pointer;
}

.gb-event__calendar-toggle::-webkit-details-marker,
.gb-event__calendar-toggle::marker {
	display: none;
	content: '';
}

.gb-event__calendar-menu {
	position: absolute;
	z-index: 20;
	min-inline-size: 100%;
	margin: 8px 0 0;
	padding: 8px;
	border-radius: 12px;
	background: var(--gb-events-white);
	box-shadow: 0 0 20px 3px rgb(0 0 0 / 10%);
	inset-inline-start: 0;
	list-style: none;
	/* The CTA row centres its buttons, and that inherits. A menu reads as a
	   list, so its items start on the same edge as each other. */
	text-align: start;
	white-space: nowrap;
}

.gb-event__calendar-option {
	display: block;
	padding: 10px 16px;
	border-radius: 8px;
	color: var(--gb-events-navy);
	font-size: 0.9375rem;
	text-decoration: none;
}

.gb-event__calendar-option:hover,
.gb-event__calendar-option:focus-visible {
	background: var(--gb-events-grey);
}

/*
 * WITHOUT JAVASCRIPT the menu is a plain list under the button and every link in
 * it works — `details` handles the disclosure natively. So there is no
 * `display: none` here that a script has to undo, which is the usual way a
 * dropdown becomes unusable when a script fails to load.
 *
 * On a narrow screen it stops being absolute so it cannot hang off the edge.
 */
@media (max-width: 540px) {
	.gb-event__calendar,
	.gb-event__calendar-menu {
		position: static;
		display: block;
	}
}

/* ------------------------------------------------------------ programme --- */

/*
 * The programme flyer, centred at the width `497:5246` draws it - 568 on a 1920
 * canvas, which is narrower than the 1400 band on purpose: it is a portrait
 * poster, and letting it run to the band would make it the tallest thing on a
 * page that already scrolls to 6623.
 *
 * `margin-inline: auto` rather than a text-align on the parent, because a
 * `figure` is a block and RTL would otherwise leave it on the start edge.
 */
.gb-event__programme-poster {
	max-inline-size: 568px;
	margin: 0 auto 32px;
}

.gb-event__programme-poster img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 12px;
}

.gb-event__documents {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------- lectures --- */

.gb-event__lecture-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));

	/* 40, the house gutter - the two columns are drawn 258..940 and 980..1662. */
	gap: 24px 40px;
}

@media (min-width: 1000px) {
	.gb-event__lecture-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Radius 15 and the 0 0 10 rgba(0,0,0,.1) shadow the drawing gives these — not
 * the 12 the rest of the page uses. `497:5625` is its own component and carries
 * its own numbers: a 1px NAVY border (it had been the pale #CAD9DC), 30 of
 * padding, and the portrait and the text column 20 apart, centred on each other.
 */
.gb-lecture {
	padding: 30px;
	border: 1px solid var(--gb-events-navy, #1b2b50);
	border-radius: 15px;
	background: var(--gb-events-white);
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

/*
 * A BLUE PILL, the first thing in the text column, at its start edge (the
 * right). `497:5634`: 126 x 33 - padding 3/10/2 around a 20px line at 1.4 - and
 * 10 above the name. It reads in the page's own direction, so the date lands on
 * the right and the time on the left, as drawn; it had been forced `ltr`,
 * which put the time first.
 */
.gb-lecture__when {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px 2px;
	border-radius: 10px;
	background: var(--gb-events-blue, #1043ff);
	color: var(--gb-events-white, #fff);
	font-size: 1.25rem;
	line-height: 1.4;
}

.gb-lecture__body {
	display: flex;
	gap: 20px;
	align-items: center;
}

.gb-lecture__text {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/*
 * Name 24 Bold BLUE, subject 28 Bold NAVY - the build had the two colours the
 * other way round - and the description 20 at 1.2. All three are 5 apart
 * (`497:5635`: 0 / 29 / 62).
 */
.gb-lecture__name {
	margin: 0 0 5px;
	color: var(--gb-events-blue, #1043ff);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.gb-lecture__subject {
	margin: 0 0 5px;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.gb-lecture__description {
	margin: 0;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.25rem;
	line-height: 1.2;
}

/* 141 square in the drawing, against the 64 this was built at - less than half.
   It is the single biggest reason the card did not look like the card. */
.gb-lecture__photo {
	flex: 0 0 auto;
	inline-size: 141px;
	block-size: 141px;
	border-radius: 50%;
	object-fit: cover;
}

/* At phone width a 141 portrait and 30 of padding leave the text column about
   130 wide. Step both down rather than let the subject break a word per line. */
@media (max-width: 599px) {
	.gb-lecture {
		padding: 20px;
	}

	.gb-lecture__body {
		gap: 14px;
	}

	.gb-lecture__photo {
		inline-size: 88px;
		block-size: 88px;
	}

	.gb-lecture__subject {
		font-size: 1.375rem;
	}
}

/* -------------------------------------------------------------- pricing --- */

.gb-event__prices {
	text-align: center;
}

/* 70 square, centred above the heading — `1122:8528`. */
.gb-event__price-icon {
	display: block;
	inline-size: 70px;
	block-size: 70px;
	margin: 0 auto 12px;
}

/*
 * 24 Bold for the member line and 20 Regular for the one below it - the two
 * sizes `1122:8535` gives them. Both were 18 and the block read flat, where the
 * drawing leads with the member price and sets the other under it.
 */
.gb-event__price {
	margin: 0 0 0.35rem;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.gb-event__price + .gb-event__price {
	font-size: 1.25rem;
	font-weight: 400;
}

/*
 * The price this reader actually pays.
 *
 * Both figures stay, because that is the drawing and because the member price
 * means nothing without the other beside it. The one that applies is marked -
 * and marked with WEIGHT AND A BADGE rather than by dimming the other, because
 * the other is a real price that somebody pays, not a disabled option.
 *
 * Nothing here changes the line's box, so the conformance spec for the event
 * page still measures what it measured before.
 */
.gb-event__price--applies {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.gb-event__price-badge {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--gb-events-amber, #fcac0b);
	color: var(--gb-events-navy);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.gb-event__price-note {
	margin: 0.6rem 0 0;
	color: var(--gb-events-navy);
	font-size: 0.875rem;
	font-weight: 400;
	text-align: center;
	opacity: 0.75;
}

/* --------------------------------------------------------------- travel --- */

/* 20/1.2 centred, sitting between the heading and the cards — `497:5703`. */
.gb-event__travel-intro {
	margin-block: -0.75rem 1.75rem;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.25rem;
	line-height: 1.2;
	text-align: center;
}

.gb-event__travel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));

	/* 40, so the three cards are 439 on the 1400 band as drawn. At 24 they came
	   out 451 and the row read wider than the lecture grid above it. */
	gap: 40px;
}

/*
 * White with a hairline, not a grey fill. `497:5246` draws these three as
 * outlined cards on the page's own white, the same treatment the lecture cards
 * get - a grey fill reads as a disabled panel next to them, and the two rows
 * sit close enough together to be compared.
 */
/*
 * A DROP SHADOW, NOT A HAIRLINE, and 40/32 of padding - `497:5700` gives it
 * `bg-white` with `drop-shadow 0 0 10 rgba(0,0,0,.1)` and no border at all. The
 * border was the reason these read as outlined boxes where the drawing has them
 * floating like the lecture cards.
 */
.gb-event__travel-card {
	padding: 32px 40px;
	border: 0;
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);

	/* 20, as `497:5700` draws it — not the page's default 12. */
	border-radius: 20px;
	background: var(--gb-events-white);
	color: var(--gb-events-navy);
	text-align: center;
}

/* 32 Bold blue, and the copy 20 Regular - `497:5700`. Built at 18/15, which made
   the three cards 158 tall against a drawn 232. */
.gb-event__travel-card h3 {
	margin: 0 0 0.6rem;
	color: var(--gb-events-blue, #1043ff);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
}

.gb-event__travel-card p {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------- sponsors --- */

/*
 * ACROSS THE BAND, not clustered in the middle.
 *
 * `497:5246` puts eight marks on one row and distributes them edge to edge: the
 * first starts at 260 and the last ends at 1660, with the space between them
 * absorbing each logo's own width. That is `space-between`, and it had been
 * `center` with a fixed 2.5rem gap — which with four sponsors drew them in a
 * 669px huddle at the middle of a 1400 band.
 *
 * `space-between` needs a row that can fill; on a wrap to a second line the last
 * row would spread its two or three items to the edges and look broken, so the
 * gap stays generous enough that wrapping is rare and `space-around` takes over
 * once it does.
 */
.gb-event__sponsor-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.gb-event__sponsor-list {
		justify-content: space-around;
	}
}

/*
 * 140 WIDE, 100 TALL. Both numbers are what makes eight fit one row.
 *
 * The drawn marks measure 73, 96, 71 and 131 across and run to about 100 tall —
 * הראל stacks a wordmark under its symbol and needs the height. At the previous
 * 160 x 60 the row was 8 x 160 plus seven 40px gaps = 1560 against a 1400 band,
 * so it wrapped seven-and-one and `space-between` spread the orphan across the
 * whole width. 8 x 140 + 7 x 40 is exactly 1400.
 */
/* The link is the logo's size, not one line of text: inline, it measured 68 x 20
   around a 68 x 100 logo, and the QA probe reported four small tap targets. */
.gb-event__sponsor a {
	display: block;
}

.gb-event__sponsor img {
	display: block;
	block-size: auto;
	max-block-size: 100px;
	inline-size: auto;
	max-inline-size: 140px;
	object-fit: contain;
}

/* --------------------------------------------------------- registration --- */

/*
 * 1396 x 520 on the 1920 canvas, so the panel IS the band. `position: relative`
 * and `overflow: hidden` are what let the four arcs bleed off its edges and be
 * cut by them, which is how the drawing composes them.
 */
.gb-event__register {
	position: relative;
	overflow: hidden;
	padding: 40px;
	border-radius: 20px;
	background: var(--gb-events-grey);
}

.gb-event__register-decor {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
}

.gb-event__register-arc {
	position: absolute;
	display: block;
}

.gb-event__register-arc svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/*
 * PHYSICAL `left`, not `inset-inline-start` — the same rule the theme's
 * cta-banner arcs follow and for the same reason. This is one fixed decorative
 * composition drawn for this frame; mapping it onto a logical property mirrors
 * the whole arrangement when the page is RTL, and the yellow arc the designer
 * put at the start corner lands at the end one.
 *
 * Offsets and sizes are percentages of the drawn 1396 x 520 panel, measured off
 * `497:5246`: yellow visible 241 x 223 from the top start corner, blue 173 x 274
 * from the bottom start corner, navy 366 wide at the top end corner, teal 170 x
 * 339 down the end edge. Each is larger than its visible part because the panel
 * cuts it.
 */
.gb-event__register-arc--1 { /* yellow, top start corner */
	inline-size: 25%;
	aspect-ratio: 1;
	left: -8%;
	inset-block-start: -21%;
}

.gb-event__register-arc--2 { /* teal, down the end edge */
	inline-size: 22%;
	aspect-ratio: 309 / 303.547;
	left: 95%;
	inset-block-start: 35%;
}

.gb-event__register-arc--3 { /* blue, bottom start corner */
	inline-size: 19%;
	aspect-ratio: 261.327 / 267;
	left: -9%;
	inset-block-start: 46%;
}

.gb-event__register-arc--4 { /* navy, top end corner */
	inline-size: 28%;
	aspect-ratio: 387 / 393;
	left: 80%;
	inset-block-start: -46%;
}

/*
 * THE TWO SIDE ARCS NEED ROOM THE FORM TAKES BELOW ~1100. Each shows about a
 * tenth of the panel's width; the grid is 836 wide and centred, leaving
 * (panel - 836) / 2 either side - so below a ~1045 panel the teal and blue rings
 * run under the fields (QA 29/09: the blue one through "מיקוד" at 1024, "טלפון
 * בעבודה" at 600). The drawing is 1920-only; the corner arcs stay.
 */
@media (max-width: 1100px) {
	.gb-event__register-arc--2,
	.gb-event__register-arc--3 {
		display: none;
	}
}

/* The arc assets are the theme's, and three of the four carry the wrong fill for
   this panel. A presentation attribute loses to any CSS rule, so one file set
   serves every colour. */
.gb-event__register-arc--1 svg path { fill: var(--wp--preset--color--yellow, #fcac0b); }
.gb-event__register-arc--2 svg path { fill: var(--wp--preset--color--turquoise, #1fa9ab); }
.gb-event__register-arc--3 svg path { fill: var(--gb-events-blue, #1043ff); }
.gb-event__register-arc--4 svg path { fill: var(--gb-events-navy, #1b2b50); }

/*
 * THE ONE BUTTON ON THIS PAGE THAT IS NOT REGULAR 20. "הרשמה ומעבר לתשלום" is
 * drawn Bold 24 — it is the page's single commit action and the drawing gives it
 * the weight to say so.
 */
.gb-event__register .gb-event__button {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

/* The form sits above the arcs. */
.gb-event__register > .gb-event__heading,
.gb-event__register > .gb-event__form {
	position: relative;
	z-index: 1;
}

/*
 * THREE columns of 266 with a 20 gutter — 836 wide, centred on the panel. It had
 * been `auto-fit` at 220 minimum inside 1040, which resolved to four columns and
 * a form the drawing does not have.
 */
.gb-event__form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 266px));
	gap: 20px;
	justify-content: center;
	max-inline-size: 836px;
	margin-inline: auto;
}

@media (max-width: 782px) {
	.gb-event__form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.gb-event__form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The drawing sets the star tight against the word and BEFORE it — "*שם פרטי",
   star on the right (G4, 27/09). The template prints the two with no whitespace
   between them, so no negative margin is needed to close a gap. */
.gb-event__form-required {
	color: var(--gb-events-navy);
}

/*
 * The consent line the specification requires. Checkbox and label on one row,
 * centred under the grid as drawn, with the box aligned to the first line of
 * text rather than to the middle of a wrapped label.
 */
.gb-event__form-consent {
	margin-block: 1.25rem 0;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 0.9375rem;

	/* 1.75 on 15px is a 26px line, which is what gets the two links inside it
	   over the 24px tap-target floor. At the inherited leading they measured
	   31x16 and 97x16 and the harness flagged both. */
	line-height: 1.75;
	text-align: center;
}

/* Vertical padding grows the hit area without changing where the line sits —
   inline padding does not enter line-box layout. */
.gb-event__form-consent a {
	padding-block: 5px;
}

.gb-event__form-consent label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
	text-align: start;
}

.gb-event__form-consent input {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 0.2em;
}

.gb-event__form-field {
	margin: 0;
}

/*
 * 18 AT LIGHT, which is what the nine labels are drawn at - and they were built
 * at 14 Bold, which is the weight fault Gil spotted.
 *
 * Weight 100, not 400, and deliberately: the family we ship is Regular and Bold,
 * so 100 resolves to Regular today because CSS font matching walks DOWN from the
 * requested weight first. The moment a Light face is added to the @font-face
 * block in style.css these pick it up on their own. Same trick, and the same
 * reason, as the archive filter labels.
 *
 * `CLAUDE.md` said the filter's four Light layers were "the only ones in it" -
 * these nine make thirteen, and that line is now corrected.
 */
.gb-event__form-field label {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1.125rem;
	font-weight: 100;
	line-height: 1.2;
}

.gb-event__form-field input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 45px;
	padding-inline: 1.25rem;
	/* 1px NAVY, as drawn on 1323:12412 - it had been the pale #CAD9DC. */
	border: 1px solid var(--gb-events-navy, #1b2b50);
	border-radius: 999px;
	background: var(--gb-events-white);
	font: inherit;
}

.gb-event__form-note {
	margin-block: 1.5rem 0;
	color: var(--gb-events-navy);
	font-size: 0.9375rem;
	text-align: center;
}

/*
 * NOT DRAWN, and kept quiet on purpose (28/09): what the live form needs around
 * the drawn fields - why it did not go through, and the second-ticket price. Navy on white pills, the page's own
 * vocabulary; the one alarm colour is the amber the personal area uses.
 */
.gb-event__form-alert,
.gb-event__form-notice,
.gb-event__form-closed p {
	max-inline-size: 836px;
	margin: 0 auto 20px;
	color: var(--gb-events-navy, #1b2b50);
	font-size: 1rem;
	text-align: center;
}

.gb-event__form-alert {
	padding: 12px 20px;
	border-radius: 20px;
	background: var(--gb-events-white, #fff);
	border-inline-start: 6px solid var(--wp--preset--color--yellow, #fcac0b);
	font-weight: 700;
	text-align: start;
}

.gb-event__form-field.is-invalid input {
	border-color: #b3261e;
}

.gb-event__form-error {
	display: block;
	margin-block-start: 4px;
	color: #b3261e;
	font-size: 0.875rem;
}

.gb-event__form-consent .gb-event__form-error {
	text-align: center;
}

.gb-event__form-closed .gb-event__cta {
	margin-block-start: 0;
}

/* -------------------------------------------------------------- related --- */

/*
 * The heading at the inline start and the two arrows at the inline end, on one
 * row — `497:5246`. The heading's own bottom margin is dropped here because the
 * row owns the spacing to the track.
 */
.gb-event__related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: 32px;
}

/*
 * 36 with 0.9 leading and 0.36 tracking, at the start edge — `497:5267`. It is
 * the one heading on the page the drawing does not centre, and it was inheriting
 * the shared 32/1.4/centre like all the others.
 */
.gb-event__related-head .gb-event__heading {
	margin-block: 0;
	font-size: 2.25rem;
	letter-spacing: 0.36px;
	line-height: 0.9;
	text-align: start;
}

/* 20 in the drawing, against the 12 the archive card carries. */
.gb-event__related-track > .gb-event-card {
	border-radius: 20px;
}

.gb-event__related-arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
}

/* 55 square, as drawn - it had been 44. */
.gb-event__related-arrow {
	display: flex;
	inline-size: 55px;
	block-size: 55px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.gb-event__related-arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

/*
 * A scroll-snap row showing three at a time on the 1400 band. The card widths
 * are a third of the track minus the two gaps, so the three that fit line up
 * exactly with the grid the rest of the page uses.
 *
 * `scrollbar-width: none` because the arrows and dragging are the interface;
 * the row is still reachable by keyboard, which is what matters.
 */
.gb-event__related-track {
	display: flex;
	overflow-x: auto;
	gap: 40px;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.gb-event__related-track::-webkit-scrollbar {
	display: none;
}

.gb-event__related-track > .gb-event-card {
	flex: 0 0 calc((100% - 80px) / 3);
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.gb-event__related-track > .gb-event-card {
		flex-basis: calc((100% - 40px) / 2);
	}
}

@media (max-width: 700px) {
	.gb-event__related-track {
		gap: 20px;
	}

	.gb-event__related-track > .gb-event-card {
		flex-basis: 85%;
	}
}

@media (min-width: 1000px) {
	.gb-events-grid--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-event__button {
		transition: none;
	}
}

/* ------------------------------------------------------------- galleries --- */

/*
 * A gallery card is the event card without its badge, countdown or button, so it
 * inherits everything and only says what differs: the panel has one line of meta
 * instead of two and no action under the title.
 */
/*
 * The gallery card is 680 x 488 where the event card is 680 x 482, and the extra
 * is all in the picture: its panel is 92 against the event panel's 137, and its
 * media runs to 396 rather than 345. It had been built as the event card with a
 * shorter panel, which came out 42 short.
 *
 * Panel, top to bottom: 20, meta 20, 5, title 27, 20 = 92.
 */
.gb-event-card--gallery .gb-event-card__image {
	aspect-ratio: 680 / 396;
}

.gb-event-card--gallery .gb-event-card__panel {
	padding-block-end: 20px;
}

.gb-event-card--gallery .gb-event-card__meta {
	margin-block-end: 5px;
}

.gb-event-card--gallery .gb-event-card__title {
	margin-block-end: 0;
}

/* Gallery archive: no filter and no intro, so the cards start at 347. */
.gb-events-archive.gb-galleries {
	padding-block-start: 90px;
}

/* 40 both ways here, where the event grid is 38 between the rows: gallery cards
   are drawn at 347, 875, 1403 and 1931 for a 488 card. Same grid, two screens,
   two numbers. */
.gb-galleries .gb-events-grid {
	gap: 40px;
}

/* ------------------------------------------------------- gallery single --- */

/*
 * 353:2905. The navy band runs to 384 on this screen rather than the 257 every
 * other one uses, and the 1400 x 488 hero sits half in it at 240.
 *
 * The extra navy is painted here rather than by overriding the theme band: a
 * plugin that reaches into .secondary-header is a plugin that breaks under the
 * next theme. 127 is 384 minus the 257 the theme already draws.
 */
.gb-gallery {
	position: relative;
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	margin-block-start: -127px;

	/* 130 + 110 = the drawn 240. */
	padding-block-start: 110px;

	--gb-events-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-events-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-events-white: var(--wp--preset--color--white, #fff);
}

.gb-gallery::before {
	position: absolute;
	inset-block-start: 0;
	left: 50%;
	margin-left: -50vw;
	inline-size: 100vw;
	block-size: 127px;
	background: var(--gb-events-navy);
	content: "";
}

.gb-gallery > * {
	position: relative;
}

.gb-gallery__hero {
	overflow: hidden;
	margin: 0;
	border-radius: 20px;
}

.gb-gallery__hero-image {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1400 / 488;
	block-size: auto;
	object-fit: cover;
}

/* Hero ends 728, the date is drawn at 767. */
.gb-gallery__date {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 39px 0 0;
	color: var(--gb-events-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
}

.gb-gallery__date svg,
.gb-gallery__date img {
	inline-size: 24px;
	block-size: 24px;
}

/* 504 of measure, centred, as drawn. */
.gb-gallery__description {
	max-inline-size: 504px;
	margin: 11px auto 0;
	color: var(--gb-events-navy);
	font-size: 20px;
	line-height: 1.2;
	text-align: center;
}

.gb-gallery__description > :first-child { margin-block-start: 0; }
.gb-gallery__description > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------- videos --- */

/* Four 319 tiles 40 apart, which is 1396 in the 1400 band. */
.gb-gallery__videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 40px;
	margin: 58px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1100px) {
	.gb-gallery__videos {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gb-gallery__video {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
}

.gb-gallery__video img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 319 / 497;
	block-size: auto;
	object-fit: cover;
}

/* The drawn badge is a rounded red plate with a white triangle in it. */
.gb-gallery__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 81px;
	block-size: 56px;
	border-radius: 14px;
	background: #f00;
	transform: translate(50%, -50%);
}

.gb-gallery__play::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	border-block: 11px solid transparent;
	border-inline-start: 18px solid var(--gb-events-white);
	content: "";
	transform: translate(50%, -50%) scaleX(-1);
}

/* --------------------------------------------------------------- photos --- */

/*
 * Four columns, and a real multi-column rather than a grid: the drawing gives
 * every photograph its own height and lets the columns end unevenly, which is
 * what columns do and what a grid has to be talked into.
 */
.gb-gallery__photos {
	margin-block-start: 58px;
	column-count: 4;
	column-gap: 40px;
}

@media (max-width: 1100px) {
	.gb-gallery__photos { column-count: 2; }
}

@media (max-width: 640px) {
	.gb-gallery__photos { column-count: 1; }
}

.gb-gallery__photo {
	overflow: hidden;
	margin: 0 0 40px;
	border-radius: 20px;
	break-inside: avoid;
}

.gb-gallery__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Hidden only once the script has taken charge of the button. */
.gb-gallery__photos.is-live .gb-gallery__photo.is-extra {
	display: none;
}

.gb-gallery__more {
	margin: 20px 0 0;
	text-align: center;
}

/* The button only means anything with JavaScript, so it only appears with it. */
.gb-gallery__more-button {
	display: none;
	padding: 10px 20px;
	border: 0;
	border-radius: 50px;
	background: var(--gb-events-navy);
	color: var(--gb-events-white);
	cursor: pointer;
	font: inherit;
	font-size: 20px;
	line-height: 1;
}

.is-live + .gb-gallery__more .gb-gallery__more-button {
	display: inline-block;
}

.gb-gallery__more-button:hover,
.gb-gallery__more-button:focus-visible {
	background: var(--gb-events-blue);
}

/* -------------------------------------------------------------- related --- */

.gb-gallery__related {
	margin-block-start: 90px;
}

/* The carousel head owns the 33 down to the cards, so the title carries none. */
.gb-gallery__related .gb-event__related-head {
	margin-block-end: 33px;
}

.gb-gallery__related-title {
	margin: 0;
	color: var(--gb-events-navy);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.36px;
	line-height: 0.9;
}

/* Three to a row here, where the archive draws two. */
@media (min-width: 1000px) {
	.gb-events-grid--three {
		grid-template-columns: repeat(3, 1fr);
	}
}