/**
 * Grid & Layout Mobile Optimization (STEP 9)
 * CSS Grid → Flexbox conversion for mobile
 * PC → スマートフォン グリッド・レイアウト細かい調整
 * 
 * @package Higashimatudo_Shika
 */

/* ============================================
   Grid to Flexbox Conversion - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* All grid containers become single column on mobile */
	[class*="grid"],
	[class*="layout"],
	.doctors-grid,
	.services-grid,
	.doctors-detailed-grid,
	.services-detailed-grid,
	.clinic-intro-grid,
	.news-grid,
	.gallery-grid {
		display: flex !important;
		flex-direction: column;
		gap: var(--spacing-lg) !important;
	}

	/* Grid items full width */
	[class*="grid"] > *,
	[class*="layout"] > *,
	.doctors-grid > *,
	.services-grid > *,
	.doctors-detailed-grid > *,
	.services-detailed-grid > *,
	.clinic-intro-grid > *,
	.news-grid > *,
	.gallery-grid > * {
		width: 100% !important;
		min-width: 0;
	}
}

/* ============================================
   Two-Column to Single Column
   ============================================ */

@media (max-width: 767px) {
	/* Contact layout */
	.contact-layout {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-lg) !important;
	}

	.contact-sidebar {
		order: -1;
		width: 100%;
	}

	/* Clinic intro */
	.clinic-intro-grid {
		flex-direction: column;
	}

	.clinic-intro-image {
		width: 100%;
		max-width: 100%;
	}

	/* Generic two-column layouts */
	.two-column,
	.grid-2,
	[class*="col-2"] {
		display: flex !important;
		flex-direction: column;
		gap: var(--spacing-lg) !important;
	}

	.two-column > *,
	.grid-2 > *,
	[class*="col-2"] > * {
		width: 100% !important;
	}
}

/* ============================================
   Three-Column Progression
   ============================================ */

/* Tablet: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
	.grid-3,
	.grid-4,
	.services-grid,
	.doctors-grid,
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.grid-3 > :last-child:nth-child(3n),
	.grid-4 > :last-child:nth-child(3n) {
		grid-column: auto;
	}
}

/* Mobile: 576px - 767px */
@media (max-width: 767px) {
	.grid-3,
	.grid-4,
	.services-grid,
	.doctors-grid,
	.gallery-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
	.grid-3,
	.grid-4,
	.services-grid,
	.doctors-grid,
	.gallery-grid {
		gap: var(--spacing-md) !important;
	}
}

/* ============================================
   Card Layouts - Mobile
   ============================================ */

@media (max-width: 767px) {
	.card,
	.doctor-card,
	.doctor-detailed-card,
	.service-card,
	.news-card,
	.gallery-card {
		padding: var(--spacing-lg);
		margin-bottom: var(--spacing-lg);
		display: flex;
		flex-direction: column;
	}

	.card-image,
	.doctor-card-image,
	.service-card-image {
		width: 100%;
		height: auto;
		max-height: 250px;
		margin-bottom: var(--spacing-md);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.card-content,
	.doctor-card-content,
	.service-card-content {
		flex: 1;
	}

	.card-footer {
		margin-top: auto;
		padding-top: var(--spacing-md);
	}
}

@media (max-width: 480px) {
	.card,
	.doctor-card,
	.service-card {
		padding: var(--spacing-md);
	}

	.card-image,
	.doctor-card-image,
	.service-card-image {
		max-height: 180px;
		margin-bottom: var(--spacing-sm);
	}
}

/* ============================================
   Section Grid Layouts
   ============================================ */

@media (max-width: 767px) {
	/* Services section */
	.section-services .services-grid {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-lg) !important;
	}

	/* Doctors section */
	.section-doctors .doctors-grid {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-lg) !important;
	}

	/* News section */
	.section-news .news-grid {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-lg) !important;
	}

	/* Gallery section */
	.section-gallery .gallery-grid {
		grid-template-columns: 1fr !important;
		gap: var(--spacing-lg) !important;
	}

	/* Features/benefits */
	.features-grid,
	.benefits-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================
   Sidebar Layouts - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Main + Sidebar */
	.main-with-sidebar,
	.content-sidebar-layout {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: var(--spacing-2xl) !important;
	}

	.main-content {
		order: 1;
		grid-column: 1 !important;
	}

	.sidebar {
		order: 2;
		grid-column: 1 !important;
		width: 100%;
	}

	/* Sidebar-first on mobile */
	.sidebar-first .sidebar {
		order: 1;
	}

	.sidebar-first .main-content {
		order: 2;
	}
}

/* ============================================
   Table Layouts - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Responsive table wrapper */
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-bottom: var(--spacing-lg);
		border: 1px solid var(--color-border-light);
		border-radius: var(--radius-md);
	}

	table {
		width: 100%;
		font-size: 14px;
		border-collapse: collapse;
	}

	th,
	td {
		padding: 10px 12px;
		text-align: left;
		border-bottom: 1px solid var(--color-border-light);
		white-space: nowrap;
	}

	th {
		background-color: var(--color-background-light);
		font-weight: 600;
		font-size: 13px;
	}

	/* Stack table on very small screens */
	@media (max-width: 480px) {
		table {
			font-size: 12px;
		}

		th,
		td {
			padding: 8px 10px;
		}
	}
}

/* ============================================
   Flex Layouts - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Flexbox container adjustments */
	.flex-container {
		flex-direction: column !important;
		gap: var(--spacing-lg) !important;
	}

	.flex-row {
		flex-direction: column !important;
		gap: var(--spacing-lg) !important;
	}

	.flex-row > * {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Flex wrap adjustments */
	.flex-wrap {
		flex-wrap: wrap !important;
		gap: var(--spacing-md) !important;
	}

	.flex-wrap > * {
		flex: 0 1 auto !important;
		min-width: 100% !important;
	}
}

/* ============================================
   Navigation Grid - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Breadcrumb */
	.breadcrumb {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
		font-size: 12px;
	}

	.breadcrumb-item {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-xs);
	}

	/* Pagination */
	.pagination {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
		justify-content: center;
		margin: var(--spacing-2xl) 0;
	}

	.pagination-item {
		min-width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--color-border-light);
		border-radius: var(--radius-md);
		font-size: 13px;
	}
}

/* ============================================
   Hero + Content Layout - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Hero with content below */
	.hero-with-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.hero-section {
		grid-column: 1 / -1;
	}

	.content-section {
		grid-column: 1 / -1;
	}
}

/* ============================================
   Gap Adjustments - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Reduce gaps on mobile */
	.gap-xl {
		gap: var(--spacing-lg) !important;
	}

	.gap-2xl {
		gap: var(--spacing-xl) !important;
	}

	.gap-3xl {
		gap: var(--spacing-2xl) !important;
	}

	/* Grid gap */
	.grid-gap-lg {
		gap: var(--spacing-lg) !important;
	}

	.grid-gap-xl {
		gap: var(--spacing-lg) !important;
	}
}

/* ============================================
   Alignment - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Center content on mobile */
	.text-center {
		text-align: center;
	}

	/* Center flex items */
	.flex-center {
		align-items: center;
		justify-content: center;
	}

	/* Stack align items */
	.align-items-center {
		align-items: center;
	}

	/* Justify content center */
	.justify-content-center {
		justify-content: center;
	}
}

/* ============================================
   Container Adjustments - Mobile
   ============================================ */

@media (max-width: 767px) {
	.container {
		width: 100%;
		max-width: 100%;
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	.container-sm {
		max-width: 100%;
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	.container-lg {
		max-width: 100%;
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	.container-xl {
		max-width: 100%;
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}
}

/* ============================================
   Small Mobile (480px and below) - Layout
   ============================================ */

@media (max-width: 480px) {
	/* Reduce gaps further */
	[class*="grid"],
	[class*="layout"],
	.doctors-grid,
	.services-grid {
		gap: var(--spacing-md) !important;
	}

	/* Container padding */
	.container {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	/* Section padding */
	.section {
		padding-top: var(--spacing-xl) !important;
		padding-bottom: var(--spacing-xl) !important;
	}

	/* Reduce card padding */
	.card {
		padding: var(--spacing-md);
	}
}

/* ============================================
   Landscape Orientation - Layout
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
	/* Two columns on landscape */
	.grid-2,
	.grid-3,
	.services-grid,
	.doctors-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--spacing-lg) !important;
	}

	/* Reduce section padding */
	.section {
		padding: var(--spacing-lg) 0;
	}

	/* Reduce gap */
	[class*="grid"] {
		gap: var(--spacing-md) !important;
	}
}

/* ============================================
   Aspect Ratio in Grids - Mobile
   ============================================ */

@media (max-width: 767px) {
	/* Adjust aspect ratios for mobile */
	.aspect-ratio {
		width: 100%;
	}

	.aspect-ratio.ratio-16-9 {
		padding-bottom: 56.25%;
	}

	.aspect-ratio.ratio-4-3 {
		padding-bottom: 75%;
	}

	.aspect-ratio.ratio-1-1 {
		padding-bottom: 100%;
	}

	/* Card aspect ratios */
	.card-image {
		aspect-ratio: 3 / 2;
	}

	.gallery-image {
		aspect-ratio: 1 / 1;
	}
}

/* ============================================
   Print - Layout
   ============================================ */

@media print {
	[class*="grid"],
	[class*="layout"] {
		display: flex !important;
		flex-direction: column;
		gap: var(--spacing-lg) !important;
	}

	.page-break {
		page-break-inside: avoid;
	}

	.no-print {
		display: none;
	}
}

/* ============================================
   Reduced Motion - Layout
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.card:hover {
		transform: none;
	}

	[class*="grid"],
	[class*="layout"] {
		transition: none !important;
	}
}