/* ══════════════════════════════════════════════════════════
   VERDURA GARDENS — HOME PAGE STYLES
   ══════════════════════════════════════════════════════════ */

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  position: relative; overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.28) saturate(0.7);
  transform-origin: center;
  animation: hero-parallax 20s ease-in-out infinite alternate;
}
@keyframes hero-parallax {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.12) translateY(-2%); }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 40% 50%, rgba(8,11,18,0.85) 0%, transparent 70%),
    linear-gradient(to right, rgba(8,11,18,0.98) 0%, rgba(8,11,18,0.5) 55%, rgba(8,11,18,0.2) 100%);
}
.hero-gold-glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(201,150,58,0.12) 0%, transparent 70%);
  top: 20%; left: -5%;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 680px;
  padding-block: var(--sp-20);
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: var(--sp-6);
}
.hero-kicker-diamond {
  width: 6px; height: 6px;
  background: var(--gold-500); transform: rotate(45deg);
  box-shadow: var(--glow-gold-sm);
  animation: diamond-pulse 3s ease-in-out infinite;
}
@keyframes diamond-pulse {
  0%,100% { box-shadow: 0 0 6px var(--gold-500); }
  50%      { box-shadow: 0 0 16px var(--gold-400), 0 0 32px rgba(201,150,58,0.3); }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 300; line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--champagne-bright);
  margin-bottom: var(--sp-8);
}
.hero-headline em {
  font-style: italic;
  background: var(--gold-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.125rem; font-weight: 300;
  color: var(--champagne-muted);
  line-height: 1.75; max-width: 520px;
  margin-bottom: var(--sp-10);
}

.hero-ctas {
  display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-16);
}

.hero-scroll-hint {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--champagne-faint);
}
.hero-scroll-line {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold-700), transparent);
}

/* Hero side image cards */
.hero-side {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-right: var(--sp-12);
}
.hero-plant-card {
  background: var(--obsidian-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  width: 200px;
  animation: float-card 6s ease-in-out infinite;
}
.hero-plant-card:nth-child(2) { animation-delay: 2s; }
.hero-plant-card:nth-child(3) { animation-delay: 4s; }
@keyframes float-card {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero-plant-card-label {
  font-family: var(--font-ui); font-size: .5rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 4px;
}
.hero-plant-card-name {
  font-family: var(--font-display); font-size: .875rem; font-style: italic;
  color: var(--champagne-bright); line-height: 1.3;
}

/* ── DECO DIVIDER ── */
.deco-divider {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-2);
}
.deco-divider-bar { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); }
.deco-divider-ornament {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 300;
  color: var(--gold-600); letter-spacing: .1em;
}

/* ── CATEGORY SHOWCASE ── */
.cat-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.cat-card-imperial {
  background: var(--obsidian-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-2xl);
  overflow: hidden; cursor: pointer;
  position: relative;
  transition: all var(--dur-slow) var(--ease-gold);
  text-decoration: none; display: block;
  aspect-ratio: 3/4;
}
.cat-card-imperial:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--glow-card-h); border-color: var(--border-gold-h); }
.cat-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
  filter: brightness(0.5) saturate(0.6);
}
.cat-card-imperial:hover .cat-card-img { transform: scale(1.08); filter: brightness(0.55) saturate(0.7); }
.cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,10,.85) 0%, rgba(5,6,10,.2) 60%, transparent 100%);
}
.cat-card-gold-frame {
  position: absolute; inset: 8px;
  border: 1px solid rgba(201,150,58,0.2);
  border-radius: calc(var(--r-2xl) - 4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.cat-card-imperial:hover .cat-card-gold-frame { opacity: 1; }
.cat-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--sp-6);
}
.cat-card-icon { font-size: 1.5rem; margin-bottom: var(--sp-2); display: block; }
.cat-card-name {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 400;
  color: var(--champagne-bright); line-height: 1.2; margin-bottom: 4px;
}
.cat-card-count {
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500);
}
.cat-card-arrow {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(201,150,58,0.15); border: 1px solid var(--border-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400); font-size: .875rem;
  transform: scale(0.8); opacity: 0;
  transition: all var(--dur-base) var(--ease-spring);
}
.cat-card-imperial:hover .cat-card-arrow { transform: scale(1); opacity: 1; }

/* ── ARTICLE GRID ── */
.articles-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.articles-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

/* ── FEATURED LAYOUT (asymmetric) ── */
.featured-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.featured-big-card {
  background: var(--obsidian-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-3xl);
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out);
  position: relative;
  text-decoration: none; display: block;
}
.featured-big-card:hover { transform: translateY(-4px); box-shadow: var(--glow-card-h); border-color: var(--border-gold-h); }
.featured-big-img {
  width: 100%; height: 360px; object-fit: cover;
  filter: brightness(0.8) saturate(0.75);
  transition: transform var(--dur-slower) var(--ease-out), filter var(--dur-slow);
}
.featured-big-card:hover .featured-big-img { transform: scale(1.04); filter: brightness(0.85) saturate(0.85); }
.featured-big-body { padding: var(--sp-8); }
.featured-big-title {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400; color: var(--champagne-bright); line-height: 1.2;
  margin-block: var(--sp-4) var(--sp-4);
  transition: color var(--dur-base);
}
.featured-big-card:hover .featured-big-title { color: var(--gold-300); }
.featured-big-excerpt {
  font-size: .9375rem; color: var(--champagne-muted); line-height: 1.7; font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.featured-stack { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ── QUOTE BAND ── */
.quote-band {
  background: var(--obsidian-surface);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding-block: var(--sp-16);
  text-align: center;
  position: relative; overflow: hidden;
}
.quote-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201,150,58,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.quote-mark {
  font-family: var(--font-display); font-size: 6rem; line-height: 0.6;
  color: var(--gold-700); display: block; margin-bottom: var(--sp-4);
}
.quote-text {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-style: italic; font-weight: 300;
  color: var(--champagne-bright); max-width: 760px; margin: 0 auto;
  line-height: 1.4;
}
.quote-attribution {
  font-family: var(--font-ui); font-size: .5625rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-500); margin-top: var(--sp-6);
}

/* ── NEWSLETTER BANNER ── */
.nl-banner {
  background: var(--obsidian-surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-3xl);
  padding: var(--sp-16) var(--sp-20);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--sp-12); align-items: center;
}
.nl-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 0% 50%, rgba(201,150,58,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 50%, rgba(74,124,89,0.05) 0%, transparent 60%);
  pointer-events: none;
}
/* Deco corners on banner */
.nl-banner .deco-corner-tl::before,.nl-banner .deco-corner-tl::after,
.nl-banner .deco-corner-br::before,.nl-banner .deco-corner-br::after { background: var(--gold-600); width: 30px; height: 1px; }
.nl-banner .deco-corner-tl::after,.nl-banner .deco-corner-br::before { width: 1px; height: 30px; }

.nl-banner-headline {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 300; color: var(--champagne-bright);
  line-height: 1.2; margin-bottom: var(--sp-4);
}
.nl-banner-sub { font-size: .9375rem; color: var(--champagne-muted); line-height: 1.7; font-weight: 300; max-width: 480px; }
.nl-form-inline {
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-width: 300px; position: relative; z-index: 1;
}

/* ── PLANT SPOTLIGHTS ── */
.plant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.plant-card {
  background: var(--obsidian-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out);
}
.plant-card:hover { border-color: var(--border-gold); box-shadow: var(--glow-card-h); transform: translateY(-4px); }
.plant-card-img { width: 100%; height: 200px; object-fit: cover; filter: brightness(0.8) saturate(0.7); transition: transform var(--dur-slower); }
.plant-card:hover .plant-card-img { transform: scale(1.06); }
.plant-card-body { padding: var(--sp-5); }
.plant-card-family { font-family: var(--font-ui); font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 4px; }
.plant-card-name { font-family: var(--font-display); font-size: 1rem; font-style: italic; color: var(--champagne-bright); line-height: 1.3; margin-bottom: var(--sp-3); }
.plant-card-detail { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.plant-detail-item { font-family: var(--font-ui); font-size: .5625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--champagne-faint); }
.plant-detail-item strong { display: block; color: var(--champagne-muted); margin-top: 2px; }

.feature-pages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.feature-page-card {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--obsidian-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-3xl);
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-gold), box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.feature-page-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold-h);
  box-shadow: var(--glow-card-h);
}
.feature-page-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(201,150,58,.12);
  border-radius: var(--r-full);
  font-size: 1.4rem;
}
.feature-page-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--champagne-bright);
  margin: 0;
}
.feature-page-card p {
  margin: 0;
  color: var(--champagne-muted);
  line-height: 1.7;
  font-size: .95rem;
}

/* ── STATS STRIP ── */
.stats-strip {
  background: var(--obsidian-deep);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding-block: var(--sp-12);
}
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); text-align: center; }
.stat-num {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300; line-height: 1;
  background: var(--gold-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-family: var(--font-ui); font-size: .5625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-faint); margin-top: var(--sp-2); }

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .cat-showcase-grid { grid-template-columns: repeat(2,1fr); }
  .hero-side { display: none; }
  .featured-layout { grid-template-columns: 1fr; }
  .nl-banner { grid-template-columns: 1fr; padding: var(--sp-10); }
}
@media(max-width:1024px) {
  .articles-grid-3 { grid-template-columns: repeat(2,1fr); }
  .articles-grid-4 { grid-template-columns: repeat(2,1fr); }
  .plant-grid { grid-template-columns: repeat(2,1fr); }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:768px) {
  .cat-showcase-grid { grid-template-columns: 1fr 1fr; }
  .articles-grid-3,.articles-grid-4 { grid-template-columns: 1fr; }
  .hero-headline { font-size: clamp(2.8rem,8vw,4rem); }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
}
@media(max-width:480px) {
  .cat-showcase-grid { grid-template-columns: 1fr; }
  .plant-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
}