/**
 * GB Content — archive presentation.
 *
 * In the plugin, not the theme: these render the plugin's content, and GBOneAI
 * travels between projects. Colours come from --wp--preset--* with a literal
 * fallback, never --gboneai-*, which exist only while that theme is active.
 *
 * Measured from Figma:
 *   committees  473:4181 — two columns of 690 x 80 rows, 20px gaps, 1400 band
 *   benefits    472:3637 — pills over a three-column card grid
 */

.gb-content-archive {
	box-sizing: border-box;

	/* 1400 exactly at the drawn width, gutter only when narrower. Padding would
	   take the gutter out of the band instead of from around it. */
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;

	/*
	 * The gap under the navy intro band, which ends at 257 on every screen. Each
	 * archive gets the drawn number below; this is the fallback for one that has
	 * not been measured.
	 *
	 * It used to be the intro paragraph's own top margin, so the two archives
	 * with no intro sentence - questions and officers - opened flush against the
	 * band. On the container instead, so it does not depend on the copy.
	 */
	padding-block-start: 38px;

	--gb-content-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-content-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-content-line: var(--wp--preset--color--blue-grey, #cad9dc);
	--gb-content-white: var(--wp--preset--color--white, #fff);
	--gb-content-grey: var(--wp--preset--color--grey, #f3f3f5);
}

.gb-content-archive__intro {
	max-inline-size: 1014px;

	/* No top margin: the space above it belongs to .gb-content-archive, which
	   has it whether or not there is an intro to hold it. 39 under it, which is
	   the same on both screens that have one: benefits 348 to 387, committees
	   368 to 407. */
	margin: 0 auto 39px;
	color: var(--gb-content-navy);

	/* 473:4180 - 20px Regular at leading 1.3, not 18 at 1.55. */
	font-size: 20px;
	line-height: 1.3;
	text-align: center;
}

/*
 * The measure is per screen because the designer sized each text box to its own
 * copy: 1014 on benefits, 868 on committees. Both centred, so the narrower one
 * is a real difference in where the lines break, not a container.
 */
.gb-content-archive--committee .gb-content-archive__intro {
	max-inline-size: 868px;

	/* 473:4231 - 32 Regular at 1.2, two lines 76 tall. The 20/1.3 above is the
	   benefits intro (473:4180); the committees one is drawn larger. */
	font-size: 32px;
	line-height: 1.2;
}

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

/* ---------------------------------------------------------------- pills --- */

/* 609:7389 - five pills 15 apart, and 62 under them: pills end 424, cards 486. */
.gb-content-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	margin-block-end: 62px;
}

/* 609:7390 - 17px on 10/20 padding, which is the drawn 37 tall. It was 14 on a
   fixed 36. */
.gb-content-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 50px;
	background: var(--gb-content-navy);
	color: var(--gb-content-white);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease;
}

.gb-content-pill.is-current,
.gb-content-pill:hover,
.gb-content-pill:focus-visible {
	background: var(--gb-content-blue);
}

/* ----------------------------------------------------- committee rows ----- */

.gb-content-rows {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two columns is the drawn layout. Below that the grid falls to one on its own,
   because a 690px row cannot halve gracefully. */
@media (min-width: 1000px) {
	.gb-content-rows {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * 473:4676 - 690 x 80: grey, a 1.5 navy hairline, radius 20 and a soft shadow,
 * with 20/30 padding round a 24px Bold title and a 20px pill. It had been white
 * on a 1px blue-grey line at radius 12, with the title at 18 and the pill at 14.
 */
.gb-content-row {
	display: flex;
	min-block-size: 80px;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 20px 30px;
	border-radius: 20px;

	/* White at rest: 473:4696 draws 8 of 10 rows white, and the two grey ones
	   are the hover sample. */
	background: var(--gb-content-white);

	/*
	 * The hairline is an inset shadow rather than a border, because Figma draws
	 * strokes INSIDE the frame: 20 + a 40 pill + 20 is the drawn 80, and a real
	 * 1.5 border would add 3 on top of it. The outer shadow rides along.
	 */
	box-shadow: inset 0 0 0 1.5px var(--gb-content-navy), 0 0 7.5px rgba(0, 0, 0, 0.1);
	transition: background 280ms ease;
}

.gb-content-row:hover,
.gb-content-row:focus-within {
	background: var(--gb-content-grey);
}

.gb-content-row__title {
	/* An h2 as of 25/08, so the browser margins have to go. */
	margin: 0;
	color: var(--gb-content-navy);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

/* 10/20 round 20px text is the drawn 40, and 40 inside 20/20 padding is the
   row's 80. */
.gb-content-row__link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 10px 20px;
	border-radius: 50px;
	background: var(--gb-content-blue);
	color: var(--gb-content-white);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease;
}

.gb-content-row__link:hover,
.gb-content-row__link:focus-visible {
	background: var(--gb-content-navy);
}

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

/*
 * 472:3637 draws three 440px cards in the 1400 band with 40 between them -
 * 3x440 + 2x40 is exactly 1400. The gap was 32.
 */
.gb-benefit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 40px;
}

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

/*
 * 898:7787 - 440 x 451: a 330 picture over a 121 panel. It had been built as a
 * 320 x 200 photograph over a 106 panel and came out 70 short.
 *
 * Panel, top to bottom: 18, title 30, 10, button 45, 18 = 121.
 */
.gb-benefit-card {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	border-radius: 20px;
	background: var(--gb-content-navy);
}

.gb-benefit-card__media {
	/* Not sized from the image: this is a flex item, and an aspect-ratio on the
	   wrapper loses to the image's intrinsic height. The ratio goes on the img. */
	flex: 0 0 auto;
}

.gb-benefit-card__image {
	display: block;
	inline-size: 100%;
	aspect-ratio: 440 / 330;
	block-size: auto;
	object-fit: cover;
}

/*
 * 21 rather than the drawn 28: the drawing gives the panel 28 and then puts a
 * 398 button in it, which is 21 a side. The button is the wider of the two and
 * the title is centred, so the padding follows the button.
 */
.gb-benefit-card__panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	padding: 18px 21px;
	color: var(--gb-content-white);
	text-align: center;
}

.gb-benefit-card__title {
	margin: 0;
	color: inherit;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

/* Full width of the panel, 12/11 above and below 22px text - the drawn 45. */
.gb-benefit-card__button {
	display: inline-flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	margin-block-start: auto;
	padding: 12px 20px 11px;
	border-radius: 50px;
	background: var(--gb-content-blue);
	color: var(--gb-content-white);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease, color 280ms ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.gb-content-pill,
	.gb-content-row,
	.gb-content-row__link,
	.gb-benefit-card__button {
		transition: none;
	}
}

/* ------------------------------------------------------------------- faq --- */

/*
 * 344:3732 - rows drawn at 321, 415, 560, 654, 748, 842 and 936. A closed row is
 * 74, so the gap is 20.
 */
.gb-faq-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * 344:3731 closed, 344:3734 open. White on a navy hairline, grey on a blue one
 * once it opens, radius 20 and the same soft shadow the committee row carries.
 *
 * The hairline is an inset shadow, not a border: Figma draws strokes inside the
 * frame, so 20 + a 33.6 title + 20 is the drawn 74 and a real 1.5 border would
 * put 3 on top of it.
 */
.gb-faq {
	border-radius: 20px;
	background: var(--gb-content-white);
	box-shadow: inset 0 0 0 1.5px var(--gb-content-navy), 0 0 7.5px rgba(0, 0, 0, 0.1);
	transition: background 280ms ease, box-shadow 280ms ease;
}

.gb-faq[open] {
	background: var(--gb-content-grey);
	box-shadow: inset 0 0 0 1.5px var(--gb-content-blue), 0 0 7.5px rgba(0, 0, 0, 0.1);
}

/*
 * The mark sits at the inline START, beside the title, not pushed to the far
 * end: the drawing puts the plus 30 from the right edge of the row with the
 * question 27 to its left. It had been at the opposite end of a 1400 row.
 */
.gb-faq__question {
	display: flex;
	gap: 27px;
	align-items: center;
	justify-content: flex-start;
	padding: 20px 30px;
	color: var(--gb-content-navy);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

/* Open: 20 above the question, 15 to the answer, 30 under it. */
.gb-faq[open] .gb-faq__question {
	padding-block-end: 15px;
}

/* The default disclosure triangle, removed in both dialects. */
.gb-faq__question::-webkit-details-marker {
	display: none;
}

.gb-faq__question::marker {
	content: "";
}

.gb-faq__question:focus-visible {
	outline: 3px solid var(--gb-content-blue);
	outline-offset: 2px;
}

/*
 * The +/- is two bars, with the vertical one hidden when the panel is open. Drawn
 * rather than typed so it cannot be read aloud, and derived from [open] so there
 * is no second source of truth about which state it is in.
 */
.gb-faq__mark {
	position: relative;
	flex: 0 0 auto;

	/* Before the title in the inline direction, which in RTL is to its right.
	   Order rather than markup, because the mark is aria-hidden and the title
	   is what a screen reader has to reach first. */
	order: -1;
	inline-size: 25px;
	block-size: 25px;
}

.gb-faq__mark::before,
.gb-faq__mark::after {
	position: absolute;
	background: var(--gb-content-navy);
	content: "";
}

.gb-faq__mark::before {
	inset-block-start: 11.5px;
	inset-inline: 0;
	block-size: 2px;
}

.gb-faq__mark::after {
	inset-block: 0;
	inset-inline-start: 11.5px;
	inline-size: 2px;
	transition: opacity 280ms ease;
}

.gb-faq[open] .gb-faq__mark::after {
	opacity: 0;
}

/* 1150 of measure inside a 1400 row, hugging the inline start as drawn. */
.gb-faq__answer {
	max-inline-size: 1150px;
	padding: 0 30px 30px;
	color: var(--gb-content-navy);
	font-size: 20px;
	line-height: 1.2;
}

.gb-faq__answer > :first-child {
	margin-block-start: 0;
}

.gb-faq__answer > :last-child {
	margin-block-end: 0;
}

/* ----------------------------------------------------------------- staff --- */

/*
 * The officers page is a 1040 column beside a 323 side menu. This archive has no
 * side menu, so the grid keeps the 1040 measure and centres — four 226px cards
 * with 45px gaps, as drawn.
 */
.gb-staff-grid {
	display: grid;
	max-inline-size: 1040px;
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 45px;
}

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

/*
 * 332:1912 - 226 x 388, and every number below is its own:
 *
 *   photo 236, 20, name 24 at leading 1, 5, role 18 at leading 1,
 *   15, a row of 40px icons, 30.
 *
 * It had been a 256 photograph under an 18px name and a 14px role with 34px
 * icons, which came out 395 - short in the picture, over in the type.
 */
.gb-staff-card {
	padding-block-end: 30px;
	border-radius: 20px;
	background: var(--gb-content-white);
	box-shadow: 0 0 10px rgb(0 0 0 / 10%);
	text-align: center;
}

.gb-staff-card__photo {
	display: block;
	inline-size: 100%;
	aspect-ratio: 226 / 236;
	block-size: auto;
	object-fit: cover;
	border-start-start-radius: 20px;
	border-start-end-radius: 20px;
}

.gb-staff-card__name {
	margin: 20px 12px 0;
	color: var(--gb-content-navy);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.gb-staff-card__role {
	margin: 5px 12px 0;
	color: var(--gb-content-navy);
	font-size: 18px;
	line-height: 1;
}

.gb-staff-card__contact {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin: 15px 0 0;
}

.gb-staff-card__icon {
	display: inline-flex;
	inline-size: 40px;
	block-size: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--gb-content-white);
	font-size: 1.125rem;
	text-decoration: none;
}

.gb-staff-card__icon--phone {
	background: var(--wp--preset--color--turquoise, #1fa9ab);
}

.gb-staff-card__icon--mail {
	background: var(--wp--preset--color--accent, #fcac0b);
}

.gb-staff-card__icon--linkedin {
	background: var(--wp--preset--color--primary, #1043ff);
}

/* The exported icons carry their own width; 45% of the 40 circle is the drawn
   proportion, and `block-size: auto` keeps each one's aspect ratio. */
.gb-staff-card__icon svg {
	display: block;
	inline-size: 45%;
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.gb-faq,
	.gb-faq__mark::after {
		transition: none;
	}
}

/* Per screen, off the drawing: committees 292, officers 295, benefits 296, and
   questions 321 - it opens on the accordion itself rather than a sentence. */
.gb-content-archive--committee {
	padding-block-start: 35px;
}

.gb-content-archive--staff {
	padding-block-start: 38px;
}

.gb-content-archive--benefit {
	padding-block-start: 39px;
}

.gb-content-archive--faq {
	padding-block-start: 64px;
}

/* ----------------------------------------------------- committee single --- */

/*
 * 609:7889. Back button at 294, members heading at 354, officer cards at 434,
 * body at 867, updates at 2179 - and the band is the 1040 column, not the 1400
 * one, because the drawing puts the copy at 440..1480.
 */
.gb-committee {
	box-sizing: border-box;
	inline-size: min(1040px, 100% - 2rem);
	margin-inline: auto;

	/* Band ends 257, the back button is drawn at 294. */
	padding-block-start: 37px;

	--gb-content-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-content-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-content-line: var(--wp--preset--color--blue-grey, #cad9dc);
	--gb-content-white: var(--wp--preset--color--white, #fff);
	--gb-content-grey: var(--wp--preset--color--grey, #f3f3f5);
}

.gb-committee__back {
	margin: 0;
	text-align: center;
}

/*
 * `609:8787` — 200 x 40, and BLUE, not navy: every corner of the Figma render
 * samples #1043FF. It also carries a thin arrow at the inline-end, which this
 * had none of.
 *
 * THE ARROW POINTS RIGHT, which in RTL is the way you came from — so it is a
 * back arrow, not a forward one. It is a mask image, not a glyph, so no bidi
 * rule can ever flip it.
 *
 * The hover keeps the navy this button used to sit at. `כפתור חזרה` is the one
 * button component in the file whose name does not state its hover — every
 * other one does — so navy is the palette answering a question the drawing
 * leaves open, not a value read off it.
 */
.gb-committee__back-link {
	display: inline-flex;
	min-inline-size: 200px;
	block-size: 40px;
	align-items: center;
	justify-content: center;

	/* 609:8791 - 20px text, 5 to an 18 x 10 arrow. */
	gap: 5px;
	padding-inline: 20px;
	border-radius: 50px;
	background: var(--gb-content-blue);
	color: var(--gb-content-white);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease;
}

/* A drawn 18 x 10 arrow rather than the U+2192 glyph, whose size and weight
   were the font's. A mask, so it takes the link's colour on hover too; and
   an image, so bidi has nothing to mirror. */
.gb-committee__back-link::after {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 10px;
	background: currentColor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 10%27%3E%3Cpath d=%27M0 5h16.5M12.5 1l4 4-4 4%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.2%27/%3E%3C/svg%3E") center / 18px 10px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 10%27%3E%3Cpath d=%27M0 5h16.5M12.5 1l4 4-4 4%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.2%27/%3E%3C/svg%3E") center / 18px 10px no-repeat;
}

.gb-committee__back-link:hover,
.gb-committee__back-link:focus-visible {
	background: var(--gb-content-navy);
}

/* Back button ends 334, the heading is drawn at 354. */
.gb-committee__members-title {
	margin: 20px 0 0;
	color: var(--gb-content-navy);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* Heading ends 404, the cards are drawn at 434. */
.gb-committee__members {
	margin-block-start: 30px;
}

/* Cards end 822, the copy is drawn at 867. */
.gb-committee__body {
	margin-block-start: 45px;
}

/* ------------------------------------------------- committee updates ------ */

/*
 * 746:7423 - a 1040 x 96 row, white on a 1.5 navy hairline at radius 20 with the
 * soft shadow, 20/30 padding, a 24px Bold title over an 18px date, and a chevron
 * at the far end. It is drawn as a button, so it opens.
 *
 * Same inset-shadow hairline as the committee row and the question row: Figma
 * draws strokes inside the frame, and a real border would add 3 to the 96.
 */
.gb-committee__updates {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-block-start: 60px;
}

.gb-committee__update {
	border-radius: 20px;
	background: var(--gb-content-white);
	box-shadow: inset 0 0 0 1.5px var(--gb-content-navy), 0 0 7.5px rgba(0, 0, 0, 0.1);
	transition: background 280ms ease, box-shadow 280ms ease;
}

.gb-committee__update[open] {
	background: var(--gb-content-grey);
	box-shadow: inset 0 0 0 1.5px var(--gb-content-blue), 0 0 7.5px rgba(0, 0, 0, 0.1);
}

.gb-committee__update-head {
	display: flex;
	min-block-size: 96px;
	align-items: center;
	justify-content: space-between;
	padding: 20px 30px;
	color: var(--gb-content-navy);
	cursor: pointer;
	list-style: none;
}

.gb-committee__update-head::-webkit-details-marker { display: none; }
.gb-committee__update-head::marker { content: ""; }

.gb-committee__update-head:focus-visible {
	outline: 3px solid var(--gb-content-blue);
	outline-offset: 2px;
}

.gb-committee__update-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: start;
}

.gb-committee__update-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
}

.gb-committee__update-date {
	font-size: 18px;
	line-height: 1.2;
}

/* The drawn chevron is 26 x 12 and it turns over when the row opens. */
.gb-committee__update-mark {
	position: relative;
	flex: 0 0 auto;
	inline-size: 26px;
	block-size: 12px;
	background-color: currentColor;
	transition: transform 280ms ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M1 1l12 10L25 1' fill='none' stroke='%23000' stroke-width='2' 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 26 12'%3E%3Cpath d='M1 1l12 10L25 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-committee__update[open] .gb-committee__update-mark {
	transform: rotate(180deg);
}

.gb-committee__update-body {
	padding: 0 30px 30px;
	color: var(--gb-content-navy);
}

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

@media (prefers-reduced-motion: reduce) {
	.gb-committee__update,
	.gb-committee__update-mark,
	.gb-committee__back-link {
		transition: none;
	}
}

/* --------------------------------------------------------- benefit popup --- */

/*
 * 1288:8530 puts a scrim over the archive; 1288:9081 is the panel in the middle
 * of it - 444 x 472, BLUE, radius 20, headed "to redeem the benefit" over four
 * white pill fields and a yellow submit.
 *
 * A native `dialog`, so the focus trap, Escape, the inert page behind and the
 * return of focus afterwards all come from the browser rather than from us.
 */
.gb-benefit-modal {
	box-sizing: border-box;
	inline-size: 444px;
	max-inline-size: calc(100% - 2rem);
	min-block-size: 472px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--gb-content-blue);
	color: var(--gb-content-white);

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

.gb-benefit-modal::backdrop {
	background: rgba(27, 43, 80, 0.7);
}

.gb-benefit-modal__dismiss {
	margin: 0;
}

/* 20 square at 27,28 - and at the END edge, which in RTL is the left. */
.gb-benefit-modal__close {
	position: absolute;
	inset-block-start: 28px;
	inset-inline-end: 27px;
	inline-size: 24px;
	block-size: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gb-content-white);
	cursor: pointer;
}

.gb-benefit-modal__close::before,
.gb-benefit-modal__close::after {
	position: absolute;
	inset-block-start: 11px;
	inset-inline-start: 2px;
	inline-size: 20px;
	block-size: 2px;
	background: currentColor;
	content: "";
}

.gb-benefit-modal__close::before { transform: rotate(45deg); }
.gb-benefit-modal__close::after { transform: rotate(-45deg); }

.gb-benefit-modal__close:hover,
.gb-benefit-modal__close:focus-visible {
	opacity: 0.75;
}

.gb-benefit-modal__panel {
	box-sizing: border-box;
	min-block-size: 472px;

	/* 8.9% of 472 above, 12.16% of 444 either side. */
	padding: 42px 54px;
	text-align: center;
}

.gb-benefit-modal__title {
	margin: 0;
	color: inherit;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
}

.gb-benefit-modal__lead {
	margin: 0;
	font-size: 24px;
	line-height: 1;
}

.gb-benefit-modal__notice {
	margin: 30px 0 0;
	font-size: 18px;
	line-height: 1.3;
}

/* ------------------------------------------------------- the form itself --- */

/*
 * Contact Form 7 markup, styled to 1288:9081: four white pills 15 apart, the
 * privacy line, then a yellow submit. Written against the CF7 classes rather
 * than a wrapper of our own, because the form is the client's to edit and it
 * should keep looking right whatever they name the fields.
 */
.gb-benefit-modal__form {
	margin-block-start: 10px;
}

/* The fields come out of CF7 wrapped in labels inside one div, not in a run of
   paragraphs - so the 15 between them is the stack, not a margin. */
.gb-benefit-form__fields {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.gb-benefit-form__fields label {
	display: block;
}

.gb-benefit-form__consent {
	margin-block-start: 15px;
	/* 1288:9081 gives the line 16px; CF7 wraps it in spans that pushed it to 29.
	   The size is set here too, not only on the label: the block's own 18px
	   strut sat beside the 16px spans and made the line 19. */
	font-size: 16px;
	line-height: 1;
}

/* The browser's 3px above and below the box is what stretched the line to 19. */
.gb-benefit-form__consent input[type="checkbox"] {
	margin-block: 0;
	vertical-align: middle;
}

.gb-benefit-form__actions {
	margin-block-start: 15px;
}

.gb-benefit-modal__form p {
	margin: 0;
}

/*
 * Prefixed with the dialog: the theme's `.wpcf7-form input:not([type=checkbox])`
 * has the same specificity, loads later, and was putting its 2px 10px padding on
 * these fields and on the submit. 1288:9081 insets the text 15/23.
 */
.gb-benefit-modal .gb-benefit-modal__form input[type="text"],
.gb-benefit-modal .gb-benefit-modal__form input[type="tel"],
.gb-benefit-modal .gb-benefit-modal__form input[type="email"] {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 45px;
	padding: 15px 23px;
	border: 1px solid var(--gb-content-white);
	border-radius: 50px;
	background: var(--gb-content-white);
	color: #000;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	text-align: start;
}

.gb-benefit-modal__form input::placeholder {
	color: #000;
	opacity: 1;
}

/* The benefit is filled in by the script and is not the visitor's to change. */
.gb-benefit-modal__form input[readonly] {
	cursor: default;
}

.gb-benefit-modal__form .wpcf7-acceptance,
.gb-benefit-modal__form .wpcf7-list-item {
	margin: 0;
}

.gb-benefit-modal__form .wpcf7-list-item-label,
.gb-benefit-modal__form .wpcf7-acceptance label {
	font-size: 16px;
	line-height: 1;
}

.gb-benefit-modal__form a {
	color: inherit;
	text-decoration: underline;
}

.gb-benefit-modal .gb-benefit-modal__form input[type="submit"] {
	display: inline-flex;
	min-block-size: 24px;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 0;
	border-radius: 50px;
	background: var(--gb-content-amber);
	color: var(--gb-content-white);
	cursor: pointer;
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
}

.gb-benefit-modal .gb-benefit-modal__form input[type="submit"]:hover,
.gb-benefit-modal .gb-benefit-modal__form input[type="submit"]:focus-visible {
	background: var(--gb-content-navy);
}

.gb-benefit-modal__form .wpcf7-not-valid-tip,
.gb-benefit-modal__form .wpcf7-response-output {
	margin: 10px 0 0;
	border: 0;
	font-size: 16px;
	line-height: 1.3;
}


/* ================================================= video and magazine ==== */

/*
 * Figma 344:3967 - "פודקאסט וועדה האלמנטרית". Three cards to a row on the 1400
 * band, 440 wide, 40 apart both ways. The card is a 440 x 270 player with an
 * episode number and a title under it, on blue.
 *
 * The magazine borrows all of it. No screen is drawn for the magazine - see
 * templates/archive-magazine.php - and architecture.md row 11 says it behaves
 * like the video, so it looks like the video.
 */

/* Pills at 304 against a band that ends at 257. */
.gb-content-archive--video,
.gb-content-archive--magazine {
	padding-block-start: 47px;
}

.gb-video-grid {
	display: grid;
	gap: 40px;
	/* minmax(0, 1fr): a bare 1fr floors at min-content and a long title pushes
	   the column past its share of the band. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Pills end at 341 and the cards start at 384, so 43 - set on the PILLS, not
 * as a top margin on the grid. The two are adjacent siblings and their margins
 * collapse to the larger, so the pills' own 62 simply won and the grid opened
 * 19 too low.
 */
.gb-content-archive--video .gb-content-pills,
.gb-content-archive--magazine .gb-content-pills {
	margin-block-end: 43px;
}

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

@media (max-width: 700px) {
	.gb-video-grid {
		grid-template-columns: 1fr;
	}
}

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

.gb-video-card {
	min-inline-size: 0;
	/*
	 * 369.25 whatever the title does. The drawing's three cards are all that
	 * height and one of them has a one-line title, so the box is fixed and the
	 * text simply does not fill it. Without this the grid rows size themselves
	 * to their own longest title and every row is a different height.
	 *
	 * min, not block-size: a third line has to be able to push it rather than
	 * spill out of a clipped card.
	 *
	 * Only at 1400 and up - see the media query below the rule. Narrower, the card
	 * is narrower, its media shorter, and the fixed 369 left ~110px of empty blue.
	 */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 344:3967 draws the card with the token shadow and no stroke. The blue is
	   on the text panel, not the card: a blue card under a clipped image left a
	   hairline of blue at both top corners once the stroke that hid it went.
	   The 20 above and below the text moved with it, so nothing measures
	   differently. */
	border-radius: 20px;
	background: transparent;
	/* The canonical shadow, not the frame's own - the Figma file carries two
	   definitions of it. See CLAUDE.md. */
	box-shadow: 0 0 20px 3px rgba(0, 0, 0, .10);
	color: var(--gb-content-white);
	opacity: 0.95;
	overflow: hidden;
}

@media (min-width: 1400px) {
	.gb-video-card {
		min-block-size: 369.25px;
	}
}

.gb-video-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	/* The 20 between media and text is the text panel's own padding now. */
	inline-size: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * The magazine card wraps media and text in the link, so the link - not the
 * text panel - is the card's flex child. Without growing it the card kept its
 * 369 and the link stopped at 349, leaving a white strip under the blue.
 */
.gb-video-card--magazine .gb-video-card__link {
	flex: 1 0 auto;
}

/*
 * 440 x 270.25 - not 16:9, which would be 247.5. The drawn box is the YouTube
 * player WITH its chrome, so the ratio is the drawing's own and not a guess at
 * what a video is.
 */
.gb-video-card__media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 440 / 270.25;
	background: var(--gb-content-navy);
	overflow: hidden;
}

.gb-video-card__frame,
.gb-video-card__image {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	object-fit: cover;
}

.gb-video-card__missing {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	margin: 0;
	padding: 20px;
	font-size: 1rem;
	line-height: 1.3;
	text-align: center;
}

/* The text block is 402 in a 440 card, so it is inset 19 either side. */
.gb-video-card__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	inline-size: 100%;
	flex: 1 0 auto;
	padding: 20px 19px;
	background: var(--gb-content-blue);
	text-align: center;
}

.gb-video-card__episode {
	margin: 0;
	color: var(--gb-content-amber, #fcac0b);
	font-size: 1.125rem;          /* 18 */
	font-weight: 700;
	letter-spacing: 0.18px;
	line-height: 0.5;
}

.gb-video-card__title {
	margin: 0;
	color: inherit;
	font-size: 1.375rem;          /* 22 */
	font-weight: 400;
	letter-spacing: 0.22px;
	line-height: 0.9;
}

.gb-video-card__link:hover .gb-video-card__title,
.gb-video-card__link:focus-visible .gb-video-card__title {
	text-decoration: underline;
}

/* ------------------------------------------------------- the load more --- */

/*
 * 344:3976 / 344:2898. Navy pill, 20px white, centred, 55 under the grid.
 */
.gb-content-more {
	display: flex;
	justify-content: center;
	margin-block-start: 55px;
}

.gb-content-more__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 40px;
	padding: 10px 20px;
	border-radius: 50px;
	background: var(--gb-content-navy);
	color: var(--gb-content-white);
	font-size: 1.25rem;           /* 20 */
	line-height: 1;
	text-decoration: none;
	transition: background 280ms ease;
}

.gb-content-more__button:hover,
.gb-content-more__button:focus-visible {
	background: var(--gb-content-amber, #fcac0b);
	color: var(--gb-content-white);
}

/*
 * And the gap main already had, removed - same reasoning as .gb-archive-footer
 * in the theme. main.site-main carries a clamped padding-block-end of about 104
 * at 1920 to keep the last thing on a page off the footer; on a screen that ends
 * with this button the drawing says 54.
 */
.gb-content-archive:has(> .gb-content-more) {
	padding-block-end: 54px;
}

/* --------------------------------------------------- the magazine reader --- */

.gb-magazine-reader {
	margin-block: 47px 54px;
}