/* =============================================================
   EPEKA — custom komponente za Divi 5 (icon kartice, statistika, accordion)
   Vse barve/presledki gredo skozi CSS spremenljivke zgoraj,
   da jih je lahko uskladiti z obstoječo Divi globalno paleto.
   ============================================================= */

:root {
	/* Opeka rdeča — literalna referenca na gradbeni material + ime zadruge */
	--epeka-accent: #b5532c;
	--epeka-accent-soft: #f1e3da;

	/* Globoka skrilavka za naslove/temna ozadja */
	--epeka-ink: #283038;

	/* Mahovo zelena — trajnostnost / skupnost */
	--epeka-moss: #5c7a5c;

	--epeka-bg: #ffffff;
	--epeka-bg-soft: #f7f5f2;
	--epeka-border: #e6e1da;
	--epeka-text: #3a3a38;
	--epeka-text-muted: #6b6863;

	--epeka-font: inherit; /* podeduje Divi globalno pisavo */
	--epeka-radius: 14px;
	--epeka-gap: 28px;
}

/* -------------------------------------------------------------
   1) ICON KARTICE
   ------------------------------------------------------------- */
.epeka-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--epeka-gap);
	margin: 32px 0;
	font-family: var(--epeka-font);
}

.epeka-card {
	background: var(--epeka-bg);
	border: 1px solid var(--epeka-border);
	border-radius: var(--epeka-radius);
	padding: 28px 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.epeka-card:hover,
.epeka-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px -16px rgba(40, 48, 56, 0.35);
}

.epeka-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--epeka-accent-soft);
	color: var(--epeka-accent);
	margin-bottom: 16px;
}

.epeka-card__icon-svg {
	width: 26px;
	height: 26px;
}

.epeka-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--epeka-ink);
	margin: 0 0 10px;
}

.epeka-card__body {
	color: var(--epeka-text-muted);
	font-size: 0.97rem;
	line-height: 1.6;
}

.epeka-card__body p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------
   2) STATISTIKA S ŠTETJEM
   ------------------------------------------------------------- */
.epeka-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--epeka-gap);
	margin: 40px 0;
	text-align: center;
	font-family: var(--epeka-font);
}

.epeka-stat {
	padding: 12px 8px;
	border-top: 3px solid var(--epeka-accent);
}

.epeka-stat__number,
.epeka-stat__suffix {
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 800;
	color: var(--epeka-ink);
	line-height: 1;
}

.epeka-stat__suffix {
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.epeka-stat__label {
	margin: 10px 0 0;
	color: var(--epeka-text-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------
   3) ACCORDION
   ------------------------------------------------------------- */
.epeka-accordion {
	max-width: 760px;
	margin: 32px 0;
	border-top: 1px solid var(--epeka-border);
	font-family: var(--epeka-font);
}

.epeka-accordion__item {
	border-bottom: 1px solid var(--epeka-border);
}

.epeka-accordion__heading {
	margin: 0;
}

.epeka-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 18px 4px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--epeka-ink);
	text-align: left;
}

.epeka-accordion__trigger:focus-visible {
	outline: 2px solid var(--epeka-accent);
	outline-offset: 2px;
}

.epeka-accordion__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.epeka-accordion__icon::before,
.epeka-accordion__icon::after {
	content: "";
	position: absolute;
	background: var(--epeka-moss);
	transition: transform 0.25s ease;
}

.epeka-accordion__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

.epeka-accordion__icon::after {
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

.epeka-accordion__trigger[aria-expanded="true"] .epeka-accordion__icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

.epeka-accordion__panel-inner {
	padding: 0 4px 20px;
	color: var(--epeka-text-muted);
	line-height: 1.65;
}

.epeka-accordion__panel-inner p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------
   Dostopnost / responsivnost
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.epeka-card,
	.epeka-accordion__icon::after {
		transition: none !important;
	}
}

@media (max-width: 480px) {
	.epeka-cards,
	.epeka-stats {
		grid-template-columns: 1fr;
	}
}