/**
 * Images & Media Optimization (STEP 9)
 * Responsive images, lazy loading, WebP support
 * PC → スマートフォン 画像・メディア細かい調整
 * 
 * @package Higashimatudo_Shika
 */

/* ============================================
   Image Base Styles
   ============================================ */

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: inherit;
	background-color: var(--color-background-alt);
}

/* Prevent image stretching */
img[width],
img[height] {
	width: auto;
	max-width: 100%;
}

/* Picture elements */
picture {
	display: block;
	max-width: 100%;
}

/* Responsive iframe (for embedded content) */
iframe {
	max-width: 100%;
}

/* Figure elements */
figure {
	margin: 0;
	padding: 0;
}

figcaption {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-top: var(--spacing-sm);
	line-height: var(--line-height-normal);
}

/* ============================================
   Lazy Loading Support
   ============================================ */

/* Placeholder for loading images */
img[loading="lazy"] {
	background-color: var(--color-background-light);
	background-image: linear-gradient(
		90deg,
		var(--color-background-light) 25%,
		var(--color-background-alt) 50%,
		var(--color-background-light) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

/* Loaded state */
img[loading="lazy"].loaded {
	animation: none;
	background-image: none;
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	img[loading="lazy"] {
		animation: none;
	}
}

/* ============================================
   Aspect Ratio Containers
   ============================================ */

.aspect-ratio {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-background-alt);
}

.aspect-ratio::before {
	content: '';
	display: block;
	padding-bottom: 100%; /* 1:1 ratio */
}

/* Common aspect ratios */
.aspect-ratio.ratio-16-9::before {
	padding-bottom: 56.25%;
}

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

.aspect-ratio.ratio-3-2::before {
	padding-bottom: 66.67%;
}

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

/* Image inside aspect ratio */
.aspect-ratio img,
.aspect-ratio picture,
.aspect-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ============================================
   Responsive Image Classes
   ============================================ */

.img-fluid {
	max-width: 100%;
	height: auto;
	display: block;
}

.img-responsive {
	max-width: 100%;
	height: auto;
}

/* Image with border */
.img-bordered {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 2px;
}

/* Image with rounded corners */
.img-rounded {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Image with shadow */
.img-shadowed {
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
}

/* ============================================
   WebP Support
   ============================================ */

/* WebP with fallback */
.webp-image {
	background-image: url('image.webp');
	background-size: cover;
	background-position: center;
}

/* Fallback for non-WebP browsers */
.no-webp .webp-image {
	background-image: url('image.jpg');
}

/* Picture element (native WebP support) */
picture source[type="image/webp"] {
	content: 'webp';
}

/* ============================================
   Mobile Image Optimization
   ============================================ */

@media (max-width: 767px) {
	/* Full-width images on mobile */
	img {
		max-width: 100%;
		width: 100%;
		height: auto;
		display: block;
	}

	picture {
		width: 100%;
	}

	.img-fluid {
		width: 100%;
	}

	/* Reduce margin on images */
	img {
		margin-bottom: var(--spacing-md);
	}

	/* Reduce image borders on mobile */
	.img-bordered {
		border-width: 1px;
		padding: 1px;
	}

	/* Smaller padding for bordered images */
	.img-shadowed {
		box-shadow: var(--shadow-sm);
	}

	/* Figure caption sizing */
	figcaption {
		font-size: var(--font-size-xs);
		padding: 0 var(--spacing-sm);
	}
}

/* ============================================
   Hero / Banner Images
   ============================================ */

.hero-image,
.banner-image {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767px) {
	.hero-image,
	.banner-image {
		max-height: 300px;
	}
}

@media (max-width: 480px) {
	.hero-image,
	.banner-image {
		max-height: 200px;
	}
}

/* ============================================
   Thumbnail Images
   ============================================ */

.thumbnail-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-md);
}

@media (max-width: 767px) {
	.thumbnail-image {
		border-radius: var(--radius-sm);
	}
}

/* ============================================
   Profile / Avatar Images
   ============================================ */

.avatar-image {
	width: 100%;
	max-width: 200px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
}

.avatar-image.small {
	max-width: 80px;
}

.avatar-image.large {
	max-width: 300px;
}

/* ============================================
   Card Images
   ============================================ */

.card-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

@media (max-width: 767px) {
	.card-image {
		height: 150px;
	}
}

@media (max-width: 480px) {
	.card-image {
		height: 120px;
	}
}

/* ============================================
   Gallery Images
   ============================================ */

.gallery-image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-md);
	transition: transform var(--transition-base);
	cursor: pointer;
}

.gallery-image:hover {
	transform: scale(1.05);
}

@media (max-width: 767px) {
	.gallery-image {
		aspect-ratio: 1 / 1;
	}

	.gallery-image:hover {
		transform: scale(1);
	}
}

/* ============================================
   Video / Embed Optimization
   ============================================ */

/* Responsive video container */
.video-wrapper,
.embed-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-background-alt);
}

.video-wrapper iframe,
.embed-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: var(--radius-md);
}

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

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

/* ============================================
   Inline Images
   ============================================ */

.alignleft {
	float: left;
	margin-right: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	max-width: 50%;
}

.alignright {
	float: right;
	margin-left: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	max-width: 50%;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-md);
}

@media (max-width: 767px) {
	.alignleft,
	.alignright {
		float: none;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
}

/* ============================================
   Background Images
   ============================================ */

.bg-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media (max-width: 767px) {
	.bg-image {
		background-attachment: scroll;
	}
}

/* Parallax effect (with reduced motion support) */
.bg-parallax {
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.bg-parallax {
		background-attachment: scroll;
	}
}

/* ============================================
   Srcset & Responsive Images
   ============================================ */

/* Images with multiple resolutions */
img[srcset] {
	width: 100%;
	height: auto;
	display: block;
}

/* Picture elements for art direction */
picture {
	display: block;
	width: 100%;
}

picture source {
	display: none;
}

/* ============================================
   Image Loading States
   ============================================ */

/* Loaded state */
img.loaded {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Broken image fallback */
img:broken {
	display: block;
	width: 100px;
	height: 100px;
	background-color: var(--color-background-light);
	border: 1px dashed var(--color-border-light);
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	.video-wrapper,
	.embed-wrapper {
		display: none;
	}
}

/* ============================================
   High DPI / Retina Display Support
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* Sharper rendering on retina */
	img {
		image-rendering: -webkit-optimize-contrast;
	}

	/* Optimize for high DPI */
	.bg-image {
		background-size: cover;
	}
}

/* ============================================
   Dark Mode Image Optimization
   ============================================ */

@media (prefers-color-scheme: dark) {
	img {
		background-color: var(--color-background-alt);
	}

	.img-bordered {
		border-color: var(--color-border-light);
	}

	/* Invert images if needed (optional) */
	/* img { filter: invert(0.8); } */
}

/* ============================================
   Accessibility - Images
   ============================================ */

/* Focus outline for keyboard navigation on images with links */
a img:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

/* Screen reader only - alt text decoration (optional) */
@media screen {
	img[alt] {
		/* Alt text is handled by browser for screen readers */
	}
}

/* ============================================
   Performance Optimization
   ============================================ */

/* GPU acceleration for lazy-loaded images */
img[loading="lazy"] {
	will-change: opacity;
}

img.loaded {
	will-change: auto;
}

/* Smooth transitions on images */
img {
	transition: opacity var(--transition-fast);
}

/* ============================================
   Small Devices (480px and below)
   ============================================ */

@media (max-width: 480px) {
	/* Reduce image padding on very small screens */
	img {
		margin-bottom: var(--spacing-sm);
	}

	.alignleft,
	.alignright {
		margin-right: var(--spacing-sm);
		margin-left: var(--spacing-sm);
	}

	figcaption {
		font-size: 12px;
		padding: 0 var(--spacing-xs);
	}

	/* Smaller thumbnails */
	.thumbnail-image {
		max-width: 100%;
	}

	/* Video aspect ratio adjustment */
	.video-wrapper {
		padding-bottom: 56.25%;
	}
}

/* ============================================
   Landscape Orientation
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
	.hero-image,
	.banner-image {
		max-height: 250px;
	}

	.card-image {
		height: 120px;
	}

	.gallery-image {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================
   Touch Device Image Optimization
   ============================================ */

@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
	/* No hover effects on touch devices */
	.gallery-image:hover {
		transform: none;
	}

	/* Add active state instead */
	.gallery-image:active {
		transform: scale(0.98);
	}

	/* Better tappability */
	.gallery-image {
		cursor: pointer;
		tap-highlight-color: rgba(0, 102, 204, 0.2);
		-webkit-tap-highlight-color: rgba(0, 102, 204, 0.2);
	}
}