/*
 * Sekce „Postup" — 3-sloupcový grid.
 *
 * Grid layout:
 *  Desktop (≥ 1024 px):  3 sloupce
 *  Tablet (768–1023 px): 2 sloupce
 *  Mobil (< 768 px):     1 sloupec
 *
 * Gaps: 16 px horizontal, 32 px vertical (dle Figmy).
 *
 * Karta:
 *  bg bílá / aktivní zelená, dark text vždy
 *  border-radius 12 px
 *  číslo top-left, ikona 40 px height (width auto)
 *  podnadpis 16 px semibold, -2 % tracking, lh 110 %
 *  gap mezi ikonou a podnadpisem 32 px
 *  gap mezi podnadpisem a textem 24 px
 *  spodní text s šipkou
 */

/* ── Header (centrovaný, stejné styly jako ostatní sekce) ─── */
.process-grid__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 64px;                          /* 64 px nad kartami */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.process-grid__eyebrow {
	margin: 0;
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                   /* 16 px */
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1;
}

.process-grid__title {
	margin: 0;
	color: var(--rp-color-text);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);   /* 28→40 px */
	font-weight: var(--rp-fw-medium);
	line-height: var(--rp-lh-tight);
	letter-spacing: var(--rp-tracking-tight);
}

.process-grid__subtitle,
.process-grid__text {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: -0.02em;
}
.process-grid__subtitle p,
.process-grid__text p { margin: 0; color: inherit; }

/* ── Grid s kartami ─────────────────────────────────────────────────
   Karty mají align-items: start → výška podle vlastního obsahu, nesthahují
   se na výšku řádku. Linku v rovině zařizuje JS (process-grid.js): změří
   nejvyšší .process-grid__card-body v řádku a nastaví ostatním min-height. */
.process-grid__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 40px;                               /* row-gap 32, col-gap 40 */
	align-items: start;                           /* karty nesthahovat na výšku řádku */
}

@media (max-width: 1023px) {
	.process-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.process-grid__cards {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.process-grid__head { margin-bottom: 32px; }
}

/* ── Karta ──────────────────────────────────────────────── */
.process-grid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 40px;
	padding-top: 32px;
	background: var(--rp-color-text);             /* bílé pozadí */
	color: var(--rp-color-bg);                    /* tmavý text */
	border-radius: var(--rp-radius-md);           /* 12 px */
	overflow: visible;                            /* nutné aby číslo přečuhovalo */
}

/* Aktivní karta — zelené pozadí, tmavý text */
.process-grid__card--active {
	background: var(--rp-color-accent);           /* #22C55E */
}

/* Číslo top-left — kroužek poloviční vně karty (dle Figmy).
 *  Bez borderu, background ZELENÝ na bílé kartě a BÍLÝ na zelené aktivní kartě.
 *  1:1 kruh: width = height = font-size (24) * line-height (1.1) + 2× padding (11) = 46.4 → 48 px.
 *  Padding 11 px drží content (číslo) v dýchajícím prostoru, flex ho centruje. */
.process-grid__card-number {
	position: absolute;
	top: -24px;
	left: -24px;
	z-index: 2;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 11px;
	border: 0;
	border-radius: 50%;
	background: var(--rp-color-accent);           /* zelená na bílé kartě */
	color: var(--rp-color-bg);                    /* tmavé číslo */
	font-size: 24px;
	font-weight: var(--rp-fw-medium);              /* 500 */
	line-height: 1.1;                              /* 110 % */
	letter-spacing: -0.03em;                       /* -3 % */
}

/* Aktivní karta (zelené pozadí) → kroužek bílý, číslo tmavé. */
.process-grid__card--active .process-grid__card-number {
	background: var(--rp-color-text);
	color: var(--rp-color-bg);
}

/* Hlavička karty: ikona + nadpis vedle sebe (jedna řada) */
.process-grid__card-head {
	display: flex;
	align-items: center;
	gap: 32px;                                    /* mezi ikonou a nadpisem */
	margin-bottom: 24px;                          /* gap k textu pod */
	min-width: 0;
}

/* Ikona — height 40 px, width auto dle poměru stran obrázku.
   Box shrink-wrappuje SVG/PNG s preserved aspect ratio; head je align-items:center,
   tak že nadpis vedle zůstane vertikálně vystředěný kolem ikony. */
.process-grid__card-icon {
	flex: 0 0 auto;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--rp-color-bg);                    /* pro SVG s currentColor */
}
.process-grid__card-icon svg,
.process-grid__card-icon img {
	height: 40px;
	width: auto;
	display: block;
}

/* Nadpis — žádný horní margin, leží v řadě s ikonou */
.process-grid__card-subtitle {
	margin: 0;
	flex: 1 1 auto;
	color: var(--rp-color-bg);
	font-size: 16px;
	font-weight: var(--rp-fw-semibold);           /* 600 */
	letter-spacing: -0.02em;                      /* -2 % */
	line-height: 1.2;
	min-width: 0;
}

/* Podnadpis jako odkaz — s šipkou vedle.
   display: flex (ne inline-flex) zajistí, že klikatelná plocha pokrývá celou
   šířku nadpisu — kliknutí kamkoliv na h3 odkaz aktivuje. */
.process-grid__card-subtitle-link,
.process-grid__card-subtitle-link:visited {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--rp-color-bg);
	text-decoration: none;
	cursor: pointer;
}
/* Přebití wildcard selektoru [class*="__subtitle"] a z main.css (specificita 11)
   na specifičtějším selektoru (specificita 20), aby link na kartě měl správnou barvu. */
.process-grid__card-subtitle .process-grid__card-subtitle-link,
.process-grid__card-subtitle .process-grid__card-subtitle-link:visited {
	color: var(--rp-color-bg);
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.process-grid__card-subtitle .process-grid__card-subtitle-link:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
		color: var(--rp-color-bg);
	}
}
.process-grid__card-subtitle-text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.process-grid__card-link-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	color: inherit;
}
.process-grid__card-link-arrow svg,
.process-grid__card-link-arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Hlavní text */
.process-grid__card-text {
	margin-top: 0;                                /* gap zajišťuje margin-bottom u head */
	color: var(--rp-color-bg);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);             /* 150 % */
}
.process-grid__card-text p { margin: 0 0 8px; color: inherit; }
.process-grid__card-text p:last-child { margin-bottom: 0; }

/* Spodní text s šipkou — dělící čára nahoře (full-width přes celou kartu).
   Čára přečuhuje přes 40 px padding karty na obě strany pomocí ::before.
   Gap nad čárou 32 px, pod čárou 24 px. Linka sedí konzistentně ve všech
   kartách v řádku, protože JS rovná výšku .process-grid__card-body. */
.process-grid__card-bottom {
	position: relative;
	margin-top: 32px;                             /* gap od body textu k čáře */
	padding-top: 24px;                            /* gap od čáry k textu pod ní */
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.process-grid__card-bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40px;                                  /* kompenzuje card padding */
	right: -40px;
	height: 0.5px;
	background: rgba(17, 24, 39, 0.1);            /* #111827 10 % opacity */
}

.process-grid__card-bottom-arrow {
	flex: 0 0 20px;
	width: 20px;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;                              /* zarovnání s první řádkou textu */
	color: var(--rp-color-bg);
}
.process-grid__card-bottom-arrow svg,
.process-grid__card-bottom-arrow img {
	width: 20px;
	height: auto;
	display: block;
}

.process-grid__card-bottom-text {
	flex: 1 1 auto;
	color: var(--rp-color-bg);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
}
.process-grid__card-bottom-text p { margin: 0; color: inherit; }
.process-grid__card-bottom-text p + p { margin-top: 8px; }