/* ==========================================================================
   CLOUDWRAITH - COMPONENTS
   Cards, chips, hero, archive rows, meta lines, reading progress.
   ========================================================================== */

/* --- Layout helpers ------------------------------------------------------ */

.cw-wrap {
	width: 100%;
	max-width: var(--cw-container);
	margin-inline: auto;
	padding-inline: var(--cw-space-m);
}

.cw-wrap--narrow { max-width: var(--cw-container-narrow); }

.cw-section { padding-block: var(--cw-space-2xl); }

.cw-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cw-space-m);
	flex-wrap: wrap;
	margin-bottom: var(--cw-space-l);
	padding-bottom: var(--cw-space-s);
	border-bottom: 1px solid var(--cw-hairline);
}

.cw-section__title {
	font-size: var(--cw-step-2);
	margin: 0;
}

/* Small mono eyebrow used above section titles. */
.cw-eyebrow {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	margin: 0 0 var(--cw-space-xs);
	display: block;
}

/* --- Mono meta line ------------------------------------------------------ */

.cw-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cw-space-xs);
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--cw-text-muted);
	margin: 0;
}

.cw-meta__sep {
	color: var(--cw-hairline-strong);
	user-select: none;
}

.cw-meta a { color: var(--cw-text-muted); text-decoration: none; }
.cw-meta a:hover { color: var(--cw-teal-bright); }

/* --- Category chip ------------------------------------------------------- */

.cw-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--cw-space-2xs);
	font-family: var(--cw-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	background: rgba(75, 255, 139, 0.07);
	border: 1px solid var(--cw-hairline);
	border-radius: 99px;
	padding: 0.3em 0.75em;
	text-decoration: none;
	line-height: 1.4;
	transition: background var(--cw-dur-fast) var(--cw-ease),
	            border-color var(--cw-dur-fast) var(--cw-ease),
	            color var(--cw-dur-fast) var(--cw-ease);
}

.cw-chip:hover,
.cw-chip:focus-visible {
	background: rgba(75, 255, 139, 0.14);
	border-color: var(--cw-teal);
	color: var(--cw-teal-bright);
}

.cw-chip__count {
	color: var(--cw-text-muted);
	font-size: 0.9em;
}

.cw-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-xs);
}

/* Tag chips take the secondary accent. */
.cw-chip--tag {
	color: var(--cw-green);
	background: rgba(75, 255, 139, 0.06);
	border-color: rgba(75, 255, 139, 0.20);
	text-transform: none;
}

.cw-chip--tag:hover {
	background: rgba(75, 255, 139, 0.13);
	border-color: var(--cw-green);
	color: var(--cw-green);
}

/* --- Buttons ------------------------------------------------------------- */

.cw-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--cw-space-xs);
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cw-teal);
	background: transparent;
	border: 1px solid var(--cw-hairline-strong);
	border-radius: var(--cw-radius-s);
	padding: 0.85em 1.6em;
	cursor: pointer;
	transition: background var(--cw-dur) var(--cw-ease),
	            border-color var(--cw-dur) var(--cw-ease),
	            color var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.cw-btn:hover,
.cw-btn:focus-visible {
	color: var(--cw-teal-bright);
	border-color: var(--cw-teal);
	background: rgba(75, 255, 139, 0.08);
	box-shadow: var(--cw-glow);
}

.cw-btn--solid {
	background: var(--cw-teal);
	color: var(--cw-void);
	border-color: var(--cw-teal);
}

.cw-btn--solid:hover {
	background: var(--cw-teal-bright);
	color: var(--cw-void);
}

/* --- Post card ----------------------------------------------------------- */

.cw-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cw-space-m);
}

@media (max-width: 1023px) { .cw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cw-grid { grid-template-columns: 1fr; } }

.cw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cw-panel);
	border: 1px solid var(--cw-hairline);
	border-radius: var(--cw-radius-m);
	overflow: hidden;
	height: 100%;
	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-card:hover,
.cw-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--cw-teal);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

.cw-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cw-panel-raised);
}

.cw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cw-dur-slow) var(--cw-ease);
}

.cw-card:hover .cw-card__media img { transform: scale(1.04); }

/* Placeholder when a post has no featured image: a faint grid, not a grey box. */
.cw-card__media--empty {
	background-color: var(--cw-panel-raised);
	background-image:
		linear-gradient(var(--cw-hairline) 1px, transparent 1px),
		linear-gradient(90deg, var(--cw-hairline) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: center;
}

.cw-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--cw-space-s);
	padding: var(--cw-space-m);
	flex: 1;
}

.cw-card__title {
	font-size: var(--cw-step-1);
	line-height: 1.22;
	margin: 0;
}

.cw-card__title a {
	color: var(--cw-text);
	text-decoration: none;
}

/* Whole card is the click target; the link keeps the accessible name. */
.cw-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.cw-card:hover .cw-card__title a,
.cw-card__title a:focus-visible { color: var(--cw-teal-bright); }

.cw-card__excerpt {
	color: var(--cw-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cw-card__foot { margin-top: auto; padding-top: var(--cw-space-xs); }

/* Featured (newest post) card: image beside copy on desktop. */
.cw-card--featured { flex-direction: row; }

.cw-card--featured .cw-card__media {
	flex: 0 0 58%;
	aspect-ratio: 16 / 9;
}

.cw-card--featured .cw-card__body {
	justify-content: center;
	padding: var(--cw-space-xl);
	gap: var(--cw-space-m);
}

.cw-card--featured .cw-card__title { font-size: var(--cw-step-3); }

.cw-card--featured .cw-card__excerpt {
	font-size: 1.0625rem;
	-webkit-line-clamp: 2;
}

@media (max-width: 900px) {
	.cw-card--featured { flex-direction: column; }
	.cw-card--featured .cw-card__media { flex: none; width: 100%; }
	.cw-card--featured .cw-card__body { padding: var(--cw-space-l); }
}

/* --- Hero ---------------------------------------------------------------- */

.cw-hero {
	position: relative;
	min-height: 40vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	background-color: var(--cw-void);
	isolation: isolate;
}

.cw-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	z-index: -3;
}

.cw-hero__rain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 0.28;
	pointer-events: none;
	mix-blend-mode: screen;
}

.cw-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(4, 7, 10, 0.82)  0%,
		rgba(4, 7, 10, 0.42) 40%,
		rgba(4, 7, 10, 0.72) 80%,
		var(--cw-void)      100%);
}

.cw-hero__inner {
	width: 100%;
	max-width: var(--cw-container);
	margin-inline: auto;
	padding: var(--cw-space-l) var(--cw-space-m) var(--cw-space-xl);
}

.cw-hero__title {
	font-size: var(--cw-step-5);
	line-height: 1.02;
	margin: 0 0 var(--cw-space-m);
	text-shadow: 0 2px 40px rgba(5, 8, 10, 0.9);
}

/* The logotype art carries ~19% dead space top and bottom, and the h1 that
   wraps it contributes a display-sized line box on top of that. Both are
   cropped out here so the wordmark starts where the header ends. */
.cw-hero__title:has(.cw-hero__logo) {
	font-size: 0;
	line-height: 0;
}

/* Full container width. The crop window is derived from the file itself:
   the letterforms occupy source rows 265-480 of 781 and the flames reach up
   to row 215, so the box shows rows ~205-595. That keeps every flame intact
   while cutting the empty headroom that would otherwise push the wordmark
   away from the header. */
.cw-hero__logo {
	display: block;
	width: 100%;
	aspect-ratio: 140 / 39;
	height: auto;
	object-fit: cover;
	object-position: center 52%;
	margin-bottom: var(--cw-space-m);
}

.cw-hero__tagline {
	font-size: var(--cw-step-1);
	line-height: 1.45;
	color: var(--cw-text);
	max-width: 46ch;
	margin: 0 0 var(--cw-space-l);
	text-shadow: 0 1px 24px rgba(5, 8, 10, 0.9);
}

.cw-hero__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--cw-space-xs);
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-text-muted);
	text-decoration: none;
}

.cw-hero__cue:hover { color: var(--cw-teal-bright); }

.cw-hero__cue svg { animation: cw-cue 2.6s var(--cw-ease) infinite; }

@keyframes cw-cue {
	0%, 100% { transform: translateY(0);   opacity: 0.6; }
	50%      { transform: translateY(4px); opacity: 1; }
}

/* --- Image band (cwcityblock divider) ------------------------------------ */

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

.cw-band__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	filter: brightness(0.93) saturate(0.88);
}

.cw-band__scrim {
	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-band__inner {
	max-width: var(--cw-container);
	margin-inline: auto;
	padding: var(--cw-space-2xl) var(--cw-space-m);
}

/* --- Archive index ------------------------------------------------------- */

.cw-archive__controls {
	position: sticky;
	top: var(--cw-header-h);
	z-index: 5;
	background: rgba(5, 8, 10, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding-block: var(--cw-space-m);
	border-bottom: 1px solid var(--cw-hairline);
	margin-bottom: var(--cw-space-l);
}

.cw-archive__filter {
	position: relative;
	max-width: 420px;
}

.cw-archive__filter input {
	font-family: var(--cw-font-mono);
	font-size: 0.875rem;
	padding-left: 2.4rem;
}

.cw-archive__filter::before {
	content: '/';
	position: absolute;
	left: var(--cw-space-m);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--cw-font-mono);
	color: var(--cw-teal);
	pointer-events: none;
}

.cw-archive__count {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-text-muted);
	margin-top: var(--cw-space-xs);
}

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

.cw-year__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--cw-space-m);
	background: none;
	border: 0;
	padding: var(--cw-space-m) 0;
	cursor: pointer;
	text-align: left;
	color: var(--cw-text);
	font-family: var(--cw-font-display);
	font-size: var(--cw-step-2);
	font-weight: 700;
	letter-spacing: var(--cw-tracking-tight);
	transition: color var(--cw-dur-fast) var(--cw-ease);
}

.cw-year__toggle:hover { color: var(--cw-teal-bright); }

.cw-year__n {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	color: var(--cw-text-muted);
}

.cw-year__toggle[aria-expanded="false"] + .cw-year__list { display: none; }

.cw-year__list {
	list-style: none;
	margin: 0 0 var(--cw-space-m);
	padding: 0;
}

/* Dense, scannable rows - not cards. */
.cw-row {
	display: grid;
	grid-template-columns: 6.5rem 1fr auto;
	align-items: baseline;
	gap: var(--cw-space-m);
	padding: 0.55rem var(--cw-space-s);
	border-radius: var(--cw-radius-s);
	border-bottom: 1px solid rgba(75, 255, 139, 0.07);
	transition: background var(--cw-dur-fast) var(--cw-ease);
}

.cw-row:hover { background: var(--cw-panel); }

.cw-row__date {
	font-family: var(--cw-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--cw-text-muted);
	white-space: nowrap;
}

.cw-row__title {
	font-size: 1rem;
	line-height: 1.4;
}

.cw-row__title a { color: var(--cw-text); text-decoration: none; }
.cw-row__title a:hover { color: var(--cw-teal-bright); }

.cw-row__cat {
	font-family: var(--cw-font-mono);
	font-size: 0.6875rem;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-teal);
	white-space: nowrap;
}

.cw-row[hidden] { display: none; }

@media (max-width: 640px) {
	.cw-row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
		padding-block: var(--cw-space-s);
	}
	.cw-row__cat { grid-row: 1; }
}

.cw-archive__empty {
	font-family: var(--cw-font-mono);
	font-size: 0.875rem;
	color: var(--cw-text-muted);
	padding: var(--cw-space-l) 0;
}

/* --- Reading progress ---------------------------------------------------- */

.cw-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}

.cw-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--cw-teal), var(--cw-teal-bright));
	box-shadow: 0 0 12px rgba(75, 255, 139, 0.6);
	transform-origin: left;
	transition: width 80ms linear;
}

/* --- Prev / next post ---------------------------------------------------- */

.cw-pagination {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cw-space-m);
	margin-block: var(--cw-space-xl);
}

.cw-pagination__item {
	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-pagination__item:hover {
	border-color: var(--cw-teal);
	background: var(--cw-panel-raised);
	box-shadow: var(--cw-glow);
}

.cw-pagination__item--next { text-align: right; }

.cw-pagination__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-pagination__title {
	color: var(--cw-text);
	font-family: var(--cw-font-display);
	font-weight: 500;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.cw-pagination { grid-template-columns: 1fr; }
	.cw-pagination__item--next { text-align: left; }
}

/* --- Reveal on scroll ---------------------------------------------------- */

[data-cw-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--cw-dur-slow) var(--cw-ease),
	            transform var(--cw-dur-slow) var(--cw-ease);
}

[data-cw-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* --- Numbered pagination -------------------------------------------------- */

.cw-pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-xs);
	justify-content: center;
	margin-top: var(--cw-space-xl);
}

.cw-pages .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);
	transition: color var(--cw-dur-fast) var(--cw-ease),
	            border-color var(--cw-dur-fast) var(--cw-ease),
	            background var(--cw-dur-fast) var(--cw-ease);
}

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

.cw-pages .page-numbers.current {
	color: var(--cw-void);
	background: var(--cw-teal);
	border-color: var(--cw-teal);
	font-weight: 500;
}


/* --- Elementor button widget ---------------------------------------------
 * The cw-btn class lands on the widget wrapper, not the anchor, so the anchor
 * needs the treatment explicitly. This also overrides the kit's accent fill,
 * which would otherwise put near-white text on pale green.
 * Marker: cw-elementor-button
 */

.elementor-widget-button a.elementor-button {
	font-family: var(--cw-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--cw-tracking-mono);
	text-transform: uppercase;
	color: var(--cw-accent);
	background-color: transparent;
	border: 1px solid var(--cw-hairline-strong);
	border-radius: var(--cw-radius-s);
	padding: 0.85em 1.6em;
	transition: background-color var(--cw-dur) var(--cw-ease),
	            border-color var(--cw-dur) var(--cw-ease),
	            color var(--cw-dur) var(--cw-ease),
	            box-shadow var(--cw-dur) var(--cw-ease);
}

.elementor-widget-button a.elementor-button:hover,
.elementor-widget-button a.elementor-button:focus-visible {
	color: var(--cw-void);
	background-color: var(--cw-accent);
	border-color: var(--cw-accent);
	box-shadow: var(--cw-glow);
}