/* =============================================================================
   Rich Dad's News — Homepage modules
   Depends on tokens.css + base.css + components.css + content.css
   ============================================================================= */

.rdn-section { padding: var(--rdn-space-xl) 0; }
.rdn-section__action { display: flex; justify-content: center; margin-top: var(--rdn-space-l); }

/* ---------------------------------------------------------------------------
   HERO SLIDER
   --------------------------------------------------------------------------- */
.rdn-hero { padding-top: var(--rdn-space-l); }
.rdn-hero__swiper { position: relative; }
.rdn-hero__slide { display: grid; grid-template-columns: 7fr 3fr; min-height: 480px; }
.rdn-hero__media { position: relative; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.rdn-hero__card {
	background: var(--rdn-posthero-bg);
	color: var(--rdn-hero-text);
	padding: var(--rdn-space-l);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--rdn-space-s);
}
.rdn-hero__card .rdn-meta { color: var(--rdn-posthero-meta); }
.rdn-hero__title { color: var(--rdn-hero-text); margin: 0; }
.rdn-hero__title a { color: var(--rdn-hero-text); }
.rdn-hero__title a:hover { color: var(--rdn-red); }
.rdn-hero__more { color: var(--rdn-white); }
.rdn-hero__cta { align-self: flex-start; }

.rdn-hero__nav {
	position: absolute;
	bottom: var(--rdn-space-s);
	left: var(--rdn-space-s);
	right: calc(30% + var(--rdn-space-s));
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 5;
}
.rdn-hero__pagination { display: flex; gap: 8px; width: auto; }
.rdn-hero__pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--rdn-hero-dot); opacity: 1; border-radius: 50%; }
.rdn-hero__pagination .swiper-pagination-bullet-active { background: var(--rdn-hero-dot-active); }
.rdn-hero__arrows { display: flex; gap: 4px; }
.rdn-hero__prev, .rdn-hero__next { background: rgba(0,0,0,0.4); border: 0; color: var(--rdn-hero-arrow); width: 40px; height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rdn-hero__prev:hover, .rdn-hero__next:hover { background: var(--rdn-red); }

@media (max-width: 768px) {
	.rdn-hero__slide { grid-template-columns: 1fr; min-height: 0; }
	.rdn-hero__nav { right: var(--rdn-space-s); bottom: auto; top: calc(56vw - 56px); }
}

/* ---------------------------------------------------------------------------
   EDITOR'S PICK
   --------------------------------------------------------------------------- */
.rdn-editors__feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rdn-space-l); margin-bottom: var(--rdn-space-l); }
.rdn-feature-card__media { position: relative; display: block; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-feature-card__media img { width: 100%; object-fit: cover; }
.rdn-feature-card .rdn-category { position: absolute; top: 0; left: 0; }
.rdn-feature-card__body { padding: var(--rdn-space-s) 0; }
.rdn-feature-card__title { margin: var(--rdn-space-xs) 0; text-transform: none; font-family: var(--rdn-font-heading); font-size: var(--rdn-fs-h2); }
.rdn-feature-card__title a { color: var(--rdn-card-title); }
.rdn-feature-card__title a:hover { color: var(--rdn-card-title-hover); }
.rdn-feature-card__excerpt { color: var(--rdn-body); }

.rdn-editors__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rdn-space-m); }
.rdn-thumb-card { position: relative; }
.rdn-thumb-card__media { display: block; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-thumb-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.rdn-thumb-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--rdn-space-s); background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); }
.rdn-thumb-card__body .rdn-category { margin-bottom: 4px; }
.rdn-thumb-card__title { margin: 0; font-family: var(--rdn-font-heading); font-size: 15px; line-height: 1.25; }
.rdn-thumb-card__title a { color: var(--rdn-white); }

@media (max-width: 768px) {
	.rdn-editors__feature { grid-template-columns: 1fr; }
	.rdn-editors__thumbs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   CATEGORIES (tabs + grid + sidebar)
   --------------------------------------------------------------------------- */
.rdn-categories__layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--rdn-space-xl); }

.rdn-tabs { display: flex; flex-wrap: wrap; gap: var(--rdn-space-m); border-bottom: 1px solid var(--rdn-border); margin-bottom: var(--rdn-space-l); }
.rdn-tab {
	background: none; border: 0; cursor: pointer;
	padding: 0 0 var(--rdn-space-s);
	font-family: var(--rdn-font-heading); font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: 0.5px;
	color: var(--rdn-tab-text);
	border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.rdn-tab:hover { color: var(--rdn-tab-text-active); }
.rdn-tab.is-active { color: var(--rdn-tab-text-active); border-bottom-color: var(--rdn-tab-underline-active); }

#rdn-cat-grid.is-loading { opacity: 0.5; transition: opacity var(--rdn-transition); }
.rdn-grid__empty { color: var(--rdn-muted); }

/* Recent posts sidebar */
.rdn-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rdn-space-s); }
.rdn-recent__item { display: grid; grid-template-columns: 102px 1fr; gap: var(--rdn-space-s); align-items: center; }
.rdn-recent__media { display: block; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-recent__media img { width: 102px; height: 77px; object-fit: cover; }
.rdn-recent__title { display: block; margin-top: 4px; font-family: var(--rdn-font-heading); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--rdn-card-title); }
.rdn-recent__title:hover { color: var(--rdn-card-title-hover); }

@media (max-width: 980px) {
	.rdn-categories__layout { grid-template-columns: 1fr; gap: var(--rdn-space-l); }
}