/*
Theme Name: DOA Gallery
Theme URI: https://dronesoverarkansas.com
Description: Image-first child theme for Drones Over Arkansas. Turns Twenty Twenty-Five into an aerial photo/video archive browsable by Pilot and Location. Managed entirely in the Site Editor — no code needed to add footage.
Author: Drones Over Arkansas
Template: twentytwentyfive
Version: 1.2
Requires at least: 6.6
Tested up to: 7.0
License: GNU General Public License v2 or later
Text Domain: doa-gallery
*/

/* The theme is driven by theme.json + block templates; this file only carries the
   header and a few progressive-enhancement rules that block styles can't express. */

/* Make gallery thumbnails crop to a consistent aerial 3:2 and lift gently on hover. */
.doa-grid .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
	transition: transform .35s ease, filter .35s ease;
}
.doa-grid .wp-block-post-template > li {
	overflow: hidden;
}
.doa-grid .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 6px;
}
.doa-grid .wp-block-post-featured-image:hover img {
	transform: scale(1.04);
	filter: saturate(1.06);
}
@media (prefers-reduced-motion: reduce) {
	.doa-grid .wp-block-post-featured-image img { transition: none; }
	.doa-grid .wp-block-post-featured-image:hover img { transform: none; }
}

/* Play badge on video-category tiles (WordPress adds .category-videos to each item). */
.doa-grid .category-videos .wp-block-post-featured-image { position: relative; }
.doa-grid .category-videos .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(20, 32, 42, 0.6);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
	background-repeat: no-repeat;
	background-position: 54% 50%;
	background-size: 24px;
	pointer-events: none;
	transition: background-color 0.3s ease;
}
.doa-grid .category-videos .wp-block-post-featured-image:hover::after {
	background-color: rgba(44, 106, 148, 0.9);
}

/* Browse-by pages: [doa_pilots] / [doa_locations] term grids. */
.doa-termgrid {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.5rem;
}
.doa-termgrid a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--faint);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.doa-termgrid a:hover { border-color: var(--wp--preset--color--sky); }
.doa-termgrid .c {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--faint);
	border-radius: 12px;
	padding: 1px 8px;
	font-variant-numeric: tabular-nums;
}
.doa-region { margin-bottom: 2rem; }
.doa-region-h {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--faint);
	padding-bottom: 0.3rem;
	margin: 0 0 0.8rem;
}
.doa-region-h a { text-decoration: none; color: inherit; }

/* Legacy-meta video player (rendered by doa_video_player). */
.doa-video {
	margin: 0 0 1.75rem;
}
.doa-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
	display: block;
	background: #0b1116;
	box-shadow: 0 12px 34px -20px rgba(20, 32, 42, 0.7);
}

/* Facebook (and any link-out) poster card. */
.doa-video--poster .doa-poster {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #0b1116;
	box-shadow: 0 12px 34px -20px rgba(20, 32, 42, 0.7);
}
.doa-video--poster .doa-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(0.82);
	transition: filter 0.3s ease, transform 0.5s ease;
}
.doa-video--poster .doa-poster:hover img {
	filter: brightness(0.68);
	transform: scale(1.03);
}
.doa-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: rgba(44, 106, 148, 0.94);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
	background-repeat: no-repeat;
	background-position: 55% 50%;
	background-size: 30px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.doa-video--poster .doa-poster:hover .doa-play {
	transform: translate(-50%, -50%) scale(1.08);
	background-color: var(--wp--preset--color--sky-deep, #1d4d70);
}
.doa-poster-label {
	position: absolute;
	left: 14px;
	bottom: 13px;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: rgba(11, 17, 22, 0.55);
	padding: 5px 11px;
	border-radius: 20px;
}

/* Inline video embeds that live inside post content (the older posts) — make them
   responsive and match the legacy-meta player's look. */
.wp-block-post-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="youtu.be"],
.wp-block-post-content iframe[src*="vimeo"],
.wp-block-post-content iframe[src*="facebook"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
	display: block;
	margin: 0 auto 1.5rem;
	background: #0b1116;
	box-shadow: 0 12px 34px -20px rgba(20, 32, 42, 0.7);
}

/* Header nav */
.doa-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}
.doa-nav a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
	font-weight: 500;
}
.doa-nav a:hover { color: var(--wp--preset--color--sky); }