/* ==========================================================================
   CLOUDWRAITH - VIEWS
   Single post, archive header, 404. Layout comes from the Elementor Theme
   Builder templates; everything visual resolves to tokens.css.
   ========================================================================== */

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

.cw-single__hero {
	position: relative;
	width: 100%;
	max-height: 62vh;
	overflow: hidden;
	isolation: isolate;
}

.cw-single__hero img {
	width: 100%;
	max-height: 62vh;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/* Scrim so the title below always sits on near-black. */
.cw-single__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--cw-scrim-v);
	pointer-events: none;
}

.cw-single__head { text-align: left; }

.cw-single__title {
	font-size: var(--cw-step-4);
	line-height: 1.06;
	margin-bottom: var(--cw-space-m);
}

/* The mono meta line under the title. */
.cw-single__meta .cw-meta { font-size: 0.8125rem; }

/* Body copy is held to the token measure. */
.cw-single__body .elementor-widget-container > * {
	max-width: var(--cw-measure);
	margin-inline: auto;
}

.cw-single__body figure,
.cw-single__body .wp-block-image,
.cw-single__body pre {
	max-width: min(100%, 980px) !important;
}

.cw-single__foot { border-top: 1px solid var(--cw-hairline); }

.cw-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-xs);
	align-items: center;
}

.cw-single__tags-label {
	font-family: var(--cw-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-text-muted);
	margin-right: var(--cw-space-2xs);
}

/* Elementor post-navigation restyled as the prev/next pair. */
.cw-single__nav .elementor-post-navigation {
	border: 0;
	gap: var(--cw-space-m);
}

.cw-single__nav .elementor-post-navigation__link a {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-2xs);
	padding: var(--cw-space-m);
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	text-decoration: none;
	transition: border-color var(--cw-dur) var(--cw-ease),
	            background var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.cw-single__nav .elementor-post-navigation__link a:hover {
	border-color: var(--cw-teal);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

.cw-single__nav .post-navigation__prev--label,
.cw-single__nav .post-navigation__next--label {
	font-family: var(--cw-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
}

.cw-single__nav .post-navigation__prev--title,
.cw-single__nav .post-navigation__next--title {
	font-family: var(--cw-font-display);
	font-weight: 500;
	color: var(--cw-text);
	line-height: 1.3;
}

.cw-single__nav .elementor-post-navigation__separator { display: none; }

/* --- Archive header band --------------------------------------------------- */

.cw-archive-head {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--cw-hairline);
}

.cw-archive-head__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.cw-archive-head__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	filter: brightness(0.93) saturate(0.88);
}

.cw-archive-head::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(4, 7, 10, 0.20) 0%,
			rgba(4, 7, 10, 0.04) 45%,
			rgba(4, 7, 10, 0.46) 100%),
		linear-gradient(90deg,
			rgba(4, 7, 10, 0.74) 0%,
			rgba(4, 7, 10, 0.44) 58%,
			rgba(4, 7, 10, 0.30) 100%);
}

.cw-archive-head__title {
	font-size: var(--cw-step-4);
	margin: 0;
}

/* --- Elementor archive-posts grid ------------------------------------------ */

.cw-archive-grid .elementor-post {
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	overflow: hidden;
	transition: transform var(--cw-dur) var(--cw-ease),
	            border-color var(--cw-dur) var(--cw-ease),
	            background var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.cw-archive-grid .elementor-post:hover {
	transform: translateY(-4px);
	border-color: var(--cw-teal);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

.cw-archive-grid .elementor-post__thumbnail__link { margin: 0; }

.cw-archive-grid .elementor-post__text { padding: var(--cw-space-m); }

.cw-archive-grid .elementor-post__title,
.cw-archive-grid .elementor-post__title a {
	font-family: var(--cw-font-display);
	font-size: var(--cw-step-1);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--cw-tracking-tight);
	color: var(--cw-text);
	text-decoration: none;
}

.cw-archive-grid .elementor-post:hover .elementor-post__title a { color: var(--cw-teal-bright); }

.cw-archive-grid .elementor-post__excerpt p {
	color: var(--cw-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.cw-archive-grid .elementor-post__meta-data {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cw-text-muted);
	border: 0;
	padding: 0;
}

.cw-archive-grid .elementor-post__read-more {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	text-decoration: none;
}

.cw-archive-grid .elementor-post__read-more:hover { color: var(--cw-teal-bright); }

/* Elementor's pagination, matched to .cw-pages. */
.cw-archive-grid .elementor-pagination {
	margin-top: var(--cw-space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-xs);
	justify-content: center;
}

.cw-archive-grid .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--cw-space-s);
	font-family: var(--cw-font-mono);
	font-size: 0.875rem;
	color: var(--cw-text-muted);
	text-decoration: none;
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-s);
}

.cw-archive-grid .elementor-pagination .page-numbers:hover {
	color: var(--cw-teal-bright);
	border-color: var(--cw-teal);
	background: rgba(75, 255, 139, 0.08);
}

.cw-archive-grid .elementor-pagination .page-numbers.current {
	color: var(--cw-void);
	background: var(--cw-teal);
	border-color: var(--cw-teal);
}

/* --- 404 ------------------------------------------------------------------- */

.cw-404 { min-height: 78vh; }

.cw-404__portrait img {
	max-width: 420px;
	border-radius: var(--cw-radius-l);
	box-shadow: var(--cw-glow-soft);
}

.cw-404__code {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
}

.cw-404__title { font-size: var(--cw-step-4); }

.cw-404__text {
	color: var(--cw-text-muted);
	max-width: 46ch;
}

/* --- About / Contact ------------------------------------------------------- */

.cw-portrait img {
	border-radius: var(--cw-radius-l);
	box-shadow: var(--cw-glow-soft);
	border: 1px solid var(--cw-hairline);
}

.cw-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-s);
}


/* --- Elementor cards skin -------------------------------------------------
 * The cards skin paints its own surface on .elementor-post__card, inside the
 * .elementor-post we style above, so it has to be caught separately or it
 * ships Elementor's white card with our light type on top of it.
 * Marker: cw-cards-skin
 */

.cw-archive-grid .elementor-posts--skin-cards .elementor-post {
	background: transparent;
	border: 0;
}

.cw-archive-grid .elementor-post__card {
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	box-shadow: none;
	overflow: hidden;
	transition: transform var(--cw-dur) var(--cw-ease),
	            border-color var(--cw-dur) var(--cw-ease),
	            background var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.cw-archive-grid .elementor-post:hover .elementor-post__card {
	transform: translateY(-4px);
	border-color: var(--cw-accent);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

/* Title carries the pure white so it separates from the excerpt. */
.cw-archive-grid .elementor-post__card .elementor-post__title,
.cw-archive-grid .elementor-post__card .elementor-post__title a {
	color: var(--cw-text-strong);
	font-family: var(--cw-font-display);
	font-weight: 700;
	letter-spacing: var(--cw-tracking-tight);
	text-decoration: none;
}

.cw-archive-grid .elementor-post:hover .elementor-post__card .elementor-post__title a {
	color: var(--cw-accent-bright);
}

.cw-archive-grid .elementor-post__card .elementor-post__excerpt p {
	color: var(--cw-text-muted);
}

.cw-archive-grid .elementor-post__card .elementor-post__read-more {
	color: var(--cw-accent);
}

/* The skin's footer strip: kill the light fill, keep the rule as a hairline. */
.cw-archive-grid .elementor-post__card .elementor-post__meta-data {
	background: transparent;
	border-top: 1px solid var(--cw-hairline);
	color: var(--cw-text-muted);
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.cw-archive-grid .elementor-post__card .elementor-post__meta-data a,
.cw-archive-grid .elementor-post__card .elementor-post-date,
.cw-archive-grid .elementor-post__card .elementor-post-avatar {
	color: var(--cw-text-muted);
}

/* Elementor's own card shadow and hover gradient both fight the palette. */
.cw-archive-grid.elementor-card-shadow-yes .elementor-post__card { box-shadow: none; }
.cw-archive-grid .elementor-post__thumbnail__link::after { display: none; }


/* --- Elementor classic skin ----------------------------------------------
 * The home grid uses the classic skin, which paints nothing at all, so the
 * posts read as loose text on the page rather than as cards. Same surface
 * treatment as the cards skin above.
 * Marker: cw-classic-skin
 */

.cw-archive-grid .elementor-posts--skin-classic .elementor-post {
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	overflow: hidden;
	padding: var(--cw-space-m);
	transition: transform var(--cw-dur) var(--cw-ease),
	            border-color var(--cw-dur) var(--cw-ease),
	            background var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.cw-archive-grid .elementor-posts--skin-classic .elementor-post:hover {
	transform: translateY(-4px);
	border-color: var(--cw-accent);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

.cw-archive-grid .elementor-posts--skin-classic .elementor-post__text { padding: 0; }

.cw-archive-grid .elementor-posts--skin-classic .elementor-post__title,
.cw-archive-grid .elementor-posts--skin-classic .elementor-post__title a {
	color: var(--cw-text-strong);
}

.cw-archive-grid .elementor-posts--skin-classic .elementor-post:hover .elementor-post__title a {
	color: var(--cw-accent-bright);
}


/* --- Type over imagery ----------------------------------------------------
 * Green on the cyan cityscape is the same luminance as the artwork, so the
 * headline loses. Over imagery the headline takes the white, the eyebrow
 * keeps the accent, and both get a tight dark shadow so glyph edges stay
 * separated from whatever pixel happens to sit behind them.
 * Marker: cw-over-image
 */

.cw-archive-head .elementor-widget-heading .elementor-heading-title,
.cw-band .elementor-widget-heading .elementor-heading-title {
	color: var(--cw-text-strong);
	text-shadow: 0 2px 6px rgba(4, 7, 10, 0.95),
	             0 0 34px rgba(4, 7, 10, 0.80);
}

.cw-archive-head .cw-eyebrow .elementor-heading-title,
.cw-band .cw-eyebrow .elementor-heading-title {
	color: var(--cw-accent);
	text-shadow: 0 1px 2px rgba(4, 7, 10, 0.95),
	             0 0 24px rgba(4, 7, 10, 0.85);
}

.cw-archive-head .elementor-widget-text-editor,
.cw-band .elementor-widget-text-editor {
	color: var(--cw-text);
	text-shadow: 0 1px 2px rgba(4, 7, 10, 0.9);
}


/* 404 display heading takes the white so it separates from the green
   status line above it, same hierarchy as the post cards.
   Marker: cw-404-title-white */
.cw-404 .cw-404__title .elementor-heading-title {
	color: var(--cw-text-strong);
}