/* ==========================================================================
   high5 – podstránka Riešenia (/sluzby/)
   ========================================================================== */

/* Spoločné: šípka „scroll“ (rovnaká ako na O nás) */
.ab-hero__since {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	color: var(--c-slate-400);
	letter-spacing: 0.16em;
	transition: color 0.3s;
}
.ab-hero__since:hover { color: var(--c-mint); }
.ab-hero__line {
	display: block;
	width: 1px;
	height: clamp(2.5rem, 4vw, 3.5rem);
	background: linear-gradient(var(--c-paper), rgb(241 246 244 / 0));
	transform-origin: top;
	animation: so-scroll-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes so-scroll-cue {
	0% { transform: scaleY(0); opacity: 1; }
	60% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Hero + karty kapitol --------------------------------------------------- */
.so-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 7rem)) 0 clamp(4rem, 3rem + 4vw, 6.5rem);
	background:
		radial-gradient(56rem 40rem at 50% 28%, rgb(107 206 187 / 0.14), transparent 65%),
		var(--c-ink-900);
	text-align: center;
}

.so-hero__bg { position: absolute; inset: 0; z-index: -1; }
.so-hero__bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0.28; }
.so-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(56rem 40rem at 50% 28%, rgb(6 22 32 / 0.55), transparent 70%),
		linear-gradient(0deg, var(--c-ink-900) 2%, rgb(6 22 32 / 0) 40%);
}

.so-hero__title { max-width: none; }

.so-hero__lead {
	max-width: 50rem;
	text-wrap: balance;
	margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
	font-size: var(--fs-lead);
	line-height: var(--lh-text);
	color: rgb(241 246 244 / 0.86);
}

.so-hero__since { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.so-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	text-align: center;
}

@media (min-width: 1024px) { .so-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.so-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	min-height: clamp(13rem, 11rem + 6vw, 16.5rem);
	padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem) clamp(1rem, 0.8rem + 1vw, 1.7rem) clamp(1.25rem, 1rem + 1vw, 2.2rem);
	border-radius: var(--radius);
	background: rgb(241 246 244 / 0.05);
	transition: background-color 0.4s, transform 0.6s var(--ease-out);
}

.so-card:hover { background: rgb(241 246 244 / 0.09); transform: translateY(-4px); }

.so-card__title {
	font-family: var(--f-display);
	font-size: clamp(1.35rem, 1rem + 1.2vw, 2.1rem);
	font-weight: 900;
	line-height: 1.17;
	letter-spacing: -0.022em;
	color: var(--c-paper);
}

.so-card__text { margin-top: 0.9rem; font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--c-slate-400); }

.so-card__more { margin-top: auto; padding-top: 1.25rem; color: var(--c-amber); letter-spacing: 0.12em; }
.so-card__more span { display: inline-block; transition: transform 0.4s var(--ease-out); }
.so-card:hover .so-card__more span { transform: translateX(4px); }

@media (max-width: 599px) {
	.so-card { min-height: 0; }
	.so-card__text { display: none; }
	.so-card__more { padding-top: 0.9rem; }
}

/* Úvod --------------------------------------------------------------------- */
.so-intro { background: var(--c-paper); }

.so-intro__grid { display: grid; gap: 2rem clamp(3rem, 8vw, 8rem); align-items: start; }

@media (min-width: 900px) { .so-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.so-intro__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); line-height: 1.04; color: var(--c-ink-700); }
.so-intro__title strong { color: var(--c-mint); }

.so-intro__copy { max-width: 30rem; padding-top: 0.75rem; color: rgb(15 50 70 / 0.8); }
.so-intro__copy p + p { margin-top: 1rem; }

/* Kapitola – spoločný základ ---------------------------------------------- */
.so-chapter {
	--ch-bg: var(--c-ink-900);
	--ch-text: var(--c-paper);
	--ch-muted: rgb(241 246 244 / 0.78);
	--ch-line: rgb(241 246 244 / 0.17);
	--ch-accent: var(--c-mint);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--ch-bg);
	color: var(--ch-text);
	scroll-margin-top: 4rem;
}

.so-chapter--light { --ch-bg: var(--c-paper); --ch-text: var(--c-ink-700); --ch-muted: rgb(15 50 70 / 0.8); --ch-line: rgb(15 50 70 / 0.17); --ch-accent: var(--c-ink-700); }
.so-chapter--blue { --ch-bg: #0c2436; --ch-line: rgb(241 246 244 / 0.18); --ch-accent: #a8f0dc; background: linear-gradient(172deg, #0c2436 63%, #27475a 112%); }
.so-chapter--mist { --ch-bg: var(--c-mist-2); --ch-text: var(--c-ink-700); --ch-muted: rgb(15 50 70 / 0.8); --ch-line: rgb(15 50 70 / 0.18); --ch-accent: var(--c-slate-600); }

.so-chapter__hero { position: relative; isolation: isolate; }

/* Fotka sa stráca do priehľadna (maska), nie do farby – sedí aj na kapitolách s prechodovým pozadím.
   Obrázok je o 12 % vyšší ako rámik a orezaný, aby parallax nikdy neodkryl jeho okraj. */
.so-chapter__img { position: relative; z-index: -1; overflow: hidden; }
.so-chapter__img img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; }

.so-chapter__rings { --rings-size: 64rem; --rings-color: rgb(107 206 187 / 0.06); left: -34rem; top: 6rem; }
.so-chapter--light .so-chapter__rings,
.so-chapter--mist .so-chapter__rings { --rings-color: rgb(15 50 70 / 0.07); }

.so-chapter__head { padding-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); border-bottom: 1px solid var(--ch-line); }

.so-chapter__label {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--ch-accent);
	letter-spacing: 0.17em;
}

.so-chapter__label::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.so-team .so-chapter__label { color: var(--c-mint); }

.so-chapter__title {
	margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	font-family: var(--f-display);
	font-size: clamp(3rem, 1.8rem + 5.2vw, 7rem);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.036em;
	color: var(--ch-text);
}

.so-chapter__lead {
	max-width: 36rem;
	margin-top: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--ch-muted);
}

/* Desktop: fotka vpravo cez celú výšku hlavičky, text vľavo */
@media (min-width: 900px) {
	.so-chapter__hero {
		display: flex;
		align-items: flex-end;
		min-height: clamp(30rem, 50vw, 46rem);
	}
	/* Fotka (podľa Figmy) presahuje pod deliacu čiaru až k bodom zoznamu a zdola sa stráca do pozadia.
	   Na širokých monitoroch je užšia (ukotvená vpravo), aby sa neorezávali hlavy. */
	.so-chapter__img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: calc(-1 * clamp(7rem, 4rem + 6vw, 14rem));
		width: clamp(60%, 62rem + 18vw, 100%);
		-webkit-mask-image:
			linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.28) 22%, #000 48%),
			linear-gradient(180deg, #000 50%, rgb(0 0 0 / 0.3) 76%, transparent 94%);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.28) 22%, #000 48%),
			linear-gradient(180deg, #000 50%, rgb(0 0 0 / 0.3) 76%, transparent 94%);
		mask-composite: intersect;
	}
	.so-chapter__img img { object-position: 80% 18%; }
	.so-chapter__head { width: min(100% - 2 * var(--gutter), var(--container)); }
	.so-chapter__body { position: relative; z-index: 1; }
}

/* Mobil: fotka hore, nadpis pod ňou */
@media (max-width: 899px) {
	.so-chapter__img { aspect-ratio: 1386 / 760; }
	.so-chapter__img img { object-position: 75% 30%; }
	.so-chapter__img {
		-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
	}
	.so-chapter__head { margin-top: -3.5rem; }
}

/* Telo kapitoly */
.so-chapter__body {
	display: grid;
	gap: 2.5rem clamp(3rem, 6vw, 6rem);
	align-items: start;
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--section-y);
}

@media (min-width: 900px) {
	.so-chapter__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.so-chapter__text { color: var(--ch-text); max-width: 33rem; }
.so-chapter__text p + p { margin-top: 1.25rem; }
.so-chapter__text strong { font-weight: 700; }

.so-chapter__big {
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.8rem);
	line-height: 1.18;
	letter-spacing: -0.026em;
	color: var(--c-paper);
}

.so-chapter__cta { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }

/* Zoznam: riadky (Stratégia) */
.so-list { counter-reset: none; }

.so-list--rows .so-list__item {
	display: flex;
	align-items: baseline;
	gap: 1.4rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--ch-line);
}

.so-list__num { flex-shrink: 0; font-size: 0.7rem; color: var(--c-mint); }

.so-list--rows .so-list__label {
	font-family: var(--f-display);
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.42rem);
	font-weight: 600;
	letter-spacing: -0.028em;
	transition: color 0.3s, transform 0.5s var(--ease-out);
}

.so-list--rows .so-list__item:hover .so-list__label { color: var(--c-mint); transform: translateX(6px); }

/* Zoznam: pilulky (Brand & kreatíva) – cez celú šírku */
.so-chapter__body--pills .so-chapter__text { max-width: none; }

@media (min-width: 900px) {
	.so-chapter__body--pills { grid-template-columns: 1fr; }
	.so-chapter__body--pills .so-chapter__text { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(3rem, 6vw, 6rem); }
	.so-chapter__body--pills .so-chapter__text p + p { margin-top: 0; }
}

.so-chapter__body--pills .so-chapter__strong { font-size: 1.04em; }

.so-list--pills { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

.so-list--pills .so-list__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1.2rem;
	border: 1px solid var(--ch-line);
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	cursor: default;
}

.so-list--pills .so-list__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-amber);
	transform: translateY(101%);
	transition: transform 0.5s var(--ease-out);
}

.so-list--pills .so-list__item:hover::before { transform: translateY(0); }
.so-list--pills .so-list__num { color: var(--c-ink-700); opacity: 0.55; }

.so-list--pills .so-list__label {
	font-family: var(--f-display);
	font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem);
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--c-ink-700);
}

.so-chapter__cta--after { margin-top: 0; }

/* Zoznam: odrážky v 2 stĺpcoch (Performance) */
.so-list--bullets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 2.5rem); }

.so-list--bullets .so-list__item {
	position: relative;
	padding: 1.05rem 0 1.05rem 2rem;
	border-bottom: 1px solid var(--ch-line);
	transition: color 0.3s;
}

.so-list--bullets .so-list__item::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 50%;
	width: 6px;
	height: 6px;
	translate: 0 -50%;
	border: 1px solid #a8f0dc;
	transition: background-color 0.3s, transform 0.4s var(--ease-out);
}

.so-list--bullets .so-list__item:hover { color: #a8f0dc; }
.so-list--bullets .so-list__item:hover::before { background: #a8f0dc; transform: rotate(45deg); }

/* Zoznam: karta (Web & Tech) */
.so-list--card {
	border: 1px solid var(--ch-line);
	border-radius: var(--radius);
	background: rgb(15 50 70 / 0.02);
	overflow: hidden;
}

.so-list--card .so-list__item {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.3rem 1.5rem;
	border-bottom: 1px solid var(--ch-line);
	transition: background-color 0.35s;
}

.so-list--card .so-list__item:last-child { border-bottom: 0; }
.so-list--card .so-list__item:hover { background: rgb(107 206 187 / 0.14); }
.so-list--card .so-list__num { color: var(--c-slate-600); }

.so-list--card .so-list__label {
	font-family: var(--f-display);
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -0.024em;
	color: var(--c-ink-700);
}

/* Vizuálne predely --------------------------------------------------------- */
.so-tiles { display: grid; grid-template-columns: 1fr 1fr; }

.so-tile { position: relative; height: clamp(12rem, 33.6vw, 34rem); overflow: hidden; background: var(--c-ink-900); }
.so-tile img,
.so-tile video { width: 100%; height: 115%; object-fit: cover; }

.so-cases { display: grid; grid-template-columns: repeat(3, 1fr); }
.so-case { margin: 0; aspect-ratio: 1; overflow: hidden; }
.so-case img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.so-case:hover img { transform: scale(1.04); }

/* Mix ---------------------------------------------------------------------- */
.so-mix {
	overflow: hidden;
	background:
		radial-gradient(50rem 30rem at 85% 30%, rgb(14 60 72 / 0.55), transparent 65%),
		var(--c-ink-900);
}

.so-mix .h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.so-mix .h2 strong { color: var(--c-mint); }
.so-mix__lead { color: rgb(241 246 244 / 0.76); max-width: 30rem; justify-self: end; }

.so-mix__grid {
	display: grid;
	gap: 2.5rem;
	align-items: start;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 1024px) {
	.so-mix__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: clamp(2rem, 4vw, 4rem); }
}

.so-mix__groups { display: grid; gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 700px) { .so-mix__groups { grid-template-columns: 1fr 1fr; } }

.so-mix__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.so-mix__group legend { padding: 0; margin-bottom: 0.9rem; font-weight: 700; color: var(--c-amber); }

.so-mix__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.mix-chip { position: relative; cursor: pointer; }
.mix-chip input { position: absolute; opacity: 0; pointer-events: none; }

.mix-chip span {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	border: 1px solid rgb(241 246 244 / 0.22);
	border-radius: var(--radius);
	font-size: var(--fs-small);
	line-height: 1.25;
	color: rgb(241 246 244 / 0.82);
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.mix-chip:hover span { border-color: rgb(107 206 187 / 0.7); color: var(--c-paper); }
.mix-chip input:checked + span { background: var(--c-mint); border-color: var(--c-mint); color: var(--c-ink-900); }
.mix-chip input:focus-visible + span { outline: 2px solid var(--c-mint); outline-offset: 3px; }

.so-mix__aside { position: relative; }

@media (min-width: 1024px) { .so-mix__aside { position: sticky; top: 7rem; } }

.so-mix__panel {
	padding: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
	border: 1px solid var(--c-mint);
	border-radius: var(--radius);
	background: rgb(6 22 32 / 0.62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.so-mix__label { font-weight: 900; color: var(--c-mint); }

.so-mix__count { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; }
.so-mix__count [data-mix-count] {
	font-family: var(--f-display);
	font-size: clamp(2.5rem, 2rem + 1.5vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c-paper);
	font-variant-numeric: tabular-nums;
}
.so-mix__count .eyebrow { max-width: 7rem; color: var(--c-slate-400); letter-spacing: 0.14em; }

.so-mix__summary { margin-top: 1rem; font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--c-slate-400); }

.so-mix__actions { display: grid; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgb(241 246 244 / 0.14); }

.so-mix__send { width: 100%; }

/* „Nechám si poradiť“ – checkbox (rovnaký vzhľad ako vo formulári) */
.chip { position: relative; display: inline-flex; align-items: center; gap: 0.85rem; color: var(--c-paper); cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip__box { position: relative; width: 17px; height: 17px; flex-shrink: 0; border: 1.5px solid rgb(241 246 244 / 0.5); border-radius: 3px; transition: background-color 0.25s, border-color 0.25s; }
.chip__box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; border: solid var(--c-ink-900); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.25s var(--ease-out); }
.chip input:checked + .chip__box { background: var(--c-mint); border-color: var(--c-mint); }
.chip input:checked + .chip__box::after { transform: rotate(45deg) scale(1); }
.chip:has(input:focus-visible) { outline: 2px solid var(--c-mint); outline-offset: 3px; }

/* Tím ---------------------------------------------------------------------- */
.so-team {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(26rem, 39vw, 38rem);
	padding-block: var(--section-y);
	overflow: hidden;
	isolation: isolate;
	background: var(--c-ink-900);
}

.so-team__bg { position: absolute; inset: 0; z-index: -1; }
.so-team__bg img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%; }
.so-team__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(89deg, rgb(6 22 32 / 0.95) 0%, rgb(6 22 32 / 0.8) 40%, rgb(6 22 32 / 0.32) 64%, rgb(6 22 32 / 0.5) 100%);
}

.so-team .h2 { margin-top: 1.25rem; }
.so-team__lead { max-width: 40rem; margin-top: 1.5rem; color: rgb(241 246 244 / 0.82); }

@media (max-width: 899px) {
	.so-team__bg::after { background: linear-gradient(180deg, rgb(6 22 32 / 0.6), rgb(6 22 32 / 0.92)); }
}

/* --- Mobil – doladenie po vizuálnej kontrole --------------------------- */
@media (max-width: 599px) {
	.so-hero__title { font-size: clamp(2.3rem, 1.2rem + 5.2vw, 2.75rem); }
	.so-card__more { font-size: 0.6rem; letter-spacing: 0.08em; white-space: nowrap; }
	.so-card__title { font-size: 1.2rem; }

	/* Pilulky vedľa seba, menšie */
	.so-list--pills { gap: 0.5rem; }
	.so-list--pills .so-list__item { padding: 0.6rem 0.85rem; gap: 0.5rem; }
	.so-list--pills .so-list__label { font-size: 0.92rem; }

	/* Ukážky webov: posuvný pás namiesto troch maličkých štvorcov */
	.so-cases { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.so-cases::-webkit-scrollbar { display: none; }
	.so-case { scroll-snap-align: center; }
}

@media (max-width: 899px) {
	/* Jeden tím: fotka hore, text pod ňou */
	.so-team { display: block; min-height: 0; padding-top: 0; }
	.so-team__bg { position: relative; aspect-ratio: 4 / 3; }
	.so-team__bg img { height: 100%; }
	.so-team__bg::after { background: linear-gradient(180deg, rgb(6 22 32 / 0) 40%, var(--c-ink-900) 100%); }
	.so-team__content { margin-top: -2rem; }
}