/* =============================================================================
   Rich Dad's News — Content (cards, grid, story rows, single/page, archive)
   Depends on tokens.css + base.css + components.css
   ============================================================================= */

/* ---------------------------------------------------------------------------
   NEWS CARD
   --------------------------------------------------------------------------- */
.rdn-card { background: var(--rdn-card-bg); display: flex; flex-direction: column; }
.rdn-card__media { position: relative; display: block; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rdn-transition); }
.rdn-card__media:hover img { transform: scale(1.04); }
.rdn-card__placeholder { display: block; aspect-ratio: 7 / 5; background: var(--rdn-gray-100); }
.rdn-card .rdn-category { position: absolute; top: 0; left: 0; }
.rdn-card__body { padding: var(--rdn-space-s) 0; display: flex; flex-direction: column; gap: var(--rdn-space-xs); }
.rdn-card__title { margin: 0; font-family: var(--rdn-font-heading); font-size: var(--rdn-fs-h2); line-height: var(--rdn-lh-h2); font-weight: 700; text-transform: none; letter-spacing: 0; }
.rdn-card__title a { color: var(--rdn-card-title); }
.rdn-card__title a:hover { color: var(--rdn-card-title-hover); }
.rdn-card__more { margin-top: var(--rdn-space-xs); }

/* ---------------------------------------------------------------------------
   GRID
   --------------------------------------------------------------------------- */
.rdn-grid { display: grid; gap: var(--rdn-space-m); }
.rdn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rdn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rdn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) { .rdn-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rdn-grid--4, .rdn-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .rdn-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   STORY ROW (Top Stories / Other News)
   --------------------------------------------------------------------------- */
.rdn-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rdn-space-l); align-items: center; margin-bottom: var(--rdn-space-l); }
.rdn-story--reverse .rdn-story__media { order: 2; }
.rdn-story__media { position: relative; display: block; overflow: hidden; background: var(--rdn-gray-100); }
.rdn-story__media img { width: 100%; object-fit: cover; }
.rdn-story .rdn-category { position: absolute; top: 0; left: 0; }
.rdn-story__title { margin: var(--rdn-space-xs) 0; font-size: var(--rdn-fs-h1); line-height: var(--rdn-lh-h1); text-transform: none; }
.rdn-story__title a { color: var(--rdn-card-title); }
.rdn-story__title a:hover { color: var(--rdn-card-title-hover); }
.rdn-story__excerpt { color: var(--rdn-body); margin-bottom: var(--rdn-space-s); }

@media (max-width: 768px) {
	.rdn-story { grid-template-columns: 1fr; gap: var(--rdn-space-s); }
	.rdn-story--reverse .rdn-story__media { order: 0; }
	.rdn-story__title { font-size: var(--rdn-fs-h2); line-height: var(--rdn-lh-h2); }
}

/* ---------------------------------------------------------------------------
   HERO BAND + FEATURE IMAGE (single / page)
   --------------------------------------------------------------------------- */
.rdn-posthero { background: var(--rdn-posthero-bg); color: var(--rdn-posthero-text); padding: var(--rdn-space-l) 0; }
.rdn-posthero .rdn-meta { color: var(--rdn-posthero-meta); margin-bottom: var(--rdn-space-xs); }
.rdn-posthero__title { color: var(--rdn-posthero-text); margin: 0; max-width: var(--rdn-content); }
.rdn-posthero__cats { margin-top: var(--rdn-space-s); }
.rdn-feature-image img { width: 100%; max-height: 480px; object-fit: cover; }

/* ---------------------------------------------------------------------------
   SINGLE / PAGE CONTENT
   --------------------------------------------------------------------------- */
.rdn-single__inner, .rdn-page__inner { padding: var(--rdn-space-l) var(--rdn-space-s); }
.rdn-single__content, .rdn-page__content { font-size: var(--rdn-fs-body); line-height: var(--rdn-lh-body); }
.rdn-single__content h2, .rdn-page__content h2 { margin-top: var(--rdn-space-l); }
.rdn-single__content img, .rdn-page__content img { margin: var(--rdn-space-m) 0; }
.rdn-single__content ol, .rdn-single__content ul { margin: var(--rdn-space-s) 0 var(--rdn-space-s) var(--rdn-space-s); }
.rdn-single__tags { margin-top: var(--rdn-space-l); display: flex; flex-wrap: wrap; gap: var(--rdn-space-xs); }
.rdn-single__tags a { font-size: var(--rdn-fs-meta); text-transform: uppercase; color: var(--rdn-muted); border: 1px solid var(--rdn-border); padding: 3px 10px; }
.rdn-single__tags a:hover { color: var(--rdn-red); border-color: var(--rdn-red); }

.rdn-related { padding-top: var(--rdn-space-l); padding-bottom: var(--rdn-space-l); }

/* ---------------------------------------------------------------------------
   BREADCRUMBS + ARCHIVE
   --------------------------------------------------------------------------- */
.rdn-breadcrumbs { padding-top: var(--rdn-space-m); font-size: var(--rdn-fs-meta); color: var(--rdn-muted); }
.rdn-breadcrumbs a { color: var(--rdn-muted); }
.rdn-breadcrumbs a:hover { color: var(--rdn-red); }
.rdn-crumb__sep { margin: 0 6px; }
.rdn-crumb__current { color: var(--rdn-ink); }

.rdn-archive { padding-top: var(--rdn-space-m); padding-bottom: var(--rdn-space-l); }
.rdn-archive__head { margin-bottom: var(--rdn-space-l); }
.rdn-archive__title { margin: 0; }

/* ---------------------------------------------------------------------------
   LOAD MORE + PAGINATION
   --------------------------------------------------------------------------- */
.rdn-loadmore-wrap { display: flex; justify-content: center; margin-top: var(--rdn-space-l); }
.rdn-loadmore { min-width: 220px; }

.pagination, .nav-links { display: flex; justify-content: center; gap: var(--rdn-space-xs); margin-top: var(--rdn-space-l); }
.pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border: 1px solid var(--rdn-border); color: var(--rdn-ink);
	font-family: var(--rdn-font-heading); font-weight: 700; font-size: 14px;
}
.pagination .page-numbers.current { background: var(--rdn-red); color: var(--rdn-white); border-color: var(--rdn-red); }
.pagination a.page-numbers:hover { border-color: var(--rdn-red); color: var(--rdn-red); }

/* ---------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------- */
.rdn-404 { text-align: center; padding: var(--rdn-space-xl) var(--rdn-space-s); display: flex; flex-direction: column; align-items: center; gap: var(--rdn-space-m); }
.rdn-404__code { font-size: 96px; line-height: 1; color: var(--rdn-red); margin: 0; }
.rdn-404__msg { color: var(--rdn-muted); margin: 0; }