/* Pikravetka Editorial Articles v1.7 — portal sections */

.pea-portal-section{
	--pea-accent:#568f73;
	--pea-accent-dark:#365e4a;
	--pea-soft:#f0f6f1;
	--pea-text:#1f3329;
	--pea-muted:#6b786f;
	margin:34px 0;
	padding:22px;
	border-radius:18px;
	background:linear-gradient(135deg,#f2f7f3,#edf5ef);
	border:1px solid rgba(86,143,115,.14);
}


.pea-portal-section__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	margin-bottom:16px;
}

.pea-portal-section__heading-wrap{
	display:flex;
	align-items:center;
	gap:12px;
}

.pea-portal-section__icon{
	font-size:30px;
	line-height:1;
}

.pea-portal-section__title-row{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:10px 16px;
}

.pea-portal-section__title-row h2{
	margin:0;
	font-size:clamp(30px,3vw,42px);
	line-height:1;
	color:var(--pea-text);
}

.pea-portal-section__title-row p{
	margin:0;
	color:var(--pea-muted);
	font-size:14px;
}

.pea-portal-section__all{
	color:var(--pea-accent-dark)!important;
	text-decoration:none!important;
	font-size:13px;
	font-weight:700;
	white-space:nowrap;
}

.pea-portal-tabs-shell{
	display:grid;
	grid-template-columns:40px minmax(0,1fr) 40px;
	align-items:center;
	gap:10px;
	margin-bottom:14px;
}

.pea-portal-tabs{
	display:flex;
	gap:10px;
	overflow-x:auto;
	scroll-behavior:smooth;
	scrollbar-width:none;
	padding:2px 0 8px;
}

.pea-portal-tabs::-webkit-scrollbar{display:none}

.pea-portal-tab{
	flex:0 0 auto;
	min-width:180px;
	min-height:64px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:12px 16px;
	border:1px solid #dbe5de;
	border-radius:10px;
	background:#fff;
	color:#334a3e;
	font:inherit;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	transition:.18s ease;
}

.pea-portal-tab:hover{
	transform:translateY(-1px);
	border-color:rgba(86,143,115,.45);
}

.pea-portal-tab.is-active{
	position:relative;
	background:var(--pea-accent);
	border-color:var(--pea-accent);
	color:#fff;
	box-shadow:0 7px 18px rgba(53,93,73,.13);
}

.pea-portal-tab.is-active::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-8px;
	width:14px;
	height:14px;
	background:var(--pea-accent);
	transform:translateX(-50%) rotate(45deg);
	border-radius:2px;
}

.pea-portal-tab__icon{font-size:20px}

.pea-portal-arrow{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	padding:0;
	border:1px solid #dce6df;
	border-radius:50%;
	background:#fff;
	color:var(--pea-accent-dark);
	font-size:28px;
	line-height:1;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(35,62,49,.05);
}

.pea-portal-cards{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
	transition:opacity .15s ease;
}

.pea-portal-section.is-loading .pea-portal-cards{
	opacity:.4;
	pointer-events:none;
}

.pea-portal-card{
	overflow:hidden;
	display:flex;
	flex-direction:column;
	min-width:0;
	border:1px solid #dfe7e2;
	border-radius:12px;
	background:#fff;
	box-shadow:0 2px 8px rgba(37,61,49,.035);
}

.pea-portal-card__image{
	display:block;
	aspect-ratio:16/8.7;
	overflow:hidden;
	background:#edf3ef;
}

.pea-portal-card__image img,
.pea-portal-card__placeholder{
	width:100%;
	height:100%;
	object-fit:cover;
}

.pea-portal-card__placeholder{
	display:grid;
	place-items:center;
	font-size:38px;
}

.pea-portal-card__body{
	display:flex;
	flex-direction:column;
	flex:1;
	padding:12px 13px 13px;
}

.pea-portal-card__meta{
	color:#849087;
	font-size:10px;
	margin-bottom:7px;
}

.pea-portal-card__category{
	align-self:flex-start;
	margin-bottom:7px;
	padding:4px 7px;
	border-radius:999px;
	background:#e8f2ea;
	color:#47775f;
	font-size:9px;
	font-weight:800;
	text-transform:uppercase;
}

.pea-portal-card h3{
	margin:0 0 7px;
	font-size:17px;
	line-height:1.18;
}

.pea-portal-card h3 a{
	color:#243a2e!important;
	text-decoration:none!important;
}

.pea-portal-card p{
	margin:0 0 12px;
	color:#657168;
	font-size:12px;
	line-height:1.4;
}

.pea-portal-card__more{
	margin-top:auto;
	color:#3f7459!important;
	text-decoration:none!important;
	font-size:12px;
	font-weight:800;
}

.pea-portal-empty,
.pea-portal-admin-note{
	padding:18px;
	border-radius:10px;
	background:#fff;
	color:#66736c;
}

@media(max-width:1050px){
	.pea-portal-cards{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media(max-width:700px){
	.pea-portal-section{
		margin:22px 0;
		padding:14px;
		border-radius:14px;
	}

	.pea-portal-section__head{
		display:block;
		margin-bottom:12px;
	}

	.pea-portal-section__title-row{
		display:block;
	}

	.pea-portal-section__title-row h2{
		font-size:28px;
	}

	.pea-portal-section__title-row p{
		margin-top:4px;
		font-size:12px;
	}

	.pea-portal-section__all{
		display:inline-block;
		margin-top:8px;
		font-size:12px;
	}

	.pea-portal-tabs-shell{
		grid-template-columns:30px minmax(0,1fr) 30px;
		gap:6px;
	}

	.pea-portal-arrow{
		width:30px;
		height:30px;
		font-size:22px;
	}

	.pea-portal-tab{
		min-width:148px;
		min-height:52px;
		padding:9px 12px;
		font-size:12px;
	}

	.pea-portal-cards{
		display:flex;
		gap:10px;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		padding-bottom:4px;
	}

	.pea-portal-cards::-webkit-scrollbar{display:none}

	.pea-portal-card{
		flex:0 0 82%;
		scroll-snap-align:start;
	}

	.pea-portal-card h3{
		font-size:16px;
	}

	.pea-portal-card p{
		font-size:12px;
	}
}


/* =========================================================
   v1.9 — automatske pastelne boje za svaki novi portal blok
   ========================================================= */

/* 1 — sage green */
.pea-portal-section.pea-portal-theme-1{
	--pea-accent:#568f73;
	--pea-accent-dark:#365e4a;
	background:linear-gradient(135deg,#f1f7f2,#eaf3ed);
	border-color:rgba(86,143,115,.17);
}

/* 2 — warm peach */
.pea-portal-section.pea-portal-theme-2{
	--pea-accent:#b96f5c;
	--pea-accent-dark:#8f4f40;
	background:linear-gradient(135deg,#fbf3ef,#f8eae4);
	border-color:rgba(185,111,92,.16);
}

/* 3 — soft sand */
.pea-portal-section.pea-portal-theme-3{
	--pea-accent:#9a7a45;
	--pea-accent-dark:#755c33;
	background:linear-gradient(135deg,#faf7ed,#f3eddc);
	border-color:rgba(154,122,69,.16);
}

/* 4 — muted blue */
.pea-portal-section.pea-portal-theme-4{
	--pea-accent:#66889a;
	--pea-accent-dark:#496778;
	background:linear-gradient(135deg,#f0f5f7,#e7eff3);
	border-color:rgba(102,136,154,.16);
}

/* 5 — soft lavender */
.pea-portal-section.pea-portal-theme-5{
	--pea-accent:#81749a;
	--pea-accent-dark:#625574;
	background:linear-gradient(135deg,#f5f2f8,#ece7f2);
	border-color:rgba(129,116,154,.16);
}

/* 6 — pale mint */
.pea-portal-section.pea-portal-theme-6{
	--pea-accent:#5f8f84;
	--pea-accent-dark:#456b63;
	background:linear-gradient(135deg,#eff8f5,#e5f1ed);
	border-color:rgba(95,143,132,.16);
}

/* Make labels/tabs inherit each block's accent instead of always using green. */
.pea-portal-section .pea-portal-tab.is-active{
	background:var(--pea-accent);
	border-color:var(--pea-accent);
}

.pea-portal-section .pea-portal-tab.is-active::after{
	background:var(--pea-accent);
}

.pea-portal-section .pea-portal-section__all,
.pea-portal-section .pea-portal-arrow,
.pea-portal-section .pea-portal-card__more{
	color:var(--pea-accent-dark)!important;
}

.pea-portal-section .pea-portal-card__category{
	background:color-mix(in srgb, var(--pea-accent) 13%, white);
	color:var(--pea-accent-dark);
}


/* =========================================================
   v2.0 — article carousel + compact mobile
   ========================================================= */

.pea-portal-articles-shell{
	display:grid;
	grid-template-columns:40px minmax(0,1fr) 40px;
	align-items:center;
	gap:10px;
}

.pea-portal-section__content{
	min-width:0;
	overflow:hidden;
}

.pea-portal-cards{
	display:flex !important;
	grid-template-columns:none !important;
	gap:12px;
	overflow-x:auto;
	scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
	padding:2px 1px 6px;
}
.pea-portal-cards::-webkit-scrollbar{display:none}

.pea-portal-card{
	flex:0 0 calc((100% - 36px)/4);
	scroll-snap-align:start;
}

.pea-portal-article-arrow{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	padding:0;
	border:1px solid #dce6df;
	border-radius:50%;
	background:#fff;
	color:var(--pea-accent-dark);
	font-size:28px;
	line-height:1;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(35,62,49,.05);
}
.pea-portal-article-arrow:disabled{opacity:.35;cursor:default}

@media(max-width:1050px) and (min-width:701px){
	.pea-portal-card{flex-basis:calc((100% - 12px)/2)}
}

@media(max-width:700px){
	.pea-portal-section{
		margin:18px 0;
		padding:12px;
		border-radius:13px;
	}
	.pea-portal-section__head{margin-bottom:10px}
	.pea-portal-section__heading-wrap{gap:8px}
	.pea-portal-section__icon{font-size:24px}
	.pea-portal-section__title-row h2{font-size:24px;line-height:1.05}
	.pea-portal-section__title-row p{font-size:11px;line-height:1.35}
	.pea-portal-section__all{font-size:11px;margin-top:6px}

	.pea-portal-tabs-shell,
	.pea-portal-articles-shell{
		grid-template-columns:28px minmax(0,1fr) 28px;
		gap:5px;
	}

	.pea-portal-arrow,
	.pea-portal-article-arrow{
		width:28px;
		height:28px;
		font-size:20px;
	}

	.pea-portal-tab{
		min-width:138px;
		min-height:48px;
		padding:8px 10px;
		font-size:11px;
		border-radius:9px;
	}
	.pea-portal-tab__icon{font-size:17px}

	.pea-portal-card{flex:0 0 88%}
	.pea-portal-card__body{padding:10px 11px 11px}
	.pea-portal-card__meta{font-size:9px;margin-bottom:5px}
	.pea-portal-card__category{font-size:8px;padding:3px 6px;margin-bottom:5px}
	.pea-portal-card h3{font-size:15px;line-height:1.18;margin-bottom:5px}
	.pea-portal-card p{font-size:11px;line-height:1.35;margin-bottom:9px}
	.pea-portal-card__more{font-size:11px}
	.pea-portal-card__image{aspect-ratio:16/9}
}

@media(max-width:420px){
	.pea-portal-card{flex-basis:94%}
}