/* ==========================================================================
   REKLAMA — predajná podstránka

   Je to predajný dokument, nie článok. Preto má vlastnú hlavičku, čísla
   hore a jasné CTA — ale drží sa rovnakej typografie a rovnakých
   komponentov ako zvyšok webu.
   ========================================================================== */

.sq-media-kit__head {
	max-width: 60ch;
	padding-block: var(--sq-space-48) var(--sq-space-32);
}

.sq-media-kit__title {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-display);
	line-height: 1.02;
	letter-spacing: var(--sq-track-display);
}

.sq-media-kit__lead {
	margin-top: var(--sq-space-16);
	font-size: var(--sq-fs-lead);
	line-height: 1.55;
	color: var(--sq-text-secondary);
}

.sq-media-kit__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-12);
	margin-top: var(--sq-space-24);
}

/* ---- Čísla --------------------------------------------------------------- */

.sq-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sq-space-32);
	padding-block: var(--sq-space-32);
	border-block: 1px solid var(--sq-border);
}

.sq-stat__value {
	font-family: var(--sq-font-display);
	font-size: 44px;
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--sq-accent);
	font-variant-numeric: tabular-nums;
}

.sq-stat__label {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-secondary);
	line-height: 1.45;
}

.sq-stats__note {
	padding-top: var(--sq-space-16);
	font-size: var(--sq-fs-micro);
	color: var(--sq-text-tertiary);
}

/* ---- Formáty ------------------------------------------------------------- */

.sq-formats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sq-space-32);
}

/*
 * Pevný pás pre náhľad. Bez neho by vysoký Half Page (300 × 600) natiahol
 * celý riadok mriežky a pod nízkym Leaderboardom by ostala diera cez pol
 * obrazovky. Takto začínajú názvy formátov na rovnakej linke.
 */
.sq-format {
	display: grid;
	grid-template-rows: 200px auto auto 1fr;
	gap: var(--sq-space-12);
	align-content: start;
}

/*
 * Náhľad drží skutočný pomer strán formátu, nie jeho veľkosť. Klient tak
 * hneď vidí, či je plocha široká alebo štvorcová, bez toho aby sme na
 * stránku dávali 970px široké obdĺžniky.
 *
 * Šírku počíta PHP tak, aby sa každý formát zmestil do pásu — výška sa
 * dopočíta z pomeru. Obe hodnoty musia byť určené, inak by sa rámček
 * zmrštil na šírku textu vnútri.
 */
.sq-format__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: end;
	justify-self: start;
	width: min(var(--w), 100%);
	aspect-ratio: var(--ratio);
	border: 1px solid var(--sq-border-strong);
	background: var(--sq-surface);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.1em;
	color: var(--sq-text-tertiary);
}

.sq-format__name {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-semibold);
	letter-spacing: var(--sq-track-card);
}

.sq-format__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-8);
}

.sq-format__text {
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
	line-height: 1.55;
}

/* ---- Balíky a spolupráce ------------------------------------------------- */

.sq-offers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sq-space-32);
}

.sq-offer {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-12);
	padding-top: var(--sq-space-16);
	border-top: 2px solid var(--sq-accent);
}

.sq-offer__title {
	font-size: var(--sq-fs-card);
	letter-spacing: var(--sq-track-card);
}

.sq-offer__text {
	font-size: var(--sq-fs-ui);
	color: var(--sq-text-secondary);
	line-height: 1.55;
}

.sq-offer__list {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-8);
	margin-top: var(--sq-space-4);
}

.sq-offer__list li {
	position: relative;
	padding-left: var(--sq-space-16);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-secondary);
	line-height: 1.5;
}

.sq-offer__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	background: var(--sq-accent);
	transform: rotate(45deg);
}

/* ---- Zásada, ktorá sa nepredáva ------------------------------------------

   Vlastný blok, nie odsek v texte. Je to najdôležitejšia veta na celej
   stránke — pre inzerenta aj pre čitateľa.
   ------------------------------------------------------------------------ */

.sq-principle {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--sq-space-48);
	padding: var(--sq-space-32);
	background: var(--sq-surface);
	border-left: 2px solid var(--sq-accent);
}

.sq-principle__title {
	font-size: var(--sq-fs-heading);
	letter-spacing: var(--sq-track-heading);
}

.sq-principle__text {
	color: var(--sq-text-secondary);
	line-height: 1.65;
}

.sq-principle__text + .sq-principle__text {
	margin-top: var(--sq-space-12);
}

/* ---- Postup -------------------------------------------------------------- */

.sq-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sq-space-32);
	counter-reset: step;
}

.sq-step {
	padding-top: var(--sq-space-16);
	border-top: 1px solid var(--sq-border);
}

.sq-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--sq-space-12);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.12em;
	color: var(--sq-accent);
}

.sq-step__title {
	font-size: var(--sq-fs-base);
	font-weight: var(--sq-weight-semibold);
	letter-spacing: var(--sq-track-card);
	font-family: var(--sq-font-display);
}

.sq-step__text {
	margin-top: var(--sq-space-8);
	font-size: var(--sq-fs-small);
	color: var(--sq-text-secondary);
	line-height: 1.5;
}

/* ---- Technické parametre ------------------------------------------------- */

.sq-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--sq-space-48);
}

.sq-spec {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--sq-space-16);
	padding-block: var(--sq-space-12);
	border-bottom: 1px solid var(--sq-border);
	font-size: var(--sq-fs-ui);
}

.sq-spec__key {
	color: var(--sq-text-tertiary);
}

/* ---- Kontakt ------------------------------------------------------------- */

.sq-contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--sq-space-48);
	padding: var(--sq-space-48);
	border: 1px solid var(--sq-accent);
	border-radius: var(--sq-radius);
	background: var(--sq-surface);
}

.sq-contact__title {
	font-size: var(--sq-fs-heading);
	letter-spacing: var(--sq-track-heading);
}

.sq-contact__text {
	margin-top: var(--sq-space-8);
	color: var(--sq-text-secondary);
	line-height: 1.55;
}

.sq-contact__mail {
	display: inline-block;
	margin-top: var(--sq-space-16);
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-card);
	color: var(--sq-accent);
}

.sq-contact__form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sq-space-12);
}

.sq-contact__form .sq-input {
	text-align: left;
	height: 44px;
}

.sq-contact__form textarea.sq-input {
	grid-column: 1 / -1;
	height: 96px;
	padding-block: var(--sq-space-12);
	resize: vertical;
	font-family: inherit;
}

.sq-contact__form .sq-btn {
	grid-column: 1 / -1;
}

@media (max-width: 1023px) {
	.sq-stats,
	.sq-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.sq-formats,
	.sq-offers,
	.sq-specs {
		grid-template-columns: 1fr;
	}

	/*
	 * V jednom stĺpci nie je čo zarovnávať — pevný pás by pod nízkym
	 * bannerom nechal prázdne miesto.
	 */
	.sq-format {
		grid-template-rows: auto;
	}

	.sq-principle,
	.sq-contact {
		grid-template-columns: 1fr;
		gap: var(--sq-space-24);
		padding: var(--sq-space-32);
	}
}

@media (max-width: 767px) {
	.sq-stats {
		gap: var(--sq-space-24);
	}

	.sq-stat__value {
		font-size: 32px;
	}

	.sq-spec {
		grid-template-columns: 1fr;
		gap: var(--sq-space-4);
	}

	.sq-contact__form {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   DOPYTOVÝ FORMULÁR
   ========================================================================== */

/*
 * Pasca na roboty. `display: none` niektoré roboty rozpoznajú a pole
 * preskočia — preto je odsunuté mimo obrazovku a schované pred čítačkami
 * cez aria-hidden v markupe.
 */
.sq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sq-form__note {
	margin: 0;
	font-size: var(--sq-fs-small);
	line-height: 1.5;
	color: var(--sq-accent);
}

.sq-form__note:empty {
	display: none;
}

.sq-form__note.is-error {
	color: var(--sq-live);
}