/* ==========================================================================
   DailyEvolve Design System — base, typography, reusable components
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--de-font-sans);
	color: var(--de-body);
	background: var(--de-bg);
	line-height: 1.65;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	font-family: var(--de-font-head);
	color: var(--de-ink);
	line-height: 1.25;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

a { color: var(--de-blue); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--de-blue-dark); }

img { max-width: 100%; height: auto; display: block; }

/* Layout container ------------------------------------------------------- */
.de-container {
	max-width: var(--de-container);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Badges / category pills ------------------------------------------------ */
.de-badge {
	display: inline-block;
	font-family: var(--de-font-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--de-green);
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}
.de-badge:hover { color: #fff; background: var(--de-green-dark); }

/* Buttons ---------------------------------------------------------------- */
.de-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--de-font-head);
	font-weight: 600;
	font-size: .95rem;
	padding: 11px 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.de-btn:active { transform: translateY(1px); }
.de-btn--primary { background: var(--de-green); color: #fff; }
.de-btn--primary:hover { background: var(--de-green-dark); color: #fff; }
.de-btn--blue { background: var(--de-blue); color: #fff; }
.de-btn--blue:hover { background: var(--de-blue-dark); color: #fff; }
.de-btn--ghost { background: transparent; color: var(--de-ink); border-color: var(--de-line); }
.de-btn--ghost:hover { border-color: var(--de-ink); color: var(--de-ink); }

/* Meta text -------------------------------------------------------------- */
.de-meta {
	font-size: .82rem;
	color: var(--de-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
}
.de-meta a { color: var(--de-muted); }
.de-meta a:hover { color: var(--de-ink); }

/* Post card -------------------------------------------------------------- */
.de-card {
	background: var(--de-bg);
	border: 1px solid var(--de-line);
	border-radius: var(--de-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.de-card:hover { box-shadow: var(--de-shadow); transform: translateY(-2px); }
.de-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--de-bg-soft); }
.de-card__media img { width: 100%; height: 100%; object-fit: cover; }
.de-card__badge { position: absolute; top: 12px; left: 12px; }
.de-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.de-card__title { font-size: 1.1rem; margin: 0; }
.de-card__title a { color: var(--de-ink); }
.de-card__title a:hover { color: var(--de-green); }
.de-card__excerpt { font-size: .92rem; color: var(--de-body); margin: 0; }

/* Overlay card (sidebar feature) ---------------------------------------- */
.de-card--overlay { position: relative; min-height: 180px; }
.de-card--overlay .de-card__media { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; }
.de-card--overlay .de-card__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
}
.de-card--overlay .de-card__body { position: relative; z-index: 2; justify-content: flex-end; }
.de-card--overlay .de-card__title a,
.de-card--overlay .de-meta,
.de-card--overlay .de-meta a { color: #fff; }

/* Section headings ------------------------------------------------------- */
.de-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--de-ink);
}
.de-section-head h2 { margin: 0; font-size: 1.35rem; }
.de-section-head a { font-size: .85rem; font-weight: 600; }

/* Ad slots --------------------------------------------------------------- */
.de-ad {
	margin: 28px auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.de-ad__label {
	display: block;
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--de-muted);
	margin-bottom: 6px;
}
.de-ad--sidebar { position: sticky; top: 90px; }

/* Visually hidden -------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
}