/*
 * responsive.css
 * Mobile-first responsive breakpoints.
 *
 * Breakpoints:
 *   < 640px   — mobile (default)
 *   ≥ 640px   — sm: small tablets
 *   ≥ 768px   — md: tablets
 *   ≥ 1024px  — lg: desktops
 *   ≥ 1280px  — xl: large desktops
 */

/* ==========================================================================
   SM: 640px+
   ========================================================================== */
@media (min-width: 640px) {

	/* Hero */
	.hero-section__ctas {
		flex-direction: row;
	}

	/* Pro/Con Box */
	.pro-con-box {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   MD: 768px+
   ========================================================================== */
@media (min-width: 768px) {

	/* Container padding */
	.container {
		--container-padding: 2rem;
	}

	/* About bio layout */
	.about-bio-layout {
		grid-template-columns: 240px 1fr;
		gap: var(--space-10);
	}
}

/* ==========================================================================
   LG: 1024px+
   ========================================================================== */
@media (min-width: 1024px) {

	/* Single post: two-column layout */
	.financeblog-single-layout {
		grid-template-columns: 1fr var(--sidebar-width);
	}

	/* About bio layout */
	.about-bio-layout {
		grid-template-columns: 280px 1fr;
		gap: var(--space-12);
	}
}

/* ==========================================================================
   MOBILE-ONLY: < 640px
   ========================================================================== */
@media (max-width: 639px) {

	/* Hero */
	.hero-section {
		min-height: 400px;
	}

	.hero-section .container {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}

	.hero-cta-primary,
	.hero-cta-secondary {
		width: 100%;
		justify-content: center;
	}

	/* Featured categories: single column */
	.featured-categories-grid {
		grid-template-columns: 1fr;
	}

	/* Posts grid: single column */
	.posts-grid--3col,
	.posts-grid--2col {
		grid-template-columns: 1fr;
	}

	/* Trust signals: single column */
	.trust-signals-grid {
		grid-template-columns: 1fr;
	}

	/* Finance ad: force 300x250 max width */
	.finance-ad--desktop {
		display: none;
	}
	.finance-ad--mobile {
		display: block;
	}

	/* Post navigation: single column */
	.entry-post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	/* Single post layout: full width */
	.financeblog-single-layout {
		grid-template-columns: 1fr;
	}

	.financeblog-single-sidebar {
		position: static;
		max-height: none;
	}

	/* Page title */
	.page-title {
		font-size: var(--font-size-2xl);
	}

	/* Pro/con box: stacked */
	.pro-con-box {
		grid-template-columns: 1fr;
	}

	/* About bio: stacked */
	.about-bio-layout {
		grid-template-columns: 1fr;
	}

	.about-bio-image {
		max-width: 240px;
		margin: 0 auto;
	}

	/* Expertise grid: single column */
	.expertise-grid {
		grid-template-columns: 1fr;
	}

	/* Breadcrumbs: wrap on small screens */
	.financeblog-breadcrumbs ol {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   TABLET-ONLY: 640px – 1023px
   ========================================================================== */
@media (min-width: 640px) and (max-width: 1023px) {

	/* Single post: full width on tablet (no sidebar) */
	.financeblog-single-layout {
		grid-template-columns: 1fr;
	}

	.financeblog-single-sidebar {
		position: static;
		max-height: none;
	}

	/* Show both desktop and mobile ads — use desktop size */
	.finance-ad--mobile {
		display: none;
	}
	.finance-ad--desktop {
		display: block;
	}

	/* Featured categories: 2 columns */
	.featured-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Posts grid: 2 columns */
	.posts-grid--3col {
		grid-template-columns: repeat(2, 1fr);
	}

	/* About bio: 2 columns on tablet */
	.about-bio-layout {
		grid-template-columns: 220px 1fr;
	}
}

/* ==========================================================================
   DESKTOP: 1024px+
   ========================================================================== */
@media (min-width: 1024px) {

	/* Desktop: show desktop ads only */
	.finance-ad--mobile {
		display: none;
	}
	.finance-ad--desktop {
		display: block;
	}

	/* Navigation */
	.financeblog-breadcrumbs ol {
		flex-wrap: nowrap;
	}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {

	/* Hide navigation, sidebar, ads, and CTAs */
	.site-header,
	.financeblog-single-sidebar,
	.finance-ad,
	.affiliate-disclosure-banner,
	.broker-picks-cta-btn,
	.after-post-cta-area,
	.financeblog-footer-disclaimer,
	.site-footer {
		display: none !important;
	}

	.financeblog-single-layout {
		grid-template-columns: 1fr;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		color: #666;
	}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.post-card:hover,
	.featured-category-card:hover {
		transform: none;
	}

	.post-card:hover .post-card__thumbnail {
		transform: none;
	}
}