/**
 * CTA banner block.
 *
 * Figma 332:1037 — 1039x424 navy panel, 20px radius, content at the inline
 * start, photograph bleeding off the inline end, four brand arcs behind
 * everything. Title 60px Bold /0.9, text 30px Regular /1.1, button 22px on a
 * #1043ff pill with a 50px radius.
 *
 * Type is sized in cqi against the banner so the designed sizes land at the
 * drawn 1039px width and scale down cleanly in a narrower column.
 */

.gboneai-cta-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 424px;
	/* No padding here on purpose - the inset lives on __content instead.
	 *
	 * cqi resolves against this element's CONTENT box, so padding it silently
	 * shrinks the basis for every cqi value in this file. With 64px of inline
	 * padding the heading computed 52.6px instead of 60px and its box 354px
	 * instead of 403px, and the design's line breaks stopped matching. Keeping
	 * the panel unpadded means 1cqi is 1% of the panel, which is the frame all
	 * the Figma numbers are quoted against. */
	padding: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--gboneai-color-dark, #1b2b50);
	color: var(--wp--preset--color--white, #fff);
	container-type: inline-size;
	isolation: isolate;
}

/* --- decorative layer --------------------------------------------------- */

.gboneai-cta-banner__decor,
.gboneai-cta-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.gboneai-cta-banner__arc {
	position: absolute;
	display: block;
}

.gboneai-cta-banner__arc svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* PHYSICAL `left`, not inset-inline-start.
 *
 * The banner's LAYOUT is direction-aware — copy at the inline start, photo at
 * the inline end. These arcs are not: they are one fixed decorative composition
 * the designer drew for this exact frame. Mapping their Figma `left` offsets
 * onto a logical property mirrors the whole arrangement, so the yellow arc that
 * belongs behind the person on the left lands on the right and the composition
 * reads inside-out.
 *
 * Same rule as the rotated chevrons elsewhere in this theme: logical properties
 * for layout, physical ones for a fixed drawing.
 *
 * Offsets are the Figma values against the 1039x424 frame, so the arcs hold
 * their relationship to the panel at any width. */
/* Each arc is ROTATED in Figma. Dropping that was not a small inaccuracy: these
 * are open rings, so a quarter turn changes which way the opening faces, and
 * arc 4 went from tucking into the top-right corner to sweeping straight across
 * the headline.
 *
 * A 90deg turn also transposes the box. Figma reports left/top for the box
 * AFTER rotation, so the sizes below are the pre-rotation ones and the offsets
 * are recomputed to keep the same CENTRE, which is the point rotation pivots
 * about. Worked example, arc 4: Figma places a 393x387 footprint at (767,-93),
 * so its centre is (963.5,100.5); the pre-rotation box is 387x393, hence
 * (770,-96). */
.gboneai-cta-banner__arc--1 {
	inline-size: 33.5%; /* 348.551 square - rotation does not transpose it */
	aspect-ratio: 1;
	left: 1.3%;
	inset-block-start: -12.9%;
	transform: rotate(-90.23deg);
}

.gboneai-cta-banner__arc--2 {
	inline-size: 29.7%; /* 309 x 313 before the turn */
	aspect-ratio: 309 / 313;
	left: 20%;
	inset-block-start: 55%;
	transform: rotate(-90deg);
}

.gboneai-cta-banner__arc--3 {
	inline-size: 25.3%; /* 263 x 267 before the turn */
	aspect-ratio: 263 / 267;
	left: -12.9%;
	inset-block-start: 52.6%;
	transform: rotate(-90deg);
}

.gboneai-cta-banner__arc--4 {
	inline-size: 37.2%; /* 387 x 393 before the turn */
	aspect-ratio: 387 / 393;
	left: 74.1%;
	inset-block-start: -22.6%;
	transform: rotate(-90deg);
}

/* The media layer spans the WHOLE panel rather than a 55% column.
 *
 * The design's photograph is a cut-out on a transparent background, so there is
 * no rectangle to place: the figure sits on the left and the empty right half of
 * the PNG lets the navy and the arcs show through. Boxing it into a column was
 * what produced the hard seam down the middle of the banner.
 *
 * `left` is physical on purpose - the figure belongs on the left in this fixed
 * composition, the same reasoning as the arcs above. */
.gboneai-cta-banner__media {
	inline-size: 100%;
}

/* PLACED AND SCALED, not fitted.
 *
 * This was `inline-size: 100%; block-size: 100%; object-fit: contain`, written
 * for a 917 x 472 cut-out whose figure already filled the frame. The asset is
 * the drawing's own now - `329:435`, exported from the join banner itself - and
 * it is a figure with transparent space around it. `contain` fits that space
 * too, so the man came out 249px wide in a 1039 banner where `329:427` draws him
 * 557. Measured against the node render: 24% of the panel against a drawn 54%.
 *
 * And the drawing CROPS him. His head is 81 below the top edge and the panel
 * cuts him off at the waist, which `contain` cannot do at all - it never
 * overflows. So the image carries its own size and position instead, and the
 * panel's `overflow: hidden` does the cropping.
 *
 * THE NUMBERS ARE READ OFF FIGMA'S OWN RENDER OF THAT LAYER, not guessed and
 * not taken from its transform. `329:435` reports 1796 x 879 at 1113, 79 in the
 * metadata - those are the component's coordinates with a transform on top, and
 * reading them three different ways gave three different answers. Exporting the
 * node instead returns it already clipped to the panel, 1039 x 424, with the
 * figure exactly where the drawing puts it:
 *
 *   figure  x 38..545 (507 wide)   y 5..423, cut off by the panel's foot
 *
 * The asset is that fill cropped to its ink plus 4px - 560 x 669, ink 551 wide -
 * so 507 of figure needs 515 of asset, and 615 of height at its 0.837 ratio.
 *
 * PERCENTAGES OF THE MEDIA BOX, not cqi. cqi was the obvious unit - 1% of the
 * panel, which is exactly the frame these numbers are quoted against - and it
 * measured correctly inside the QA probe and rendered far too large in the page.
 * The probe loads the page in an iframe, the container context differs, and one
 * of the two was resolving `cqi` against the viewport. A percentage on an
 * absolutely positioned child resolves against its containing block, and that is
 * `__media`, which is `inset: 0` on the panel - the same 1039 either way, with
 * nothing to be ambiguous about.
 *
 *   inline-size  49.57%   515 wide, so the figure is 507 - the drawn 39..545
 *   left          3.27%   34 in, so the ink lands on the drawn 39
 *
 * `block-size: auto` keeps the asset's own 560 x 669 ratio, which puts the
 * figure 615 tall in a 424 panel: cut off at the waist, as drawn.
 *
 * `left` is physical, not inset-inline-start - the same reasoning as the arcs
 * above. This is one fixed composition the designer drew, not a layout. */
.gboneai-cta-banner__image {
	position: absolute;
	inset-block-start: 0;
	left: 3.27%;
	inline-size: 49.57%;
	block-size: auto;
	max-inline-size: none;
	display: block;

	/*
	 * MIRRORED, because the drawing mirrors it.
	 *
	 * The stock photograph has the man on the right of the frame with his arm
	 * outstretched to the left. `329:435` has him on the LEFT with the arm
	 * reaching right - into the copy, which is where a banner wants a person
	 * pointing. Placing the raw fill as it comes put the figure the wrong way
	 * round, and because his outstretched arm then landed where his body should
	 * be, the whole thing read as too big and shifted right even though the box
	 * measured correct: 515 wide at x34, exactly as specified.
	 *
	 * Figma carries the flip in the node's transform, and `download_assets`
	 * returns the fill without it - which is what made this cost an afternoon.
	 */
	transform: scaleX(-1);
}

/* --- content ------------------------------------------------------------ */

/* The three text elements do NOT share one column width in the design - the
 * heading gets 403px, the line under it 331px, the button 199px. That is what
 * decides where each line breaks, so the widths sit per element rather than on a
 * single wrapper.
 *
 * The widths are in cqi, against the banner. A percentage would resolve against
 * this wrapper, which is a shrink-to-fit flex item - so its width depends on the
 * text, and the text width would depend on it. That circular constraint settles
 * far too narrow: the heading broke after one word and the line under it ran to
 * four. cqi measures the panel, which is the frame the design's numbers describe. */
.gboneai-cta-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	/*
	 * 8, not 0. `242:3179` stacks the heading at 4006 and the copy at 4114 with
	 * the heading 108 tall - so they are 6 apart, not touching - and `329:437`
	 * to `329:438` is 1587 + 54 to 1649, which is 8. It was read as 0 from the
	 * first pair and the block came out a line tighter than drawn.
	 */
	gap: 8px;

	/*
	 * 138 IN FROM THE PANEL EDGE, not 64.
	 *
	 * Both drawings agree and neither says 64: `329:437` ends at 900.93 of a
	 * 1039 panel, and `242:3186` at 1518 of a panel ending 1657 - 138 and 139.
	 * The 64 was measured wrong and the whole copy block sat 75px too close to
	 * the edge, which is what made it read as too big for the space.
	 *
	 * Absolute, not proportional: the two panels are 1039 and 917 wide and both
	 * inset the copy by the same 138. As a margin on the flex item rather than
	 * padding on the panel, so the cqi basis stays whole.
	 */
	margin-inline: 138px 64px;

	/*
	 * And 13 below centre. The drawn block is 132 from the top and 106 from the
	 * foot on `329:427`, 130 and 108 on `242:3179` - the same offset either way.
	 * The banner centres its content, so unequal margins move it half their
	 * difference.
	 */
	margin-block: 40px 14px;
}

.gboneai-cta-banner__title {
	margin: 0;
	/* Figma draws this box at 403px and the heading sits on one line inside it.
	 * Our Discovery FS measures the same string about 4px wider, which is enough
	 * to break it, so the box gets 40cqi (~416px). Visually the same block; it
	 * keeps the one-line reading the design shows, and still wraps by itself in a
	 * narrower column. */
	max-inline-size: 40cqi;
	/*
	 * 60 ON EVERY PANEL, not scaled to it.
	 *
	 * This was 5.77cqi, which reaches 60 at the 1039 panel and 52.9 at the 917
	 * one. The drawing uses 60 on both: `329:437` is a 403 box on one line and
	 * `242:3186` a 365 box on TWO, and it is the box that changes, not the type.
	 * At 52.9 the home banner's heading fitted on one line and the whole copy
	 * block came out 169 tall against a drawn 234.
	 *
	 * 6.6cqi reaches the 3.75rem cap at 909, so both drawn panels get exactly 60
	 * and anything narrower still scales down.
	 */
	font-size: clamp(1.75rem, 6.6cqi, 3.75rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.6px;
	color: var(--wp--preset--color--white, #fff);
}

.gboneai-cta-banner__text {
	margin: 0;
	max-inline-size: 31.9cqi; /* 330.772px - this is what makes the line wrap */
	/* 30 on both panels - see the heading above. 3.27cqi caps at 917. */
	font-size: clamp(1.0625rem, 3.27cqi, 1.875rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.3px;
}

/* Figma stacks them at 132 / 194 / 273 from the panel top: roughly 8px after the
 * heading and 13px before the button. */
/* 13 between the copy and the button - `329:438` ends at 1715 and `329:439`
   starts at 1728. The flex gap above already gives 8 of it. */
.gboneai-cta-banner__content > .gboneai-cta-banner__button {
	margin-block-start: 5px;
}

.gboneai-cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 0;
	padding: 12px 20px 11px;
	border-radius: 50px;
	background: var(--gboneai-color-primary, #1043ff);
	color: var(--wp--preset--color--white, #fff);
	/* 22 on both panels - see the heading. 2.4cqi caps at 917. */
	font-size: clamp(1rem, 2.4cqi, 1.375rem);

	/* 1, not normal. `329:439` and `242:3188` are both 45 tall: 12 + 22 + 11.
	   `normal` gives Discovery FS about 25, which made the pill 48. */
	line-height: 1;
	text-decoration: none;
	transition:
		background-color var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out),
		color var(--gboneai-duration, 280ms) var(--gboneai-ease, ease-out);
}

/* Matches the "כפתור כחול בהיר הובר כחול צהוב" component the design uses here. */
.gboneai-cta-banner__button:hover,
.gboneai-cta-banner__button:focus-visible {
	background: var(--gboneai-color-accent, #fcac0b);
	color: var(--gboneai-color-dark, #1b2b50);
}

.gboneai-cta-banner__button:focus-visible {
	outline: var(--gboneai-focus, 3px solid #fcac0b);
	outline-offset: 3px;
}

/* Below the content column the photo would crowd the text off the panel, so it
 * steps aside and the copy takes the full width. */
@container (max-width: 600px) {
	.gboneai-cta-banner__title,
	.gboneai-cta-banner__text {
		max-inline-size: 100%;
	}

	.gboneai-cta-banner__media {
		opacity: 0.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gboneai-cta-banner__button {
		transition: none;
	}
}