/* ==========================================================================
   Pobytový balíček – detail (templates/packages/_entry.twig)
   Nadstavba nad bundle.css. Paleta: brand green #1f9246, slate #5c6b78,
   panel #f3f5f4.
   ========================================================================== */

/* ---- Section header center modifier ---- */
.c-section-header.-center {
	text-align: center;
}
.c-section-header.-center .perex {
	margin-left: auto;
	margin-right: auto;
	max-width: 560px;
}

/* ---- Rytmus sekcií na detaile balíčka ---- */
.c-package-reviews,
.c-related-packages {
	padding-top: 66px;
	padding-bottom: 70px;
}
.c-detail-reservation-section {
	padding-top: 60px;
	padding-bottom: 30px;
}

/* Rezervačný iframe (connect.hoteladmin.sk).
   POZOR: je cross-origin a svoju výšku NEposiela cez postMessage (overené v ich
   JS), takže auto-resize nie je možný – výšku musíme nastaviť natvrdo.
   Kalendár je slider s overflow-hidden (listuje po mesiacoch), takže výška
   obsahu je stabilná.

   Odmerané na reálnom obsahu (Chrome headless, CDP):
     šírka 1140/960 px → 549 px, 720 px → 545 px, 560/375 px → 510 px.
   Bundle dáva 520 px – tesne málo, preto ten vnútorný scrollbar.
   Držíme ~30 px rezervu na kolísanie fontov/načítania.

   Scopnuté na sekciu, nech to neovplyvní detail izieb (používa ten istý blok). */
.c-detail-reservation-section .c-detail-reservation iframe {
	display: block;
	width: 100%;
	height: 580px;
	border: 0;
}

@media (max-width: 575.98px) {
	.c-detail-reservation-section .c-detail-reservation iframe {
		height: 545px;
	}
}
.c-blog-teaser {
	padding-top: 30px;
	padding-bottom: 60px;
}
.c-package-back {
	padding-top: 0;
	padding-bottom: 50px;
}
.c-package-back .c-detail-back-link {
	margin: 0;
	padding-top: 30px;
	border-top: 1px solid #eef0ee;
}

/* ==========================================================================
   HERO – nadpis / perex / CTA v obrázku
   ========================================================================== */
/* Výšku NEprebíjame – hero musí byť rovnako vysoký ako na HP a v ostatných
   sekciách. Dedí sa z bundle: min-height 730px, pod 768px 60vw. */
.c-hero.-package {
	display: flex;
	align-items: stretch; /* overlay musí pokryť celú výšku, nielen text */
}

/* Overlay zatmavuje celý obrázok (nie len spodok) – inak sa biely text
   stratí na svetlej fotke (bazén, sneh). Obsah drží pri spodnej hrane. */
.c-hero.-package .c-hero__overlay {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding: 120px 28px 70px;
	background: linear-gradient(180deg, rgba(12, 32, 20, 0.42) 0%, rgba(12, 32, 20, 0.52) 45%, rgba(12, 32, 20, 0.78) 100%);
}

.c-hero.-package .c-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.c-hero__eyebrow {
	display: block;
	margin-bottom: 14px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: .9;
}

.c-hero.-package .c-hero__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.12;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 4px 24px rgba(0, 0, 0, .35);
}

.c-hero__perex {
	margin: 0 auto 28px;
	max-width: 600px;
	color: #fff;
	font-size: 17px;
	line-height: 1.65;
	opacity: .94;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* POZOR: .c-button je inline-flex s align-items:center a fixnou výškou (60px).
   Neprebíjať mu `display` (inline-block/block) – text by vyskočil hore. */
.c-hero__cta {
	align-self: center;
}

/* Šípka v CTA tlačidlách */
.c-button .icon-arrow-right {
	margin-left: 12px;
	font-size: 0.8em;
	line-height: 1;
}

/* ==========================================================================
   Cena (zdieľané – _partials/packagePrice.twig)
   ========================================================================== */
.c-package-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 7px;
}
.c-package-price__label {
	color: #7e858c;
	font-size: 15px;
	font-weight: 400;
}
.c-package-price__orig {
	color: #9aa29a;
	font-size: 15px;
}
.c-package-price__value {
	color: #1f9246;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
}
/* priceText, ktorý nesie celú cenu ako text – menšie písmo, aby sa zmestil */
.c-package-price__value.-text {
	font-size: 16px;
	line-height: 1.45;
}
.c-package-price__suffix {
	color: #7e858c;
	font-size: 14px;
}

/* ==========================================================================
   Bodytext Right – CTA + cenový box
   ========================================================================== */
.c-package-purchase {
	margin-top: 30px;
	padding: 30px 32px 34px;
	background: #fff;
	border: 1px solid #eef0ee;
}

.c-package-purchase__price {
	margin: 0 0 18px;
}
.c-package-purchase__price .c-package-price__value {
	font-size: 28px;
}

.c-package-purchase__trust {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 20px;
	padding: 8px 13px;
	background: #eef7f0;
	color: #1a7a45;
	font-size: 13px;
	font-weight: 600;
	border-radius: 3px;
}

/* flex (nie block) – aby .c-button nestratil align-items:center */
.c-package-purchase__cta {
	display: flex;
	width: 100%;
}

.c-package-purchase__note {
	margin: 16px 0 0;
	color: #7e858c;
	font-size: 13.5px;
	line-height: 1.7;
}

/* ==========================================================================
   Recenzie hostí
   ========================================================================== */
.c-package-reviews {
	background: #f3f6f4;
}

.c-package-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* Pri menej než 3 recenziách roztiahneme na celú šírku containera. */
.c-package-reviews__grid.-count-1 {
	grid-template-columns: 1fr;
}
.c-package-reviews__grid.-count-2 {
	grid-template-columns: repeat(2, 1fr);
}

.c-package-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 28px 26px;
	background: #fff;
}

.c-package-review__stars {
	color: #f2b01e;
	font-size: 16px;
	letter-spacing: 3px;
}
.c-package-review__stars .c-review-stars__star {
	color: rgba(0, 0, 0, 0.12);
}
.c-package-review__stars .c-review-stars__star.is-filled {
	color: #f2b01e;
}

/* Recenzie z CMS bývajú dlhé (aj 15+ riadkov). Bez orezania natiahne najdlhšia
   recenzia všetky karty v riadku (flex/grid stretch) a sekcia narastie do neba.
   Orežeme na 6 riadkov – karty sú tak kompaktné a rovnako vysoké. */
.c-package-review__text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: #4a525a;
	font-size: 15px;
	font-style: italic;
	line-height: 1.7;
}

.c-package-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto; /* pätička dole aj keď je recenzia kratšia */
	padding-top: 12px;
	border-top: 1px solid #eef0ee;
}

.c-package-review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #1f9246;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.c-package-review__meta {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 1.4;
}
.c-package-review__meta strong {
	color: #5c6b78;
}
.c-package-review__meta span {
	color: #9aa29a;
}

/* ==========================================================================
   Mohlo by vás zaujímať – ďalšie balíčky
   Karta = štandardná .c-card z listingu (žiadny vlastný design).
   Podľa návrhu má sekcia svetlé pozadie; .c-card má natvrdo #f2f2f2,
   čo by na ňom splynulo – preto ju v tejto sekcii zbelíme.
   ========================================================================== */
.c-related-packages {
	background: #f3f6f4;
}
.c-related-packages .c-card {
	background: #fff;
}

/* Pod 992px sa karty stohujú pod seba, takže rovnaká výška netreba – a práve
   tá ju rozbíja: `.c-card{height:100%}` → `.c-card .content{height:100%}` dá
   obsahu FIXNÚ výšku. Dlhý priceText („Cena od 299 € / osoba + dieťa do 12
   rokov* / 3 noci") sa v úzkom stĺpci zalomí na 2–3 riadky, pretečie ju
   a tlačidlo (z-index:5) sa vykreslí cez text. Uvoľnením výšky karta narastie. */
@media (max-width: 991.98px) {
	.c-related-packages .c-card,
	.c-related-packages .c-card .content {
		height: auto;
	}
}

/* ==========================================================================
   Článok z blogu
   ========================================================================== */
.c-blog-teaser__card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
.c-blog-teaser__card:hover {
	color: inherit;
}

.c-blog-teaser__media {
	overflow: hidden;
	min-height: 320px;
	background: #e4e4e4;
}
.c-blog-teaser__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-blog-teaser__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 46px;
	background: #f3f5f4;
}

.c-blog-teaser__eyebrow {
	margin: 0 0 14px;
	color: #1f9246;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.c-blog-teaser__title {
	margin: 0 0 16px;
	color: #5c6b78;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.25;
}

.c-blog-teaser__text {
	margin: 0 0 26px;
	color: #7e858c;
	font-size: 15px;
	line-height: 1.7;
}

.c-blog-teaser__cta {
	align-self: flex-start;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
	.c-package-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.c-blog-teaser__card {
		grid-template-columns: 1fr;
	}
	.c-blog-teaser__media {
		min-height: 240px;
	}
	.c-hero.-package .c-hero__title {
		font-size: 36px;
	}
}

@media (max-width: 767.98px) {
	/* min-height nechávame na bundle (60vw) – rovnako ako ostatné hero sekcie.
	   Menšie odsadenie, nech obsah nenafúkne hero nad tú výšku. */
	.c-hero.-package .c-hero__overlay {
		padding: 90px 15px 45px;
	}
	.c-hero.-package .c-hero__title {
		font-size: 30px;
	}
	.c-hero__perex {
		font-size: 15px;
	}
	/* --- Recenzie ako carousel ---------------------------------------------
	   Na mobile by 3 recenzie pod sebou zabrali pol obrazovky. Riešime to
	   natívnym CSS scroll-snapom (žiadna knižnica): Swiper síce v bundle.js je,
	   ale nie je vystavený globálne (von ide len window.Carousel viazaný na
	   .js-card-gallery-carousel), takže sa k nemu zo standalone CSS nedostaneme.
	   Negatívny margin + padding = karty scrollujú od okraja k okraju obrazovky,
	   `flex-basis: 86%` necháva vykúkať ďalšiu kartu ako signál, že sa dá swipovať. */
	.c-package-reviews__grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin: 0 -15px;
		padding: 0 15px 6px;
		scroll-padding-left: 15px;
		scrollbar-width: none; /* Firefox */
	}
	.c-package-reviews__grid::-webkit-scrollbar {
		display: none; /* Safari/Chrome – swipe stačí, scrollbar je tu škaredý */
	}
	.c-package-review {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}
	/* Jediná recenzia sa neswipuje – nech je na celú šírku, nevisí na 86 %. */
	.c-package-reviews__grid.-count-1 .c-package-review {
		flex-basis: 100%;
	}

	/* --- Utiahnutie vertikálneho priestoru --- */
	.c-package-reviews,
	.c-related-packages {
		padding-top: 42px;
		padding-bottom: 46px;
	}
	.c-detail-reservation-section {
		padding-top: 36px;
	}
	.c-blog-teaser {
		padding-top: 16px;
		padding-bottom: 40px;
	}
	.c-package-back {
		padding-bottom: 34px;
	}
	.c-package-purchase {
		margin-top: 24px;
		padding: 24px 20px 26px;
	}

	.c-blog-teaser__body {
		padding: 32px 24px;
	}
	.c-blog-teaser__title {
		font-size: 23px;
	}
}