/**
 * Responsive / Mobile Styles
 * Media queries and responsive adjustments
 * 
 * @package Higashimatudo_Shika
 */

/* ============================================
   Small Devices (576px and up)
   ============================================ */
@media (min-width: 576px) {
	body {
		font-size: var(--font-size-base);
	}
}

/* ============================================
   Tablets / Medium Devices (768px and up)
   ============================================ */
@media (min-width: 768px) {
	h1 {
		font-size: var(--font-size-5xl);
	}

	h2 {
		font-size: var(--font-size-4xl);
	}

	h3 {
		font-size: var(--font-size-3xl);
	}

	.container {
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
	}

	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================
   Desktops / Large Devices (992px and up)
   ============================================ */
@media (min-width: 992px) {
	.container {
		width: min(calc(100% - 64px), var(--container-width));
		max-width: var(--container-width);
	}
}

/* ============================================
   Large Desktops (1200px and up)
   ============================================ */
@media (min-width: 1200px) {
	.container {
		width: min(calc(100% - 64px), var(--container-width));
		max-width: var(--container-width);
	}
}

/* ============================================
   Extra Large Desktops (1400px and up)
   ============================================ */
@media (min-width: 1400px) {
	.container-lg {
		max-width: var(--container-width-lg);
	}
}

/* ============================================
   Tablets and Down (767px and below)
   ============================================ */
@media (max-width: 767px) {
	h1 {
		font-size: var(--font-size-3xl);
	}

	h2 {
		font-size: var(--font-size-2xl);
	}

	h3 {
		font-size: var(--font-size-xl);
	}

	.navigation {
		gap: var(--spacing-md);
	}

	.button {
		width: 100%;
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	footer {
		padding: var(--spacing-xl) 0;
	}
}

/* ============================================
   Small Devices and Down (575px and below)
   ============================================ */
@media (max-width: 575px) {
	html {
		font-size: 14px;
	}

	body {
		font-size: var(--font-size-sm);
	}

	h1 {
		font-size: var(--font-size-2xl);
		margin-bottom: var(--spacing-md);
	}

	h2 {
		font-size: var(--font-size-xl);
		margin-bottom: var(--spacing-md);
	}

	h3 {
		font-size: var(--font-size-lg);
		margin-bottom: var(--spacing-sm);
	}

	.container {
		padding-left: var(--container-padding-mobile);
		padding-right: var(--container-padding-mobile);
	}

	.button-large {
		padding: var(--spacing-md) var(--spacing-lg);
		font-size: var(--font-size-base);
	}

	.pagination {
		gap: 0;
	}

	.pagination-link {
		width: 32px;
		height: 32px;
		font-size: var(--font-size-sm);
	}
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	body {
		background: white;
		color: black;
		font-size: 12pt;
		line-height: 1.5;
	}

	a {
		text-decoration: underline;
	}

	.no-print,
	header,
	footer,
	.pagination,
	.navigation {
		display: none;
	}

	img {
		max-width: 100%;
	}
}

/* ============================================
   High DPI / Retina Displays
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	img {
		image-rendering: -webkit-optimize-contrast;
	}
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================
   Dark Mode Support (Future)
   ============================================ */
@media (prefers-color-scheme: dark) {
	/* Placeholder for future dark mode support */
}