/* =====================================================================
   APA Resources — main template styles
   Colors/fonts default to values matched from the screenshots. If
   wp-content/themes/accio-astra/css/global.css already defines CSS
   custom properties, point the vars below at those instead of the hex
   fallbacks — the fallback only applies when no theme variable exists.
   ===================================================================== */

.apa-resources-main {
	--apa-green: #0a5c36;
	--apa-green-dark: var(--accio-primary, #0c3b2e);
	--apa-navy: var(--accio-secondary, #142a4a);
	--apa-gold: var(--accio-accent, #e0a83e);
	 --apa-gold-dark: #c9a227;
	--apa-text-dark: var(--accio-text, #16324a);
	--apa-text-muted: #5b6b7a;
	--apa-border: #e6e9ec;
	--apa-bg-soft: #f7f8f6;
	--apa-radius: 10px;
	/* --apa-font: var(--accio-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); */

	/* font-family: var(--apa-font); */
	color: var(--apa-text-dark);
	background: #fff;
}

.apa-resources-main * {
	box-sizing: border-box;
	font-family: var(--font-sans);
}

.apa-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

/* True full-bleed helper — breaks a section out of the theme's
   content wrapper so it spans the full viewport width regardless of
   parent container padding. */
.apa-full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.apa-section {
	padding: 64px 0;
}

.apa-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--apa-gold-dark);
	color: #fff;
	font-size: 13px;
	margin-bottom: 14px;
}

.apa-section-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--apa-navy);
	margin: 0 0 8px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--apa-gold-dark);
	display: inline-block;
}

.apa-section-desc {
	color: var(--apa-text-muted);
	max-width: 720px;
	margin: 14px 0 32px;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.apa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 22px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.apa-btn-white {
	background: #fff;
	color: var(--apa-green-dark);
}

.apa-btn-white:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	background: var(--apa-bg-soft);
	color: var(--apa-green-dark);
}

.apa-btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

.apa-btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.apa-btn-outline {
	background: #fff;
	color: var(--apa-text-dark);
	border-color: var(--apa-border);
}

.apa-btn-outline:hover {
	border-color: var(--apa-navy);
}

/* ---------------------------------------------------------------
   1. Hero (full-bleed)
--------------------------------------------------------------- */
.apa-hero {
	padding: 90px 0 56px;
	/* background: linear-gradient(135deg, var(--apa-green) 0%, var(--apa-navy) 100%); */
	color: #fff;
}

.apa-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--apa-gold);
	color: var(--apa-gold);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.apa-hero-title {
	font-size: 46px;
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 18px;
	max-width: 720px;
	color:#ffffff;
}

.apa-hero-desc {
	max-width: 640px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 30px;
}

.apa-hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.apa-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.apa-stat {
	display: flex;
	flex-direction: column;
}

.apa-stat-num {
	font-size: 30px;
	font-weight: 800;
	color: var(--apa-gold);
	line-height: 1;
}

.apa-stat-label {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------------------------------------------------------------
   2. Featured investigation (boxed card, not full-bleed)
--------------------------------------------------------------- */
.apa-featured-wrap {
	padding-top: 48px;
	padding-bottom: 0;
}

.apa-featured-card {
	/* background: linear-gradient(135deg, var(--apa-green) 0%, var(--apa-navy) 100%); */
	color: #fff;
	border-radius: 16px;
	padding: 48px;
}

.apa-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.apa-badge-outline {
	background: rgba(224, 168, 62, 0.15);
	color: var(--apa-gold);
}

.apa-featured-title {
	font-size: 3rem;
	font-weight: 700;
	margin: 0 0 16px;
	max-width: 850px;
}

.apa-featured-title a {
	color: #fff;
	text-decoration: none;
}

.apa-featured-excerpt {
	max-width: 640px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.7;
	margin-bottom: 20px;
}

.apa-featured-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	margin-bottom: 28px;
}

.apa-dot {
	opacity: 0.6;
}

/* ---------------------------------------------------------------
   Card grids (shared: podcasts/films + library)
--------------------------------------------------------------- */
.apa-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.apa-media-card,
.apa-library-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--apa-border);
	border-radius: var(--apa-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.apa-media-card:hover,
.apa-library-card:hover {
	box-shadow: 0 10px 24px rgba(12, 41, 32, 0.12);
	transform: translateY(-2px);
}

.apa-media-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #eef1e9, #dfe4dc);
	overflow: hidden;
}

.apa-media-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apa-format-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(10, 20, 20, 0.75);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
}

.apa-editors-ribbon {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--apa-gold);
	color: #1a1200;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.03em;
	padding: 4px 8px;
	border-radius: 4px;
}

.apa-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--apa-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.apa-duration-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 11px;
	padding: 3px 7px;
	border-radius: 4px;
}

.apa-media-body {
	padding: 16px;
}

.apa-media-title,
.apa-library-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--apa-navy);
	margin: 0;
	line-height: 1.4;
}

/* ---------------------------------------------------------------
   4. Learning paths
--------------------------------------------------------------- */
.apa-path-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.apa-path-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--apa-border);
	border-radius: var(--apa-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.apa-path-card:hover {
	box-shadow: 0 10px 24px rgba(12, 41, 32, 0.12);
	transform: translateY(-2px);
}

.apa-path-banner {
	position: relative;
	height: 96px;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.apa-accent-green .apa-path-banner {
	background: linear-gradient(135deg, var(--apa-green-dark), #1c5c46);
}

.apa-accent-navy .apa-path-banner {
	background: linear-gradient(135deg, var(--apa-navy), #1f3a63);
}

.apa-accent-gold .apa-path-banner {
	background: linear-gradient(135deg, #d99a35, var(--apa-gold));
}

.apa-path-icon {
	font-size: 26px;
	color: #fff;
	opacity: 0.9;
}

.apa-level-badge {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	padding: 4px 9px;
	border-radius: 20px;
}

.apa-accent-gold .apa-level-badge {
	color: var(--apa-navy);
	background: rgba(255, 255, 255, 0.55);
}

.apa-path-body {
	padding: 20px;
}

.apa-path-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--apa-navy);
	margin: 0 0 8px;
}

.apa-path-body p {
	font-size: 14px;
	color: var(--apa-text-muted);
	line-height: 1.6;
	margin: 0 0 18px;
	min-height: 44px;
}

.apa-path-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--apa-text-muted);
}

.apa-path-link {
	color: var(--apa-green-dark);
	font-weight: 700;
}

/* ---------------------------------------------------------------
   5. Most read / downloaded / trending / editor's picks
--------------------------------------------------------------- */
.apa-lists-section {
	/* background: var(--apa-bg-soft); */
}
.apa-lp-py-0{
 padding:0px;
}
.apa-lp-mb-3{
	margin-bottom:30px;
}
.apa-lists-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.apa-list-card {
	background: #fff;
	border: 1px solid var(--apa-border);
	border-radius: var(--apa-radius);
	padding: 22px;
}

.apa-list-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--apa-navy);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--apa-gold);
}

.apa-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.apa-list-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.apa-list-num {
	flex: 0 0 auto;
	font-weight: 800;
	color: var(--apa-gold);
	font-size: 13px;
	line-height: 1.6;
}

.apa-list-item-body a {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--apa-text-dark);
	text-decoration: none;
	line-height: 1.4;
	margin-bottom: 4px;
}

.apa-list-item-body a:hover {
	color: var(--apa-green-dark);
}

.apa-list-meta {
	font-size: 12px;
	color: var(--apa-text-muted);
	display: flex;
	align-items: center;
	gap: 5px;
}

/* ---------------------------------------------------------------
   6. Browse the library
--------------------------------------------------------------- */
.apa-library-form {
	margin-top: 6px;
}

.apa-search-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--apa-border);
	border-radius: 10px;
	padding: 8px 16px;
}

.apa-search-icon {
	color: var(--apa-text-muted);
}

.apa-search-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 14px;
	padding: 10px 0;
	font-family: inherit;
}

.apa-search-note {
	font-size: 12.5px;
	color: var(--apa-text-muted);
	margin: 8px 0 20px;
}

.apa-filter-panel {
	background: var(--apa-bg-soft);
	border: 1px solid var(--apa-border);
	border-radius: 10px;
	padding: 20px;
	margin: 16px 0 24px;
}

/*.apa-filter-group {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--apa-border);
}

.apa-filter-group:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.apa-filter-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--apa-text-muted);
	margin-bottom: 12px;
}

.apa-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: 16px;
}

.apa-filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--apa-text-dark);
	cursor: pointer;
}

.apa-filter-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.apa-filter-actions .apa-btn-white {
	background: var(--apa-green-dark);
	color: #fff;
}

.apa-clear-link {
	font-size: 13px;
	color: var(--apa-text-muted);
	text-decoration: underline;
	cursor: pointer;
}*/


.apa-filter-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.apa-filter-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apa-filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--apa-text-muted);
}

.apa-filter-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--apa-border);
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-family: inherit;
	color: var(--apa-text-dark);
}

.apa-filter-actions {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--apa-border);
}

.apa-clear-link {
	font-size: 13px;
	color: var(--apa-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.apa-browse-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.apa-result-count {
	font-size: 14px;
	color: var(--apa-text-muted);
}

.apa-sort {
	display: flex;
	align-items: center;
	gap: 10px;
}

.apa-sort label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--apa-text-muted);
}

.apa-sort-select {
	border: 1px solid var(--apa-border);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	font-family: inherit;
	color: var(--apa-text-dark);
	background: #fff;
}

.apa-card-date {
	font-size: 12px;
	color: var(--apa-text-muted);
	margin-bottom: 6px;
}

.apa-library-excerpt {
	font-size: 13px;
	color: var(--apa-text-muted);
	line-height: 1.6;
	margin: 8px 0 14px;
}

.apa-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.apa-tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--apa-green-dark);
	background: rgba(12, 59, 46, 0.08);
	border-radius: 20px;
	padding: 4px 10px;
}

.apa-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--apa-text-muted);
	padding-top: 12px;
	border-top: 1px solid var(--apa-border);
}

.apa-no-results {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--apa-text-muted);
	padding: 40px 0;
}

.apa-pagination {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.apa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid var(--apa-border);
	color: var(--apa-text-dark);
	text-decoration: none;
	font-size: 13px;
}

.apa-pagination .page-numbers.current {
	background: var(--apa-green-dark);
	border-color: var(--apa-green-dark);
	color: #fff;
}


.apa-library-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1024px) {
	.apa-card-grid,
	.apa-library-grid,
	.apa-path-grid,
	.apa-lists-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.apa-hero-title {
		font-size: 36px;
	}

	.apa-filter-grid {
	grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 640px) {
	.apa-card-grid,
	.apa-library-grid,
	.apa-path-grid,
	.apa-lists-grid {
		grid-template-columns: 1fr;
	}

	.apa-hero {
		padding: 64px 0 40px;
	}

	.apa-hero-title {
		font-size: 30px;
	}

	.apa-hero-stats {
		gap: 28px;
	}

	.apa-featured-card {
		padding: 28px;
	}

	.apa-browse-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.apa-search-bar {
		flex-wrap: wrap;
	}

	.apa-filter-grid {
	    grid-template-columns: 1fr;
    }
}