/*
 * assets/css/hp-trust.css — trust sekce úvodní stránky (Jirka 26. 8. večer).
 *
 * Po Jirkově korekci drží vlastní styl JEN garance a statistiky — loga
 * (mřížka `.reference-container` z mirror main.css) a Google recenze
 * (`.gbp-reviews` z reviews.css) jedou na existujících komponentách webu,
 * takže typografie a barvy sedí samy od sebe. Načítá se JEN na front-page.
 * Brand: antracit #1c2727, tyrkys #00b7cd, růžovočervená #f5074c.
 */

/* ── Loga klientů / recenze — jen rozestupy sekcí ─────────────────────── */

.hp-logos {
	padding: 4rem 0 1rem;
	background: #fff;
}

.hp-reviews {
	padding: 2rem 0 4rem;
	background: #fff;
}

/* ── Garance ──────────────────────────────────────────────────────────── */
/* [Jirka 27. 8., vzor navrh-mix.html] Tmavý blok: tyrkysový štítek, nadpis,
   odrážky s fajfkou, BÍLÉ zaoblené tlačítko; fotka týmu v bílém rámu
   (bez stínu) s popiskem. Nahrazuje původní edge-to-edge foto + 100% badge. */

.hp-guarantee {
	padding: 0;
}

.hp-guarantee-inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 4rem;
	align-items: center;
	background: #1c2727;
	overflow: hidden;
}

.hp-guarantee-panel {
	padding: 5.6rem 0 5.6rem 5rem;
	color: #fff;
}

.hp-guarantee-eyebrow {
	color: #00b7cd;
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 1.8rem;
}

.hp-guarantee-title {
	color: #fff;
	margin: 0 0 1.8rem;
}

.hp-guarantee-text {
	color: rgba(255, 255, 255, .82);
}

.hp-guarantee-text p {
	margin-bottom: 1.6rem;
}

/* Odrážky s fajfkou — mirror lepí šipku na každé `main ul li::before`,
   proto se tady vypíná (stejný trik jako thn-steps na děkovačce). */
.hp-guarantee-points {
	list-style: none;
	margin: 2.4rem 0 0;
	padding: 0;
}

.hp-guarantee-points li::before,
.hp-guarantee-points li::after {
	content: none !important;
	display: none !important;
}

.hp-guarantee-points li {
	display: flex;
	align-items: center;
	gap: 1.3rem;
	padding: .75rem 0;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}

.hp-guarantee-chk {
	flex: 0 0 2.8rem;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background: rgba(0, 183, 205, .16);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hp-guarantee-btn {
	display: inline-block;
	margin-top: 3rem;
	background: #fff;
	color: #1c2727 !important;
	font-size: 1.7rem;
	font-weight: 700;
	padding: 1.5rem 3rem;
	border-radius: 1.2rem;
	text-decoration: none;
	transition: background 200ms;
}

.hp-guarantee-btn:hover {
	background: #eaf7f9;
	text-decoration: none;
}

/* Fotka v bílém rámu, bez stínu (rozhodnutí z mockupu). */
.hp-guarantee-photo {
	margin: 0;
	padding: 4.8rem 5rem 4.8rem 0;
}

.hp-guarantee-frame {
	background: #fff;
	padding: 1rem;
	border-radius: 1.2rem;
}

.hp-guarantee-frame img {
	display: block;
	width: 100% !important;
	height: auto !important;
	border-radius: .6rem;
}

.hp-guarantee-fbadge {
	display: inline-block;
	margin-top: 1.4rem;
	background: #fff;
	color: #1c2727;
	font-size: 1.3rem;
	font-weight: 700;
	padding: .8rem 1.8rem;
	border-radius: 999px;
}

@media (max-width: 991px) {
	.hp-guarantee-inner { grid-template-columns: 1fr; gap: 0; }
	.hp-guarantee-panel { padding: 3.2rem 2.4rem 1rem; }
	.hp-guarantee-photo { padding: 0 2.4rem 3.2rem; }
}

/* ── Statistiky ───────────────────────────────────────────────────────── */

.hp-stats {
	background: #fff;
	padding: 4.4rem 0;
}

.hp-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.4rem;
	text-align: center;
}

.hp-stats-grid.stats-count-4 { grid-template-columns: repeat(4, 1fr); }

.hp-stats-number {
	font-size: 5.6rem;
	font-weight: 800;
	line-height: 1.05;
	color: #00b7cd;
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

/* Šikmý červený akcent za číslem — echo skewed tvarů, bez animace. */
.hp-stats-number::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -.9rem;
	width: 5.6rem;
	height: .5rem;
	background: #f5074c;
	transform: translateX(-50%) skewX(-24deg);
}

.hp-stats-label {
	margin-top: 2rem;
	color: #1c2727;
}

@media (max-width: 767px) {
	.hp-stats-grid,
	.hp-stats-grid.stats-count-4 { grid-template-columns: repeat(2, 1fr); gap: 3.2rem 1.6rem; }
	.hp-stats-number { font-size: 4.6rem; }
}