/*
 * The landing-page hero — 4B design direction. See includes/hero.php.
 *
 * Values are taken from the mockup (`docs/design/mockups/c4b-modernus-v2.html`) so the real page and the
 * approved design agree. Everything is scoped under `.irkn-hero`, so nothing here can repaint the rest of
 * the shop.
 *
 * The mockup's hero background is LIGHT, which is what makes the brand-blue half of the `<h1>` readable.
 * (D-078 could not use brand blue in the old dark Elementor band — about 1.6:1 contrast against the 4.5:1
 * WCAG asks for. On this light gradient it is legible, so the mockup's treatment is now safe to use.)
 *
 * Rules that are not cosmetic:
 *   - no horizontal scrolling at 360, 768 or 1440
 *   - every control at least 44px tall, including the carousel dots, whose visible dot stays small
 */

.irkn-hero {
	--irkn-blue: #203ba6;
	--irkn-blue-2: #3b62e8;
	--irkn-ink: #0e1626;
	--irkn-ink2: #43506a;
	--irkn-muted: #7d8aa3;
	--irkn-line: #e4e8f2;
	--irkn-call: #e8590c;
	--irkn-r-lg: 24px;
	--irkn-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(32, 59, 166, .07);
	--irkn-sh-lg: 0 16px 40px rgba(32, 59, 166, .14);

	background: linear-gradient(165deg, #e5ebfd 0%, #f4f6fb 60%);
	padding: clamp(14px, 2.2vw, 26px) 0 clamp(22px, 3.5vw, 40px);
	color: var(--irkn-ink);
	/* The same stack as the mockup, and enforced on the children for the reason given in landing.css. */
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

.irkn-hero h1,
.irkn-hero p,
.irkn-hero a,
.irkn-hero span,
.irkn-hero button {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.irkn-hero__wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4.5vw, 40px);
}

.irkn-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(22px, 4vw, 50px);
	align-items: center;
}

.irkn-hero__txt {
	min-width: 0;
}

.irkn-hero__kick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--irkn-blue);
	box-shadow: var(--irkn-sh);
}

.irkn-hero__h1 {
	margin: 18px 0 0;
	font-size: clamp(29px, 4.3vw, 48px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--irkn-ink);
}

.irkn-hero__h1b {
	color: var(--irkn-blue);
}

.irkn-hero__p {
	margin: 16px 0 0;
	color: var(--irkn-ink2);
	font-size: clamp(16px, 1.5vw, 18.5px);
	max-width: 33em;
}

.irkn-hero__btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.irkn-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	border: 1px solid transparent;
	text-decoration: none;
}

.irkn-hero__btn--main {
	background: var(--irkn-blue);
	color: #fff;
	box-shadow: var(--irkn-sh-lg);
}

.irkn-hero__btn--main:hover {
	background: #16286f;
	color: #fff;
}

.irkn-hero__btn--call {
	background: var(--irkn-call);
	color: #fff;
}

.irkn-hero__btn--call:hover {
	background: #cf4d08;
	color: #fff;
}

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

.irkn-hero__hc {
	background: #fff;
	border: 1px solid var(--irkn-line);
	border-radius: var(--irkn-r-lg);
	box-shadow: var(--irkn-sh-lg);
	overflow: hidden;
	min-width: 0;
}

.irkn-hero__view {
	position: relative;
}

.irkn-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.irkn-hero__track::-webkit-scrollbar {
	display: none;
}

.irkn-hero__slide {
	/* `minmax(0,1fr)` and `min-height:0` are load-bearing: without them a product photo's intrinsic
	   height overrides the aspect ratio and the slide grows. That cost real time in D-070. */
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 3;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	overflow: hidden;
	min-height: 0;
	background: #fff;
}

.irkn-hero__slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	padding: clamp(10px, 2vw, 22px);
}

.irkn-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid var(--irkn-line);
	background: #fff;
	color: var(--irkn-ink);
	font-size: 20px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--irkn-sh);
	z-index: 2;
}

.irkn-hero__nav:hover {
	border-color: var(--irkn-blue);
	color: var(--irkn-blue);
}

.irkn-hero__prev {
	left: 10px;
}

.irkn-hero__next {
	right: 10px;
}

.irkn-hero__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 2px 10px;
	border-top: 1px solid var(--irkn-line);
}

/*
 * The visible dot is 9px; the BUTTON is 44x44. Same trick as the notice bar's close control: a small
 * glyph with a large target looks identical and is far easier to hit.
 */
.irkn-hero__dot {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.irkn-hero__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: #c9d2e4;
	transition: width .18s ease, background .18s ease;
}

.irkn-hero__dot.is-on::after {
	background: var(--irkn-blue);
	width: 22px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.irkn-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.irkn-hero__slide {
		aspect-ratio: 16 / 10;
	}
}