/* ==========================================================================
   TEXT A OBRÁZOK  —  Figma node 1:1363 („O nas - Landing")

   Dva stĺpce po 678px s medzerou 40. Poradie sa prehadzuje modifikátorom,
   takže tá istá sekcia pokryje všetky striedajúce sa bloky na stránke.

   Miery z Figmy:
     nadpis     Inter Bold 66 / 102.4
     popisok    Inter Bold 30
     text       Inter Regular 17
     tlačidlo   320 × 60
     PRED / PO  Inter Black 29.2, biele, cez obrázok
   ========================================================================== */

.pc-media-text {
	padding-block: var(--pc-space-section);
}

.pc-media-text__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

/* Predvolene je obrázok vpravo; pri variante „vľavo" sa stĺpce prehodia.
   Poradie v HTML ostáva text → obrázok, aby čítačky čítali text prvý. */
.pc-media-text--left .pc-media-text__body {
	grid-column: 2;
	grid-row: 1;
}

.pc-media-text--left .pc-media-text__media {
	grid-column: 1;
	grid-row: 1;
}

/* ---- Text ------------------------------------------------------------- */

.pc-media-text__title {
	font-size: 66px;
	font-weight: var(--pc-weight-bold);
	line-height: 102.4px;
}

.pc-media-text__text {
	/* Figma: nadpis končí na 905, text začína na 917 */
	margin-top: 12px;
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
}

.pc-media-text__text > * + * {
	margin-top: var(--pc-space-24);
}

.pc-media-text__text a {
	color: var(--pc-blue);
	text-decoration: underline;
}

.pc-media-text__text ul,
.pc-media-text__text ol {
	padding-inline-start: var(--pc-space-24);
}

.pc-media-text__button {
	width: 320px;
	max-width: 100%;
	min-height: 60px;
	margin-top: 46px;
}

.pc-media-text__contact {
	--pc-contact-size: 19px;
	--pc-contact-height: 54px;
	--pc-contact-icon: 29px;
	margin-top: 46px;
}

/* ---- Obrázok ---------------------------------------------------------- */

.pc-media-text__eyebrow {
	/* Figma: popisok 2454, obrázok 2513.8 */
	margin-bottom: 24px;
	font-size: var(--pc-fs-heading);
	font-weight: var(--pc-weight-bold);
	line-height: 1.2;
}

.pc-media-text__figure {
	position: relative;
	/* Typografia popiskov sa počíta z obrázka, nie z okna. */
	container-type: inline-size;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}

.pc-media-text__figure img {
	width: 100%;
	height: auto;
}

/*
 * Popisky pri porovnávacích fotkách. Vo Figme sedia v dolnej tretine,
 * každý v strede svojej polovice obrázka.
 */
.pc-media-text__tag {
	position: absolute;
	bottom: 11%;
	font-size: 4.3cqw;
	font-weight: 900;
	line-height: 1;
	color: var(--pc-white);
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
}

.pc-media-text__tag--left {
	left: 25%;
	transform: translateX(-50%);
}

.pc-media-text__tag--right {
	left: 75%;
	transform: translateX(-50%);
}

/*
 * 66px nadpis je miera pre plátno 1920. V polovičnom stĺpci na tablete
 * a menšom notebooku sa lámal po slove a riadkovanie 102px roztiahlo
 * nadpis na pol obrazovky.
 */
@media (max-width: 1400px) {
	.pc-media-text__title {
		font-size: clamp(36px, 4.4vw, 66px);
		line-height: 1.2;
	}
}

/* ==========================================================================
   RESPONZIVITA

   Pod 900px sa stĺpce skladajú pod seba a obrázok ide vždy nad text —
   nezávisle od zvolenej strany, aby poradie na mobile ostalo rovnaké.
   ========================================================================== */

@media (max-width: 900px) {
	.pc-media-text__grid {
		grid-template-columns: 1fr;
		gap: var(--pc-space-32);
	}

	.pc-media-text--left .pc-media-text__body,
	.pc-media-text--left .pc-media-text__media {
		grid-column: 1;
		grid-row: auto;
	}

	.pc-media-text__media {
		order: -1;
	}

	.pc-media-text__title {
		font-size: clamp(28px, 5vw, 66px);
		line-height: 1.25;
	}

	.pc-media-text__eyebrow {
		font-size: var(--pc-fs-lead);
	}

	.pc-media-text__button,
	.pc-media-text__contact {
		margin-top: var(--pc-space-32);
	}
}

@media (max-width: 560px) {
	.pc-media-text__button {
		width: 100%;
	}

	.pc-media-text__contact {
		--pc-contact-size: var(--pc-fs-base);
		--pc-contact-height: 44px;
		--pc-contact-icon: 24px;
	}
}