/**
 * Dookeela - Responsive Breakpoints & Mobile Optimization
 * Ensures zero overflow, accessible tap targets, and clean stacking
 */

@media (max-width: 1100px) {
	.dookeela-dashboard-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.dash-col-left,
	.dash-col-right {
		width: 100%;
	}

	.hero-banner-card {
		grid-template-columns: 1fr;
		padding: 32px 28px;
	}

	.hero-visual-col {
		justify-content: center;
		margin-top: 16px;
	}

	.footer-top-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

@media (max-width: 900px) {
	.header-nav {
		display: none;
	}

	.mobile-toggle-btn {
		display: flex;
	}

	.header-search-wrap {
		width: 200px;
	}

	.news-cards-grid {
		grid-template-columns: 1fr;
	}

	.hero-main-title {
		font-size: 32px;
	}

	.featured-scoreboard {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.score-display {
		font-size: 40px;
	}
}

@media (max-width: 640px) {
	.dookeela-header {
		height: 64px;
	}

	.header-search-wrap {
		display: none; /* Accessible in mobile drawer */
	}

	.btn-live-pill {
		padding: 0 12px;
		font-size: 12px;
		height: 36px;
	}

	.hero-banner-card {
		padding: 24px 20px;
	}

	.hero-main-title {
		font-size: 26px;
	}

	.hero-subtext {
		font-size: 13px;
	}

	.hero-cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}

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

	.hero-stars-montage {
		display: none;
	}

	.footer-top-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.footer-bottom-bar {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.single-article-card {
		padding: 20px 16px;
	}

	.article-h1-title {
		font-size: 24px;
	}

	.countdown-clock-boxes {
		gap: 6px;
	}

	.countdown-unit {
		min-width: 60px;
		padding: 10px 8px;
	}

	.unit-val {
		font-size: 26px;
	}

	.countdown-sep {
		font-size: 24px;
	}

	/* Editorial & Tool Card Mobile Spacing */
	.editorial-card {
		padding: 24px 18px;
	}

	.editorial-card h2 {
		font-size: 20px;
	}

	.editorial-card h3 {
		font-size: 17px;
	}

	.guide-steps-grid {
		grid-template-columns: 1fr;
	}

	.comp-detailed-card {
		padding: 20px 16px;
	}

	.comp-specs-grid {
		grid-template-columns: 1fr;
		padding: 12px 14px;
	}

	.comp-card-topbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.comp-season-tag {
		align-self: flex-start;
	}

	.comparison-cards-split {
		grid-template-columns: 1fr;
	}

	/* Head-to-Head & Countdown Mobile */
	.h2h-selector-grid {
		grid-template-columns: 1fr;
	}

	.h2h-teams-display {
		flex-direction: column;
		padding: 16px;
	}

	.countdown-teams-banner {
		gap: 16px;
	}

	.cd-crest-img {
		width: 52px;
		height: 52px;
	}

	.cd-team-name {
		font-size: 15px;
	}

	.timeline-item {
		flex-direction: column;
		gap: 8px;
	}

	.timeline-time-badge {
		align-self: flex-start;
	}

	.tv-channels-grid {
		grid-template-columns: 1fr;
	}

	.table-responsive-wrapper,
	.rights-overview-table-wrap {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.full-specs-table th,
	.full-specs-table td {
		padding: 10px 12px;
		font-size: 12px;
		white-space: nowrap;
	}
}

@media (max-width: 360px) {
	.dookeela-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.hero-main-title {
		font-size: 22px;
	}

	.unit-val {
		font-size: 20px;
	}

	.countdown-unit {
		min-width: 48px;
		padding: 8px 4px;
	}

	.editorial-card {
		padding: 18px 12px;
	}
}