/**
 * Home sections below the hero (block 05).
 *
 * 1:1 with the design prototype's three home sections that sit under the hero:
 *   1. announcement strip  — a single dark "night" card (badge + message + CTA),
 *   2. "Z blogu"           — a 3-up grid of the latest posts (date · kicker,
 *                            title, 24-word excerpt, 3:2 zoom-on-hover photo),
 *   3. "Kam dál"           — a sign-post grid of four cards (three plain + one
 *                            terracotta accent).
 *
 * Every value here is lifted verbatim from the prototype's inline styles. Hover
 * transforms (card translateY, image scale) come from the shared `.at-card` /
 * `.at-imgzoom` utilities in tokens.css. The only additions are local hover
 * GUARDS that keep text colour stable: tokens.css carries a global
 * `a:hover { color: var(--accent2) }` (for body/content links) whose specificity
 * (0,1,1) would otherwise tint these cards' inherited-colour text on hover — the
 * prototype links have no such colour change, so the guards restore parity.
 *
 * Sections are full-bleed inside #content (like the hero) and self-constrain via
 * their own max-width + auto margins, matching the prototype's per-section width.
 */

/* Shared section frame — prototype: max-width 1180, centred, fluid gutters. */
.at-home {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(18px, 5vw, 48px);
}

/* ---------------------------------------------------------------- *
 * 1. Announcement strip
 * ---------------------------------------------------------------- */
.at-annc {
	margin-top: clamp(36px, 5vw, 64px);
}

.at-annc__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	background: var(--night);
	color: var(--nightInk);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 30px) clamp(22px, 3vw, 36px);
}

/* Hover guard: keep the message text its night colour (see file header). */
.at-annc__card:hover {
	color: var(--nightInk);
}

.at-annc__badge {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	color: var(--nightInk2);
}

.at-annc__text {
	flex: 1 1 0%;
	min-width: 240px;
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.at-annc__text strong {
	font-weight: 500;
}

.at-annc__cta {
	color: var(--accent2);
	font-style: italic;
	font-size: 1.15rem;
}

/* ---------------------------------------------------------------- *
 * 2. "Z blogu" grid
 * ---------------------------------------------------------------- */
.at-blog {
	margin-top: clamp(46px, 6vw, 80px);
}

.at-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

/* line-height:1.65 restores the prototype's heading metric — tokens.css forces
 * a global h2{line-height:1.1} that would otherwise shrink the head by 25px and
 * shift every section below out of alignment. */
.at-blog__title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.65;
	margin: 0;
	padding: 0;
}

.at-blog__more {
	color: var(--accent);
	font-style: italic;
	font-size: 1.15rem;
}

/* Hover guard: prototype's "Celý blog →" has no colour change on hover. */
.at-blog__more:hover {
	color: var(--accent);
}

.at-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}

.at-blog__card {
	display: block;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}

.at-blog__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--bg3);
}

/* height:100% overrides the global img{height:auto}; cover fills the 3:2 box. */
.at-blog__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.at-blog__body {
	display: block;
	padding: 22px 22px 26px;
}

.at-blog__meta {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--ink3);
	margin-bottom: 10px;
}

.at-blog__cardtitle {
	display: block;
	font-size: 1.32rem;
	line-height: 1.25;
	color: var(--ink);
	margin-bottom: 10px;
}

.at-blog__excerpt {
	display: block;
	font-size: 1rem;
	color: var(--ink2);
	line-height: 1.55;
}

/* ---------------------------------------------------------------- *
 * 3. "Kam dál" sign-post
 * ---------------------------------------------------------------- */
.at-signpost {
	margin-top: clamp(46px, 6vw, 80px);
}

/* line-height:1.65 — see .at-blog__title note (prototype heading metric). */
.at-signpost__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.65;
	margin: 0 0 26px;
	padding: 0;
}

.at-signpost__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.at-signpost__card {
	display: block;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 26px 24px;
}

.at-signpost__card--accent {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* Hover guard: keep the accent card's text white on hover (see file header). */
.at-signpost__card--accent:hover {
	color: #fff;
}

.at-signpost__num {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink3);
	margin-bottom: 16px;
	letter-spacing: .08em;
}

.at-signpost__card--accent .at-signpost__num {
	color: rgba(255, 255, 255, .7);
}

.at-signpost__cardtitle {
	display: block;
	font-size: 1.3rem;
	color: var(--ink);
	margin-bottom: 6px;
}

.at-signpost__card--accent .at-signpost__cardtitle {
	color: #fff;
}

.at-signpost__desc {
	display: block;
	font-size: .98rem;
	color: var(--ink2);
}

.at-signpost__card--accent .at-signpost__desc {
	color: #fff;
	opacity: .85;
}

/* ---------------------------------------------------------------- *
 * Link state pins — the home anchors (announcement card, blog cards, "Celý
 * blog →", sign-post cards) must not pick up refur's a:visited (#75A3D1) /
 * a:focus / a:active (#2E4051) once visited or mouse-focused. class+pseudo
 * (0,2,0) beats refur (0,1,1); the accent sign-post card is re-pinned last so
 * its white text survives the visited state. The prototype never recolours
 * any of these on visit/focus/active.
 * ---------------------------------------------------------------- */
.at-annc__card:visited, .at-annc__card:focus, .at-annc__card:active { color: var(--nightInk); }
.at-blog__more:visited,  .at-blog__more:focus,  .at-blog__more:active  { color: var(--accent); }
.at-blog__card:visited,     .at-blog__card:focus,     .at-blog__card:active,
.at-signpost__card:visited, .at-signpost__card:focus, .at-signpost__card:active { color: inherit; }
.at-signpost__card--accent:visited, .at-signpost__card--accent:focus, .at-signpost__card--accent:active { color: #fff; }