/* Sekcja: Hero / Metoda. */

.ajs-hero {
	background: var(--ajs-bg-soft);
	padding-block: clamp(2rem, 4vw, 3.375rem) clamp(3rem, 6vw, 4rem);
}

.ajs-hero__glow {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}

.ajs-hero__glow--left {
	top: -11.25rem;
	left: -8.75rem;
	width: 38.75rem;
	height: 32.5rem;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ajs-pink-strong) 38%, transparent) 0%, transparent 68%);
}

.ajs-hero__glow--right {
	bottom: 5.625rem;
	right: -10rem;
	width: 38.75rem;
	height: 26.25rem;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ajs-dark) 20%, transparent) 0%, transparent 72%);
}

.ajs-hero__title {
	font-weight: 800;
	font-size: clamp(1.45rem, 1.05rem + 2vw, 2rem);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.ajs-hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.25rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.ajs-hero__grid {
		grid-template-columns: 1fr 0.82fr;
	}
}

.ajs-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.ajs-hero__kicker-top {
	display: block;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.25;
}

.ajs-hero__kicker-bottom {
	display: block;
	font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.4375rem);
	color: var(--ajs-pink-ink);
	line-height: 1.3;
	margin-top: 4px;
}

.ajs-hero__subtitle {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 6px;
}

.ajs-hero__actions {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

/* Siatka 3x2 z designu; na telefonie kafelki sa nizsze, ale uklad zostaje. */
.ajs-hero__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(6rem, 22vw, 10.3125rem);
	gap: 8px;
}

.ajs-hero__cell {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}

.ajs-hero__cell--2 {
	grid-column: span 2;
}

.ajs-hero__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}

.ajs-hero__shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ajs-hero__zoom:hover .ajs-hero__shot,
.ajs-hero__zoom:focus-visible .ajs-hero__shot {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.ajs-hero__shot {
		transition: none;
	}

	.ajs-hero__zoom:hover .ajs-hero__shot,
	.ajs-hero__zoom:focus-visible .ajs-hero__shot {
		transform: none;
	}
}