/* ============================================================
   Detail článku V2 – /info/<url>/ (Front:BlogArticle:default)

   Stránka nenačítava finalcss.css, takže tento súbor musí pokryť aj
   triedy, ktoré prichádzajú z CMS textu v mb_blog (faqQuestion,
   respBlogImg, linkto-normal, blog-table-summary, blog-summary,
   galérie z {{{includeGallery-*}}}). Tie si musia ponechať pôvodné
   názvy – sú natvrdo v uloženom HTML.

   Zdieľané primitívy (.rp-container, .rp-page-heading, .rp-heading,
   .rp-eyebrow, .rp-button, .rp-breadcrumbs) sú v ui-v2.css / layout-v2.css
   a tu sa neduplikujú.

   1. Shell a layout
   2. Telo článku – typografia CMS obsahu
   3. Komponenty z CMS obsahu
   4. CTA box
   5. Sidebar
   6. Galérie a recenzie z {{{include*}}}
   7. Responzivita
   ============================================================ */


/* ============================================================
   1. SHELL A LAYOUT
   ============================================================ */

.rp-article-v2 {
	color: var(--rp-color-text, #282a2d);
	font-family: var(--rp-font-primary, 'Bariol', 'Trebuchet MS', Trebuchet, sans-serif);
	width: 100%;
}

.rp-article-v2 *,
.rp-article-v2 *::before,
.rp-article-v2 *::after {
	box-sizing: border-box;
}

/* Kontajner zostáva na 1400 px z .rp-container, aby breadcrumbs sedeli v jednej
   línii s .rp-header-v2__inner rovnako ako na ostatných World-2 stránkach.
   Mieru textu drží grid, nie kontajner. */
.rp-article-v2__inner {
	padding-bottom: 56px;
	padding-top: 8px;
}

/* Tri stĺpce: obsah článku, text, „Najnovšie články“.
   260 + 700 + 300 + 2×48 = 1356 sa zmestí do obsahovej šírky 1376 px.
   .rp-breadcrumbs má z layout-v2.css nulový spodný margin, odsadenie
   od nich preto patrí sem. */
.rp-article-v2__layout {
	align-items: start;
	display: grid;
	gap: clamp(32px, 3vw, 48px);
	grid-template-columns: minmax(0, 260px) minmax(0, 700px) minmax(0, 300px);
	margin-top: 48px;
}

.rp-article-v2__layout--no-toc {
	grid-template-columns: minmax(0, 700px) minmax(0, 300px);
}

/* Plynulý scroll a odsadenie kotvy spod sticky hlavičky.
   --rp-article-anchor-offset priebežne prepisuje article-detail-v2.js podľa
   skutočnej výšky [data-rp-sticky]; hlavička mení výšku podľa scrollu aj
   breakpointu, takže pevné číslo tu vždy niekde sedieť prestane.
   scroll-padding-top platí pre všetky kotvy vrátane natívnych #hash odkazov. */
/* Iba scroll-padding-top na scroll kontajneri – platí pre všetky kotvy vrátane
   natívnych #hash odkazov. scroll-margin-top na cieľovom h2 sa s ním SČÍTAVA
   (overené: 150 + 150 = 300 px odstup pri hlavičke vysokej 130 px), preto tu nie je. */
:root:has(.rp-article-v2) {
	scroll-behavior: smooth;
	scroll-padding-top: var(--rp-article-anchor-offset, 140px);
}

/* H1 sedí v textovom stĺpci, nie ako centrovaný page-heading nad gridom. */
.rp-article-v2__title {
	font-family: inherit;
	font-size: clamp(1.75rem, 5vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 28px;
	padding: 0 0 18px;
	position: relative;
	text-align: left;
}

.rp-article-v2__title::after {
	background: var(--rp-color-accent, #ff1782);
	border-radius: 3px;
	bottom: 0;
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	width: 48px;
}

/* Dátum publikovania a čas čítania pod H1. */
.rp-article-v2__meta {
	align-items: center;
	color: var(--rp-color-text-muted, #555);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 8px;
	margin: -8px 0 24px;
}

.rp-article-v2__meta-divider {
	color: #d4c5d0;
}

.rp-article-v2__reading-time {
	align-items: center;
	display: inline-flex;
	gap: 4px;
}

.rp-article-v2__reading-time svg {
	fill: none;
	flex: 0 0 auto;
	height: 13px;
	opacity: .7;
	stroke: #3d3b3c;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.75;
	width: 13px;
}


/* ============================================================
   1b. OBSAH ČLÁNKU (ľavý stĺpec)

   Jeden <details> pre desktop aj mobil: nad 1280 px je <summary> skrytý
   a panel je sticky, pod 1280 px je z toho rozbaľovací blok nad textom.
   ============================================================ */

/* align-self: stretch je nutné – grid má align-items: start, takže by bol tento
   stĺpec vysoký len na obsah a sticky vnútri by nemal kam cestovať. */
.rp-article-v2__toc {
	align-self: stretch;
	min-width: 0;
}

/* --rp-article-sticky-offset počíta s hlavičkou aj s utility lištou, ktorá sa pri
   scrollovaní nahor vysunie späť. Keby tu bol offset pre kompaktnú hlavičku,
   nadpis „Obsah článku“ by pri scrolle hore zmizol pod ňou. */
.rp-article-v2__toc-panel {
	border-right: 1px solid #efe9ee;
	padding-right: 20px;
	position: sticky;
	top: var(--rp-article-sticky-offset, 180px);
}

/* Scrolluje sa len samotný zoznam, nadpis zostáva na mieste. */
.rp-article-v2__toc-nav {
	max-height: calc(100vh - var(--rp-article-sticky-offset, 180px) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rp-article-v2__toc-title {
	color: var(--rp-color-text-muted, #555);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.rp-article-v2__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rp-article-v2__toc-list li {
	margin: 0;
	padding: 0;
}

.rp-article-v2__toc-list a {
	border-left: 2px solid transparent;
	color: var(--rp-color-text, #282a2d);
	display: block;
	font-size: 15px;
	line-height: 1.5;
	padding: 10px 0 10px 16px;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease;
}

.rp-article-v2__toc-list a:hover {
	color: var(--rp-color-accent, #ff1782);
}

.rp-article-v2__toc-list a:focus-visible {
	border-radius: 4px;
	outline: 3px solid rgba(255, 23, 130, 0.22);
	outline-offset: 2px;
}

.rp-article-v2__toc-list a.is-active {
	border-left-color: var(--rp-color-accent, #ff1782);
	color: var(--rp-color-accent, #ff1782);
	font-weight: 700;
}

.rp-article-v2__bottom {
	margin-top: 48px;
}


/* ============================================================
   2. TELO ČLÁNKU – TYPOGRAFIA CMS OBSAHU
   ============================================================ */

/* 17px/1.75 – legacy #blogNew mal 15px/1.8, čo je na mieru 740 px príliš malé. */
.rp-article-v2__body {
	font-family: var(--rp-font-primary, 'Bariol', 'Trebuchet MS', Trebuchet, sans-serif);
	font-size: 17px;
	line-height: 1.75;
	min-width: 0;
	text-align: left;
}

.rp-article-v2__body h2 {
	font-family: inherit;
	font-size: 2.45rem;
	font-weight: 700;
	letter-spacing: -0.05rem;
	line-height: 1.2;
	margin: 3rem 0 1.5rem;
	padding-bottom: 0.75rem;
	position: relative;
}

.rp-article-v2__body h3 {
	border-left: 4px solid var(--rp-color-accent, #ff1782);
	color: #2d3748;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 2.5rem 0 1.5rem;
	padding-left: 1rem;
	position: relative;
}

.rp-article-v2__body h4 {
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 2rem 0 1rem;
}

.rp-article-v2__body p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 18px;
	text-align: left;
}

.rp-article-v2__body strong,
.rp-article-v2__body b {
	font-weight: 700;
}

.rp-article-v2__body ul,
.rp-article-v2__body ol {
	margin: 0 0 15px;
	padding-left: 24px;
}

.rp-article-v2__body li {
	font-size: inherit;
	line-height: inherit;
}

.rp-article-v2__body a {
	color: var(--rp-color-accent, #ff1782);
	font-weight: 700;
	text-decoration: none;
}

.rp-article-v2__body a:hover {
	text-decoration: underline;
}

/* FAQ si drží vizuál z faq-v2.css zdieľaný s homepage – odkazy tam nie sú bold. */
.rp-article-v2__body .faqAnswer a {
	font-weight: 400;
}

.rp-article-v2__body img {
	height: auto;
	max-width: 100%;
}

.rp-article-v2__body table {
	border: 1px solid #3d3b3c;
	border-collapse: collapse;
	line-height: 30px;
	width: 100%;
}

.rp-article-v2__body td,
.rp-article-v2__body th {
	border: 1px solid #3d3b3c;
	padding-left: 10px;
}


/* ============================================================
   3. KOMPONENTY Z CMS OBSAHU
   ============================================================ */

/* Responzívny obrázok v texte. */
.rp-article-v2__body img.respBlogImg {
	max-width: 100%;
}

.rp-article-v2__body img.respBlogImgRight {
	float: right;
	margin: 0 0 20px 20px;
	max-width: 100%;
}

/* Kotva na sekciu článku – scroll rieši article-detail-v2.js. */
.rp-article-v2__body .linkto,
.rp-article-v2__body .linkto-normal {
	color: #e6007e;
	cursor: pointer;
	font-weight: 700;
}

.rp-article-v2__body .linkto {
	text-decoration: underline;
}

/* Tabuľka „Obsah článku“. */
.rp-article-v2__body #blog-table-summary {
	border: 1px solid #e0e0e0;
	border-collapse: separate;
	border-radius: 8px;
	border-spacing: 0;
	margin: 2rem 0;
	overflow: hidden;
	width: 100%;
}

.rp-article-v2__body #blog-table-summary th,
.rp-article-v2__body #blog-table-summary td {
	border: none;
}

.rp-article-v2__body #blog-table-summary thead {
	background-color: #fafafa;
}

.rp-article-v2__body #blog-table-summary th {
	border-bottom: 1px solid #e0e0e0;
	color: #333;
	font-size: 1.05rem;
	font-weight: 700;
	padding: 0.9rem 1rem;
	text-align: left;
}

.rp-article-v2__body #blog-table-summary tbody tr:nth-child(odd) {
	background-color: #f7f7f7;
}

.rp-article-v2__body #blog-table-summary tbody tr:nth-child(even) {
	background-color: #fdfdfd;
}

.rp-article-v2__body #blog-table-summary tbody tr:hover {
	background-color: #fef6fa;
	transition: background-color 0.3s ease;
}

.rp-article-v2__body #blog-table-summary td {
	color: #444;
	font-size: 1rem;
	line-height: 1.4;
	padding: 0.8rem 1rem;
	vertical-align: top;
}

.rp-article-v2__body #blog-table-summary .linkto-normal {
	color: #d60082;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.2s ease;
}

.rp-article-v2__body #blog-table-summary .linkto-normal:hover {
	color: #b3006b;
	text-decoration: none;
	transform: translateX(2px);
}

/* Zvýraznené zhrnutie v texte. */
.rp-article-v2__body .blog-summary {
	background: #efefef;
	padding: 5px 20px 10px;
}

/* FAQ akordeón zo starého CMS markupu je nastylovaný v faq-v2.css
   (zdieľané s homepage); rozbaľovanie rieši article-detail-v2.js. */

/* Zvýraznený praktický tip (blockquote.blog-practical-tip). */
.rp-article-v2__body .blog-practical-tip {
	background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
	border-left: 6px solid var(--rp-color-accent, #ff1782);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	line-height: 1.6;
	margin-left: 0;
	margin-right: 0;
	padding: 30px 40px 20px 70px;
	position: relative;
}

/* Ikona sa centruje v celom ľavom paddingu aj vertikálne v bloku, takže sedí
   pri akejkoľvek výške obsahu (legacy top/left boli natvrdo pre 15px text). */
.rp-article-v2__body .blog-practical-tip::before {
	content: '\1F4CC';
	font-size: 1.6rem;
	left: 0;
	line-height: 1;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	width: 70px;
}

/* Citát (blockquote.blog-citation). */
.rp-article-v2__body .blog-citation {
	background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.1px;
	line-height: 1.6;
	margin-left: 0;
	margin-right: 0;
	padding: 30px 40px 20px;
	position: relative;
	text-align: center;
}

/* Číslovaný krok postupu. */
.rp-article-v2__body .blogStep {
	background: var(--rp-color-accent, #ff1782);
	clear: both;
	color: #fff;
	font-size: 18px;
	height: 40px;
	line-height: 40px;
	margin-top: 30px;
	text-indent: 10px;
	width: 100%;
}

/* Žltá poznámka pod textom. */
.rp-article-v2__body .blogPartSpecialHint {
	background: #fef9b5;
	font-size: 13px;
	font-style: italic;
	margin: 20px 0;
	padding: 20px 10px;
	text-align: center;
}

.rp-article-v2__body img.blogImgLeft {
	float: left;
	margin: 0 30px 20px 0;
	max-width: 220px;
}

/* Tlačidlá vkladané priamo do CMS textu. */
.rp-article-v2__body .magenta-action-button,
.rp-article-v2__body .dark-action-button {
	border: none;
	border-radius: 8px;
	color: #fff;
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	margin-top: 20px;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.2s ease;
}

.rp-article-v2__body .magenta-action-button {
	background: var(--rp-color-accent, #ff1782);
}

.rp-article-v2__body .dark-action-button {
	background: #313131;
}

.rp-article-v2__body .magenta-action-button:hover,
.rp-article-v2__body .dark-action-button:hover {
	background: #171515;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Odstupové a pomocné utility triedy používané priamo v CMS texte. */
.rp-article-v2__body .mt7 { margin-top: 7px; }
.rp-article-v2__body .mt10 { margin-top: 10px; }
.rp-article-v2__body .mt20 { margin-top: 20px; }
.rp-article-v2__body .mt30 { margin-top: 30px; }
.rp-article-v2__body .mt40 { margin-top: 40px; }
.rp-article-v2__body .mb20 { margin-bottom: 20px; }
.rp-article-v2__body .mb30 { margin-bottom: 30px; }
.rp-article-v2__body .mb40 { margin-bottom: 40px; }
.rp-article-v2__body .my20 { margin-bottom: 20px; margin-top: 20px; }
.rp-article-v2__body .my30 { margin-bottom: 30px; margin-top: 30px; }
.rp-article-v2__body .my40 { margin-bottom: 40px; margin-top: 40px; }
.rp-article-v2__body .my50 { margin-bottom: 50px; margin-top: 50px; }
.rp-article-v2__body .pt10 { padding-top: 10px; }
.rp-article-v2__body .py5 { padding-bottom: 5px; padding-top: 5px; }
.rp-article-v2__body .px20 { padding-left: 20px; padding-right: 20px; }
.rp-article-v2__body .pl0 { padding-left: 0; }
.rp-article-v2__body .fs20 { font-size: 20px; }
.rp-article-v2__body .bold { font-weight: 700; }
.rp-article-v2__body .text-center { text-align: center; }
.rp-article-v2__body .color-magenta { color: var(--rp-color-accent, #ff1782); }
.rp-article-v2__body .bg-gray-efe { background: #efefef; }
.rp-article-v2__body .list-style-type-none { list-style-type: none; }
.rp-article-v2__body .overflow { overflow: hidden; }
.rp-article-v2__body .clear { clear: both; }
.rp-article-v2__body .float-start { float: left; }
.rp-article-v2__body .float-end { float: right; }
.rp-article-v2__body .column-box-48 { box-sizing: border-box; width: 48%; }


/* ============================================================
   4. CTA BOX
   ============================================================ */

.rp-article-v2__cta {
	align-items: center;
	background: #f2edf0;
	border: 6px solid var(--rp-color-accent, #ff1782);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	margin: 40px 0;
	padding: 25px 27px;
}

.rp-article-v2__cta-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.rp-article-v2__cta-text {
	font-size: 17px;
	line-height: 28px;
	margin: 30px 0 0;
	text-align: center;
}

.rp-article-v2__cta-link {
	letter-spacing: 1px;
	margin-top: 40px;
	text-transform: uppercase;
}


/* ============================================================
   5. SIDEBAR
   ============================================================ */

.rp-article-v2__sidebar {
	min-width: 0;
}

/* Nie sticky – posúva sa s obsahom ako zvyšok stránky. */
.rp-article-v2__sidebar-inner {
	background-color: #fbf5f9;
	border-radius: 8px;
	padding: 24px;
}

/* Rovnaký vizuál ako nadpis obsahu článku v ľavom stĺpci. */
.rp-article-v2__sidebar-title {
	color: var(--rp-color-text-muted, #555);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	margin: 0 0 16px;
	text-align: left;
	text-transform: uppercase;
}

.rp-article-v2__sidebar-title + .rp-article-v2__sidebar-cards {
	margin-bottom: 28px;
}

.rp-article-v2__sidebar-cards:last-child {
	margin-bottom: 0;
}

.rp-article-v2__sidebar-cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rp-article-v2__sidebar-cards li {
	border-bottom: 1px solid #f2e7f0;
	margin: 0;
	padding: 0;
}

.rp-article-v2__sidebar-cards li:last-child {
	border-bottom: none;
}

/* Mini náhľad vľavo, titulok vpravo – obrázok je len vodítko, nie dominanta. */
.rp-article-v2__sidebar-card {
	align-items: center;
	color: var(--rp-color-text, #282a2d);
	display: flex;
	gap: 12px;
	padding: 12px 0;
	text-decoration: none;
}

.rp-article-v2__sidebar-card-image {
	border-radius: 6px;
	display: block;
	flex: 0 0 64px;
	overflow: hidden;
}

.rp-article-v2__sidebar-card-image img {
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.rp-article-v2__sidebar-card-title {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	min-width: 0;
	transition: color 180ms ease;
}

.rp-article-v2__sidebar-card:hover .rp-article-v2__sidebar-card-title {
	color: var(--rp-color-accent, #ff1782);
}

.rp-article-v2__sidebar-card:focus-visible {
	border-radius: 8px;
	outline: 3px solid rgba(255, 23, 130, 0.22);
	outline-offset: 2px;
}


/* ============================================================
   6. GALÉRIE A RECENZIE Z {{{include*}}}
   ============================================================ */

/* Promo Lab masonry – prenesené z custom.css. */
.creocom-promolab-gallery {
	column-gap: 18px;
	columns: 4 220px;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}

.creocom-promolab-gallery__item {
	background: #f2f1f1;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(61, 59, 60, 0.08);
	break-inside: avoid;
	display: block;
	margin: 0 0 18px;
	overflow: hidden;
	page-break-inside: avoid;
	position: relative;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.creocom-promolab-gallery__item::after {
	background: linear-gradient(to top, rgba(61, 59, 60, 0.18), transparent 42%);
	content: '';
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.creocom-promolab-gallery__item:hover {
	box-shadow: 0 12px 48px rgba(61, 59, 60, 0.12);
	transform: translateY(-3px);
}

.creocom-promolab-gallery__item:hover::after {
	opacity: 1;
}

.creocom-promolab-gallery__item:focus-visible {
	outline: 3px solid var(--rp-color-accent, #ff1782);
	outline-offset: 4px;
}

.creocom-promolab-gallery__image {
	display: block;
	height: auto;
	width: 100%;
}

/* Mriežkové galérie so zoom-in efektom. */
.rp-article-v2 .image-container-3-column,
.rp-article-v2 .image-container-4-column {
	display: grid;
	gap: 15px;
	margin: 0;
	padding: 0;
}

.rp-article-v2 .image-container-3-column {
	grid-template-columns: repeat(3, 1fr);
}

.rp-article-v2 .image-container-4-column {
	grid-template-columns: repeat(4, 1fr);
}

.rp-article-v2 .image-container-3-column a,
.rp-article-v2 .image-container-4-column a {
	aspect-ratio: 1 / 1;
	display: block;
	overflow: hidden;
	position: relative;
}

.rp-article-v2 .image-container-3-column img,
.rp-article-v2 .image-container-4-column img {
	display: block;
	height: 100%;
	left: 0;
	margin: 0;
	object-fit: cover;
	padding: 0;
	position: absolute;
	top: 0;
	transform: scale(1);
	transition: transform 1.6s ease;
	width: 100%;
}

.rp-article-v2 .image-container-3-column a:hover img,
.rp-article-v2 .image-container-4-column a:hover img {
	transform: scale(1.1);
}

/* Galérie s vysúvacím popisom. */
.rp-article-v2 .image-container-3-column-hover-text,
.rp-article-v2 .image-container-4-column-hover-text {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 60px 0;
	padding: 0;
}

.rp-article-v2 .image-container-3-column-hover-text .image-item {
	flex: 1;
	flex-basis: calc(33.333% - 10px);
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.rp-article-v2 .image-container-4-column-hover-text .image-item {
	flex: 1;
	flex-basis: calc(25% - 11.25px);
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.rp-article-v2 .image-item::before {
	background: rgba(0, 0, 0, 0);
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: background 0.4s ease;
	z-index: 1;
}

.rp-article-v2 .image-item:hover::before {
	background: rgba(0, 0, 0, 0.35);
}

.rp-article-v2 .image-item a {
	aspect-ratio: 1 / 1;
	display: block;
	outline: none;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.rp-article-v2 .image-item a:focus {
	outline: 3px solid rgba(0, 123, 255, 0.25);
	outline-offset: 3px;
}

.rp-article-v2 .image-item img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
	width: 100%;
}

.rp-article-v2 .image-item .hover-text {
	align-items: center;
	background: #fff;
	bottom: 0;
	color: #3d3b3c;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
	gap: 0.2em;
	justify-content: center;
	left: 0;
	line-height: 1.4;
	min-height: 70px;
	overflow: hidden;
	padding: 10px;
	position: absolute;
	right: 0;
	text-align: center;
	transform: translateY(100%);
	transition: transform 0.4s ease;
	width: 100%;
	z-index: 2;
}

.rp-article-v2 .image-item:hover .hover-text {
	transform: translateY(0);
}

.rp-article-v2 .image-item .hover-text .color-magenta {
	display: inline-block;
	margin-right: 0.25em;
	white-space: nowrap;
}

/* Karta Google recenzie žije v zdieľanom google-reviews-content-v2.css. */


/* ============================================================
   7. RESPONZIVITA
   ============================================================ */

/* Pod 1280 px padá ľavý stĺpec ako prvý a mení sa na rozbaľovací panel nad textom;
   pravý sidebar drží až do 1024 px. */
@media (max-width: 1279px) {
	.rp-article-v2__layout,
	.rp-article-v2__layout--no-toc {
		grid-template-columns: minmax(0, 700px) minmax(0, 300px);
	}

	/* Obsah článku je navigácia pre dlhé čítanie vedľa textu. Nad textom by to bola
	   len duplicita autorskej tabuľky, preto sa tu skrýva úplne. */
	.rp-article-v2__toc {
		display: none;
	}
}

@media (max-width: 1023px) {
	.rp-article-v2__layout,
	.rp-article-v2__layout--no-toc {
		gap: 32px;
		grid-template-columns: minmax(0, 700px);
	}

	.rp-article-v2__sidebar-inner {
		position: static;
	}
}

@media (max-width: 1024px) {
	.creocom-promolab-gallery {
		columns: 3 210px;
	}

	.rp-article-v2 .image-container-3-column,
	.rp-article-v2 .image-container-4-column {
		grid-template-columns: repeat(2, 1fr);
	}

	.rp-article-v2 .image-container-4-column-hover-text .image-item {
		flex-basis: calc(50% - 7.5px);
	}
}

@media (max-width: 768px) {
	.rp-article-v2__inner {
		padding-bottom: 40px;
	}

	.rp-article-v2__layout {
		margin-top: 32px;
	}

	.rp-article-v2__body h2 {
		font-size: 2rem;
	}

	.rp-article-v2__body h3 {
		font-size: 1.4rem;
	}

	.rp-article-v2__cta {
		padding: 20px 16px;
	}

	.rp-article-v2__body .blog-practical-tip {
		padding: 24px 20px 16px 56px;
	}

	.rp-article-v2__body .blog-practical-tip::before {
		width: 56px;
	}

	.rp-article-v2__body .blog-citation {
		padding: 24px 20px 16px;
	}

	.rp-article-v2__body img.blogImgLeft {
		float: none;
		margin: 0 0 20px;
		max-width: 100%;
	}

	.rp-article-v2__body .column-box-48 {
		width: 100%;
	}

	.rp-article-v2__body .magenta-action-button,
	.rp-article-v2__body .dark-action-button {
		box-sizing: border-box;
		font-size: 0.9375rem;
		padding: 0.625rem 1.25rem;
		text-align: center;
		width: 100%;
	}

	.creocom-promolab-gallery {
		column-gap: 12px;
		columns: 2 150px;
	}

	.creocom-promolab-gallery__item {
		margin-bottom: 12px;
	}

	.rp-article-v2 .image-container-3-column,
	.rp-article-v2 .image-container-4-column {
		grid-template-columns: 1fr;
	}

	.rp-article-v2 .image-container-3-column-hover-text,
	.rp-article-v2 .image-container-4-column-hover-text {
		flex-direction: column;
		margin: 40px 0;
	}

	.rp-article-v2 .image-container-3-column-hover-text .image-item,
	.rp-article-v2 .image-container-4-column-hover-text .image-item {
		flex-basis: 100%;
	}

}

@media (prefers-reduced-motion: reduce) {
	:root:has(.rp-article-v2) {
		scroll-behavior: auto;
	}

	.rp-article-v2__toc-list a {
		transition: none;
	}
}