/* Rotocon — site styles (design tokens 1:1 din Webflow). Folosit de template-urile PHP ale CPT-urilor. */

:root {
	/* Colors */
	--brand: #ff0000;
	--brand-darker: #b30000;
	--dark: #403e3d;
	--dark-secondary: #555555;
	--dark-faded: rgba(53, 50, 51, .2);
	--light: #ffffff;
	--light-secondary: #f2f1ed;
	--light-creme: #c2bcb2;
	--light-faded: rgba(255, 255, 255, .2);

	/* Typography */
	--font-primary: "General Sans", Verdana, sans-serif;
	--fs-display: 7rem;
	--fs-h1: 5rem;
	--fs-h2: 4rem;
	--fs-h3: 3rem;
	--fs-h4: 2.5rem;
	--fs-h5: 2rem;
	--fs-h6: 1.5rem;
	--fs-large: 1.25rem;
	--fs-main: 1rem;
	--fs-small: .875rem;
	--lh-tight: 1.1;
	--lh-base: 1.4;

	/* Spacing */
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 2.5rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--section-main: 7rem;

	/* Layout */
	--container: 90rem;
	--gutter: 1rem;
	--radius-small: .5rem;
	--radius-main: 1rem;
	--border-main: .094rem;
}

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

body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--fs-main);
	line-height: var(--lh-base);
	color: var(--dark);
	background: var(--light);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: 600; margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.u-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.btn {
	display: inline-block;
	padding: .75rem 1.5rem;
	border-radius: var(--radius-main);
	background: var(--brand);
	color: var(--light);
	font-weight: 600;
	transition: background .2s ease;
}
.btn:hover { background: var(--brand-darker); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--light);
	border-bottom: var(--border-main) solid var(--dark-faded);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 5rem;
}
.site-header__logo { font-size: var(--fs-h5); font-weight: 700; letter-spacing: -.02em; }
.site-nav { display: flex; gap: var(--space-6); align-items: center; }
.site-nav a { font-weight: 500; }
.site-nav a:hover { color: var(--brand); }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
	background: var(--dark);
	color: var(--light);
	padding-block: var(--space-8);
	margin-top: var(--section-main);
}
.site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); }
.site-footer a:hover { color: var(--brand); }

/* ─── Single (news/product) ──────────────────────────────────────────────── */
.entry { padding-block: var(--space-8); }
.entry__header { max-width: 60rem; margin-bottom: var(--space-6); }
.entry__title { font-size: var(--fs-h2); }
.entry__meta { color: var(--dark-secondary); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; }
.entry__featured { width: 100%; border-radius: var(--radius-main); margin-bottom: var(--space-6); object-fit: cover; max-height: 36rem; }
.entry__content { max-width: 48rem; font-size: var(--fs-large); }
.entry__content img { border-radius: var(--radius-small); margin-block: var(--space-5); }
.region-badge {
	display: inline-block; font-size: var(--fs-small); font-weight: 600;
	padding: .25rem .75rem; border-radius: 100vw; background: var(--light-secondary); color: var(--dark);
	margin-right: .5rem; text-transform: capitalize;
}

/* ─── Archive grid ───────────────────────────────────────────────────────── */
.archive-head { padding-block: var(--space-8) var(--space-6); }
.card-grid {
	display: grid; gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	padding-bottom: var(--section-main);
}
.card {
	border: var(--border-main) solid var(--dark-faded);
	border-radius: var(--radius-main);
	overflow: hidden;
	background: var(--light);
	transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.card__media { aspect-ratio: 16/10; background: var(--light-secondary); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-4); }
.card__title { font-size: var(--fs-h6); margin-bottom: var(--space-3); }
.card__excerpt { color: var(--dark-secondary); font-size: var(--fs-main); }

/* ─── Responsive (breakpoints Webflow) ───────────────────────────────────── */
@media (max-width: 991px) {
	:root { --fs-h2: 3rem; --section-main: 5rem; }
	.entry__title { font-size: var(--fs-h3); }
}
@media (max-width: 767px) {
	:root { --fs-h2: 2.5rem; --fs-h3: 2rem; }
	.site-nav { gap: var(--space-4); font-size: var(--fs-small); }
	.entry__content { font-size: var(--fs-main); }
}