/* ===========================================================
   The Rabbit Hole — homepage & shared card styles
   Mobile-first. Black / white / purple (#661E9A) accent only.
   =========================================================== */

.rh-home { padding-top: 24px; padding-bottom: 40px; }

/* ---- Hero ---- */
.rh-hero { margin-bottom: 28px; }
.rh-hero-link { display: block; text-decoration: none; color: inherit; }
.rh-hero-media { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #111; border-radius: 2px; }
.rh-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#1a1a1a,#000); }
.rh-hero-body { padding: 18px 0 0; }
.rh-hero-cat { display: inline-block; background: #661E9A; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 10px; }
.rh-hero-title { font-size: 28px; line-height: 1.15; font-weight: 900; margin: 0 0 10px; color: #0a0a0a; }
.rh-hero-excerpt { font-size: 15px; line-height: 1.5; color: #333; margin: 0 0 10px; }
.rh-hero-meta { font-size: 12.5px; color: #777; text-transform: uppercase; letter-spacing: .03em; }

@media (min-width: 782px) {
	.rh-hero-link { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
	.rh-hero-media { aspect-ratio: 4/3; }
	.rh-hero-title { font-size: 40px; }
	.rh-hero-excerpt { font-size: 16.5px; }
}

/* ---- Secondary tiered grid ---- */
.rh-secondary-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.rh-secondary-lg .rh-card-title { font-size: 20px; }
@media (min-width: 600px) {
	.rh-secondary-grid { grid-template-columns: repeat(2, 1fr); }
	.rh-secondary-lg { grid-column: span 2; }
	.rh-secondary-lg .rh-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
}
@media (min-width: 1000px) {
	.rh-secondary-grid { grid-template-columns: repeat(3, 1fr); }
	.rh-secondary-lg { grid-column: span 3; }
}

/* ---- Story card ---- */
.rh-card { display: block; text-decoration: none; color: inherit; }
.rh-card-thumb { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; background: #eee; }
.rh-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.rh-card:hover .rh-card-thumb img { transform: scale(1.04); }
.rh-card-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#e8ebed,#cfd3d6); }
.rh-card-cat { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.rh-card-body { padding-top: 10px; }
.rh-card-title { font-size: 15px; line-height: 1.32; font-weight: 700; margin: 0 0 6px; color: #0a0a0a; }
.rh-card:hover .rh-card-title { color: #661E9A; }
.rh-card-excerpt { font-size: 13px; color: #555; line-height: 1.45; margin: 0 0 6px; }
.rh-card-meta { font-size: 11.5px; color: #999; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Homepage layout: main + sidebar ---- */
.rh-home-layout { display: block; }
.rh-home-sidebar { margin-top: 30px; }
@media (min-width: 1000px) {
	.rh-home-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
	.rh-home-sidebar { margin-top: 0; position: sticky; top: 20px; }
}

/* ---- Category sections ---- */
.rh-cat-section { margin: 34px 0; padding-top: 22px; border-top: 3px solid #111; }
.rh-cat-section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rh-cat-section-title { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0; color: #0a0a0a; }
.rh-cat-section-title::after { content: ''; display: block; width: 40px; height: 3px; background: #661E9A; margin-top: 6px; }
.rh-cat-more { font-size: 12.5px; font-weight: 700; color: #661E9A; text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.rh-cat-more:hover { text-decoration: underline; }
.rh-cat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .rh-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rh-cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Newsletter box (sidebar) ---- */
.rh-newsletter-box { border: 2px solid #111; padding: 18px; margin-top: 24px; }
.rh-newsletter-box h3 { margin: 0 0 6px; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.rh-newsletter-box p { margin: 0 0 12px; font-size: 12.5px; color: #555; }

/* ---- Article recirculation block spacing (see plugin CSS for card styles) ---- */
.rhc-recirculation { max-width: 100%; }

body.single-post .entry-content, body.single-post article { max-width: 100%; }