/*
 * Patička webu — 4 sloupce + spodní lišta.
 *
 * Struktura:
 *  .site-footer (full-width)
 *   .site-footer__container (1200 px, padding-inline 24 px)
 *     .site-footer__card (dark card s borderem, 4 sloupce uvnitř)
 *     .site-footer__bottom (copyright + nav)
 *
 * Responzivita:
 *  Desktop ≥ 1024 px:  4 sloupce
 *  Tablet  768–1023:   2 sloupce
 *  Mobil   < 768 px:   1 sloupec
 */

.site-footer {
	width: 100%;
	margin-top: var(--rp-space-7);                /* 48 px od posledního obsahu */
	padding-bottom: 0;                            /* žádná mezera pod spodní lištou */
	background: var(--rp-color-bg);               /* #111827 — explicitně, ať se okolí karty nezbarvuje od body bg */
}

.site-footer__container {
	width: 100%;
	max-width: var(--rp-content-max);             /* 1200 px */
	margin-inline: auto;
	padding-inline: var(--rp-space-5);            /* 24 px */
}

/* ── Karta s 4 sloupci ──────────────────────────────────── */
.site-footer__card {
	background: rgba(28, 37, 50, 0.5);            /* #1C2532 50 % */
	border: 1px solid rgba(243, 244, 246, 0.08);  /* #F3F4F6 8 % */
	border-radius: var(--rp-radius-lg);            /* 16 px */
	padding: 48px 48px 40px;                       /* top 48, sides 48, bottom 40 */
}

.site-footer__cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
	gap: 48px;
}

@media (max-width: 1023px) {
	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.site-footer__col--brand,
	.site-footer__col--contact {
		grid-column: span 2;
	}
}

@media (max-width: 639px) {
	.site-footer__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.site-footer__col--brand,
	.site-footer__col--contact {
		grid-column: span 1;
	}
	.site-footer__card { padding: 32px 24px; }
}

/* ── Sloupec 1: Brand ────────────────────────────────── */
.site-footer__col--brand {
	display: flex;
	flex-direction: column;
}

.site-footer__logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin-bottom: 24px;                          /* gap logo → text */
}

.site-footer__logo {
	height: 20px;
	width: auto;
	display: block;
}

.site-footer__brand-text {
	margin: 0;
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.6;
}

/* Author block — avatar + jméno + IČO (vertical stack) */
.site-footer__author {
	margin-top: var(--rp-space-7);                /* 48 px od popisku */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__avatar {
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 12px;                          /* gap avatar → jméno */
}
.site-footer__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.site-footer__author-name,
.site-footer__author-ico {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1;
}
.site-footer__author-name {
	margin-bottom: 16px;                          /* gap jméno → IČO */
}

/* ── Sloupce 2, 3: menu ──────────────────────────────── */
.site-footer__col-heading {
	margin: 0 0 24px;                             /* 24 px gap nadpis → menu */
	color: var(--rp-color-text);
	font-size: 16px;
	font-weight: var(--rp-fw-medium);             /* 500 */
	letter-spacing: -0.02em;
	line-height: 1;
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* <li> default display:list-item + dědí body line-height 1.5 → vyšší než vnitřní <a>.
   Nasadíme flex, aby výška li = výška odkazu (= line-height 1.1 ze same a). */
.site-footer__menu li {
	display: flex;
	line-height: 1.1;
}

.site-footer__menu a {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none;
	transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.site-footer__menu a:hover {
		color: var(--rp-color-accent);
	}
}

/* ── Sloupec 4: Kontakt ────────────────────────────── */
.site-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;                                    /* mezi ikonkami */
}

.site-footer__contact {
	display: flex;
	align-items: center;
	gap: 12px;                                    /* mezi ikonkou a textem */
}

.site-footer__contact-icon {
	flex: 0 0 16px;
	width: 16px;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.site-footer__contact-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

.site-footer__contact-link,
.site-footer__contact-link:visited,
.site-footer__contact-text {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none;
	transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.site-footer__contact-link:hover {
		color: var(--rp-color-accent);
	}
}

/*
 * Footer CTA — primary pill bez ikony.
 *
 * Pozor na specificitu: footer.css se enqueueuje DŘÍV než sections/hero.css.
 * Když by tu byl jen `.site-footer__cta` (0,1,0), `.hero-btn` (taky 0,1,0)
 * z hero.css ho přepíše a button dostane padding 6px 6px 6px 32px (asymetrie
 * pro ikonu) → vypadá rozbitě. Proto stackujeme classes pro 0,2,0 specificitu.
 *
 * Výška 48 px se dorovnává paddingem 17 px nahoře/dole (17 + 14 line-height
 * + 17 = 48 px — stejně jako primary s ikonou: 36 px ikona + 6+6 px padding).
 */
.site-footer__cta.hero-btn {
	margin-top: 32px;
	align-self: flex-start;
	padding: 17px 32px;
	gap: 0;
	justify-content: center;
}

/* ── Spodní lišta ──────────────────────────────────── */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;                          /* 24 px nahoře i dole */
}

.site-footer__copyright {
	margin: 0;
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.site-footer__bottom-nav { display: inline-flex; }

.site-footer__bottom-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;                                    /* mezi položkami */
}

.site-footer__bottom-menu a {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none;
	transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.site-footer__bottom-menu a:hover {
		color: var(--rp-color-accent);
	}
}

@media (max-width: 767px) {
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}