/* Cardenius — components.css
	Shared, reusable components: section label, store badge, media frame/placeholder,
	post card (the ONE card system), pagination, download CTA. */

/* ---------- Section label ---------- */
.section-label {
	--rule: var(--cd-line);
	display: flex;
	align-items: center;
	gap: 14px;
	font: 500 11px/1 var(--font-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cd-teal-deep);
}
.section-label__mark { flex: none; width: 8px; height: 8px; background: var(--cd-teal-bright); }
.section-label__rule { flex: 1; min-width: 24px; height: 1px; background: var(--rule); }
.section-label__aside { white-space: nowrap; }
.section-label--dark { --rule: rgba(29, 233, 210, .4); color: var(--cd-teal-bright); }
@media (max-width: 559px) { .section-label__aside { display: none; } }

/* ---------- Store badges ---------- */
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store-badge {
	--badge-h: 56px;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--badge-h) * .16);
	height: var(--badge-h);
	padding: 0 calc(var(--badge-h) * .2);
	background: #000;
	border: 1px solid #A6A6A6;
	border-radius: calc(var(--badge-h) * .16);
	color: #fff;
	text-decoration: none;
	transition: transform .25s var(--ease-out), border-color .25s;
}
.store-badge:hover { color: #fff; border-color: var(--cd-teal-bright); transform: translateY(-2px); }
.store-badge--lg { --badge-h: 60px; }
.store-badge__icon { flex: none; width: calc(var(--badge-h) * .56); height: calc(var(--badge-h) * .56); }
.store-badge__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.store-badge__top { font-size: calc(var(--badge-h) * .17); font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.store-badge__name { font-size: calc(var(--badge-h) * .4); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- Media frame + placeholder ---------- */
.media-frame { position: relative; overflow: hidden; background: var(--cd-mint); border: 1px solid var(--cd-navy); }
.media-frame__image { width: 100%; height: 100%; object-fit: cover; }

/* CSS-only placeholder (alternative to the generated SVG placeholder assets) */
.media-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	min-height: 200px;
	padding: 28px 30px;
	overflow: hidden;
	background:
		linear-gradient(rgba(29, 233, 210, .12) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(29, 233, 210, .12) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(135deg, var(--cd-navy), #0B2A33);
	color: #E8F3F1;
	font-family: var(--font-mono);
}
.media-placeholder__index,
.media-placeholder__ratio { position: absolute; top: 24px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.media-placeholder__index { left: 28px; color: var(--cd-teal-bright); }
.media-placeholder__ratio { right: 28px; opacity: .7; }
.media-placeholder__label { font: 500 clamp(14px, 1.2vw, 17px)/1.4 var(--font-display); }

/* ---------- Post card (single reusable card; layout via modifiers) ---------- */
.post-card {
	position: relative;
	display: flex;
	min-width: 0;
	background: var(--cd-surface);
	border: 1px solid var(--cd-navy);
	counter-increment: post-index;
	transition: background .25s;
}
.post-card:hover, .post-card:focus-within { background: var(--cd-paper-alt); }

.post-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	color: var(--cd-navy);
}
.post-card__link:hover { color: var(--cd-navy); }

.post-card__media {
	position: relative;
	flex: 1 0 auto;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--cd-navy);
	background: var(--cd-mint);
}
.post-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-out);
}
.post-card:hover .post-card__image { transform: scale(1.035); }

.post-card__content {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 2.2vw, 32px);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font: 500 11px/1.3 var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cd-teal-deep);
}
.post-card__meta > * { white-space: nowrap; }
.post-card__meta > * + *::before { content: "/"; margin-right: 14px; opacity: .5; }
.post-card__badge {
	padding: 5px 9px;
	background: var(--cd-teal-bright);
	color: var(--cd-navy-deep);
}
.post-card__meta > .post-card__badge + *::before { content: none; margin: 0; }
.post-card__index { margin-left: auto; color: var(--cd-subtle); }
.post-card__index::before { content: counter(post-index, decimal-leading-zero) !important; margin: 0 !important; opacity: 1 !important; }

.post-card__title {
	font: 800 clamp(22px, 2vw, 30px)/1.08 var(--font-display);
	letter-spacing: -.035em;
	overflow-wrap: break-word;
	text-wrap: balance;
	transition: color .2s;
}
.post-card:hover .post-card__title { color: var(--cd-teal-deep); }

.post-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.55;
	color: var(--cd-muted);
}

.post-card__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--cd-navy);
	font: 700 15px var(--font-display);
}
.post-card__arrow { color: var(--cd-teal); font-size: 24px; line-height: 1; transition: transform .25s var(--ease-out); }
.post-card:hover .post-card__arrow { transform: translateX(6px); }

/* Modifier: large (lead card in grid) */
.post-card--large .post-card__content { gap: 20px; padding: clamp(24px, 3vw, 44px); }
.post-card--large .post-card__title { font-size: clamp(28px, 3.2vw, 50px); line-height: 1.02; letter-spacing: -.04em; }
.post-card--large .post-card__excerpt { font-size: 18px; max-width: 62ch; }

/* Modifier: wide + compact (horizontal) */
.post-card--wide .post-card__link,
.post-card--compact .post-card__link { flex-direction: row; }
.post-card--wide .post-card__media,
.post-card--compact .post-card__media { flex: 0 0 52%; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--cd-navy); }
.post-card--wide .post-card__content,
.post-card--compact .post-card__content { flex: 1; min-width: 0; }
.post-card--wide .post-card__title { font-size: clamp(24px, 2.6vw, 40px); }
.post-card--compact .post-card__media { flex-basis: 40%; min-height: 220px; }
.post-card--compact .post-card__excerpt { -webkit-line-clamp: 2; }

/* Modifier: featured (editorial lead story) */
.post-card--featured .post-card__link { flex-direction: row; }
.post-card--featured .post-card__media { flex: 0 0 62%; aspect-ratio: 16 / 10; border-bottom: 0; border-right: 1px solid var(--cd-navy); }
.post-card--featured .post-card__content { flex: 1; justify-content: space-between; gap: 28px; padding: clamp(24px, 3.2vw, 56px); }
.post-card--featured .post-card__title { font-size: clamp(32px, 3.9vw, 66px); line-height: .98; letter-spacing: -.045em; }
.post-card--featured .post-card__excerpt { font-size: clamp(17px, 1.3vw, 19px); -webkit-line-clamp: 6; }
.post-card--featured .post-card__more { font-size: 16px; }

@media (max-width: 999px) {
	.post-card--featured .post-card__link,
	.post-card--wide .post-card__link { flex-direction: column; }
	.post-card--featured .post-card__media,
	.post-card--wide .post-card__media { flex: 1 0 auto; min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--cd-navy); }
}
@media (max-width: 639px) {
	.post-card--compact .post-card__link { flex-direction: column; }
	.post-card--compact .post-card__media { flex: 1 0 auto; min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--cd-navy); }
}

/* ---------- Pagination ---------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.pagination__status { font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cd-subtle); }
.pagination__list { display: flex; border: 1px solid var(--cd-navy); background: var(--cd-surface); }
.pagination__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 52px;
	height: 52px;
	padding: 0 18px;
	border-right: 1px solid var(--cd-navy);
	font: 500 13px var(--font-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cd-navy);
	transition: background .2s, color .2s;
}
.pagination__list > :last-child .pagination__item { border-right: 0; }
a.pagination__item:hover { background: var(--cd-navy); color: #fff; }
.pagination__item.is-current { background: var(--cd-teal-bright); color: var(--cd-navy-deep); }

/* ---------- Download CTA (compact, dark) ---------- */
.download-cta {
	position: relative;
	overflow: hidden;
	background: var(--cd-navy-deep);
	color: var(--cd-on-dark);
}
.download-cta__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(29, 233, 210, .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(29, 233, 210, .1) 1px, transparent 1px);
	background-size: 80px 80px;
	animation: cd-grid 90s linear infinite;
}
.download-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(28px, 5vw, 80px);
	padding-block: clamp(56px, 7vw, 112px);
}
.download-cta__title {
	margin-top: clamp(20px, 2.6vw, 36px);
	font: 900 clamp(44px, 6.4vw, 108px)/.88 var(--font-display);
	letter-spacing: -.055em;
	text-transform: uppercase;
}
.download-cta__title-line { display: block; }
.download-cta__title-line--outline { color: transparent; -webkit-text-stroke: 2px var(--cd-on-dark); }
.download-cta__title-line--accent { color: var(--cd-teal-bright); }
.download-cta__body { display: flex; flex-direction: column; gap: 28px; }
.download-cta__text {
	max-width: 440px;
	padding-left: 20px;
	border-left: 2px solid var(--cd-teal-bright);
	font-size: 19px;
	line-height: 1.6;
	color: var(--cd-on-dark-muted);
}
.download-cta__note { font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cd-on-dark-dim); }

@media (max-width: 899px) {
	.download-cta__inner { grid-template-columns: 1fr; }
}