/* ==========================================================================
   Oche - componenten
   Bento-grid, kaarten, hero, artikeltekst, paginering.
   Let op: alles wat binnen .oche-prose staat is bewust laag-specifiek en met
   directe-kindselectors gescoped, zodat widget-CSS in Custom HTML-blokken
   altijd wint. Zie 180score/README.md.
   ========================================================================== */

/* ==========================================================================
   1. Hero (homepage)
   ========================================================================== */

.oche-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 480px;
	padding-block: 64px;
	overflow: hidden;
	border-bottom: 1px solid var(--outline-variant);
	background-color: var(--surface-container-lowest);
}

/* Basislaag: als er geen hero-afbeelding is, draagt deze gradient de sectie. */
.oche-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse at 70% 40%, rgba(208, 16, 32, 0.18), transparent 60%),
		radial-gradient(ellipse at 20% 80%, rgba(53, 53, 52, 0.5), transparent 55%),
		var(--surface-container-lowest);
}

.oche-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.oche-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

/* Gradient naar de paginakleur toe, zodat de tekst leesbaar blijft */
.oche-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--surface) 0%, rgba(19, 19, 19, 0.8) 45%, transparent 100%);
}

.oche-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gutter);
	text-align: center;
}

.oche-hero__eyebrow {
	padding: 7px 16px;
	letter-spacing: 0.12em;
}

.oche-hero__title {
	max-width: 20ch;
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	.oche-hero__title {
		font-size: 64px;
	}
}

.oche-hero__title .oche-hero__accent {
	display: block;
	color: var(--primary-container);
}

.oche-hero__text {
	max-width: 60ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--on-surface-variant);
}

.oche-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gutter);
	margin-top: var(--unit);
}

/* ==========================================================================
   2. Knoppen
   ========================================================================== */

.oche-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--unit);
	min-height: 48px;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s, background-color 0.2s, border-color 0.2s;
}

.oche-btn--primary {
	background: var(--primary-container);
	color: var(--on-primary-container);
	box-shadow: 0 0 15px rgba(208, 16, 32, 0.3);
}

.oche-btn--primary:hover,
.oche-btn--primary:focus {
	filter: brightness(1.25);
	color: var(--on-primary-container);
	text-decoration: none;
}

.oche-btn--ghost {
	background: transparent;
	border-color: var(--on-surface);
	color: var(--on-surface);
}

.oche-btn--ghost:hover,
.oche-btn--ghost:focus {
	background: var(--surface-container-high);
	color: var(--on-surface);
	text-decoration: none;
}

/* ==========================================================================
   3. Sectiekop
   ========================================================================== */

.oche-section {
	padding-block: 48px;
}

@media (min-width: 768px) {
	.oche-section {
		padding-block: 80px;
	}
}

.oche-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--unit);
	margin-bottom: 32px;
	padding-bottom: var(--unit);
	border-bottom: 1px solid var(--outline-variant);
}

.oche-section__title {
	margin: 0;
	font-size: 28px;
	letter-spacing: 0.02em;
}

@media (min-width: 768px) {
	.oche-section__title {
		font-size: 40px;
	}
}

.oche-section__title .oche-section__accent {
	color: var(--outline);
}

.oche-section__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-surface);
	text-decoration: none;
	transition: color 0.2s;
}

.oche-section__link:hover,
.oche-section__link:focus {
	color: var(--primary);
	text-decoration: underline;
}

.oche-section__link svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ==========================================================================
   4. Bento-grid
   ========================================================================== */

.oche-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.oche-bento {
		grid-template-columns: repeat(12, 1fr);
	}

	.oche-bento__hero {
		grid-column: span 8;
	}

	.oche-bento__side {
		grid-column: span 4;
	}
}

/* Het recente-artikelenraster onder de bento */
.oche-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 600px) {
	.oche-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.oche-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.oche-grid--spaced {
	margin-top: 32px;
}

/* ==========================================================================
   5. Kaarten
   ========================================================================== */

/* De felt-texture: pure gradient, nul extra requests */
.oche-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--surface-container-high);
	background-image: var(--felt);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	transition: border-color 0.3s;
}

.oche-card:hover,
.oche-card:focus-within {
	border-color: var(--primary-container);
}

.oche-card__media {
	position: relative;
	overflow: hidden;
	background: var(--surface-container-highest);
	aspect-ratio: 16 / 9;
}

.oche-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
	transition: opacity 0.4s, transform 0.4s;
}

.oche-card:hover .oche-card__media img {
	opacity: 1;
	transform: scale(1.04);
}

.oche-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 12px;
	padding: 24px;
}

.oche-card__title {
	margin: 0;
	font-size: 20px;
	letter-spacing: 0.01em;
}

.oche-card__title a {
	color: var(--on-surface);
	text-decoration: none;
}

.oche-card__title a:hover,
.oche-card__title a:focus {
	color: var(--primary);
	text-decoration: none;
}

/* De hele kaart klikbaar maken zonder de link-tekst te verstoppen voor
   schermlezers of crawlers: de <a> houdt zijn href, de overlay vergroot
   alleen het klikgebied. */
.oche-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.oche-card__excerpt {
	margin: 0;
	color: var(--on-surface-variant);
	line-height: 1.6;
}

.oche-card__foot {
	margin-top: auto;
	padding-top: var(--unit);
}

/* Grote heldenkaart in de bento: beeld met tekst eroverheen */
.oche-card--hero .oche-card__media {
	aspect-ratio: 16 / 8;
}

.oche-card--hero .oche-card__body {
	position: relative;
	z-index: 2;
	padding: 32px;
	margin-top: -80px;
	background: linear-gradient(
		to top,
		var(--surface-container-high) 0%,
		rgba(42, 42, 42, 0.92) 60%,
		transparent 100%
	);
}

.oche-card--hero .oche-card__title {
	font-size: 26px;
}

@media (min-width: 768px) {
	.oche-card--hero .oche-card__title {
		font-size: 32px;
	}
}

.oche-card--hero .oche-card__excerpt {
	font-size: 18px;
}

/* Compacte tekstkaart: geen beeld, rode markering links */
.oche-card--compact {
	border-left: 3px solid var(--primary-container);
}

/* Leeslink onderin een kaart */
.oche-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-surface);
	text-decoration: none;
}

.oche-card__more svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	transition: transform 0.2s;
}

.oche-card:hover .oche-card__more {
	color: var(--primary);
}

.oche-card:hover .oche-card__more svg {
	transform: translateX(3px);
}

/* ==========================================================================
   6. OOM-widget-slot (zijkaart homepage)
   ========================================================================== */

.oche-oom {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	background-color: var(--surface-container-high);
	background-image: var(--felt);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
}

.oche-oom__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--unit);
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--outline-variant);
	font-size: 22px;
	letter-spacing: 0.02em;
}

.oche-oom__title svg {
	width: 20px;
	height: 20px;
	fill: var(--primary-container);
	flex-shrink: 0;
}

.oche-oom__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oche-oom__item {
	position: relative;
	padding: 16px 0 16px 16px;
	border-top: 1px solid var(--outline-variant);
}

.oche-oom__item:first-child {
	border-top: 0;
	padding-top: 0;
}

/* De rode pill links: markeert de bovenste plek */
.oche-oom__item:first-child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 16px;
	width: 3px;
	background: var(--primary-container);
}

.oche-oom__rank {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--primary);
}

.oche-oom__name {
	display: block;
	margin-top: 4px;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.oche-oom__name a {
	color: var(--on-surface);
	text-decoration: none;
}

.oche-oom__name a:hover,
.oche-oom__name a:focus {
	color: var(--primary);
}

.oche-oom__date {
	display: block;
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--on-secondary-container);
}

.oche-oom__empty {
	margin: 0;
	color: var(--on-secondary-container);
}

/* ==========================================================================
   7. Paginakop (archief, zoek, 404, pagina)
   ========================================================================== */

.oche-page-head {
	padding-block: 48px 32px;
	border-bottom: 1px solid var(--outline-variant);
}

.oche-page-head__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

@media (min-width: 768px) {
	.oche-page-head__title {
		font-size: 56px;
	}
}

.oche-page-head__title .oche-page-head__accent {
	display: block;
	color: var(--primary-container);
}

.oche-page-head__text {
	max-width: 65ch;
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--on-surface-variant);
}

/* Categoriefilters: gewone crawlbare links, geen JS-filter */
.oche-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
	padding: 0;
	list-style: none;
}

.oche-filters a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.oche-filters a:hover,
.oche-filters a:focus {
	border-color: var(--primary-container);
	color: var(--on-surface);
	text-decoration: none;
}

.oche-filters .is-current a {
	background: var(--primary-container);
	border-color: var(--primary-container);
	color: var(--on-primary-container);
}

/* ==========================================================================
   8. Breadcrumbs (Rank Math)
   ========================================================================== */

.oche-breadcrumbs {
	padding-block: 20px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--on-secondary-container);
}

.oche-breadcrumbs a {
	color: var(--on-secondary-container);
	text-decoration: none;
}

.oche-breadcrumbs a:hover,
.oche-breadcrumbs a:focus {
	color: var(--primary);
	text-decoration: underline;
}

.oche-breadcrumbs .separator {
	margin-inline: 6px;
	color: var(--outline-variant);
}

/* ==========================================================================
   9. Artikel (single) en pagina
   ========================================================================== */

.oche-article {
	padding-block: 32px 64px;
}

.oche-article__head {
	max-width: 70ch;
	margin-bottom: 32px;
}

.oche-article__title {
	margin: 12px 0 16px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media (min-width: 768px) {
	.oche-article__title {
		font-size: 48px;
	}
}

.oche-article__figure {
	margin-bottom: 40px;
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	overflow: hidden;
}

.oche-article__figure img {
	width: 100%;
	height: auto;
}

.oche-article__caption {
	padding: 10px 16px;
	background: var(--surface-container-low);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--on-secondary-container);
}

/* -- De leestekst ---------------------------------------------------------
   Alles hieronder is bewust gescoped op DIRECTE kinderen van .oche-prose.
   Widgets in Custom HTML-blokken zijn zelf een direct kind, maar hun interne
   h2/h3/p/span/img zijn dat niet. Zo raakt het thema nooit de widget-inhoud.
   Voeg hier NOOIT selectors als `.oche-prose h2` of `.oche-prose img` toe.
   ------------------------------------------------------------------------ */

.oche-prose {
	max-width: 70ch;
	font-size: 18px;
	line-height: 1.7;
}

.oche-prose--page {
	margin-top: 40px;
}

.oche-prose > h2 {
	margin: 48px 0 16px;
	font-size: 28px;
}

.oche-prose > h3 {
	margin: 32px 0 12px;
	font-size: 22px;
	color: var(--on-surface-variant);
}

.oche-prose > h4 {
	margin: 24px 0 12px;
	font-size: 18px;
}

.oche-prose > p {
	margin: 0 0 24px;
}

.oche-prose > ul,
.oche-prose > ol {
	margin: 0 0 24px;
	padding-left: 1.5em;
}

.oche-prose > ul > li,
.oche-prose > ol > li {
	margin-bottom: 8px;
}

.oche-prose > blockquote {
	margin: 32px 0;
	padding: 16px 24px;
	border-left: 3px solid var(--primary-container);
	background: var(--surface-container-low);
	color: var(--on-surface-variant);
	font-size: 20px;
}

.oche-prose > blockquote > p:last-child {
	margin-bottom: 0;
}

.oche-prose > figure {
	margin: 32px 0;
}

.oche-prose > table {
	width: 100%;
	margin: 32px 0;
	border-collapse: collapse;
	font-size: 16px;
}

.oche-prose > table th,
.oche-prose > table td {
	padding: 12px 16px;
	border: 1px solid var(--outline-variant);
	text-align: left;
}

.oche-prose > table th {
	background: var(--surface-container-low);
	font-family: var(--font-mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--on-secondary-container);
}

.oche-prose > table td {
	font-variant-numeric: tabular-nums;
}

/* Brede tabellen mogen scrollen, de pagina zelf nooit */
.oche-prose > figure.wp-block-table {
	overflow-x: auto;
}

.oche-prose > hr {
	margin: 48px 0;
	border: 0;
	border-top: 1px solid var(--outline-variant);
}

.oche-prose > pre {
	overflow-x: auto;
	padding: 16px;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 14px;
}

.oche-prose > p > a,
.oche-prose > ul > li > a,
.oche-prose > ol > li > a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   10. Paginering (crawlbaar, genummerd)
   ========================================================================== */

.oche-pagination {
	padding-block: 48px;
	border-top: 1px solid var(--outline-variant);
}

.oche-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.oche-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--on-surface-variant);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.oche-pagination a.page-numbers:hover,
.oche-pagination a.page-numbers:focus {
	border-color: var(--primary-container);
	color: var(--on-surface);
	text-decoration: none;
}

.oche-pagination .page-numbers.current {
	background: var(--primary-container);
	border-color: var(--primary-container);
	color: var(--on-primary-container);
}

.oche-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Vorige/volgende artikel onder een single */
.oche-post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding-block: 32px;
	border-top: 1px solid var(--outline-variant);
}

@media (min-width: 600px) {
	.oche-post-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.oche-post-nav__link {
	display: block;
	padding: 20px;
	background: var(--surface-container-low);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.2s;
}

.oche-post-nav__link:hover,
.oche-post-nav__link:focus {
	border-color: var(--primary-container);
	text-decoration: none;
}

.oche-post-nav__dir {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
}

.oche-post-nav__title {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--on-surface);
}

.oche-post-nav__link--next {
	text-align: right;
}

/* ==========================================================================
   11. Zoeken en 404
   ========================================================================== */

.oche-search-form {
	display: flex;
	gap: 12px;
	max-width: 520px;
	margin-top: 24px;
}

.oche-search-form label {
	flex: 1;
}

.oche-search-form input[type="search"] {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: var(--surface-container-low);
	border: 1px solid var(--outline-variant);
	border-radius: var(--radius);
	color: var(--on-surface);
	font-family: var(--font-body);
	font-size: 16px;
}

.oche-search-form input[type="search"]::placeholder {
	color: var(--on-secondary-container);
}

.oche-search-form input[type="search"]:focus {
	border-color: var(--primary-container);
	outline: none;
}

.oche-empty {
	padding-block: 64px;
	text-align: center;
	color: var(--on-surface-variant);
}