/*
 * Home banner (design A). On the site the two images are merged into one
 * <picture> and the slogan text is laid over it (functions.php adds
 * .torqtek-banner--picture). In the editor the text and both images are shown
 * one under the other so the client can edit each of them.
 * Picture requirements: decisions.md, 2026-10-11.
 */

.torqtek-banner {
	background-color: var(--wp--custom--color--media-bg);
}

.torqtek-banner figure,
.torqtek-banner picture {
	display: block;
	margin: 0;
}

/* Phone image: 4:5, as in the design. */
.torqtek-banner img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Slogan, lettered like the old banner picture of design A: Archivo capitals
   with wide spacing, second line ~11% smaller (a quarter narrower), light
   caption in two lines. Sizes follow the banner width, as on the picture. */
.torqtek-banner-text {
	position: relative;
	z-index: 1;
	padding: 7vw var(--wp--style--root--padding-right, 1rem) 0 var(--wp--style--root--padding-left, 1rem);
}

/* Stronger than the block gap WordPress puts between paragraphs. */
.torqtek-banner .torqtek-banner-text > * {
	margin: 0;
}

.torqtek-banner :is(.torqtek-banner-title, .torqtek-banner-title-small) {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.torqtek-banner .torqtek-banner-title {
	font-size: clamp(1.3rem, 5.6vw, 2.4rem);
}

.torqtek-banner .torqtek-banner-title-small {
	margin-block-start: 0.26em;
	font-size: clamp(1.15rem, 4.97vw, 2.13rem);
}

.torqtek-banner .torqtek-banner-sub {
	margin-block-start: 1.1em;
	color: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	font-size: clamp(0.9375rem, 3.9vw, 1.25rem);
	line-height: 1.6;
	letter-spacing: 0.09em;
}

/* On the site: text, a soft shade and the picture share one grid cell. */
.torqtek-banner--picture {
	display: grid;
}

.torqtek-banner--picture > *,
.torqtek-banner--picture::after {
	grid-area: 1 / 1;
}

/* Phone: the shade darkens the top, where the text is. */
.torqtek-banner--picture::after {
	content: "";
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--navy-deep) 55%, transparent) 0%, transparent 45%);
}

.torqtek-banner--picture .torqtek-banner-text {
	align-self: start;
}

/* Computer and tablet: 16:9 image, never taller than 78% of the screen;
   text on the left, measured from the picture edge, not from the logo. */
@media (min-width: 768px) {
	/* The crop takes a little more from the top than from the bottom, so the
	   washers keep room at the bottom on short screens (1920×955). */
	.torqtek-banner img {
		aspect-ratio: 16 / 9;
		max-block-size: 78vh;
		object-position: 50% 60%;
	}

	/* Starts at ~5.8% from the left and sits a little above the middle, as on the picture. */
	.torqtek-banner-text {
		max-inline-size: 46%;
		padding: 0 0 5.6vw max(var(--wp--style--root--padding-left, 1rem), 5.8vw);
	}

	.torqtek-banner .torqtek-banner-title {
		font-size: clamp(1.25rem, 2.6vw, 3.25rem);
	}

	.torqtek-banner .torqtek-banner-title-small {
		font-size: clamp(1.125rem, 2.31vw, 2.9rem);
	}

	.torqtek-banner .torqtek-banner-sub {
		font-size: clamp(0.9375rem, 1.094vw, 1.375rem);
	}

	.torqtek-banner--picture .torqtek-banner-text {
		align-self: center;
	}

	.torqtek-banner--picture::after {
		background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--navy-deep) 65%, transparent) 0%, transparent 50%);
	}

	/* Arabic: the picture is not mirrored (the TorqTek logo on the cylinder
	   would read backwards), so the text stays on its free left side; its
	   lines are right-aligned there (decisions.md 2026-10-16). */
	html[dir="rtl"] .torqtek-banner--picture .torqtek-banner-text {
		justify-self: end;
	}
}

/* Arabic: no letter spacing, it breaks the joined letters. */
:lang(ar) .torqtek-banner :is(.torqtek-banner-title, .torqtek-banner-title-small, .torqtek-banner-sub) {
	letter-spacing: 0;
}

/* In the editor: text on the dark banner color, each image in its own proportions. */
.editor-styles-wrapper .torqtek-banner-text {
	padding-block: 1.5rem;
}

.editor-styles-wrapper .torqtek-banner-desktop img {
	aspect-ratio: 16 / 9;
}

.editor-styles-wrapper .torqtek-banner-mobile img {
	aspect-ratio: 4 / 5;
	max-block-size: none;
	max-inline-size: 360px;
}