/*
 * Daily Post — responsive overrides
 * Desktop: 1200px+ (base styles in style.css)
 * Tablet:  768px – 1199px
 * Mobile:  below 768px
 */

/* -----------------------------------------------------------
   Tablet: 768px – 1199px
----------------------------------------------------------- */
@media (max-width: 1199px) {
	.wrap{ padding:0 28px; }

	.hero{
		grid-template-columns:1fr;
		grid-template-areas:"feature" "left" "right";
		gap:32px;
	}
	.hero-side{ flex-direction:row; flex-wrap:wrap; gap:24px; }
	.hero-side-item{ flex:1 1 calc(50% - 12px); border-bottom:none; padding-bottom:0; }

	.content-grid{ grid-template-columns:1fr 260px; gap:36px; }

	.card-grid{ grid-template-columns:repeat(2,1fr); }
	.top-stories-grid{ grid-template-columns:repeat(2,1fr); }
	.archive-grid{ grid-template-columns:repeat(2,1fr); }
	.related-grid{ grid-template-columns:repeat(2,1fr); }

	.split{ grid-template-columns:1fr; gap:28px; }

	.picks-grid{ gap:36px 24px; }
	.pick-card-caption{ right:24px; padding:18px 20px 20px; }
	.pick-card-caption h3{ font-size:17px; }

	.trending-grid{ grid-template-columns:repeat(3,1fr); }
	.trending-grid .pop-item:nth-child(3n){ border-right:none; }
	.latest-categories-grid{ grid-template-columns:repeat(2,1fr); }

	.footer-grid{ grid-template-columns:1fr 1fr; gap:36px 40px; }

	.art-title{ font-size:36px; }
	.cat-head h1{ font-size:38px; }

	/* Header: tighten the two nav-row menus so they fit side by side */
	.primary-menu{ gap:20px; }
	.secondary-nav-inner{ gap:20px; }
	.category-scroll-list{ gap:16px; }
	.news-ticker-compact .news-ticker-track{ max-width:220px; }

	.contact-grid{ grid-template-columns:1fr; gap:40px; max-width:640px; }
	.advertise-placements{ grid-template-columns:repeat(2,1fr); }
	.about-mv{ gap:28px; }
}

/* -----------------------------------------------------------
   Mobile: below 768px
----------------------------------------------------------- */
@media (max-width: 767px) {
	.wrap{ padding:0 20px; }
	main{ padding-top:28px; }

	/* Utility bar: keep it short */
	.utility-right a:not(:last-child){ display:none; }
	.utility-social{ padding-left:12px; }

	/* News ticker: tighter on small screens */
	.news-ticker-inner{ padding:8px 0; gap:12px; }
	.news-ticker-item{ font-size:12px; }
	.news-ticker-list{ gap:32px; padding-right:32px; }

	/* Header: collapse to hamburger + logo + search; nav row becomes a drawer */
	.masthead-inner{ padding:16px 0; }
	.site-logo{ font-size:22px; }
	.site-logo-p{ font-size:24px; }
	.site-logo-word{ font-size:15px; }
	.secondary-nav-row{ display:none; }
	.subscribe-btn{ display:none; }
	.menu-toggle{ display:flex; }
	.header-search .wrap{ padding:0 20px; }

	/* Utility bar: shrink the ticker so date/social always fit */
	.news-ticker-compact .news-ticker-track{ max-width:160px; }

	/* Hero */
	.hero{ padding-bottom:32px; margin-bottom:32px; gap:24px; }
	.hero-feature-overlay{ padding:20px 18px 18px; }
	.hero-feature-overlay h1, .hero-feature-overlay h2{ font-size:24px; }
	.hero-feature-nav{ width:32px; height:32px; }
	.hero-side{ flex-direction:column; gap:18px; }
	.hero-side-item{ flex:1 1 auto; border-bottom:1px solid var(--border); padding-bottom:18px; }
	.hero-side-item:last-child{ border-bottom:none; padding-bottom:0; }
	.hero-side-item .post-thumb{ width:76px; height:76px; }

	/* Sidebar moves below main content on mobile */
	.content-grid{ grid-template-columns:1fr; gap:48px; padding-bottom:48px; }

	.main-col > section{ margin-bottom:44px; }

	.card-grid{ grid-template-columns:1fr; gap:28px; }
	.top-stories-grid{ grid-template-columns:1fr; gap:24px; }
	.top-card-caption{ right:16px; padding:14px 16px 16px; }
	.archive-grid{ grid-template-columns:1fr; gap:28px; }
	.related-grid{ grid-template-columns:1fr; gap:24px; }

	.section-head h2{ font-size:20px; }

	.split{ grid-template-columns:1fr; gap:24px; }
	.split-feature h3{ font-size:19px; }

	.picks-grid{ grid-template-columns:1fr; gap:28px; }
	.pick-card-caption{ right:16px; padding:16px 18px 18px; }
	.pick-card-caption h3{ font-size:16.5px; }

	.home-section-full{ margin-top:44px; }
	.trending-grid{ grid-template-columns:repeat(2,1fr); }
	.trending-grid .pop-item:nth-child(2n){ border-right:none; }
	.trending-grid .pop-item{ padding:18px 16px; }
	.latest-categories-grid{ grid-template-columns:1fr; gap:24px; }
	.subscribe-banner{ margin-top:44px; padding:40px 0; }
	.subscribe-banner-inner{ flex-direction:column; align-items:flex-start; gap:24px; }
	.subscribe-banner .subscribe-form-wrap{ width:100%; max-width:none; }
	.subscribe-banner-inner > .btn{ width:100%; text-align:center; }

	.about-stats{ grid-template-columns:1fr; gap:20px; padding:0; border:none; }
	.about-stat{ border-right:none; border-bottom:1px solid var(--border); padding-bottom:20px; }
	.about-stat:last-child{ border-bottom:none; padding-bottom:0; }
	.contact-grid{ max-width:none; }
	.contact-info-card{ padding:32px 24px; }
	.advertise-placements{ grid-template-columns:1fr; }
	.about-mv{ grid-template-columns:1fr; gap:28px; }

	/* Single article */
	.art-title{ font-size:28px; }
	.art-meta{ flex-direction:column; align-items:flex-start; gap:14px; }
	.art-body{ font-size:16.5px; }
	.art-body > p:first-of-type::first-letter{ font-size:42px; }
	.prevnext{ grid-template-columns:1fr; }
	.prevnext .next-post{ text-align:left; border-left:none; padding-left:0; border-top:1px solid var(--border); }
	.author-bio{ flex-direction:column; }

	/* Category / archive */
	.cat-head h1{ font-size:30px; }
	.cat-head .archive-description{ font-size:15px; }

	/* Footer */
	.footer-grid{ grid-template-columns:1fr; gap:36px; padding:48px 0 32px; }
	.footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }

	/* Pagination stays tappable */
	.pagination a, .pagination span,
	.nav-links a, .nav-links span.current{ min-width:40px; height:40px; }

	.error-404 h1{ font-size:64px; }

	/* Ensure nothing forces horizontal scroll */
	.gallery{ grid-template-columns:repeat(2,1fr); }
}

/* -----------------------------------------------------------
   Small phones
----------------------------------------------------------- */
@media (max-width: 380px) {
	.wrap{ padding:0 16px; }
	.hero-side-item .post-thumb{ width:64px; height:64px; }
}