/* ============================================================
   RR Category Grid — v1.1.1
   Brand: Burgundy #800020 | Dark #1A1A1A | Grey #666666
   Fonts: Cormorant Garamond (name) | Inter (count)
   Ratio: controlat prin --rr-cg-ratio (setat din shortcode)
   ============================================================ */

/* ---------- Grid container ---------- */
.rr-category-grid {
	/* Variabile setate din shortcode via inline <style> */
	--rr-cg-columns: 3;
	--rr-cg-ratio:   16 / 9;

	/* Variabile de design */
	--rr-cg-gap:        24px;
	--rr-cg-radius:     4px;
	--rr-cg-primary:    #800020;
	--rr-cg-gold:       #D9B382;
	--rr-cg-text:       #1A1A1A;
	--rr-cg-grey:       #333333;
	--rr-cg-bg:         #FFFFFF;
	--rr-cg-bg-alt:     #F9F9F9;
	--rr-cg-border:     rgba(217, 179, 130, 0.35);

	display: grid;
	grid-template-columns: repeat( var(--rr-cg-columns), 1fr );
	gap: var(--rr-cg-gap);
	width: 100%;
}

/* ---------- Card ---------- */
.rr-category-grid__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--rr-cg-bg);
	border: 1px solid var(--rr-cg-border);
	border-radius: var(--rr-cg-radius);
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	will-change: transform;
}

.rr-category-grid__card:hover,
.rr-category-grid__card:focus-visible {
	border-color: var(--rr-cg-primary);
	box-shadow: 0 8px 28px rgba(128, 0, 32, 0.12);
	transform: translateY(-3px);
	outline: none;
}

/* ---------- Imagine — ratio din variabila ---------- */
.rr-category-grid__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: var(--rr-cg-ratio);
	overflow: hidden;
	background: var(--rr-cg-bg-alt);
}

.rr-category-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.5s ease;
}

.rr-category-grid__card:hover .rr-category-grid__image,
.rr-category-grid__card:focus-visible .rr-category-grid__image {
	transform: scale(1.04);
}

/* Overlay Burgundy subtil la hover */
.rr-category-grid__overlay {
	position: absolute;
	inset: 0;
	background: var(--rr-cg-primary);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.rr-category-grid__card:hover .rr-category-grid__overlay,
.rr-category-grid__card:focus-visible .rr-category-grid__overlay {
	opacity: 0.08;
}

/* ---------- Body text ---------- */
.rr-category-grid__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
	border-top: 1px solid var(--rr-cg-border);
	background: var(--rr-cg-bg);
	transition: border-color 0.3s ease;
	flex: 1; /* ocupa tot spatiul disponibil in card */
}

.rr-category-grid__card:hover .rr-category-grid__body,
.rr-category-grid__card:focus-visible .rr-category-grid__body {
	border-color: var(--rr-cg-primary);
}

/* Titlu categorie — Cormorant Garamond
   Folosim !important pe font-size pentru a bate eventualele
   stiluri h3 injected de Elementor sau tema activa */
.rr-category-grid__name {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: #1A1A1A !important;
	letter-spacing: 0.01em !important;
	transition: color 0.25s ease;
}

.rr-category-grid__card:hover .rr-category-grid__name,
.rr-category-grid__card:focus-visible .rr-category-grid__name {
	color: #800020 !important;
}

/* Count — Inter, gri mediu */
.rr-category-grid__count {
	font-family: 'Inter', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	color: #666666 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	margin-top: auto !important; /* aliniaza count la baza cardului */
	padding-top: 6px;
}

/* ---------- Responsive ---------- */

/* Desktop mare 1400px+ */
@media (min-width: 1400px) {
	.rr-category-grid {
		--rr-cg-gap: 28px;
	}
	.rr-category-grid__name {
		font-size: 1.35rem !important;
	}
}

/* Desktop mediu 1025px - 1399px */
@media (max-width: 1399px) and (min-width: 1025px) {
	.rr-category-grid__name {
		font-size: 1.2rem !important;
	}
}

/* Tablet landscape 769px - 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
	.rr-category-grid {
		--rr-cg-gap: 20px;
	}
	.rr-category-grid__name {
		font-size: 1.15rem !important;
	}
	.rr-category-grid__count {
		font-size: 0.72rem !important;
	}
}

/* Tablet portrait 481px - 768px */
@media (max-width: 768px) and (min-width: 481px) {
	.rr-category-grid {
		--rr-cg-gap: 14px;
	}
	.rr-category-grid__body {
		padding: 10px 12px 12px;
		gap: 4px;
	}
	.rr-category-grid__name {
		font-size: 1rem !important;
	}
	.rr-category-grid__count {
		font-size: 0.68rem !important;
	}
}

/* Mobil 361px - 480px */
@media (max-width: 480px) and (min-width: 361px) {
	.rr-category-grid {
		--rr-cg-gap: 10px;
	}
	.rr-category-grid__body {
		padding: 8px 10px 10px;
		gap: 3px;
	}
	.rr-category-grid__name {
		font-size: 1rem !important;
	}
	.rr-category-grid__count {
		font-size: 0.62rem !important;
	}
}

/* Mobil mic 360px si mai jos */
@media (max-width: 360px) {
	.rr-category-grid {
		--rr-cg-gap: 8px;
	}
	.rr-category-grid__body {
		padding: 6px 8px 8px;
		gap: 2px;
	}
	.rr-category-grid__name {
		font-size: 1rem !important;
	}
	.rr-category-grid__count {
		font-size: 0.58rem !important;
	}
}

/* ---------- Empty state ---------- */
.rr-category-grid__empty {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: #333333;
	margin: 0;
}