/* ==========================================================================
   ΡΟΗ ΕΙΔΗΣΕΩΝ — page-roi-eidiseon.php scoped polish.
   ALL rules are scoped under .roi-page (this file is auto-enqueued site-wide,
   so scoping prevents bleed). Reuses foundation tokens (critical.css :root) and
   the shared .section-header / .post-list / .post / .aside* components from
   main.css; here we add the two-column grid, the filter chips, feed-card polish
   and the sticky sidebar treatment.
   ========================================================================== */

/* ---- Shell: tighten the archive-wrap top padding for this page ---- */
.roi-page.archive-wrap{padding-top:24px;padding-bottom:64px;}
.roi-page .section-header{margin-bottom:22px;}

/* ==========================================================================
   Two-column layout: MAIN (~2/3) + STICKY SIDEBAR (~1/3, fixed 324px).
   Collapses to one column ≤900px; sidebar is hidden on phone (≤640px).
   ========================================================================== */
.roi-page .roi-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) 324px;
	gap:48px;
	align-items:start;
}
.roi-page .roi-main{min-width:0;}

/* ==========================================================================
   Category filter chips — pill buttons. Default = light surface + hairline,
   hover = ink, active = accent-red fill. Wraps on desktop, becomes a
   horizontal swipe rail on narrow screens.
   ========================================================================== */
.roi-page .roi-filter{
	display:flex;
	flex-flow:row wrap;
	gap:9px;
	margin:0 0 26px;
	padding:0 0 22px;
	border-bottom:1px solid var(--color-line);
}
.roi-page .roi-chip{
	appearance:none;
	-webkit-appearance:none;
	display:inline-flex;
	align-items:center;
	margin:0;
	padding:8px 16px;
	font-family:var(--font-sans);
	font-weight:600;
	font-size:12px;
	letter-spacing:.5px;
	line-height:1;
	text-transform:uppercase;
	white-space:nowrap;
	color:var(--color-ink);
	background:var(--color-bg-alt);
	border:1px solid var(--color-line-strong);
	border-radius:999px;
	cursor:pointer;
	transition:color var(--transition),background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.roi-page .roi-chip:hover{
	color:#fff;
	background:var(--color-ink);
	border-color:var(--color-ink);
	transform:translateY(-1px);
}
.roi-page .roi-chip:focus-visible{
	outline:2px solid var(--color-accent-red);
	outline-offset:2px;
}
.roi-page .roi-chip.is-active{
	color:#fff;
	background:var(--color-accent-red);
	border-color:var(--color-accent-red);
	box-shadow:0 6px 16px -8px rgba(208,27,40,.7);
}
.roi-page .roi-chip.is-active:hover{
	background:var(--color-accent-red-dark);
	border-color:var(--color-accent-red-dark);
	transform:none;
}
/* chip whose category has no posts in the loaded feed — dimmed, still clickable */
.roi-page .roi-chip.is-empty{
	color:var(--color-faint);
	background:transparent;
	border-color:var(--color-line);
}
.roi-page .roi-chip.is-empty:hover{
	color:var(--color-muted);
	background:var(--color-bg-alt);
	border-color:var(--color-line-strong);
	transform:none;
}
/* an empty chip that is nonetheless selected still reads as active (accent fill) */
.roi-page .roi-chip.is-empty.is-active{
	color:#fff;
	background:var(--color-accent-red);
	border-color:var(--color-accent-red);
}

/* ==========================================================================
   Feed — reuses .post-list / .post from main.css. Here: a touch more breathing
   room, a hover lift, and the CRITICAL hidden-card rule (the shared .post sets
   display:flex, which beats the native [hidden] display:none, so we re-assert it
   for filtered-out cards).
   ========================================================================== */
.roi-page .roi-feed{margin:0;}
.roi-page .roi-post{padding:24px 0;}
.roi-page .roi-post:first-child{padding-top:0;}
.roi-page .roi-post .post-thumbnail{flex-basis:230px;width:230px;}
.roi-page .roi-post .title{font-size:21px;}
.roi-page .roi-post .vignette{margin-bottom:1px;}
.roi-page .roi-post .post-thumbnail img,
.roi-page .roi-post .post-thumbnail .img{transition:transform .55s cubic-bezier(.33,1,.68,1);}

/* hide filtered-out cards — MUST out-specify .post{display:flex} */
.roi-page .roi-feed .roi-post[hidden]{display:none!important;}

/* empty-state message when a chip matches nothing in the loaded feed */
.roi-page .roi-empty{
	margin:28px 0 0;
	padding:26px 22px;
	text-align:center;
	font-family:var(--font-sans);
	font-size:15px;
	color:var(--color-muted);
	background:var(--color-bg-alt);
	border:1px dashed var(--color-line-strong);
}
.roi-page .roi-empty[hidden]{display:none;}

/* ==========================================================================
   Sidebar — sticky (inherits .aside.is-sticky from main.css ≥981px). Ad widgets
   get a hairline separator so they read as distinct blocks beneath ΔΗΜΟΦΙΛΗ.
   ========================================================================== */
.roi-page .roi-aside{min-width:0;}
.roi-page .roi-aside .aside__widget--ad{
	padding-top:24px;
	border-top:1px solid var(--color-line);
}
/* first ad widget sits right under the popular list — keep the rule, trim the gap */
.roi-page .roi-aside .aside__widget--ad + .aside__widget--ad{padding-top:20px;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
	.roi-page .roi-layout{grid-template-columns:minmax(0,1fr) 290px;gap:36px;}
	.roi-page .roi-post .post-thumbnail{flex-basis:200px;width:200px;}
}

/* collapse to a single column — sidebar drops below the feed */
@media (max-width:900px){
	.roi-page .roi-layout{grid-template-columns:1fr;gap:44px;}
	.roi-page .roi-aside{
		border-top:1px solid var(--color-line);
		padding-top:28px;
	}
}

/* on phone: hide the whole sidebar (per brief), tighten chips into a scroll rail */
@media (max-width:640px){
	.roi-page .roi-aside{display:none;}
	.roi-page .roi-filter{
		flex-wrap:nowrap;
		overflow-x:auto;
		padding-bottom:14px;
		margin-bottom:20px;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.roi-page .roi-filter::-webkit-scrollbar{display:none;}
	.roi-page .roi-chip{flex:0 0 auto;}
}

@media (max-width:520px){
	.roi-page .roi-post{padding:18px 0;}
	.roi-page .roi-post .post-thumbnail{flex-basis:120px;width:120px;}
	.roi-page .roi-post .title{font-size:17px;}
}