/*
 * Geschenkkorb-Magazin — the blog index (home.php).
 *
 * Loaded asynchronously on the posts page only (inc/magazin.php). The
 * above-the-fold half of this file is duplicated in critical-magazin.css
 * on purpose: that one is the minimum needed to paint the first screen,
 * this one stays the complete, readable source for the page.
 *
 * The listing card itself lives in global.css — it is shared with the
 * category archives and search.
 */

.magazin {
	background: #fbfaf8;
	padding-bottom: 5rem;
}

/* Sections run edge to edge, the content sits on the column. */
.magazin-intro,
.magazin-topics,
.magazin-list {
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
}

/* ---------- Header ---------- */

.magazin-intro {
	padding-top: 3rem;
}

.magazin-intro .section-eyebrow {
	color: var(--fk-color-sage-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.magazin-title {
	margin: 0 0 1.5rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.1;
	color: var(--fk-color-text);
	/*
	 * h1–h4 break long words globally, which is right in a narrow card
	 * and wrong in a headline this size — that rule is what once split
	 * "Firmengeschenke" after the k.
	 */
	overflow-wrap: normal;
}

.magazin-lead {
	max-width: 62rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.magazin-lead > :first-child {
	margin-top: 0;
}

.magazin-lead > :last-child {
	margin-bottom: 0;
}

/* ---------- Topic tiles ---------- */

.magazin-topics {
	margin-top: 3.5rem;
}

.magazin-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48em) {
	.magazin-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Two rows, and that is the entire contrast argument: the fade owns row
 * one, the label owns row two, so the text can never come to rest on the
 * light end of the gradient. Whatever the tone, its background is the
 * solid --tile-dark below — the ratio against white is recorded beside
 * each one, computed, not estimated.
 */
.magazin-tile {
	position: relative;
	display: grid;
	grid-template-rows: minmax(7rem, 1fr) auto;
	min-height: 17rem;
	border-radius: 0.5rem;
	background: var(--tile-dark, #2e2e2e);
	color: #fff;
	text-decoration: none;
	transition: transform 0.25s ease;
}

.magazin-tile[data-tone="sand"]   { --tile-light: 213 201 182; --tile-dark: #3a3128; } /* 12,7 : 1 auf Weiß */
.magazin-tile[data-tone="rose"]   { --tile-light: 201 160 155; --tile-dark: #5a3f3d; } /*  9,5 : 1 auf Weiß */
.magazin-tile[data-tone="sage"]   { --tile-light: 184 196 176; --tile-dark: #333f31; } /* 11,1 : 1 auf Weiß */
.magazin-tile[data-tone="petrol"] { --tile-light: 109 138 139; --tile-dark: #1f3335; } /* 13,3 : 1 auf Weiß */

.magazin-tile__fade {
	grid-area: 1 / 1;
	border-radius: 0.5rem 0.5rem 0 0;
	background: linear-gradient(
		to bottom,
		rgb(var(--tile-light)) 0%,
		rgb(var(--tile-light) / 0) 100%
	);
}

.magazin-tile__body {
	grid-area: 2 / 1;
	padding: 0 1.75rem 1.875rem;
}

.magazin-tile__title {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
	line-height: 1.2;
	color: #fff;
	overflow-wrap: normal;
}

.magazin-tile__text {
	display: block;
	max-width: 34rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #f1ede7;
}

/* Same rule as the cards: the deep shadow is faded in on a pseudo, never
   animated on the tile. No background on it, so the lift's own stacking
   context cannot swallow it. */
.magazin-tile::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.22);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.magazin-tile:focus-visible {
	outline: 3px solid var(--fk-color-text);
	outline-offset: 4px;
}

.magazin-tile:hover,
.magazin-tile:focus-visible {
	transform: translateY(-5px);
}

.magazin-tile:hover::after,
.magazin-tile:focus-visible::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.magazin-tile {
		transition: none;
	}

	.magazin-tile:hover,
	.magazin-tile:focus-visible {
		transform: none;
	}
}

/* ---------- Section archive (category) ---------- */

/*
 * The trail is visible here and not on the landing page: three levels
 * deep it is the way back up, two levels deep it only repeats the
 * headline. It sits inside the header block so it lands on the content
 * column rather than on the flush edge.
 */
.magazin--archive .magazin-intro {
	padding-top: 1.5rem;
}

.magazin-intro .breadcrumbs ol {
	margin-bottom: 1.75rem;
}

/* No tiles between the header and the list here, so the gap that
   separates them on the landing page would be a hole. */
.magazin--archive .magazin-list {
	margin-top: 3rem;
}

/* ---------- Post list ---------- */

.magazin-list {
	margin-top: 4.5rem;
}

.magazin-list__heading {
	margin: 0 0 2rem;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	color: var(--fk-color-text);
}

/* The grid itself is .entry-list, shared with the archives — see
   global.css. .magazin-posts is what the script and the data
   attributes hold on to. */

/* ---------- Pagination ---------- */

/*
 * Hidden by the infinite-scroll module once it has taken over, and only
 * then — without JavaScript, and for every crawler, this stays the way
 * through the archive.
 */
.magazin-pagination {
	margin-top: 3.5rem;
}

.magazin-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.magazin-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-decoration: none;
}

.magazin-pagination a.page-numbers:hover,
.magazin-pagination a.page-numbers:focus-visible {
	background: rgba(31, 31, 31, 0.06);
}

.magazin-pagination .page-numbers.current {
	background: var(--fk-color-sage);
	font-weight: 600;
}

/*
 * `hidden` is set by the script once auto-loading is in place. Spelling
 * out display:none is not belt and braces: any `display` declaration on
 * this element would quietly beat the browser's own rule for [hidden] —
 * a lesson this theme has learned twice.
 */
.magazin-pagination[hidden] {
	display: none;
}

/* The trigger the observer watches. It carries no styling of its own —
   it exists so that appending items never moves what is being observed. */
.fk-sentinel {
	height: 1px;
}