/* ==========================================================
   BOPA Press & Media — Frontend Styles
   All selectors prefixed with .bopa-press to avoid Divi conflicts.
   ========================================================== */

.bopa-press {
	/* Brand tokens — all CSS variables scoped here */
	--bopa-slate:  #384A59;
	--bopa-cobalt: #0D2E91;
	--bopa-sky:    #66C2FF;
	--bopa-pink:   #CC0596;
	--bopa-sand:   #F0EBE5;
	--bopa-white:  #FFFFFF;
	--bopa-ink:    #1B2733;
	--bopa-muted:  #6B7886;
	--bopa-line:   #E4DED6;

	--bopa-font-heading: 'Montserrat', system-ui, sans-serif;
	--bopa-font-body:    'Nunito Sans', system-ui, sans-serif;

	--bopa-shadow-sm: 0 1px 2px rgba(56,74,89,.06), 0 1px 3px rgba(56,74,89,.04);
	--bopa-shadow-lg: 0 18px 40px rgba(13,46,145,.14), 0 6px 14px rgba(56,74,89,.08);

	--bopa-r-sm: 8px;
	--bopa-r-md: 12px;
	--bopa-r-lg: 16px;
	--bopa-r-pill: 999px;

	--bopa-ease: cubic-bezier(.2,.8,.2,1);

	font-family: var(--bopa-font-body);
	color: var(--bopa-ink);
	line-height: 1.6;
}

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

.bopa-press img { max-width: 100%; display: block; }
.bopa-press a { color: inherit; text-decoration: none; }
.bopa-press button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.bopa-press h2,
.bopa-press h3 {
	font-family: var(--bopa-font-heading);
	color: var(--bopa-slate);
	margin: 0 0 .5em;
	letter-spacing: -.01em;
	line-height: 1.2;
}

/* ==========================================================
   FEATURED SECTION
   ========================================================== */
.bopa-press .bopa-featured-section { margin-bottom: 56px; }

.bopa-press .bopa-featured-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 24px;
	flex-wrap: wrap;
}
.bopa-press .bopa-featured-head h2 {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	margin: 0;
}
.bopa-press .bopa-featured-meta {
	font-size: 14px;
	color: var(--bopa-muted);
}

.bopa-press .bopa-featured-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}
.bopa-press .bopa-featured-grid--1 { grid-template-columns: 1fr; max-width: 720px; }

/* Individual feature card */
.bopa-press .bopa-feature {
	display: grid;
	/*grid-template-columns: 200px 1fr;*/
	background: var(--bopa-white);
	border: 1px solid var(--bopa-line);
	border-radius: var(--bopa-r-lg);
	overflow: hidden;
	position: relative;
	transition: transform .4s var(--bopa-ease), box-shadow .4s var(--bopa-ease), border-color .4s var(--bopa-ease);
}
.bopa-press .bopa-feature::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--bopa-cobalt), var(--bopa-sky), var(--bopa-pink));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--bopa-ease);
	z-index: 2;
}
.bopa-press .bopa-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--bopa-shadow-lg);
}
.bopa-press .bopa-feature:hover::after { transform: scaleX(1); }

.bopa-press .bopa-feature__image {
	display: block;
	overflow: hidden;
	background: var(--bopa-sand);
}
.bopa-press .bopa-feature__image img,
.bopa-press .bopa-feature__image svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--bopa-ease);
}
.bopa-press .bopa-feature:hover .bopa-feature__image img,
.bopa-press .bopa-feature:hover .bopa-feature__image svg { transform: scale(1.04); }

.bopa-press .bopa-feature__body { padding: 24px 28px; display: flex; flex-direction: column; }
.bopa-press .bopa-feature__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.bopa-press .bopa-feature__tag {
	font-family: var(--bopa-font-heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bopa-pink);
}
.bopa-press .bopa-feature__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
}
.bopa-press .bopa-feature__title a { color: var(--bopa-slate); transition: color .3s var(--bopa-ease); }
.bopa-press .bopa-feature:hover .bopa-feature__title a { color: var(--bopa-cobalt); }
.bopa-press .bopa-feature__desc {
	color: var(--bopa-muted);
	font-size: 14px;
	margin: 0 0 16px;
}
.bopa-press .bopa-feature__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bopa-line);
	font-size: 12px;
}
.bopa-press .bopa-feature__source { font-weight: 700; color: var(--bopa-slate); }
.bopa-press .bopa-feature__date   { color: var(--bopa-muted); }

/* ==========================================================
   LISTING SECTION (sidebar + grid)
   ========================================================== */
.bopa-press .bopa-layout {
	display: grid;
	gap: 48px;
	align-items: start;
}
.bopa-press .bopa-layout--with-sidebar { grid-template-columns: 280px 1fr; }
.bopa-press .bopa-layout--no-sidebar   { grid-template-columns: 1fr; }

/* Sidebar */
.bopa-press .bopa-sidebar {
	position: sticky;
	top: 32px;
	background: var(--bopa-white);
	border: 1px solid var(--bopa-line);
	border-radius: var(--bopa-r-lg);
	padding: 28px;
	box-shadow: var(--bopa-shadow-sm);
}
.bopa-press .bopa-sidebar__title {
	font-family: var(--bopa-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--bopa-slate);
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bopa-press .bopa-sidebar__count {
	font-size: 12px;
	color: var(--bopa-muted);
	font-weight: 600;
	background: var(--bopa-sand);
	padding: 4px 10px;
	border-radius: var(--bopa-r-pill);
}

.bopa-press .bopa-filter-group { margin-bottom: 28px; }
.bopa-press .bopa-filter-group:last-of-type { margin-bottom: 0; }
.bopa-press .bopa-filter-label {
	display: block;
	font-family: var(--bopa-font-heading);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bopa-muted);
	margin-bottom: 12px;
}

/* Search */
.bopa-press .bopa-search-wrap { position: relative; }
.bopa-press .bopa-search-wrap svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bopa-muted);
	pointer-events: none;
}
.bopa-press .bopa-search {
	width: 100%;
	padding: 12px 14px 12px 42px;
	border: 1.5px solid var(--bopa-line);
	border-radius: var(--bopa-r-md);
	font-family: var(--bopa-font-body);
	font-size: 14px;
	background: var(--bopa-sand);
	color: var(--bopa-ink);
	transition: border-color .25s var(--bopa-ease), background .25s var(--bopa-ease), box-shadow .25s var(--bopa-ease);
}
.bopa-press .bopa-search:focus {
	outline: none;
	border-color: var(--bopa-cobalt);
	background: var(--bopa-white);
	box-shadow: 0 0 0 4px rgba(13,46,145,.1);
}

/* Category buttons */
.bopa-press .bopa-cat-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bopa-press .bopa-cat-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--bopa-r-md);
	font-size: 14px;
	font-weight: 600;
	color: var(--bopa-slate);
	text-align: left;
	transition: background .25s var(--bopa-ease), color .25s var(--bopa-ease), transform .25s var(--bopa-ease);
}
.bopa-press .bopa-cat-btn:hover { background: var(--bopa-sand); transform: translateX(2px); }
.bopa-press .bopa-cat-btn.is-active {
	background: var(--bopa-cobalt);
	color: var(--bopa-white);
	transform: none;
}
.bopa-press .bopa-pill-count {
	font-size: 12px;
	background: rgba(56,74,89,.08);
	padding: 2px 8px;
	border-radius: var(--bopa-r-pill);
	font-weight: 700;
}
.bopa-press .bopa-cat-btn.is-active .bopa-pill-count {
	background: rgba(255,255,255,.18);
	color: var(--bopa-white);
}

/* Year select */
.bopa-press .bopa-year-select {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--bopa-line);
	border-radius: var(--bopa-r-md);
	font-family: var(--bopa-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--bopa-slate);
	background: var(--bopa-sand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23384A59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.bopa-press .bopa-year-select:focus {
	outline: none;
	border-color: var(--bopa-cobalt);
	box-shadow: 0 0 0 4px rgba(13,46,145,.1);
}

/* Reset */
.bopa-press .bopa-reset-btn {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bopa-pink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap .25s var(--bopa-ease);
}
.bopa-press .bopa-reset-btn:hover { gap: 10px; }

/* Mobile toggle */
.bopa-press .bopa-filter-toggle {
	display: none;
	width: 100%;
	padding: 14px 18px;
	background: var(--bopa-cobalt);
	color: var(--bopa-white);
	border-radius: var(--bopa-r-md);
	font-family: var(--bopa-font-heading);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 24px;
	align-items: center;
	justify-content: space-between;
}

/* Results bar */
.bopa-press .bopa-results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.bopa-press .bopa-results-heading {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}
.bopa-press .bopa-results-meta {
	font-size: 14px;
	color: var(--bopa-muted);
}

/* Grid */
.bopa-press .bopa-grid {
	display: grid;
	gap: 24px;
}
.bopa-press .bopa-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bopa-press .bopa-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bopa-press .bopa-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card */
.bopa-press .bopa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bopa-white);
	border: 1px solid var(--bopa-line);
	border-radius: var(--bopa-r-lg);
	overflow: hidden;
	transition: transform .4s var(--bopa-ease), box-shadow .4s var(--bopa-ease), border-color .4s var(--bopa-ease);
	animation: bopaCardIn .5s var(--bopa-ease) backwards;
}
@keyframes bopaCardIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.bopa-press .bopa-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bopa-shadow-lg);
	border-color: rgba(13,46,145,.2);
}

.bopa-press .bopa-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bopa-sand);
	border-bottom: 1px solid var(--bopa-line);
}
.bopa-press .bopa-card__image img,
.bopa-press .bopa-card__image svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--bopa-ease);
}
.bopa-press .bopa-card:hover .bopa-card__image img,
.bopa-press .bopa-card:hover .bopa-card__image svg { transform: scale(1.04); }

.bopa-press .bopa-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}
.bopa-press .bopa-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 12px;
}
.bopa-press .bopa-card__source {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bopa-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--bopa-slate);
}
.bopa-press .bopa-card__favicon {
	width: 28px;
	height: 28px;
	border-radius: var(--bopa-r-sm);
	background: var(--bopa-sand);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	color: var(--bopa-cobalt);
	flex-shrink: 0;
}

/* Badges */
.bopa-press .bopa-badge {
	display: inline-block;
	font-family: var(--bopa-font-heading);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--bopa-r-pill);
	white-space: nowrap;
}
.bopa-press .bopa-badge--press        { background: rgba(13,46,145,.1); color: var(--bopa-cobalt); }
.bopa-press .bopa-badge--awards       { background: rgba(204,5,150,.1); color: var(--bopa-pink); }
.bopa-press .bopa-badge--podcasts     { background: rgba(102,194,255,.18); color: #1378B5; }
.bopa-press .bopa-badge--partnerships { background: rgba(56,74,89,.1); color: var(--bopa-slate); }

.bopa-press .bopa-card__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 12px;
	flex: 1;
}
.bopa-press .bopa-card__title a {
	color: var(--bopa-slate);
	/*background-image: linear-gradient(var(--bopa-cobalt), var(--bopa-cobalt));*/
	background-size: 0% 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .4s var(--bopa-ease), color .3s var(--bopa-ease);
}
.bopa-press .bopa-card:hover .bopa-card__title a {
	color: var(--bopa-cobalt);
	background-size: 100% 1.5px;
}

.bopa-press .bopa-card__desc {
	color: var(--bopa-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bopa-press .bopa-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid var(--bopa-line);
	margin-top: auto;
}
.bopa-press .bopa-card__date {
	font-size: 12px;
	color: var(--bopa-muted);
	font-weight: 600;
	letter-spacing: .04em;
}
.bopa-press .bopa-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bopa-font-heading);
	font-size: 13px;
	font-weight: 700;
	color: var(--bopa-cobalt);
	transition: gap .25s var(--bopa-ease), color .25s var(--bopa-ease);
}
.bopa-press .bopa-card:hover .bopa-card__link { gap: 10px; color: var(--bopa-pink); }

/* Empty state */
.bopa-press .bopa-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 24px;
	background: var(--bopa-white);
	border: 1px dashed var(--bopa-line);
	border-radius: var(--bopa-r-lg);
}
.bopa-press .bopa-empty h3 { font-size: 20px; margin-bottom: 8px; }
.bopa-press .bopa-empty p { color: var(--bopa-muted); margin: 0; }

/* Load-more */
.bopa-press .bopa-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: 56px;
}
.bopa-press .bopa-loadmore {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bopa-slate);
	color: var(--bopa-white);
	padding: 16px 32px;
	border-radius: var(--bopa-r-pill);
	font-family: var(--bopa-font-heading);
	font-weight: 600;
	font-size: 15px;
	transition: background .3s var(--bopa-ease), transform .3s var(--bopa-ease), box-shadow .3s var(--bopa-ease);
}
.bopa-press .bopa-loadmore:hover {
	background: var(--bopa-pink);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(204,5,150,.28);
}
.bopa-press .bopa-loadmore[hidden] { display: none; }
.bopa-press .bopa-loadmore[disabled] {
	opacity: .6; cursor: wait; transform: none; background: var(--bopa-muted);
}

/* Loading state on grid */
.bopa-press .bopa-grid.is-loading { opacity: .55; pointer-events: none; transition: opacity .2s var(--bopa-ease); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
	.bopa-press .bopa-feature { grid-template-columns: 1fr; }
	.bopa-press .bopa-feature__image { aspect-ratio: 16 / 9; }
	.bopa-press .bopa-grid--cols-3,
	.bopa-press .bopa-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.bopa-press .bopa-layout--with-sidebar { grid-template-columns: 240px 1fr; gap: 32px; }
}

@media (max-width: 768px) {
	.bopa-press .bopa-featured-grid { grid-template-columns: 1fr; }
	.bopa-press .bopa-grid--cols-2,
	.bopa-press .bopa-grid--cols-3,
	.bopa-press .bopa-grid--cols-4 { grid-template-columns: 1fr; }

	.bopa-press .bopa-layout--with-sidebar { grid-template-columns: 1fr; gap: 0; }
	.bopa-press .bopa-filter-toggle { display: flex; }

	.bopa-press .bopa-sidebar {
		position: static;
		max-height: 0;
		padding: 0 28px;
		overflow: hidden;
		border: 0;
		box-shadow: none;
		margin-bottom: 0;
		transition: max-height .4s var(--bopa-ease), padding .4s var(--bopa-ease), margin .4s var(--bopa-ease);
	}
	.bopa-press .bopa-sidebar.is-open {
		max-height: 1200px;
		padding: 28px;
		border: 1px solid var(--bopa-line);
		margin-bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bopa-press *,
	.bopa-press *::before,
	.bopa-press *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}