/* ==========================================================================
   REKLAMNÉ PLOCHY

   Rozmery sú štandardné IAB / Google Ad Manager, takže sa dá použiť
   hotový kód od siete aj vlastný predaj bez prekresľovania:

     970 × 250   Billboard        pod hero na homepage
     728 ×  90   Leaderboard      pod hlavičkou podstránok
     300 × 250   Medium Rectangle pravý stĺpec
     300 × 600   Half Page        pravý stĺpec (dlhé stránky)
     336 × 280   Large Rectangle  v článku
     320 × 100   Large Mobile     mobilná náhrada leaderboardu

   Každá plocha má dopredu rezervovanú výšku. Bez toho by sa obsah po
   načítaní reklamy posunul a celý layout by poskakoval.
   ========================================================================== */

.sq-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sq-space-8);
	margin-inline: auto;
}

/* ==========================================================================
   OZNAČENIE

   Ikona ⓘ plus jedno slovo. Slovo je viditeľné vždy — reklama musí byť
   rozoznateľná na prvý pohľad, nie až po nadídení myšou; na dotykových
   zariadeniach sa hover nedá vyvolať vôbec. Ikona pri nadídení doplní
   celú vetu o tom, čo označenie znamená.
   ========================================================================== */

.sq-adlabel {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sq-font-display);
	font-size: 10px;
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sq-text-tertiary);
	cursor: help;
}

.sq-adlabel svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: color var(--sq-duration) var(--sq-ease);
}

.sq-adlabel:hover,
.sq-adlabel:focus-visible {
	color: var(--sq-accent);
}

.sq-adlabel__tip {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 20;
	width: max-content;
	max-width: 280px;
	padding: var(--sq-space-12);
	background: var(--sq-elevated-2);
	border: 1px solid var(--sq-border-strong);
	border-radius: var(--sq-radius);
	font-family: var(--sq-font);
	font-size: var(--sq-fs-small);
	font-weight: var(--sq-weight-regular);
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.45;
	color: var(--sq-text-secondary);
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition:
		opacity var(--sq-duration) var(--sq-ease),
		transform var(--sq-duration) var(--sq-ease);
}

.sq-adlabel:hover .sq-adlabel__tip,
.sq-adlabel:focus-visible .sq-adlabel__tip {
	opacity: 1;
	transform: translateY(0);
}

/* Pri ploche vycentrovanej na stránke sa bublina otvára na stred. */
.sq-ad .sq-adlabel__tip {
	left: 50%;
	transform: translate(-50%, 4px);
}

.sq-ad .sq-adlabel:hover .sq-adlabel__tip,
.sq-ad .sq-adlabel:focus-visible .sq-adlabel__tip {
	transform: translate(-50%, 0);
}

.sq-ad__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ad-w);
	height: var(--ad-h);
	max-width: 100%;
	border: 1px solid var(--sq-border);
	background: var(--sq-surface);
	overflow: hidden;
}

/* V prototype ukazuje rozmer, v ostrej prevádzke tu bude kód siete. */
.sq-ad__slot::after {
	content: var(--ad-size);
	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-text-tertiary);
}

.sq-ad--billboard    { --ad-w: 970px; --ad-h: 250px; --ad-size: "970 × 250"; }
.sq-ad--leaderboard  { --ad-w: 728px; --ad-h: 90px;  --ad-size: "728 × 90"; }
.sq-ad--rectangle    { --ad-w: 300px; --ad-h: 250px; --ad-size: "300 × 250"; }
.sq-ad--halfpage     { --ad-w: 300px; --ad-h: 600px; --ad-size: "300 × 600"; }
.sq-ad--inarticle    { --ad-w: 336px; --ad-h: 280px; --ad-size: "336 × 280"; }

/* Odstup od obsahu — reklama nikdy nesmie sedieť tesne pri titulku. */
.sq-ad--band {
	padding-block: var(--sq-space-48);
}

.sq-ad--rail {
	margin-top: var(--sq-space-32);
}

.sq-ad--inarticle {
	margin-block: var(--sq-space-48);
}

@media (max-width: 1023px) {
	/* Leaderboard aj billboard sa na užších oknách menia na mobilné formáty. */
	.sq-ad--billboard {
		--ad-w: 300px;
		--ad-h: 250px;
		--ad-size: "300 × 250";
	}

	.sq-ad--leaderboard {
		--ad-w: 320px;
		--ad-h: 100px;
		--ad-size: "320 × 100";
	}
}

@media (max-width: 767px) {
	.sq-ad--band {
		padding-block: var(--sq-space-32);
	}

	.sq-ad--inarticle {
		--ad-w: 300px;
		--ad-h: 250px;
		--ad-size: "300 × 250";
	}
}

/* ==========================================================================
   VLASTNÝ BANNER

   Priamy predaj bez reklamnej siete. Rozmerovo sedí na billboard, takže sa
   dá do rovnakého slotu vymeniť bez zásahu do layoutu — mení sa len obsah.
   ========================================================================== */

.sq-promo {
	display: flex;
	align-items: stretch;
	width: var(--ad-w, 970px);
	max-width: 100%;
	height: var(--ad-h, 250px);
	border: 1px solid var(--sq-border);
	border-left: 3px solid var(--sq-accent);
	background: var(--sq-surface);
	overflow: hidden;
	text-align: left;
	transition: border-color var(--sq-duration) var(--sq-ease);
}

.sq-promo:hover {
	border-color: var(--sq-border-strong);
	border-left-color: var(--sq-accent);
}

/*
 * Obrázok má pevný podiel a `flex-shrink: 0`. Bez toho ho dlhší text
 * stlačí a telo banneru sa pretlačí cezeň.
 */
.sq-promo__media {
	flex: 0 0 40%;
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto;
}

.sq-promo__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sq-space-8);
	padding: var(--sq-space-32);
}

.sq-promo__eyebrow,
.sq-promo__title,
.sq-promo__text,
.sq-promo__cta {
	display: block;
}

.sq-promo__eyebrow {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-micro);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-track-eyebrow);
	text-transform: uppercase;
	color: var(--sq-accent);
}

.sq-promo__title {
	font-family: var(--sq-font-display);
	font-size: var(--sq-fs-card);
	font-weight: var(--sq-weight-semibold);
	letter-spacing: var(--sq-track-card);
	line-height: 1.15;
	color: var(--sq-text);
}

.sq-promo__text {
	font-size: var(--sq-fs-small);
	color: var(--sq-text-secondary);
	line-height: 1.5;
}

.sq-promo__cta {
	align-self: flex-start;
	margin-top: var(--sq-space-8);
	min-height: 34px;
	padding-inline: var(--sq-space-16);
	font-size: var(--sq-fs-small);
}

@media (max-width: 1023px) {
	.sq-promo {
		flex-direction: column;
		width: 300px;
		height: auto;
	}

	.sq-promo__media {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}

	.sq-promo__body {
		padding: var(--sq-space-24);
	}
}

/* ==========================================================================
   NATÍVNY OBSAH VO FEEDE

   Platený článok v spravodajskom feede. Vyzerá ako bežná položka — má ju
   rovnako pohodlne čítať — ale limetková hrana a označenie ho oddelia
   od redakčného obsahu na prvý pohľad.
   ========================================================================== */

.sq-feed__item--promo {
	position: relative;
	padding-left: var(--sq-space-16);
	background: var(--sq-surface);
	box-shadow: -12px 0 0 var(--sq-surface), 12px 0 0 var(--sq-surface);
}

.sq-feed__item--promo::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--sq-space-12));
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--sq-accent);
}

.sq-feed__promo-meta {
	display: flex;
	align-items: center;
	gap: var(--sq-space-8);
}

.sq-feed__promo-brand {
	font-family: var(--sq-font-display);
	font-size: 10px;
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sq-accent);
}

@media (max-width: 767px) {
	.sq-feed__item--promo {
		padding-left: var(--sq-space-12);
		box-shadow: none;
	}

	.sq-feed__item--promo::before {
		left: 0;
	}
}