/*!
 * Agriculture Novel Discovery — Netflix-style content discovery
 * Auto-inherits active theme fonts/colors via CSS variables with sensible fallbacks.
 */

:root {
	--an-bg:            var(--wp--preset--color--background, #ffffff);
	--an-fg:            var(--wp--preset--color--foreground, #16211a);
	--an-muted:         #6b7a70;
	--an-border:        #e6e9e6;
	--an-surface:       #ffffff;
	--an-surface-2:     #f6f8f5;
	--an-accent:        var(--wp--preset--color--primary, #2b7a3d);
	--an-accent-2:      #f2b134;
	--an-shadow-sm:     0 1px 2px rgba(15, 30, 20, 0.06), 0 2px 6px rgba(15, 30, 20, 0.04);
	--an-shadow-md:     0 6px 18px rgba(15, 30, 20, 0.08), 0 2px 6px rgba(15, 30, 20, 0.05);
	--an-shadow-lg:     0 18px 40px rgba(15, 30, 20, 0.12), 0 4px 12px rgba(15, 30, 20, 0.06);
	--an-radius:        14px;
	--an-radius-sm:     8px;
	--an-radius-lg:     20px;
	--an-transition:    260ms cubic-bezier(.2,.7,.2,1);
	--an-font:          inherit;
	--an-gap:           18px;
	--an-gap-lg:        28px;
}

@media (prefers-color-scheme: dark) {
	.an-discovery {
		--an-bg:      #0f1512;
		--an-fg:      #e8f0e9;
		--an-muted:   #a7b4a9;
		--an-border:  #223028;
		--an-surface: #16211b;
		--an-surface-2:#111a15;
	}
}

.an-discovery,
.an-discovery * { box-sizing: border-box; }

.an-discovery {
	font-family: var(--an-font);
	color: var(--an-fg);
	margin: 3.2rem 0;
	position: relative;
}

.an-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 1.2rem;
	padding: 0 4px;
}
.an-section-title {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.an-section-title::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 1.1em;
	background: var(--an-accent);
	border-radius: 2px;
}
.an-section-subtitle {
	color: var(--an-muted);
	margin: .25rem 0 0;
	font-size: .95rem;
}
.an-badge {
	display: inline-block;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--an-accent);
	color: #fff;
}
.an-badge-ai {
	background: linear-gradient(135deg, var(--an-accent), var(--an-accent-2));
}

.an-rail-controls { display: inline-flex; gap: 6px; }
.an-rail-controls button {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--an-border);
	background: var(--an-surface);
	color: var(--an-fg);
	cursor: pointer;
	font-size: 20px; line-height: 1;
	transition: background var(--an-transition), transform var(--an-transition);
}
.an-rail-controls button:hover { background: var(--an-surface-2); transform: translateY(-1px); }

/* ---------- Rail ---------- */
.an-rail-viewport {
	position: relative;
	margin: 0 -6px;
	overflow: hidden;
}
.an-rail {
	display: flex;
	gap: var(--an-gap);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px 6px 22px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.an-rail::-webkit-scrollbar { height: 6px; }
.an-rail::-webkit-scrollbar-thumb { background: var(--an-border); border-radius: 3px; }
.an-rail > .an-card {
	flex: 0 0 clamp(240px, 22vw, 300px);
	scroll-snap-align: start;
}

/* ---------- Grids ---------- */
.an-grid {
	display: grid;
	gap: var(--an-gap-lg);
}
.an-grid-2 { grid-template-columns: repeat(2, 1fr); }
.an-grid-3 { grid-template-columns: repeat(3, 1fr); }
.an-grid-4 { grid-template-columns: repeat(4, 1fr); }
.an-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
	.an-grid-4, .an-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.an-grid-3, .an-grid-4, .an-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.an-grid-2, .an-grid-3, .an-grid-4, .an-grid-5 { grid-template-columns: 1fr; }
}

/* Masonry */
.an-masonry {
	column-count: 3; column-gap: var(--an-gap-lg);
}
@media (max-width: 900px) { .an-masonry { column-count: 2; } }
@media (max-width: 560px) { .an-masonry { column-count: 1; } }
.an-masonry > .an-card { break-inside: avoid; margin-bottom: var(--an-gap-lg); display: block; }

/* Magazine */
.an-magazine {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--an-gap-lg);
}
.an-magazine-side { display: grid; gap: var(--an-gap); grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .an-magazine { grid-template-columns: 1fr; } .an-magazine-side { grid-template-columns: 1fr 1fr; } }

/* Featured hero */
.an-featured-hero { display: grid; gap: var(--an-gap-lg); }
.an-featured-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--an-gap); }
@media (max-width: 820px) { .an-featured-hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .an-featured-hero-grid { grid-template-columns: 1fr; } }

/* ---------- Card ---------- */
.an-card {
	position: relative;
	background: var(--an-surface);
	border-radius: var(--an-radius);
	box-shadow: var(--an-shadow-sm);
	overflow: hidden;
	transition: transform var(--an-transition), box-shadow var(--an-transition);
	isolation: isolate;
}
.an-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--an-shadow-lg);
}
.an-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.an-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--an-surface-2);
}
.an-card-img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.2,.7,.2,1);
	display: block;
}
.an-card:hover .an-card-img { transform: scale(1.04); }
.an-card-img-placeholder {
	background: linear-gradient(135deg, var(--an-surface-2), var(--an-border));
}

.an-card-badge {
	position: absolute;
	top: 12px; left: 12px;
	background: rgba(255,255,255,.94);
	color: #16211a;
	font-size: .7rem; font-weight: 600;
	letter-spacing: .04em;
	padding: 5px 10px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	text-transform: uppercase;
}
.an-card-badge-product { background: var(--an-accent-2); color: #16211a; }

.an-card-bookmark {
	position: absolute; top: 10px; right: 10px;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,.9); border: 0;
	color: #16211a; font-size: 18px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform var(--an-transition), background var(--an-transition);
	opacity: 0;
}
.an-card:hover .an-card-bookmark { opacity: 1; }
.an-card-bookmark:hover { transform: scale(1.1); background: #fff; }
.an-card-bookmark.is-active { background: var(--an-accent); color: #fff; }

.an-card-body { padding: 16px 18px 18px; }
.an-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
	color: var(--an-fg);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.an-card-excerpt {
	color: var(--an-muted);
	font-size: .875rem;
	line-height: 1.5;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.an-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--an-muted);
	font-size: .78rem;
	margin-bottom: 10px;
}
.an-card-dot { opacity: .55; }
.an-card-price { color: var(--an-accent); font-weight: 700; font-size: .95rem; }
.an-card-cta {
	color: var(--an-accent);
	font-weight: 600;
	font-size: .875rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap var(--an-transition);
}
.an-card:hover .an-card-cta { gap: 10px; }

/* Card variants */
.an-card-hero, .an-card-jumbo {
	grid-column: span 2;
}
.an-card-hero .an-card-media,
.an-card-jumbo .an-card-media { aspect-ratio: 16 / 9; }
.an-card-hero .an-card-title,
.an-card-jumbo .an-card-title {
	font-size: 1.6rem;
	-webkit-line-clamp: 3;
}
.an-card-small .an-card-media { aspect-ratio: 4 / 3; }
.an-card-small .an-card-title { font-size: .95rem; -webkit-line-clamp: 2; }
.an-card-small .an-card-excerpt { display: none; }

/* Product card */
.an-card-product .an-card-title { font-size: 1rem; }

/* Compact list */
.an-compact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-compact-item { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius-sm); }
.an-compact-link {
	display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 10px;
	align-items: center; color: var(--an-fg); text-decoration: none;
}
.an-compact-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; }
.an-compact-title { font-weight: 600; font-size: .95rem; }
.an-compact-date { color: var(--an-muted); font-size: .8rem; }

/* Load more */
.an-load-more-wrap { text-align: center; margin-top: 1.5rem; }
.an-load-more {
	background: var(--an-accent);
	color: #fff;
	border: 0;
	padding: 12px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: transform var(--an-transition), box-shadow var(--an-transition), background var(--an-transition);
	box-shadow: var(--an-shadow-sm);
}
.an-load-more:hover { transform: translateY(-1px); box-shadow: var(--an-shadow-md); }
.an-load-more[disabled] { opacity: .5; cursor: not-allowed; }

/* 404 & footer */
.an-404-discovery { max-width: 1200px; margin: 3rem auto; padding: 0 1rem; }
.an-404-title { text-align: center; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: 1.5rem; }
.an-404-search { max-width: 560px; margin: 0 auto 2rem; }
.an-footer-discovery { max-width: 1400px; margin: 3rem auto 1.5rem; padding: 0 1rem; border-top: 1px solid var(--an-border); padding-top: 2rem; }

/* Motion & a11y */
@media (prefers-reduced-motion: reduce) {
	.an-card, .an-card-img, .an-rail, .an-card-cta, .an-load-more { transition: none; }
	.an-card:hover { transform: none; }
	.an-card:hover .an-card-img { transform: none; }
}
.an-card-link:focus-visible {
	outline: 3px solid var(--an-accent);
	outline-offset: 3px;
	border-radius: var(--an-radius);
}
.an-rail-controls button:focus-visible { outline: 3px solid var(--an-accent); outline-offset: 2px; }

/* Product placeholder image styling for cards without thumbs */
.an-card-product .an-card-media { background: linear-gradient(135deg, #fff8e5, #e6f4ea); }

/* Editor's badge (used in Gutenberg edit view) */
.an-editor-preview { border: 1px dashed var(--an-border); padding: 20px; border-radius: var(--an-radius); background: var(--an-surface-2); }