/* =========================================================================
   Krieg - editorial pages, blog and empty states
   ========================================================================= */

/* ------------------------------------------------------- 20. Page + blog */

.k-pagehead {
	position: relative;
	padding-block: var(--k-7) var(--k-6);
	border-bottom: 1px solid var(--k-line);
	background: var(--k-paper);
	overflow: hidden;
}

.k-pagehead::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -140px;
	width: 540px;
	height: 440px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216, 35, 42, 0.08) 0%, transparent 68%);
	pointer-events: none;
}

.k-pagehead > * {
	position: relative;
	z-index: 1;
}

.k-pagehead__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: var(--k-4) 0 0;
}

.k-pagehead__desc {
	margin: var(--k-4) 0 0;
	color: var(--k-muted);
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.6;
}

.k-prose {
	max-width: 76ch;
}

.k-prose h2 {
	font-size: var(--k-t-h3);
	margin-top: var(--k-7);
	text-transform: none;
}

.k-prose h3 {
	font-size: 1.125rem;
	margin-top: var(--k-6);
}

.k-prose img {
	border-radius: var(--k-radius-lg);
	margin-block: var(--k-6);
	box-shadow: var(--k-shadow-md);
}

.k-prose blockquote {
	margin: var(--k-6) 0;
	padding: var(--k-6) var(--k-7);
	border: 1px solid var(--k-line);
	border-left: 4px solid var(--k-accent);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	font-size: 1.0625rem;
}

.k-prose table {
	margin-block: var(--k-5);
	font-size: var(--k-t-sm);
}

.k-prose th,
.k-prose td {
	padding: var(--k-3);
	border-bottom: 1px solid var(--k-line);
	text-align: left;
}

.k-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--k-6);
}

.k-postcard__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--k-radius-lg);
	background: var(--k-surface);
	margin-bottom: var(--k-4);
	box-shadow: var(--k-shadow);
	transition: box-shadow var(--k-base) var(--k-ease);
}

.k-postcard:hover .k-postcard__media {
	box-shadow: var(--k-shadow-md);
}

.k-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--k-ease);
}

.k-postcard:hover .k-postcard__media img {
	transform: scale(1.06);
}

.k-postcard {
	transition: transform var(--k-base) var(--k-ease);
}

.k-postcard:hover {
	transform: translateY(-4px);
}

.k-postcard__meta {
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
}

.k-postcard__title {
	font-size: 1.125rem;
	margin: var(--k-2) 0;
	letter-spacing: -0.01em;
}

.k-postcard__title a {
	text-decoration: none;
}

.k-postcard__excerpt {
	font-size: var(--k-t-sm);
	color: var(--k-muted);
	margin: 0;
}

.k-empty {
	text-align: center;
	padding: var(--k-9) var(--k-gutter);
	border: 1px dashed var(--k-line-strong);
	border-radius: var(--k-radius-lg);
	background: var(--k-paper);
}

.k-empty__title {
	font-size: var(--k-t-h3);
	margin: 0 0 var(--k-3);
}

.k-empty p {
	color: var(--k-muted);
	margin: 0 auto var(--k-5);
	max-width: 46ch;
}


/* ------------------------------------------------------------- Single post */

.k-post__hero {
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	margin-top: var(--k-5);
	box-shadow: var(--k-shadow-md);
}

.k-post__hero img {
	width: 100%;
	height: auto;
}

.k-postnav {
	display: grid;
	gap: var(--k-3);
	margin-top: var(--k-8);
	padding-top: var(--k-5);
	border-top: 1px solid var(--k-line);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
}

@media (min-width: 640px) {
	.k-postnav .nav-links {
		display: flex;
		justify-content: space-between;
		gap: var(--k-5);
	}
}

.k-postnav a {
	text-decoration: none;
	font-weight: 600;
}

.k-postnav span {
	display: block;
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin-bottom: 4px;
}

.k-pagehead__title--post {
	text-transform: none;
	max-width: 22ch;
}

/* ------------------------------------------------------------ Search + 404 */

.k-searchswitch {
	margin: var(--k-4) 0 0;
}

.k-404search {
	display: flex;
	gap: var(--k-2);
	flex-wrap: wrap;
	justify-content: center;
	max-width: 480px;
	margin: 0 auto var(--k-5);
}

.k-404search .k-field {
	flex: 1 1 220px;
	width: auto;
}

.k-empty--404 {
	border-style: solid;
}

.k-404cats {
	margin-top: var(--k-7);
	text-align: center;
}

.k-404cats__list {
	list-style: none;
	margin: var(--k-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-2);
	justify-content: center;
}

/* ======================================================= Editorial pages */

/* ------------------------------------------------------------- Page hero */

.k-pagehero {
	position: relative;
	background: var(--k-ink);
	color: var(--k-on-dark);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 42vw, 480px);
}

.k-pagehero__media {
	position: absolute;
	inset: 0;
}

.k-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-pagehero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 10, 12, 0.92) 0%,
		rgba(10, 10, 12, 0.62) 55%,
		rgba(10, 10, 12, 0.3) 100%
	);
}

.k-pagehero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(var(--k-7), 5vw, var(--k-9));
	width: 100%;
}

.k-pagehero .k-crumbs,
.k-pagehero .k-crumbs [aria-current="page"] {
	color: rgba(255, 255, 255, 0.66);
}

.k-pagehero .k-crumbs a {
	color: rgba(255, 255, 255, 0.86);
}

.k-pagehero .k-crumbs li + li::before {
	color: rgba(255, 255, 255, 0.32);
}

.k-pagehero .k-eyebrow {
	margin-top: var(--k-5);
	color: #ff7b80;
}

.k-pagehero__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--k-white);
	margin: 0;
	max-width: 18ch;
}

.k-pagehero__lede {
	margin: var(--k-5) 0 0;
	color: var(--k-on-dark-soft);
	max-width: 56ch;
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
}

/* ------------------------------------------------------------ Split block */

.k-split {
	display: grid;
	gap: var(--k-7);
	align-items: start;
}

@media (min-width: 900px) {
	.k-split {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--k-9);
	}
}

.k-split__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0 0 var(--k-5);
}

.k-split__text p {
	color: var(--k-ink-soft);
	max-width: 62ch;
}

.k-split__text .k-btn {
	margin-top: var(--k-4);
}

.k-ticklist {
	list-style: none;
	margin: 0;
	padding: var(--k-6);
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow);
	display: grid;
	gap: var(--k-4);
}

.k-ticklist li {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	font-size: var(--k-t-sm);
	font-weight: 600;
}

.k-ticklist .k-icon {
	flex: none;
	color: var(--k-white);
	background: var(--k-grad-accent);
	border-radius: 50%;
	padding: 5px;
	box-sizing: content-box;
	width: 14px;
	height: 14px;
}

/* ---------------------------------------------------------- Feature cards */

.k-featuregrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--k-4);
}

.k-featurecard {
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	padding: var(--k-6);
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-featurecard:hover {
	border-color: transparent;
	transform: translateY(-5px);
	box-shadow: var(--k-shadow-pop);
}

.k-featurecard__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--k-accent-soft);
	color: var(--k-accent);
	margin-bottom: var(--k-4);
}

.k-featurecard__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--k-2);
	text-transform: none;
}

.k-featurecard__text {
	margin: 0;
	font-size: var(--k-t-sm);
	color: var(--k-muted);
}

/* --------------------------------------------------------- Contact blocks */

.k-contactgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--k-4);
}

.k-contactcard {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	padding: var(--k-6);
	background: var(--k-white);
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-contactcard:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: var(--k-shadow-md);
}

.k-contactcard__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--k-accent-soft);
	color: var(--k-accent);
	margin-bottom: var(--k-4);
}

.k-contactcard__label {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin: 0 0 var(--k-2);
}

.k-contactcard__value {
	font-size: var(--k-t-sm);
	font-weight: 500;
	color: var(--k-ink);
	text-decoration: none;
	display: block;
	line-height: 1.5;
}

a.k-contactcard__value:hover {
	color: var(--k-accent);
}

.k-contactform {
	display: grid;
	gap: var(--k-7);
	align-items: start;
}

@media (min-width: 900px) {
	.k-contactform {
		grid-template-columns: 0.85fr 1.15fr;
		gap: var(--k-9);
	}
}

.k-contactform__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0 0 var(--k-4);
}

.k-contactform__text p {
	color: var(--k-muted);
}

.k-contactform__alt {
	margin-top: var(--k-6);
	padding-top: var(--k-6);
	border-top: 1px solid var(--k-line);
}

.k-contactform__alt h3 {
	font-size: var(--k-t-h3);
	text-transform: none;
	margin: 0 0 var(--k-2);
}

.k-contactform__form {
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow-md);
	padding: clamp(var(--k-5), 3vw, var(--k-7));
}

/* Normalise the bundled form plugins to the theme's field styling. */
.k-contactform__form input[type="text"],
.k-contactform__form input[type="email"],
.k-contactform__form input[type="tel"],
.k-contactform__form textarea,
.k-contactform__form select {
	width: 100%;
	padding: 14px var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	font-family: var(--k-font-body);
	font-size: var(--k-t-sm);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease),
		background var(--k-fast) var(--k-ease);
}

.k-contactform__form input:focus,
.k-contactform__form textarea:focus,
.k-contactform__form select:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.k-contactform__form button[type="submit"],
.k-contactform__form input[type="submit"] {
	padding: 17px var(--k-7);
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5);
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.k-contactform__form button[type="submit"]:hover,
.k-contactform__form input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-accent);
}
/* ------------------------------------------------------- Forminator

   The block above never applied. Forminator ships a stylesheet per form -
   style-<form id>.css - generated from that form's own "design" settings, and
   it targets

     .forminator-ui#forminator-module-2477.forminator-design--default .forminator-input

   which is specificity (1,3,0). The rules above are (0,2,1), so they lost
   every declaration. That is why the fields rendered as 41px Roboto boxes
   with 2px corners and a grey 100x40 submit - and, worse, why every label was
   set to #fff on a white card. The labels were in the DOM, correctly tied to
   their inputs, and simply invisible, so the form arrived as four unlabelled
   boxes.

   The module id changes if the form is ever rebuilt, so it cannot be matched
   without hardcoding it, and no class-only selector can reach (1,3,0).
   !important scoped to the theme's own contact block is the only override
   that survives a plugin-generated ID stylesheet. It is used deliberately
   here and nowhere else in this file. */

.k-contactform__form .forminator-label {
	display: block !important;
	margin: 0 0 var(--k-2) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-font-display) !important;
	font-size: var(--k-t-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
}

.k-contactform__form .forminator-required {
	color: var(--k-accent) !important;
}

.k-contactform__form .forminator-input,
.k-contactform__form .forminator-textarea {
	width: 100% !important;
	min-height: 52px !important;
	padding: 14px var(--k-4) !important;
	border: 1px solid var(--k-line-strong) !important;
	border-radius: var(--k-radius) !important;
	background: var(--k-paper) !important;
	color: var(--k-ink) !important;
	font-family: var(--k-font-body) !important;
	font-size: var(--k-t-sm) !important;
	line-height: 1.5 !important;
}

.k-contactform__form .forminator-textarea {
	min-height: 150px !important;
	resize: vertical !important;
}

.k-contactform__form .forminator-input:focus,
.k-contactform__form .forminator-textarea:focus {
	outline: none !important;
	background: var(--k-white) !important;
	border-color: var(--k-accent) !important;
	box-shadow: 0 0 0 4px var(--k-accent-ring) !important;
}

.k-contactform__form .forminator-input::placeholder,
.k-contactform__form .forminator-textarea::placeholder {
	color: var(--k-muted) !important;
}

/* The one control on this page that has to look like the site's primary
   action arrived as a 100x40 grey box with 2px corners. */
.k-contactform__form .forminator-button-submit {
	width: 100% !important;
	min-height: 56px !important;
	padding: 17px var(--k-7) !important;
	border: 0 !important;
	border-radius: var(--k-radius) !important;
	background: var(--k-grad-accent) !important;
	color: var(--k-white) !important;
	font-family: var(--k-font-display) !important;
	font-size: var(--k-t-sm) !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5) !important;
	transition: box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease) !important;
}

.k-contactform__form .forminator-button-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: var(--k-shadow-accent) !important;
}

.k-contactform__form .forminator-row {
	margin-bottom: var(--k-5) !important;
}

.k-contactform__form .forminator-row:last-of-type {
	margin-bottom: 0 !important;
}

/* Validation in the theme's own error colour rather than the plugin's. */
.k-contactform__form .forminator-error-message {
	margin-top: 6px !important;
	color: var(--k-accent) !important;
	font-family: var(--k-font-body) !important;
	font-size: 0.8125rem !important;
}

.k-contactform__form .forminator-input.forminator-has_error,
.k-contactform__form .forminator-textarea.forminator-has_error {
	border-color: var(--k-accent) !important;
	background: var(--k-accent-soft) !important;
}

.k-contactform__form .forminator-response-message {
	margin-bottom: var(--k-4) !important;
	padding: var(--k-3) var(--k-4) !important;
	border-radius: var(--k-radius-sm) !important;
	font-size: var(--k-t-sm) !important;
}