/*
Theme Name: GBOneAI
Author: GBOneAI
Description: Custom hybrid presentation theme for the Insurance Agents Association website.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: gboneai
Domain Path: /languages
*/

/**
 * Site-specific design layer.
 *
 * Reusable GBOneAI styles live under assets/css/. This file is intentionally
 * loaded last and may be replaced or customized for each website.
 */

/* --------------------------------------------------------------- the font --- */

/*
 * Discovery FS - the typeface the whole design is drawn in.
 *
 * It was never installed. The font stacks all named "Discovery FS" first and
 * then fell through to Times New Roman, so every page on this site had been
 * rendering in a serif, and every text measurement taken against it - line
 * breaks, text widths, the conformance runs - was measuring the wrong face.
 *
 * The files are the client's own web-licensed release, kept in the repository
 * rather than in the Font Library: uploads/ is not committed, so a rebuilt
 * environment would silently fall back to Times again, which is exactly the
 * fault being fixed here.
 *
 * Two weights, which is the whole family. Four text layers in the archive filter
 * component (1309:9700) are set to Discovery_Fs:Light in the Figma file and are
 * the only ones in it that are; the designer confirmed on 25/08 that there is no
 * Light, so those read as a stray style and are built at Regular.
 */
@font-face {
	font-family: "Discovery FS";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/Discovery_Fs-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Discovery FS";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/Discovery_Fs-Bold.woff2") format("woff2");
}

/* --------------------------------------------------- content type scale --- */

/*
 * The type the content column is drawn in. 332:1024 is explicit: body 20px at
 * leading 1.2 in blue-text, sub-headings 28px Bold at 1.4 (32 for the first one
 * on the page), and the whole block in #1B2B50.
 *
 * It was inheriting the body rule - 18px at 1.6 in #212121 - so every page
 * template and every single item was a size, a leading and a colour away from
 * the drawing. The leading is the one that shows: 1.6 against 1.2 is a third
 * more air between every pair of lines.
 *
 * Scoped to .entry-content and written at the lowest specificity that reaches
 * it, so the home page's own block rules - which are all class-scoped and drawn
 * at their own sizes - keep winning.
 */
.entry-content {
    color: var(--gboneai-color-dark);
    font-size: 20px;
    line-height: 1.2;
}

/*
 * The prose defaults, and BOTH halves are :where() on purpose.
 *
 * `.entry-content :where(h2)` is (0,1,0) - the same weight as a block's own
 * `.gboneai-category-card__title`, so which of them wins came down to which
 * stylesheet loaded last. This one does, and it was quietly overriding every
 * block heading inside the content: the home page's category cards are drawn
 * at line-height 0.9 and rendered at 1.4, which pushed the panel past its
 * drawn 28.27% and stopped it being the same height on every card.
 *
 * Wrapping the ancestor too makes the whole rule (0,0,0), which is what a
 * default should be - anything with a class of its own beats it, and prose
 * with no rules of its own still gets the rhythm.
 */
:where(.entry-content) :where(h2) {
    font-size: 28px;
}

:where(.entry-content) :where(h2, h3, h4, h5, h6) {
    line-height: 1.4;
}

/* The column's own top padding places the first line, so the first block must
   not add its margin on top of it. */
.entry-content > :first-child {
    margin-block-start: 0;
}

/*
 * 294 on every content screen, against the band that ends at 257 - so 37, where
 * the theme's own clamp gives 72. Not on the home page, which has no band and
 * already zeroes this.
 */
.gboneai-content {
    padding-block-start: 37px;
}

/* Secondary Header */
/*
 * The page intro band. Rectangle 4 on every archive and content screen -
 * 1920 x 257 in navy, with the 90px header sitting on top of it, so 167 of it
 * shows. It was light grey with dark text on all of them.
 */
.secondary-header {
    width: 100%;
    overflow-wrap: anywhere;
    background: var(--gboneai-color-dark);
    color: var(--wp--preset--color--white, #fff);

    /* Rectangle 4 is 1920 x 257 from the top of the PAGE, with header 3 drawn on
       top of its first 90. So the band runs up behind the bar rather than
       starting below it: the bar is rgba(27,43,80,.95) over a blur, and 95%
       navy over navy is navy, where 95% navy over white is visibly lighter.
       That mismatch is what made the two halves look like different colours.

       A flex item of body, so the negative margin shortens the column by 90 and
       nothing below moves. */
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-block-start: -90px;
    padding-block-start: 90px;
}

/* Breadcrumb at y129 and title at y154 on a band that ends at 257, with the
   header taking the first 90 - so 39 above and 63 below. */
.secondary-header__inner {
    box-sizing: border-box;
    padding-block: clamp(1.25rem, 2.03vw, 39px) clamp(1.5rem, 3.28vw, 63px);
    text-align: center;
}

/* 353:2291 - 45px Bold at leading 0.9. It was rendering at 52. */
.secondary-header__title {
    margin: 0;
    font-family: var(--gboneai-font-headings-family);
    font-size: clamp(1.75rem, 2.34vw, 45px);
    font-weight: 700;
    line-height: 0.9;
}

.gboneai-breadcrumbs {
    margin-block-end: 11px;
    font-size: 0.875rem;

    /* The drawn breadcrumb is a 14px box for 14px text - 129 to 143, with the
       title at 154. Left at the inherited 1.6 it measured 22, which is the whole
       of why the intro band came out 176 tall against a drawn 167 and every
       screen below it sat 9px low. */
    line-height: 1;
}

.gboneai-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
}

.gboneai-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.gboneai-breadcrumbs__item:not(:last-child)::after {
    margin-inline: 0.5rem;
    color: var(--gboneai-color-accent);
    content: "/";
}

.gboneai-breadcrumbs__link,
.gboneai-breadcrumbs__current {
    overflow-wrap: anywhere;
}

/*
 * 14px text with no padding is a 20 x 14 target, and WCAG 2.5.8 asks for 24.
 * The padding buys the height and the equal negative margin gives it back to the
 * layout, so the band stays the 167 the drawing gives it.
 */
/*
 * 14px text with no padding is a 20 x 14 target, and WCAG 2.5.8 asks for 24.
 * The padding buys it and the equal negative margin gives it back to the layout,
 * so the band stays the 167 the drawing gives it. 6 and 3 rather than 5 and 2,
 * because the rect lands a fraction under 24 at exactly 5 and 2.
 */
.gboneai-breadcrumbs__link {
    display: inline-block;
    padding: 6px 3px;
    margin: -6px -3px;
    color: inherit;
    /* 494:5089 draws the trail plain; the underline is for hover and focus. */
    text-decoration: none;
}

.gboneai-breadcrumbs__link:hover,
.gboneai-breadcrumbs__link:focus-visible {
    text-decoration: underline;
}

.gboneai-breadcrumbs__current {
    opacity: 0.8;
}

/* Both variants are the same navy band; the event one adds a meta row. */
.secondary-header--default {
    background: var(--gboneai-color-dark);
}

.secondary-header--event {
    background: var(--gboneai-color-dark);
    color: var(--gboneai-color-white);

    /*
     * 384 TALL ON THE EVENT, and the extra 72 at the bottom is not decoration:
     * `497:5246` runs this band to 384 and starts the opening banner at 285, so
     * the banner rides 99px up into it. The band was 312 from its content alone,
     * which left only 63px of clear navy under the date strip - not enough for
     * the drawn overlap, so the banner covered the dates instead.
     *
     * The plugin's `.gb-event__hero` carries the matching -99 margin. The two
     * numbers belong together; change one and the banner lands on the strip.
     */
    padding-block-end: 72px;
}

.secondary-header__event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* 20 between the items, as drawn on 497:5246. */
    gap: 0.75rem 20px;
    margin-block-start: 1.25rem;

    /*
     * 28px, read off the render of 497:5246 - get_metadata fails on that node,
     * so the size was taken by measuring the drawn glyphs against the built
     * ones at a known size (1.23-1.29x of the 22 this had been). It was `122%`,
     * which depended on whatever the body size happened to be. Leading 1.25
     * keeps the strip 35 tall, so the band under it does not move.
     */
    font-size: 28px;
    line-height: 1.25;
}

/* Each item is its yellow icon and its text, 8 apart; the icon comes first, so
   in RTL it sits on the right of the words, as drawn. */
.secondary-header__event-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.secondary-header__event-icon {
    flex: 0 0 auto;
    inline-size: auto;
    block-size: 22px;
}

.secondary-header__event-location {
    margin: 0;
    font-style: normal;
}

.secondary-header__event-waze {
    color: inherit;
    /* Drawn as plain text beside its icon, like the three items before it. */
    text-decoration: none;
}

.secondary-header__event-waze:hover span,
.secondary-header__event-waze:focus-visible span {
    text-decoration: underline;
}
@media (max-width: 600px) {
    .secondary-header__event-meta {
        align-items: flex-start;
        flex-direction: column;
        font-size: 20px;
    }
}

/* for insurance site */
.no-padding {
    padding: 0 !important;
}
.no-padding-bottom {
    padding-bottom: 0 !important;
}
.no-margin {
    margin: 0 auto !important;
}
.no-margin-bottom {
    margin-bottom: 0 !important;
}

.section-2 .big-title{
    font-size: 335%;
}

/* home page 4 items section 2 START */

/* The design's news card is 440 x 628 (234:1183), and three of them with 40px
 * gaps fill the 1400 band exactly. The gap is set here rather than left to the
 * theme's clamp, which resolves to 32 at this width.
 *
 * It carried max-width: 320px and aspect-ratio: 160/237 - the numbers of the
 * *small* article card, 320 x 429. In a 445px grid track that left the card
 * 125px short of its column, so conform.sh measured a 158px gap against the
 * drawn 40 and a 320 x 474 card against the drawn 440 x 628. */
.gboneai-posts-grid {
    --gboneai-posts-grid-gap: 40px;
}

.gboneai-posts-grid .post-item,
.wp-block-group.post-item{
    position: relative;
    aspect-ratio: 440/628;
    border-radius: 20px;
    overflow: hidden;
}
.gboneai-posts-grid .post-item .wp-block-image,
.wp-block-group.post-item .wp-block-image{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.gboneai-posts-grid .post-item .wp-block-image img,
.wp-block-group.post-item .wp-block-image img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.gboneai-posts-grid .post-item .post-item-content,
.wp-block-group.post-item .wp-block-group.post-item-content{
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    background-color: rgba(27, 43, 80, 1);
    padding: 10px;
    color: #fff;
    opacity: .96;
}

/* The news card is blue on every card - 234:1183 - and rotating navy, blue,
 * yellow and turquoise across this row was what made it read as the category
 * cards above it.
 *
 * THE ROTATION BELONGS TO THOSE CATEGORY CARDS, and it is theirs now: a
 * `panelColor` attribute on gboneai/category-card, set per card by seed 04.
 * Three rules lived here addressing `.wp-block-group.post-item.item-2` and up,
 * which nothing on the site emits - so the row was four navy cards and the
 * colours sat in the stylesheet pointed at markup that does not exist.
 * Removed 27/08. */
.gboneai-posts-grid .post-item:hover .post-item-content,
.wp-block-group.post-item:hover .wp-block-group.post-item-content{
    animation: post-item-animation 0.5s ease-in-out forwards;
}
.gboneai-posts-grid .post-item .post-item-content .post-item-title{
    margin: 0;
}
.gboneai-posts-grid .post-item .post-item-content .post-item-title a,
.wp-block-group.post-item .wp-block-group.post-item-content .wp-block-heading{
    color: #fff;
    line-height: 120%;
    font-size: 178%;
    text-decoration: none;
    font-weight: 700;
}
.gboneai-posts-grid .post-item .post-item-content .post-item-excerpt{
    margin-bottom: 20px;
}
.gboneai-posts-grid .post-item .post-item-content .post-item-excerpt > a,
.wp-block-group.post-item .wp-block-group.post-item-content .wp-block-paragraph{
    color: #fff;
    line-height: 120%;
    text-decoration: none;
    margin-top: 0;
}
.gboneai-posts-grid .post-item .post-item-content .post-item-read-more,
.wp-block-group.post-item .wp-block-group.post-item-content .wp-block-buttons a.wp-block-button__link{
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    line-height: 100%;
}
div[id^="section-"]{
    padding: 80px 80px 0 80px;
}
div[id^="section-"]:last-child{
    padding: 80px;
}
div[id^="section-"].no-margin-top{
    padding: 0 80px 80px 80px;
}
.wp-block-group.home-banner-1{
    position: relative;
}
.wp-block-group.home-banner-1 figure img{
    opacity: 0;
}
.wp-block-group.home-banner-1 .home-banner-1-content{
    position: absolute;
    top: 23%;
    right: 15%;
    width: 265px;
    margin: 0;
}
.wp-block-group.home-banner-1 .home-banner-1-content .wp-block-heading{
    color: #fff;
    font-size: 333%;
    line-height: 100%;
}
.wp-block-group.home-banner-1 .home-banner-1-content p{
    color: #fff;
    font-size: 167%;
    line-height: 100%;
    margin-top: 0;
}
.home-banner-form-content{
    background-color: var(--wp--preset--color--primary);
    padding: 20px;
    border-radius: 20px;
    height: 100%;
}
.home-banner-form-content .wp-block-heading{
    font-size: 210%;
    color: #fff;
    text-align: center;
    line-height: 100%;
}
.home-banner-form-content > p{
    text-align: center;
    color: #fff;
    line-height: 100%;
    margin: 0;
}
.form-wrap .form-wrap-row p{
    margin: 10px 0 0 0;
}
.form-wrap .form-wrap-row:first-child p{
    margin: 0;
}
.home-banner-form-content p:last-child{
    font-weight: 100;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7-form input:not([type="checkbox"]),
.wpcf7-form textarea,
.wpcf7-form select{
    border-radius: 50px;
    height: 45px;
    width: 100%;
    border: none;
    outline: none;
    direction: rtl;
    padding: 2px 10px;
}
.wpcf7 input[type="submit"]{
    border-radius: 50px;
    height: 45px;
    width: 127px;
    border: none;
    color: #fff;
    background-color: var(--gboneai-color-accent);
}
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus{
    direction: ltr;
}
.form-wrap .form-wrap-row:not(.row-acceptance) .wpcf7-form-control-wrap{
    height: 45px;
    display: block;
}
.form-wrap .form-wrap-row .wpcf7-acceptance,
.form-wrap .form-wrap-row .wpcf7-acceptance a:hover,
.form-wrap .form-wrap-row .wpcf7-acceptance a{
    color:#FFF;
}
.form-wrap .form-wrap-row.row-submit > p{
    text-align: center;
}

.wpcf7-form:not(.submitting) .wpcf7-spinner,
form[data-status="init"] .wpcf7-spinner{
    display: none;
}
.form-wrap .form-wrap-row:not(.row-acceptance) .wpcf7-form-control-wrap:has(.wpcf7-not-valid){
    height: 55px;
}
.form-wrap .form-wrap-row{
    position: relative;
}
.form-wrap .form-wrap-row .wpcf7-not-valid-tip{
    position: absolute;
    top: 80%;
}
.gif-wrap > .wp-block-paragraph{
    width: 164px;
    text-align: center;
    margin: 10px auto;
}
.gif-wrap > .wp-block-paragraph a{
    text-decoration: none;
    color: var(--gboneai-color-text);
}
.gif-wrap figure{
    width: 164px;
    height: 164px;
    border-radius: 50%;
    border: 1px solid #fff;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}
.gif-wrap.icon-podcast figure{
    border-color: rgba(16, 67, 255, 1);
}
.gif-wrap.icon-agent figure{
    border-color: var(--gboneai-color-accent);
}
.gif-wrap.icon-magazine figure{
    border-color: var(--gboneai-color-turquoise);
}
.gif-wrap.icon-courses figure{
    border-color: var(--gboneai-color-surface);
}
.gif-wrap figure image{
    width: calc(100% - 40px) !important;
    height: auto !important;
}
.secondary-header{
    background-image: url("assets/images/header/secondary_header.svg");
    background-position: bottom left;
    background-repeat: no-repeat;
}
@keyframes post-item-animation {
    from {
        bottom: -50px;
        opacity: .96;
    }
    to {
        bottom: 0;
        opacity: 1;
    }
}
/* home page 4 items section 2 END */

/* ---------------------------------------------------------------------------
 * Contact card — home page bottom row, Figma 898:7507
 *
 * Site-specific: this blue card with these four fields is this site's design,
 * not something GBOneAI should carry to the next project. It styles Contact
 * Form 7's output, so some selectors reach inside markup we do not own.
 *
 * Sized in pixels, deliberately.
 *
 * The first attempt used container query units, and they are a trap on the
 * container itself: `cqi` on the element that declares `container-type` does NOT
 * resolve against that element. It resolves against the nearest *ancestor*
 * container, and against the viewport when there is none - so `padding-inline:
 * 12.16cqi` became 12.16% of 1920 = 233px a side, the content box collapsed to
 * zero, and every line of Hebrew wrapped to one character. Measured, not
 * guessed: padInline came back as 233.472px.
 *
 * cqi is still correct for descendants of a container. It is wrong here, and
 * fixed pixels off the drawn 444px card are both simpler and honest about what
 * this is: one card at one size, with a single query for when it gets narrow.
 *
 * Vertical rhythm from the drawing: 27 top, title 38, lead 24, sub 24, fields
 * start at 128 on a 60px pitch, consent 368, button 399, card ends 472.
 * ------------------------------------------------------------------------- */

.gb-contact-card {
	box-sizing: border-box;
	background: var(--blue, #1043FF);
	border-radius: 20px;
	/* Percentage resolves against the column, not against the card, so it needs
	   no container query and cannot go circular. 33 of 444 = 7.43%. */
	padding: 27px clamp(20px, 7.43%, 33px) 28px;
	text-align: center;
	color: var(--white, #FFFFFF);
}

.gb-contact-card > * {
	margin-block: 0;
}

.gb-contact-card__title {
	color: inherit;
	font-size: 1.875rem;          /* 30 */
	font-weight: 700;
	line-height: 1.25;
}

.gb-contact-card__lead,
.gb-contact-card__sub {
	color: inherit;
	font-size: 1.125rem;          /* 18 */
	line-height: 1.33;
}

.gb-contact-card__lead {
	font-weight: 700;
}

.gb-contact-card__sub {
	font-weight: 400;
	margin-block-end: 10px;       /* 128 - 118 */
}

/* The fields are 336 wide against a 377 heading block, so the form area is
   narrower than the card. Set on our own element rather than on CF7's .wpcf7
   wrapper: that markup belongs to the plugin and can change under us. */
.gb-contact-card__fields,
.gb-contact-card__consent,
.gb-contact-card__actions {
	max-inline-size: 336px;
	margin-inline: auto;
}

.gb-contact-card__fields {
	display: flex;
	flex-direction: column;
	gap: 15px;                    /* the 60px pitch minus the 45px field */
}

/* Each field is wrapped in a label carrying visually hidden text - see
 * tools/seed/05-contact-form.php. The label and CF7's own wrapper both have to
 * be blocks, or the input's inline-size: 100% resolves against an inline box. */
.gb-contact-card__fields > label,
.gb-contact-card__fields .wpcf7-form-control-wrap {
	display: block;
}

.gb-contact-card input[type="text"],
.gb-contact-card input[type="tel"],
.gb-contact-card input[type="email"],
.gb-contact-card textarea {
	/* Block, not the default inline-block. Inline boxes sit on a baseline and
	   carry the line-height leading below them, which added a few pixels to every
	   field once each one was wrapped in a label - 9px across the four, and 8px
	   on the whole row. */
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 45px;
	padding-inline: 24px;
	border: 0;
	border-radius: 999px;         /* the fields are pills */
	background: var(--white, #FFFFFF);
	color: var(--blue-text, #1B2B50);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	text-align: start;
}

/* A one-row textarea rather than a text input: the drawing gives "הודעה" the
   same 45px as the rest, but a visitor with a long question must not be
   silently truncated by a single-line field. */
.gb-contact-card textarea {
	padding-block: 11px;
	resize: vertical;
	overflow: hidden auto;
}

.gb-contact-card ::placeholder {
	color: var(--blue-text, #1B2B50);
	opacity: 1;
}

.gb-contact-card input:focus-visible,
.gb-contact-card textarea:focus-visible {
	outline: 2px solid var(--yellow, #FCAC0B);
	outline-offset: 2px;
}

.gb-contact-card__consent {
	margin-block-start: 15px;
	font-size: 0.8125rem;         /* 13 */
	line-height: 1.23;
}

/*
 * The same treatment as `.footer-legal-menu a` below: padding on the link,
 * pulled back with a negative margin so the consent row does not move. 103 x 18
 * becomes 103 x 28.
 *
 * It does NOT reach 44, and it must not try to. The drawn consent row is 16 tall
 * with the message box 10 above it and the submit 10 below, so a 44px target
 * would extend over both and start swallowing clicks meant for the submit
 * button - a worse fault than the one being fixed.
 *
 * 44 is the AAA figure. WCAG 2.2 AA (2.5.8) asks for 24 and exempts a target
 * "in a sentence or ... constrained by the line-height of non-target text",
 * which is exactly what this link is. So the row conforms either way; the
 * padding is a usability gain on a phone, not a compliance fix.
 */
.gb-contact-card__consent a {
	color: inherit;
	text-decoration: underline;
	display: inline-block;
	padding: 5px 4px;
	margin: -5px -4px;
}

.gb-contact-card__consent .wpcf7-list-item {
	margin: 0;
}

.gb-contact-card__actions {
	margin-block-start: 15px;
}

.gb-contact-card input[type="submit"] {
	min-inline-size: 127px;
	block-size: 45px;
	padding-inline: 24px;
	border: 0;
	border-radius: 999px;
	background: var(--yellow, #FCAC0B);
	color: var(--white, #FFFFFF);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--gboneai-duration, 280ms) var(--gboneai-ease, ease);
}

.gb-contact-card input[type="submit"]:hover,
.gb-contact-card input[type="submit"]:focus-visible {
	background: var(--blue-text, #1B2B50);
}

/* CF7's own validation and response text, which inherits nothing by default. */
.gb-contact-card .wpcf7-not-valid-tip,
.gb-contact-card .wpcf7-response-output {
	color: var(--white, #FFFFFF);
	font-size: 0.8125rem;
	text-align: start;
}

.gb-contact-card .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 8px;
}



/* The design draws the join banner and the contact card at the same height (both
   472). The banner block carries `min-block-size: 424px` rather than a ratio,
   because it is also used on its own at a different width, so it must not be
   given a fixed height here. Letting it fill its column instead makes the row
   equalise on whichever side is taller, without changing the block for every
   other place it appears.

   SCOPED TO THAT ROW. As `.wp-block-column > .gboneai-cta-banner` it also caught
   the banner on the text pages, which are now a two-column band with the side
   menu - and there the banner is one of six stacked children, so `100%` made it
   the height of the whole column. Measured 1039 x 1386 against a drawn 1039 x
   424, overflowing the band and pushing the share row below the articles.

   `gb-home-bottom` is the row this was written for, and the archive footers
   reuse the same class deliberately - see tools/seed/12-archive-footer.php. */
.gb-home-bottom > .wp-block-column > .gboneai-cta-banner {
	block-size: 100%;
}

/* The four-icon row, Figma 242:1798.
 *
 * 4 icons of 290 with 10px gaps is 1190 - narrower than the 1400 wide band and
 * wider than the 1040 measure. It is declared alignwide so it escapes the
 * measure, and then the columns rather than the box carry the 1190.
 *
 * Do not narrow the alignwide box - centre the columns inside it.
 *
 * The theme breaks alignwide out with `margin-inline: 50%` plus a translate.
 * Capping that element's width over-constrains the margins, and RTL then drops
 * the opposite one, so the row lands half its own width off centre. Measured:
 * 960 to 2150 instead of 365 to 1555.
 *
 * Leaving the box at 1400 and pinning the four columns to their drawn 290 gives
 * the same 1190 of content, centred, without touching the breakout maths. */
.gboneai-content .gb-icon-row,
.gb-archive-footer .gb-icon-row {
	justify-content: center;
}

.gboneai-content .gb-icon-row > .wp-block-column,
.gb-archive-footer .gb-icon-row > .wp-block-column {
	flex: 0 0 290px;
}

/* Between the drawn width and the width at which core stacks the columns, the
 * icons wrap in pairs rather than shrinking into a row of four cramped rings -
 * the label alone needs 218px.
 *
 * Two things were wrong here and both had to be fixed to make it work at all.
 *
 * The width. The columns are flex: 0 0 290px, so the row is 1190 wide and cannot
 * shrink; with the 1rem gutter each side it needs a 1222px viewport. The bound
 * was 800, which covers almost nothing, because core already stacks columns at
 * 781. So every width from 801 to 1222 kept four across and pushed 178px of the
 * row off both edges of the page. Measured at 834 and 1024: document scrollWidth
 * 1012 and 1107 against viewports of 834 and 1024. That is iPad portrait and
 * landscape.
 *
 * The !important. WordPress prints `flex-wrap: nowrap !important` inline for
 * every columns block, so the plain declaration here never applied - the basis
 * below took effect and the wrap did not, which is a worse layout than either.
 * The whole rule had been dead since it was written.
 *
 * The lower bound hands control back to core below 782, where it stacks the
 * columns one per row on its own. */
@media (min-width: 782px) and (max-width: 1240px) {
	.gboneai-content .gb-icon-row,
.gb-archive-footer .gb-icon-row {
		flex-wrap: wrap !important;
	}

	.gboneai-content .gb-icon-row > .wp-block-column,
.gb-archive-footer .gb-icon-row > .wp-block-column {
		flex: 0 0 calc(50% - 5px);
	}
}

/* Advertisers carousel — this project's numbers, Figma 242:1001.
 *
 * The component is painted in the theme; only the values that came off this
 * particular drawing are set here, as custom properties, so nothing in
 * gboneai-sliders.css has to be repeated or overridden rule by rule.
 *
 * Banner 1399 x 542. Panel 440 wide, so 31.45%. Content frame at x54 y58, 328
 * wide, with the arrows ending on the same 382 right edge - which works out as
 * 58 top, 58 end, 37 bottom, 54 start.
 *
 * Doubled selector on purpose. gboneai-sliders.css is enqueued from inside the
 * shortcode, which runs during render and therefore lands AFTER this file in the
 * queue - so a single-class rule here loses on source order and the panel keeps
 * the theme default. Measured: 56px uniform padding instead of 58/58/37/54. */
.gboneai-slider.gboneai-slider--type-carousel-side-image {
	--gboneai-side-carousel-content-width: 31.45%;
	--gboneai-side-carousel-panel-bg: var(--blue-text, #1B2B50);
	--gboneai-side-carousel-panel-color: var(--white, #FFFFFF);
	--gboneai-side-carousel-panel-padding: 58px 58px 37px 54px;
	/* 30px and 22px, as drawn on all three variants. They were 24 and 16, which
	   made the panel read as a caption rather than as the advertisement it is -
	   and the comment beside the heading already said 30. */
	--gboneai-side-carousel-heading-size: 30px;
	--gboneai-side-carousel-text-size: 22px;
}

/*
 * The call to action is drawn px-[20px] py-[10px] - sized by its label, not
 * fixed. It was pinned to 157 x 40, which is the Passport Card button measured
 * on its own; the other two advertisers say "לתוכנית הכנס והרשמה" and
 * "*8161 שלוחה 6" and would have been clipped by it.
 */
.gboneai-slider.gboneai-slider--type-carousel-side-image .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 40px;
	padding: 10px 20px;
	font-size: 20px;
	line-height: 1;
}

/* Below the drawn width a 31.45% panel cannot hold 328px of text, so up to
   1431 gboneai-sliders.css stacks the image over the panel. Here only the
   panel's padding narrows, and only below 900, where the drawn 58 is too much. */
@media (max-width: 900px) {
	.gboneai-slider.gboneai-slider--type-carousel-side-image {
		--gboneai-side-carousel-panel-padding: 32px 24px 24px;
	}
}

/* ------------------------------------------------- home: the news band ---- */

/*
 * Figma 233:1071 - a full-bleed gradient band holding the news heading and the
 * card row. The heading is 60px Discovery FS Bold in white, at line-height 0.9
 * (234:1181), and aligned to the end of the 1400 band like the row beneath it.
 *
 * Sized here rather than left to the theme's h2, which renders it at 27px. The
 * "why join us" heading above is the same 60px in the design and had the same
 * problem - both were invisible until conform.sh started checking type on
 * sections as well as on items.
 */
.gb-home-news > h2,
.entry-content > h2.has-text-align-center,
.gb-home-grey > h2.has-text-align-center {
    font-size: 60px;
    font-weight: 700;
    line-height: 0.9;
}

/* 222:693 - blue-text, not the body colour. */
.entry-content > h2.has-text-align-center,
.gb-home-grey > h2.has-text-align-center {
    color: var(--gboneai-color-dark);
}

/* 222:684 - the opening paragraph is 22px at 1.2, in blue-text, centred. It was
   inheriting the body's 18px at 1.6 in #212121.
   810 wide, three sentences on their own lines (seed 04 breaks them), five
   lines and 130 tall at 1920. */
.home .entry-content > p.wp-block-paragraph,
.home .gb-home-intro {
    color: var(--gboneai-color-dark);
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
}

/* The :not()s are there to out-rank the measure rule in main.css they mirror. */
.home .gb-home-grey > .gb-home-intro:not(.alignwide):not(.alignfull) {
    max-inline-size: min(810px, calc(100% - (var(--gboneai-gutter) * 2)));
    margin-inline: auto;
}

/* ------------------------------------------ home: the grey band (A3) ------ */

/*
 * 222:668 draws #F3F3F5 from the foot of the hero (y721) to the top of the
 * news band (y2388): behind the intro, the join button, "למה להצטרף", the
 * four cards and the advertisers carousel. Seed 04 wraps them in one
 * full-bleed group, gb-home-grey; the colour and the 52 / 135 padding that
 * replace the old first and last section margins are inline on that group.
 * Here only the flow gap WordPress adds between children is cancelled, so
 * the inline margins each section carries stay the whole rhythm.
 */
.home .gb-home-grey > * {
    margin-block-end: 0;
}

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

.gb-home-news > h2 {
    text-align: start;
}

/* ---------------------------------- home: the category cards, tablet (A7) - */

/*
 * Core columns stack at 781 and the card keeps its photograph's proportions, so
 * each of the four became 736 x 1091 at 768 - about 4.4k px of cards. Two to a
 * row between 601 and 781, with the row's own 40 gap between them.
 */
@media (min-width: 601px) and (max-width: 781px) {
    .gb-home-cards.wp-block-columns {
        flex-wrap: wrap !important;
    }

    .gb-home-cards.wp-block-columns > .wp-block-column {
        flex-basis: calc(50% - 20px) !important;
        flex-grow: 0;
    }
}

/* ---------------------------------------------- home: the join button ----- */

/*
 * Figma 222:674 - 210 x 50, radius 50, blue, 26px Discovery FS *Regular* in
 * white. The theme's button inherits the body's 18px, which made it 149 wide.
 */
.gb-home-join .wp-block-button__link {
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}

/* ------------------------------------------- home: the news card panel ---- */

/*
 * Figma 234:1183. The panel is inset 13px from each side of the card and 17px
 * from its foot, radius 15, always #1043FF at 95% - not the full-bleed bar in
 * a rotating colour that the grid gives by default, which is what made this row
 * read as the category cards above it.
 *
 * It holds a date and a title and nothing else. The read-more button is drawn
 * hidden, which is what the resting -50px offset and the hover slide already
 * do - that behaviour is kept.
 */
/* The base rule is .gboneai-posts-grid .post-item .post-item-content, so these
 * have to reach the same depth to win - two classes were not enough and the
 * panel stayed navy and full-bleed.
 *
 * SHARED WITH THE TEXT PAGE. 332:1028 draws the same card as 234:1183 - blue
 * panel, radius 15, inset 13/17, opacity .95, date 18/0.5, title Bold/0.9 -
 * at 320 wide instead of 440. So the two screens name the same rules rather
 * than carrying a copy each, and only what actually differs with the width
 * (the panel padding and the title size) is overridden further down, under
 * `text pages`. */
.gb-home-news .gboneai-posts-grid .post-item .post-item-content,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-content,
.gb-blog-grid .post-item .post-item-content {
    inset-block-end: 17px;
    inset-inline: 13px;
    background-color: #1043ff;
    border-radius: 15px;
    padding: 30px;
    opacity: 0.95;
    text-align: start;
}

/*
 * No hover slide here. The -50px resting offset exists to hide a read-more
 * button until the card is hovered; the drawing has no button on this card
 * (234:1183 draws it hidden), so the panel rests where it is drawn - and with
 * the card clipping its own overflow, the offset was cutting 50px off the
 * bottom of every panel.
 */
/*
 * AND THE BLOG GRID IS IN THIS LIST NOW.
 *
 * It was the one screen left running `post-item-animation`, and it had nothing
 * to reveal: the card renders no button, so the panel slid for its own sake.
 * Worse, it glitched - the panel rests at `inset-block-end: 17px` and the
 * keyframes run `bottom: -50px` to `bottom: 0`, so hovering dropped it 67px,
 * slid it up to 17 BELOW where it started, and snapped back on mouse-out.
 *
 * `344:2262` draws no panel movement at all. What it draws is the pill below.
 */
.gb-home-news .gboneai-posts-grid .post-item:hover .post-item-content,
.gb-page-articles .gboneai-posts-grid .post-item:hover .post-item-content,
.gb-blog-grid .post-item:hover .post-item-content {
    animation: none;
}

/*
 * Reaching the same depth as the base rules on purpose. The grid styles the
 * card title with
 *   .gboneai-posts-grid .post-item .post-item-content .post-item-title a
 * at 178% of an 18px panel, which came out at 37.5px against the drawn 24 - and
 * two classes were nowhere near enough to override it.
 *
 * 234:1183: date 18px Regular at leading 0.5, title 24px Bold at leading 0.9,
 * both tracked, 10px between them. The tight leading on the date is what keeps
 * the panel at its drawn 123px rather than 131.
 */
.gb-home-news .gboneai-posts-grid .post-item .post-item-content .post-item-date,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-content .post-item-date,
.gb-blog-grid .post-item .post-item-content .post-item-term {
    display: block;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.18px;
    line-height: 0.5;
    margin-block: 4px 10px;
}

.gb-home-news .gboneai-posts-grid .post-item .post-item-content .post-item-title,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-content .post-item-title,
.gb-blog-grid .post-item .post-item-content .post-item-title {
    margin: 0;
}

/*
 * 344:3600 sets the title 22 Bold at leading 0.9. The 0.9 on the inline `a`
 * alone left the h3's own line box at 1.6, and a two-line title measured 67
 * against a drawn 40 - the whole of the panel's extra 65px.
 */
.gb-blog-grid .post-item .post-item-content .post-item-title {
    font-size: 22px;
    line-height: 0.9;
}

.gb-home-news .gboneai-posts-grid .post-item .post-item-content .post-item-title a,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-content .post-item-title a,
.gb-blog-grid .post-item .post-item-content .post-item-title a {
    font-size: 24px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.24px;
}

/* 440 x 628 with a 20px radius and the card shadow, per the drawing. */
.gb-home-news .post-item,
.gb-page-articles .post-item,
.gb-blog-grid .post-item {
    box-shadow: var(--gboneai-shadow-card, 0 0 20px rgba(0, 0, 0, 0.1));

    /*
     * AND AN OPAQUE CARD UNDER THE PHOTOGRAPH.
     *
     * 234:1183 is a full-bleed photograph, so nothing behind it is ever meant
     * to be seen. The card had no background at all, and the band behind it is
     * the blue gradient of 233:1071 - so when the four demo posts were pointed
     * at the category card images, which are alpha cut-outs, the gradient came
     * through the erased half of every one and the row read as three people
     * floating on blue.
     *
     * The photographs are the right fix and they are fixed. This is the second
     * one: whatever a member of staff uploads next, the band does not show
     * through it.
     */
    background-color: var(--wp--preset--color--white, #fff);
}

/*
 * And the photograph fills the card rather than being trusted to have its
 * shape. The demo images are cut to the drawn 440 x 628 exactly, so `height:
 * auto` happens to land on 628 - but a featured image from the editor will be
 * whatever the camera gave it, and a landscape one leaves the foot of the card
 * bare. Same depth as the grid's own `.gboneai-posts-grid .post-item-image`,
 * which sets `height: auto`, because a tie there is decided by load order.
 *
 * `.post-item-inner` IS IN THIS LIST, and it has to be. A percentage height
 * resolves against a definite one, and the card's own height is definite -
 * `aspect-ratio: 440/628` - but `.post-item-inner` sits between them with no
 * height at all, so the chain breaks there and both children compute to `auto`.
 * Written without it first, and it measured as a no-op: a 440 x 270 picture
 * left the figure 270 tall inside a 628 card, which is the exact fault the rule
 * is here to stop. Invisible against demo images already cut to 440 x 628.
 * `.gb-blog-grid` below has always had it.
 */
.gb-home-news .gboneai-posts-grid .post-item .post-item-inner,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-inner,
.gb-home-news .gboneai-posts-grid .post-item .post-item-figure,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-figure {
    block-size: 100%;
}

.gb-home-news .gboneai-posts-grid .post-item .post-item-image,
.gb-page-articles .gboneai-posts-grid .post-item .post-item-image {
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}

/* -------------------------------------------- home: the advertiser panel -- */

/*
 * Figma 234:1235 / 234:1237 / 234:1256. The sizes come from the custom
 * properties above; only the rhythm and the bold opening line are set here.
 * The drawing puts 15px between every part of the panel.
 */
.gboneai-slider--type-carousel-side-image .gboneai-side-carousel__content h3 {
    margin: 0;
}

.gboneai-slider--type-carousel-side-image .gboneai-side-carousel__content p {
    line-height: 1.3;
    margin-block: 15px 0;
}

/*
 * Consecutive paragraphs are one block of copy, not two.
 *
 * The drawing puts 15px between the title, the copy and the button - but the
 * paragraphs *within* the copy are mb-0, running together at leading 1.3. Giving
 * every paragraph 15px opened a gap under the bold opening line that is not
 * drawn anywhere.
 */
.gboneai-slider--type-carousel-side-image .gboneai-side-carousel__content p + p {
    margin-block-start: 0;
}

/* The bold opening line the two event banners are drawn with. */
.gboneai-slider--type-carousel-side-image .gboneai-side-carousel__content .gb-slide__lead {
    font-weight: 700;
}

.gboneai-slider--type-carousel-side-image .gboneai-side-carousel__content .wp-block-buttons {
    margin-block-start: 15px;
}


/* ================================================================ text pages
 *
 * Figma `329:358` "text page with side menu" - the drawing §8 of the
 * specification links these pages at. They were built to `332:1016`, "text page
 * plain": the same furniture in a centred 1040 column with no menu, the share
 * row in a different place, and the articles as a block rather than a band. See
 * DEFINITION_DEVIATIONS.md entry 6 for how that happened.
 *
 * So the page is the 1400 band holding a 1040 column and a 323 side menu - the
 * arrangement the officers page already had - and everything inside it is
 * measured from x260 rather than x440:
 *
 *   side menu     323 x 308 at x1337, y298                332:878
 *   hero          1040 x 395 at x260, y294, radius 20     332:895
 *   body          1040 from y719                          329:373   (+30 above)
 *   download      185 x 59.7, flush to the START edge     332:979   (+40)
 *   contact form  1039 x 311, BLUE, radius 20             898:7692  (+17)
 *   join banner   1039 x 424                              329:427   (+24)
 *   share row     1039 x 72                               332:919   (+30)
 *   "אולי יעניין אותך גם" - a FULL-BLEED 1920 x 683 band   329:395   (+79)
 *
 * Four of the seven are components that already exist and are placed rather than
 * built - the share bar, the contact card, the CTA banner and the posts
 * carousel. What is new here is the hero, the download block, and the wide
 * variant of the contact card.
 */



/* --------------------------------------------------- the two-column band --- */

/*
 * `332:878` sits at y298 and `332:895` at y294, so the panel starts four pixels
 * below the top of the hero beside it.
 */
.gb-text-page-body > .wp-block-column:first-child {
	margin-block-start: 4px;
}

/*
 * 30 between the hero and the prose - `332:895` ends at 689 and `329:373` starts
 * at 719. The hero is an image block here rather than .entry-thumbnail, so the
 * 30 the rule below gives that one does not reach it.
 */
.gb-text-page-body .gb-page-hero {
	margin-block-end: 30px;
}

/* ------------------------------------------------------------- the hero --- */

/*
 * page.php already renders the featured image into .entry-thumbnail. The drawing
 * makes it a fixed 1040 x 395 window rather than however tall the photograph
 * happens to be, so it is an aspect-ratio and a cover crop - never a stretch.
 */
.gboneai-content .entry-thumbnail {
	margin-block-end: 30px;
}

.gboneai-content .entry-thumbnail img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1040 / 395;
	border-radius: 20px;
	object-fit: cover;
	/* The canonical token, not the frame's own: the Figma file carries two
	   shadow definitions and this frame has the spread-0 one. See CLAUDE.md. */
	box-shadow: 0 0 20px 3px rgba(0, 0, 0, .10);
}

/* --------------------------------------------------- the download block --- */

/*
 * 332:1087. A core/file block, not a block of our own: core already emits
 * exactly the two links the drawing has - the document's name, and "להורדה"
 * underlined beneath it - and gives the second one the `download` attribute for
 * free. What is ours is the PDF glyph beside them and the reset of core's
 * button styling, which would otherwise paint the second link as a filled pill.
 *
 * Grid rather than flex: the icon spans both text rows, and in RTL the first
 * grid column is the rightmost one, which is where the drawing puts it
 * (icon 1424..1480, text 1295..1404, so the gap is 20).
 */
.wp-block-file.gb-page-file {
	display: grid;
	align-items: center;
	/* fit-content, not the full 1040 the block would otherwise fill. A block
	   that spans the column is 440..1480 however far in its contents sit, and
	   the drawing measures this box at 1295..1480 - so the box has to be the
	   drawn 185. In RTL a fit-content block begins at the right on its own. */
	inline-size: fit-content;
	column-gap: 20px;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	color: var(--blue-text, #1B2B50);
	/* 20, and it has to beat core's .wp-block-file:not(.wp-element-button)
	   {font-size:.8em} - which is two classes to our one and had this label
	   rendering at 16, and the block 23px narrower than the drawing. */
	font-size: 1.25rem;
	line-height: 1.2;
}

.gb-page-file::before {
	content: "";
	grid-row: 1 / 3;
	grid-column: 1;
	inline-size: 56px;
	block-size: 57.5px;
	background: url("assets/icons/pdf.svg") no-repeat center / contain;
}

.gb-page-file > a {
	grid-column: 2;
	justify-self: start;
	color: inherit;
}

.gb-page-file > a:first-of-type {
	grid-row: 1;
	text-decoration: none;
}

/* core paints this as a filled button through .wp-element-button. The drawing
   has it as the second line of the label, underlined. */
.gb-page-file .wp-block-file__button {
	grid-row: 2;
	padding: 0;
	border: 0;
	border-radius: 0;
	margin: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	text-decoration: underline;
}

.gb-page-file > a:hover,
.gb-page-file > a:focus-visible {
	color: var(--blue, #1043FF);
}

/* ------------------------------------------- the contact card, wide form --- */

/*
 * 332:1048 is the same blue card as the home page's 898:7507 - same three
 * headings, same four fields, same yellow submit - laid out across 1039 instead
 * of down 444. So it is a modifier on .gb-contact-card rather than a second
 * component: one set of markup, one CF7 form, one place to change the fields.
 *
 * Card 1039 x 311, padding 39 / 65. Heading block 84 tall, then 13, then the
 * form: fields 45, +15 consent, +15 submit.
 */
.gb-contact-card--wide {
	padding: 39px 65px;
}

.gb-contact-card--wide .gb-contact-card__title {
	font-size: 2.5rem;           /* 40 */
	line-height: 1;
}

.gb-contact-card--wide .gb-contact-card__lead,
.gb-contact-card--wide .gb-contact-card__sub {
	font-size: 1.5rem;           /* 24 */
	line-height: 1;
}

/* The drawn offsets inside the heading block are 0 / 36 / 60 against boxes of
   40 / 24 / 24, so the second line starts 4px inside the first. That is Figma
   measuring cap height; reproduced rather than rounded away, because the
   conformance harness compares rendered boxes against these numbers. */
.gb-contact-card--wide .gb-contact-card__lead {
	margin-block-start: -4px;
}

.gb-contact-card--wide .gb-contact-card__sub {
	margin-block-start: 0;
	margin-block-end: 13px;
}

/* The form is 847 in a 909 inner width - narrower than the card, as on the home
   page, just at this width instead. */
.gb-contact-card--wide .gb-contact-card__fields,
.gb-contact-card--wide .gb-contact-card__consent,
.gb-contact-card--wide .gb-contact-card__actions {
	max-inline-size: 847px;
}

.gb-contact-card--wide .gb-contact-card__fields {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(4, 1fr);
}

.gb-contact-card--wide .gb-contact-card__consent {
	font-size: 1rem;             /* 16, against 13 on the narrow card */
	line-height: 1;              /* leading-none, as drawn - 1.23 made the card 6 too tall */
}

.gb-contact-card--wide input[type="text"],
.gb-contact-card--wide input[type="tel"],
.gb-contact-card--wide input[type="email"],
.gb-contact-card--wide textarea {
	font-size: 1.125rem;         /* 18 */
}

.gb-contact-card--wide input[type="submit"] {
	font-size: 1.25rem;          /* 20 */
	font-weight: 400;
}

/* Four pills across 847 is 200 each - too narrow for "טלפון נייד*" and "הודעה*"
   to sit beside a 24px inset once the viewport is anything less than the drawn
   width. Two up, then one up, rather than four cramped. */
@media (max-width: 900px) {
	.gb-contact-card--wide .gb-contact-card__fields {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.gb-contact-card--wide {
		padding: 30px 20px;
	}

	.gb-contact-card--wide .gb-contact-card__fields {
		grid-template-columns: 1fr;
	}

	.gb-contact-card--wide .gb-contact-card__title {
		font-size: 1.875rem;
	}

	.gb-contact-card--wide .gb-contact-card__lead,
	.gb-contact-card--wide .gb-contact-card__sub {
		font-size: 1.125rem;
	}
}

/* --------------------------------------------------- the article carousel --- */

/*
 * `329:395`. A FULL-BLEED BAND, and the same posts carousel the home page has -
 * arrows above the track at the band's end edge, heading at its start edge.
 *
 * It used to be `332:1025`: a constrained group on the page ground, heading
 * centred in blue-text, arrows below the cards. §8 of the specification links
 * these pages at `329:358`, which draws this instead. See
 * DEFINITION_DEVIATIONS 6, and the two overrides that undid the block's own
 * arrow positioning are gone with it.
 *
 * The band's own margin and padding come from the block, so the numbers live
 * beside the markup in tools/seed/11-text-pages.php: 79 above, 82 / 90 inside.
 */
.gb-page-articles {
	/* The drawing butts the band against the footer - 2743 to 2746. */
	margin-block-end: 0;
}

/* And main's own gap above the footer with it, or the band floats off it. */
main.site-main:has(.gb-page-articles) {
	padding-block-end: 0;
}

.gb-page-articles__title {
	margin: 0;
	font-size: 2.25rem;          /* 36 */
	font-weight: 700;
	letter-spacing: 0.36px;
	line-height: 0.9;
	/* The band's start edge - the right, in RTL. `329:405` ends on 1657. */
	text-align: start;
}

/*
 * The card. Shared with the home page above; these three are what changes at
 * 320 wide instead of 440.
 *
 * The aspect-ratio matters more than it looks. The base card is 440/628, and
 * at 320 that is 457 - so the section came out 28 too tall and every gap below
 * the cards was measured against the wrong bottom edge.
 */
.gb-page-articles .post-item,
.gb-blog-grid .post-item {
	aspect-ratio: 320 / 429;
}

.gb-page-articles .gboneai-posts-grid .post-item .post-item-content,
.gb-blog-grid .post-item .post-item-content {
	padding: 20px;
}

.gb-page-articles .gboneai-posts-grid .post-item .post-item-content .post-item-title a,
.gb-blog-grid .post-item .post-item-content .post-item-title a {
	font-size: 22px;
	letter-spacing: 0.22px;
}

/*
 * THE HOVER PILL - the only hover `344:2262` draws on this card.
 *
 * `344:3600` holds `כפתור קונטור לבן הובר לבן` at 110 x 28 with hidden="true",
 * the same component the category cards carry and hidden the same way. So the
 * card reveals it on hover, exactly as those do, and the panel grows upward to
 * make room - it is anchored to the card's foot, so nothing below it moves.
 *
 * The numbers are the category card's, because it is the same component: 110 x
 * 28, 1px white border, 50 radius, 16px, and 5/11 of padding rather than the
 * drawn 6/12 because Figma centres a stroke and CSS puts it inside the box.
 */
.gb-blog-grid.gboneai-posts-grid .post-item .post-item-content .post-item-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* The panel right-aligns everything in it - the date and the title both end
	   20 in from its edge - so the pill does too. */
	align-self: flex-start;

	border: 1px solid var(--wp--preset--color--white, #fff);
	border-radius: var(--gboneai-radius-pill, 999px);
	min-block-size: 0;
	block-size: 0;
	border-width: 0;
	padding-block: 0;
	padding-inline: 11px;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1;
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
	opacity: 0;
	transition:
		opacity var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out),
		background-color var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out),
		color var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out);
}

/*
 * A BLOCK, not an inline-flex. This panel is `display: block`, not the flex
 * column the category card has, so an inline pill sat in an anonymous line box
 * of its own - and a line box is charged the panel's full line height even when
 * the only thing in it is 0 tall. Measured 27 of the panel's 131 against a
 * drawn 99. `fit-content` keeps it the pill's width, at the start edge.
 */
.gb-blog-grid.gboneai-posts-grid .post-item .post-item-content .post-item-read-more {
	display: flex;
	inline-size: fit-content;
	margin-block-start: 0;
}

.gb-blog-grid.gboneai-posts-grid .post-item:hover .post-item-content .post-item-read-more,
.gb-blog-grid.gboneai-posts-grid .post-item:focus-within .post-item-content .post-item-read-more {
	min-block-size: 28px;
	block-size: auto;
	border-width: 1px;
	padding-block: 5px;
	margin-block-start: 0;
	opacity: 1;
}

/* Hovering the PILL fills it, as `59:282` draws. Hovering the card only
   reveals it - filling it the moment the card is touched anywhere would make it
   look pressed. */
.gb-blog-grid.gboneai-posts-grid .post-item .post-item-content .post-item-read-more:hover {
	background-color: var(--wp--preset--color--white, #fff);
	color: var(--gboneai-color-dark, #1b2b50);
}

.gb-blog-grid.gboneai-posts-grid .post-item .post-item-content .post-item-read-more:focus-visible {
	outline: var(--gboneai-focus, 3px solid #fcac0b);
	outline-offset: 2px;
}

/* No hover on a touch screen, so show it always - and give it a height, which
   is the fault the category card's own fallback had. */
@media (hover: none) {
	.gb-blog-grid.gboneai-posts-grid .post-item .post-item-content .post-item-read-more {
		min-block-size: 28px;
		block-size: auto;
		border-width: 1px;
		padding-block: 5px;
		margin-block-start: 0;
		opacity: 1;
	}
}

/* The carousel keeps the block's own arrangement here - arrows above the track
   at the band's end edge, exactly as on the home page. The two rules that used
   to re-anchor them below the cards were `332:1016`'s and are gone; the 94px of
   padding they needed to make room went with them.
 *
 * The gap under the heading stays in CSS. `gboneai/posts-grid` does not put its
 * `style.spacing.margin` on the wrapper, so setting it in the block JSON did
 * nothing and the gap measured 24 against the drawn 50 - heading `329:405` ends
 * at 2174, the cards `329:400` start at 2224. */
.gb-page-articles .gboneai-posts-carousel {
	margin-block-start: 50px;
}


/* ================================================ the bottom of the archives
 *
 * `472:3637` benefits, `473:4181` committees, `344:2900` faq and `458:2777`
 * agents all end the same way, and none of them had any of it until 26/08:
 *
 *   icon row      1190 x 254, four icons of 290, 10 apart      Group 65
 *   contact form  444 x 472, at the END edge
 *   join banner   917 x 472, at the START edge, 40 from it
 *
 * with the advertisers carousel above that on the faq page and on no other.
 *
 * The markup is a synced pattern, rendered by gboneai_local_archive_footer()
 * from what seeds 05, 06 and 07 left on the home page. Only the spacing is here,
 * because the drawing gives each screen its own.
 */

/*
 * The archives are `gb-content-archive` and `gb-agents-archive`, not
 * `gboneai-content`, so the theme's alignwide breakout - which is scoped to
 * that class - does not reach in here. Rather than widen that selector and
 * change how alignwide behaves on five more screens, the blocks inside simply
 * sit at the band their parent already is.
 *
 * Which means the wrapper takes ALL of it and no width of its own. Both those
 * mains are already `min(1400px, 100% - 2rem)` centred; a second
 * `min(1400px, 100% - 40px)` here subtracted the gutter twice and made the row
 * 1360, so the banner came out 889 against a drawn 917 and the card 431
 * against 444.
 */
.gb-archive-footer {
	box-sizing: border-box;
	inline-size: 100%;
}

.gb-archive-footer .alignwide {
	max-inline-size: none;
	margin-inline: 0;
}

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

/* The gap above it is per screen, and the drawing means it: 104 / 78 / 101 / 61
   are too far apart to be one number rounded four ways. */
.gb-archive-footer--benefit {
	margin-block-start: 104px;
}

.gb-archive-footer--committee {
	margin-block-start: 78px;
}

.gb-archive-footer--faq {
	margin-block-start: 101px;
}

.gb-archive-footer--agent,
.gb-archive-footer--advisor {
	margin-block-start: 61px;
}

/* faq alone: the advertisers carousel comes first, then 84 to the icon row. */
.gb-archive-footer--faq .gb-icon-row {
	margin-block-start: 84px;
}

.gb-archive-footer .gb-home-bottom {
	margin-block-start: 74px;
}

/* The WRAPPER carries the gap to the footer, not the row inside it. Both did
   until 26/08, and with main's own padding gone the two collapsed together -
   so the agent screen, which draws 48, kept getting the row's 73. */
.gb-archive-footer {
	margin-block-end: 73px;
}

/*
 * And the gap main already had, removed - or the drawn 73 lands on top of it.
 *
 * `main.site-main` carries `padding-block-end: var(--gboneai-footer-gap)`, a
 * clamp that comes out around 104 at 1920. That padding exists to keep the
 * last thing on a page off the footer; on these five archives the last thing
 * is the drawn furniture, and the drawing says how far off the footer it goes.
 * Measured 177 before this: 73 of mine plus 104 of its.
 *
 * :has, so it applies to an archive that HAS the furniture and to no other -
 * /galleries/ and /events/ share these containers and keep their own gap.
 */
.gb-content-archive:has(> .gb-archive-footer),
.gb-agents-archive:has(> .gb-archive-footer) {
	padding-block-end: 0;
}

/* The agent screen draws both of those tighter - 48 where the other three
   draw 74 and 73. */
.gb-archive-footer--agent .gb-home-bottom,
.gb-archive-footer--advisor .gb-home-bottom {
	margin-block-start: 48px;
}

.gb-archive-footer--agent,
.gb-archive-footer--advisor {
	margin-block-end: 48px;
}


/* ========================================== the information centre ========
 *
 * Figma `344:2262`, specification §9. Category pills over four cards to a row,
 * four rows, and a "load more" under them. The same screen serves the posts page
 * and one category - see template-parts/blog-archive.php.
 *
 *   pills      576..1344 at 304, five of them 15 apart
 *   grid       4 x 320 + 3 x 40 = 1400 exactly, rows 40 apart
 *   load more  193 x 40, centred, at 2294
 *
 * The card is the same one the text pages use at the same 320, so its rules are
 * shared rather than repeated - see `.gb-page-articles` above.
 */

/* main.site-main, not .gb-blog-archive, is what carries the footer gap - one
   class and one element beats one class, so the 55 below was losing to its
   ~104 and the footer sat 104 away. Matched on the element for that reason. */
main.gb-blog-archive {
	box-sizing: border-box;
	/* The same band the plugin archives sit on, expressed the same way. */
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	/* The band ends at 257 and the pills are drawn at 304. */
	padding-block-start: 47px;
	/* 55 under the button, against main's own gap - same reasoning as
	   .gb-archive-footer and .gb-content-more. */
	padding-block-end: 55px;
}

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

/*
 * A twin of gb-content's `.gb-content-pill`, and the duplication is deliberate:
 * that one is a plugin's, this screen is the theme's, and a theme reaching into
 * a plugin's stylesheet is the architectural law backwards. Same drawn numbers,
 * because it is the same drawn component.
 */
.gboneai-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	/* Pills end at 341, the grid starts at 402. */
	margin-block-end: 61px;
}

.gboneai-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 50px;
	background: var(--blue-text, #1B2B50);
	color: var(--white, #FFFFFF);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background var(--gboneai-duration, 280ms) var(--gboneai-ease, ease);
}

.gboneai-pill.is-current,
.gboneai-pill:hover,
.gboneai-pill:focus-visible {
	background: var(--blue, #1043FF);
	color: var(--white, #FFFFFF);
}

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

.gb-blog-grid.gboneai-posts-grid {
	display: grid;
	gap: 40px;
	/* minmax(0, 1fr), not 1fr. A bare 1fr floors at the content's min-content
	   width, and a card title long enough to need it pushes the column past its
	   share - the four came out 507 each on a 1400 grid, overflowing it. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gb-blog-grid > .post-item {
	min-inline-size: 0;
}

@media (max-width: 1279px) {
	.gb-blog-grid.gboneai-posts-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (max-width: 639px) {
	.gb-blog-grid.gboneai-posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.gb-blog-more {
	display: flex;
	justify-content: center;
	/* The grid ends at 2238, the button is drawn at 2294. */
	margin-block-start: 56px;
}

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

.gb-blog-more__button:hover,
.gb-blog-more__button:focus-visible {
	background: var(--yellow, #FCAC0B);
	color: var(--white, #FFFFFF);
}

.gb-blog-empty {
	margin-block: 3rem;
	color: var(--blue-text, #1B2B50);
	text-align: center;
}

/* Search with no results (search.php): the message, the search again, and the
   way home, one column in the middle - specification page 17. */
.gb-search-empty .search-form {
	box-sizing: border-box;
	/* main.css fixes the header panel's form at 576 wide; here it follows the
	   column, or it scrolls a phone sideways (QA 29/09: 576 on a 390 screen). */
	inline-size: 100%;
	max-inline-size: 560px;
	margin-inline: auto;
}

/*
 * The card image fills the card.
 *
 * The grid's own rule is `.post-item-image { width: 100%; height: auto }`, which
 * works on the home page only because those cards are 440 x 628 and the demo
 * images are tall portrait crops that overflow it. At 320 x 429 with a landscape
 * picture the image covers the top 196px and the rest of the card is white -
 * which is what the information centre looked like on 26/08.
 *
 * Cover, not contain: the drawn card is a window onto the picture, and a
 * letterboxed photograph in a rounded card reads as a mistake.
 */
.gb-blog-grid .post-item-inner,
.gb-blog-grid .post-item-figure {
	block-size: 100%;
}

.gb-blog-grid .post-item-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------- the officers page ---- */

/*
 * `332:1367`. The two group headings sit 36 above their row and 45 below the one
 * before them; both were 24-25, because the heading carried the theme's prose
 * margins rather than the drawing's.
 *
 * Scoped to the officers page's own column so no other h2 in content moves.
 */
.gb-officers .wp-block-heading {
	margin-block: 45px 36px;
}

.gb-officers > .wp-block-heading:first-child {
	margin-block-start: 0;
}

/*
 * A8. The cards are a grid, not a core columns row: as many 180+ cards to a
 * row as fit, 45 apart as drawn. The 1039 column at 1920 takes exactly four
 * of 226, the drawn size; stacked at 834 and 768, four of about 182 and three
 * of about 229, where columns had given four of 112 and then one of 736 x 921.
 */
.gb-officers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 45px;
}

.gb-officers-grid > * {
	margin: 0;
}

@media (max-width: 1023px) {
	/* Beside the 323 menu the column is 583 at 834 - no room for a card row.
	   Stack them, the list first and the menu under it. */
	.gb-officers-band.wp-block-columns {
		flex-direction: column;
	}

	.gb-officers-band.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		inline-size: 100%;
	}

	.gb-officers-band > .gb-officers {
		order: -1;
	}

	.gb-officers-grid {
		column-gap: 24px;
	}
}

/* ------------------------------------------- the bottom of an inner page --- */

/*
 * `609:7889`. Sessions end at 2507, the contact card is at 2537, the banner at
 * 2874 and the footer at 3358 — so 30 above the card, 26 between it and the
 * banner, and 60 down to the footer.
 *
 * The 26 comes from the card and the banner being the text pages' own blocks,
 * which carry their drawn 19 and 20 in the block markup; here the wrapper sets
 * the rhythm instead, so those are overridden rather than inherited.
 */
.gb-inner-footer {
	margin-block-start: 30px;
}

.gb-inner-footer > .gb-contact-card {
	margin-block-start: 0;
}

.gb-inner-footer > .gboneai-cta-banner {
	margin-block-start: 26px;
}

/*
 * And main's own gap removed, the same as .gb-archive-footer and
 * .gb-content-more: the drawing says 60 below the banner, not the ~104 the
 * theme keeps between the last thing on a page and the footer.
 */
/* main.site-main, not the page`s own class - one class and one element beats
   one class, the same trap as the blog archive. */
main.site-main:has(> .gb-inner-footer) {
	padding-block-end: 60px;
}

/* ================================================== the contact page ======
 *
 * Figma `344:4425`. The band is 260..1661: the form at the start edge and the
 * three detail cards beside it, then the join banner across the full band.
 *
 *   band ends 257, cards and form both start   322   → 65
 *   card 438 x 120, three of them              20 apart
 *   form 921 x 401
 *   banner 1400 x 303 at                       758   → 35 below the form
 *   footer at                                  1120  → 59 below the banner
 */

main.gb-contact-page {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	padding-block: 65px 59px;
}

.gb-contact-page__row {
	display: grid;
	/* The form is 921 and the cards 438, 42 apart — and the form comes first in
	   source order, so RTL puts it at the start edge where the drawing has it. */
	gap: 42px;
	grid-template-columns: minmax(0, 921fr) minmax(0, 438fr);
}

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

/* ----------------------------------------------------- the three cards --- */

.gb-contact-page__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * 344:5530 — white, a navy hairline, radius 15, and a 10px shadow rather than
 * the 20px card token. The icon sits above the line of text, both at the start
 * edge.
 */
.gb-contact-detail {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 13px;
	/* 120 flat. All three are that height in the drawing, and a detail long
	   enough to wrap is a content problem, not a taller card. */
	block-size: 120px;
	padding: 20px 50px;
	border: 1px solid var(--blue-text, #1B2B50);
	border-radius: 15px;
	background: var(--white, #FFFFFF);
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	color: var(--blue-text, #1B2B50);
	text-decoration: none;
	transition: box-shadow var(--gboneai-duration, 280ms) var(--gboneai-ease, ease);
}

a.gb-contact-detail:hover,
a.gb-contact-detail:focus-visible {
	box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

/*
 * THREE COMPONENTS, NOT ONE REPEATED - `344:5530` / `344:5535` / `344:5540`.
 *
 * The border runs navy, yellow, turquoise: the site's own three-colour sequence,
 * the same one behind the stat rings and the icon row. All three were built navy
 * because only the address card was ever read out of the file, and the
 * conformance spec's `repeat: 3` with `check: ["size"]` compared width and height
 * and reported the row conformant. A colour it does not look at cannot fail it.
 */
.gb-contact-detail--phone {
	border-color: var(--yellow, #FCAC0B);
}

.gb-contact-detail--waze {
	border-color: var(--turquoise, #1FA9AB);
}

/* And the icons are three sizes, all 30 tall: 25, 30 and 32 wide. */
.gb-contact-detail__icon {
	inline-size: 25px;
	block-size: 30px;
	object-fit: contain;
}

.gb-contact-detail--phone .gb-contact-detail__icon {
	inline-size: 30px;
}

.gb-contact-detail--waze .gb-contact-detail__icon {
	inline-size: 32px;
}

.gb-contact-detail__text {
	font-size: 1.375rem;          /* 22 */
	font-weight: 700;
	line-height: 1;
}

/* `344:5528` sets the Waze line uppercase, so the drawing reads "WAZE" where the
   string says "Waze". Hebrew is unaffected by the transform, so the source
   string stays translatable and only the Latin word changes. */
.gb-contact-detail--waze .gb-contact-detail__text {
	text-transform: uppercase;
}

/* ------------------------------------------------ the form, page variant --- */

/*
 * A third arrangement of the same card and the same CF7 form: 921 wide, three
 * fields across and the message beneath them as a real box rather than a pill.
 * The home page stacks all four at 444; the text pages run all four across at
 * 1039. Same markup in all three - only this file differs.
 */
/*
 * 28 above and 40 below, not 28 both ways. The drawn stack adds up exactly:
 * 28 + heading 84 + 16 + fields 45 + 20 + message 87 + 10 + consent 16 + 10 +
 * submit 45 + 40 = 401.
 */
.gb-contact-card--page {
	padding: 28px 78px 40px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

.gb-contact-card--page .gb-contact-card__title {
	font-size: 2.5rem;            /* 40 */
	line-height: 1;
}

.gb-contact-card--page .gb-contact-card__lead,
.gb-contact-card--page .gb-contact-card__sub {
	font-size: 1.5rem;            /* 24 */
	line-height: 1;
}

.gb-contact-card--page .gb-contact-card__lead {
	margin-block-start: -4px;
}

.gb-contact-card--page .gb-contact-card__sub {
	margin-block-start: 0;
	margin-block-end: 16px;
}

.gb-contact-card--page .gb-contact-card__fields,
.gb-contact-card--page .gb-contact-card__consent,
.gb-contact-card--page .gb-contact-card__actions {
	max-inline-size: 764px;
}

.gb-contact-card--page .gb-contact-card__fields {
	display: grid;
	gap: 20px 17px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The message is the fourth field and takes the whole row — 764 x 87, radius 20,
   which is the one field in the drawing that is not a pill. */
.gb-contact-card--page .gb-contact-card__fields > label:nth-child(4) {
	grid-column: 1 / -1;
}

.gb-contact-card--page textarea {
	block-size: 87px;
	border-radius: 20px;
	padding-block: 15px;
}

.gb-contact-card--page input[type="text"],
.gb-contact-card--page input[type="tel"],
.gb-contact-card--page input[type="email"],
.gb-contact-card--page textarea {
	font-size: 1.125rem;          /* 18 */
}

.gb-contact-card--page .gb-contact-card__consent {
	margin-block-start: 10px;
	font-size: 1rem;
	line-height: 1;
}

.gb-contact-card--page .gb-contact-card__actions {
	margin-block-start: 10px;
}

.gb-contact-card--page input[type="submit"] {
	min-inline-size: 211px;
	font-size: 1.25rem;
	font-weight: 400;
}

@media (max-width: 767px) {
	.gb-contact-card--page {
		padding: 28px 24px;
	}

	.gb-contact-card--page .gb-contact-card__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------- the banner ----- */

/*
 * 344:5504 — 1400 x 303. Every other screen draws this banner at 917 x 472 or
 * 1039 x 424; here it is the full band and two thirds the height, so the block's
 * own 424 minimum has to give way.
 */
.gb-contact-page__banner {
	margin-block-start: 35px;
	min-block-size: 303px;
}

/*
 * THE THIRD PANEL, and every proportional rule in the block was derived from the
 * other two.
 *
 * `blocks/cta-banner/style.css` was written against 1039 x 424 and 917 x 472, and
 * its comments are explicit that the type is capped rather than scaled because
 * BOTH of those panels use the same 60 / 30 / 22. This one is 1400 x 303 - two
 * thirds the height at a third again the width - and the drawing raises the type
 * on it and shrinks the figure. So the caps that are correct there are wrong
 * here, and the overrides below are per-panel rather than changes to the shared
 * rules. Do not push any of this back into the block.
 */

/* 344:5514 is 70 Bold /0.9 at 0.7 tracking, against the block's 60 / 0.6.
   Only the CAP moves: 6.6cqi still governs, so a narrower viewport scales down
   exactly as before and only the wide panel reaches 70. */
.gb-contact-page__banner .gboneai-cta-banner__title {
	font-size: clamp(1.75rem, 6.6cqi, 4.375rem);
	letter-spacing: 0.7px;
}

/*
 * 344:5515 is 32 Regular /1.1 at 0.32 tracking, on ONE line in a 523 box.
 *
 * The block gives it 31.9cqi, which is 330.772 on the 1039 panel it was measured
 * against and 446.6 here - so the line broke in two. 523/1400 is 37.36cqi.
 */
.gb-contact-page__banner .gboneai-cta-banner__text {
	max-inline-size: 37.36cqi;
	font-size: clamp(1.0625rem, 3.27cqi, 2rem);
	letter-spacing: 0.32px;
}

/* The copy is inset 103 from the panel edge here, not 138: the drawn title, line
   and button all end at 1557 on a panel ending at 1660. The block's 138 is the
   figure both other panels share. */
/*
 * And the rhythm inside the copy is this panel's too. Found by re-measuring
 * after the type was fixed, not filed beforehand - the two-line strapline was
 * hiding it.
 *
 *   drawn   title 840..903 · line 905..940 · button 951..996   = 156 tall
 *   gaps    2 between the first two, 11 before the button
 *
 * The block has 8 and 13, both derived from `329:437`/`242:3179`. The bottom
 * margin carries the rest: the banner centres the copy, so free space is split,
 * and 23 against 40 puts the block's top on the drawn 82 from the panel edge.
 */
.gb-contact-page__banner .gboneai-cta-banner__content {
	margin-inline-start: 103px;
	margin-block: 40px 23px;
	gap: 2px;
}

.gb-contact-page__banner .gboneai-cta-banner__content > .gboneai-cta-banner__button {
	margin-block-start: 9px;
}

/*
 * THE FIGURE, and this is the one that actually looked broken.
 *
 * The block sizes it `left: 3.27%; inline-size: 49.57%` of the media box, which
 * is 515 wide on a 1039 panel. Here that is 694 wide, and at the asset's 0.837
 * ratio 829 tall inside a panel 303 tall - so the crop landed at his NECK and the
 * banner showed a head at roughly 2.7x the drawn scale.
 *
 * MEASURED OFF FIGMA'S OWN RENDER OF THE NODE, the same method the block used and
 * for the same reason: `344:5513` carries a rotation and a flip, and its reported
 * box is not where the ink lands. The node was exported at 1024 x 222 (the panel
 * at 1400 x 303) and the figure's ink found by colour:
 *
 *   ink   x 191..628 of 1400   - 438 wide, starting 13.67%
 *   the head touches the top edge and the panel foot cuts him mid-torso
 *
 * The asset is the fill cropped to its ink plus 4px a side - 560 x 669 for 551 of
 * ink - so 438 of figure needs 445 of asset (31.79%) and its left edge sits ~3.5
 * back from the ink at 13.39%. `block-size: auto` then gives 532, and the panel's
 * own overflow does the cropping, exactly as it does on the other two panels.
 *
 * SCOPED TO THE WIDTH WHERE THAT PANEL ACTUALLY EXISTS, and this was found by
 * looking rather than measuring. `main.gb-contact-page` is
 * `min(1400px, 100% - 2rem)`, so the panel is 1400 x 303 only from 1432 up.
 * Below that the copy wraps, the panel grows past its 303 minimum and stops
 * being wide-and-short - and an override tuned for 303 then leaves the man
 * complete with dead navy under him. The block's own 49.57% is right there and
 * looked right there before any of this. First attempt applied it at every
 * width and traded the desktop fault for a narrow one.
 */
@media (min-width: 1432px) {
	.gb-contact-page__banner .gboneai-cta-banner__image {
		left: 13.39%;
		inline-size: 31.79%;
	}

	/*
	 * THE ARCS, and they are the same story a fifth time.
	 *
	 * The block's four are sized as a percentage of the panel WIDTH, derived from
	 * the 1039 frame. On a 1400 panel that inflates every one of them by 100-200px
	 * and pushes them off their marks - measured 471 / 421 / 360 / 529 against a
	 * drawn 362 / 278 / 329 / 333. It is the loudest thing in the banner after the
	 * figure, and it is what Gil's arrows were pointing at.
	 *
	 * `344:5506` holds SIX ellipses, not four: two near-coincident pairs, 6 with 10
	 * at the top left and 9 with 11 at the foot. The block renders four arc SVGs,
	 * so each takes the ellipse nearest it and the pairs collapse - 10 and 9 have
	 * no element of their own. Rendering all six needs markup in a shared block and
	 * is not worth it for two rings that sit inside two others.
	 *
	 * Offsets follow the block's own KEEP-THE-CENTRE rule, because each arc is
	 * rotated and Figma reports the box after the turn. Worked, arc 4: Figma places
	 * 333 x 328 at (1164,-93), centre (1330.5,71), pre-rotation box 328 x 333,
	 * hence (1166.5,-95.5) - then as a percentage of 1400 x 303.
	 */
	.gb-contact-page__banner .gboneai-cta-banner__arc--1 {
		/* Ellipse 6 - 362 square, no transposition. */
		inline-size: 25.86%;
		left: 13.64%;
		inset-block-start: -29.04%;
	}

	.gb-contact-page__banner .gboneai-cta-banner__arc--2 {
		/* Ellipse 7 - 278 x 274 drawn, so 274 x 278 before the turn. */
		inline-size: 19.57%;
		aspect-ratio: 274 / 278;
		left: 23.57%;
		inset-block-start: 41.58%;
	}

	.gb-contact-page__banner .gboneai-cta-banner__arc--3 {
		/* Ellipse 11 - 329 x 324 drawn, so 324 x 329 before the turn. */
		inline-size: 23.14%;
		aspect-ratio: 324 / 329;
		left: -1.39%;
		inset-block-start: 51.65%;
	}

	.gb-contact-page__banner .gboneai-cta-banner__arc--4 {
		/* Ellipse 8 - 333 x 328 drawn, so 328 x 333 before the turn. */
		inline-size: 23.43%;
		aspect-ratio: 328 / 333;
		left: 83.32%;
		inset-block-start: -31.52%;
	}
}

/* The consent row measured 19 against a drawn 16: the checkbox is an inline
   box and carries its line's descender space with it. Flex takes that away. */
.gb-contact-card--page .gb-contact-card__consent .wpcf7-list-item,
.gb-contact-card--page .gb-contact-card__consent label {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

.gb-contact-card--page .gb-contact-card__consent input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 15px;
	block-size: 15px;
	margin: 0;
}

/* The footer legal links are 15px text and were a 64 x 15 tap target. Same
   treatment as the pagination: padding on the link, pulled back with a negative
   margin so the row does not move. */
.footer-legal-menu a {
	display: inline-block;
	padding: 5px 4px;
	margin: -5px -4px;
}