/* ═══════════════════════════════════════════════════════════════════
   hero.css — home page hero + home section blocks
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ HERO ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

/* Layer 1 — the photo (or the crafted fallback if no photo is set) */
.hero__bg {
  position: absolute;
  inset: -2%;
  z-index: -3;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(201, 146, 42, .34), transparent 60%),
    radial-gradient(70% 60% at 85% 80%, rgba(210, 105, 30, .28), transparent 62%),
    linear-gradient(160deg, #4A1E06 0%, #2A1204 45%, #150A02 100%);
  opacity: var(--hero-fallback-opacity, 1);
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.2%, -1.6%); }
}

/* Layer 2 — mandala / rangoli motif */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23E8BE6A' stroke-width='.9'%3E%3Ccircle cx='90' cy='90' r='16'/%3E%3Ccircle cx='90' cy='90' r='34'/%3E%3Ccircle cx='90' cy='90' r='54'/%3E%3Cpath d='M90 6v168M6 90h168M26 26l128 128M154 26L26 154'/%3E%3Cpath d='M90 36l10 18-10 18-10-18zM90 108l10 18-10 18-10-18zM36 90l18-10 18 10-18 10zM108 90l18-10 18 10-18 10z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: patternDrift 60s linear infinite;
}
@keyframes patternDrift { to { background-position: 220px 220px; } }

/* Layer 3 — readability scrim */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 45%, transparent, rgba(21, 10, 2, .55) 78%),
    linear-gradient(180deg, rgba(21,10,2,.68) 0%, rgba(21,10,2,.34) 34%, rgba(21,10,2,.52) 74%, var(--cream) 100%);
}

.hero__content {
  position: relative;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 90px;
  max-width: 900px;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-gu);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  color: var(--gold-bright);
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.hero__kicker::before, .hero__kicker::after {
  content: "";
  height: 1px;
  width: clamp(28px, 7vw, 60px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero__kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }

.hero h1 {
  color: #fff;
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  line-height: 1.04;
  margin-bottom: 22px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .5);
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(105deg, #F3D69A 0%, #E8BE6A 40%, #C9922A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-bright);
}

.hero__sub {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  color: rgba(245, 222, 179, .92);
  max-width: 34ch;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Stats */
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 46px);
  margin-bottom: 42px;
  flex-wrap: wrap;
}
.hstat { display: flex; flex-direction: column; align-items: center; min-width: 78px; }
.hstat__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #F3D69A, #C9922A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hstat__label {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 246, 238, .68);
  margin-top: 8px;
}
.hstat__divider { color: var(--gold); opacity: .55; font-size: .8rem; }
@media (max-width: 520px) { .hstat__divider { display: none; } }

.hero__btns { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* Scroll hint */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: rgba(245, 222, 179, .72);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.hero-scroll__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--gold));
  position: relative;
  overflow: hidden;
}
.hero-scroll__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  background: var(--gold-bright);
  animation: scrollDot 2.1s var(--ease) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

/* ═══ HOME: recent strip ════════════════════════════════════════════ */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 18px;
}
.recent-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-card);
  transition: transform var(--t), box-shadow var(--t);
}
.recent-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.recent-tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(21, 10, 2, .88));
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  transition: opacity var(--t), transform var(--t);
}

@media (hover: hover) and (pointer: fine) {
  .recent-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
  .recent-tile:hover img { transform: scale(1.07); }
  .recent-tile__cap { opacity: 0; transform: translateY(8px); }
  .recent-tile:hover .recent-tile__cap { opacity: 1; transform: none; }
}
/* A phone has no hover, so the caption stays visible rather than
   being permanently unreachable. */
@media (hover: none) {
  .recent-tile:active { transform: scale(.98); }
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: .94rem;
  margin-top: 18px;
  transition: gap var(--t), color var(--t);
}
.view-all:hover { gap: 14px; color: var(--brown); }

/* ═══ HOME: split feature (latest memory) ═══════════════════════════ */
.feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow-card);
}
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

.feature__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: clamp(6px, 2vw, 22px); }
.feature__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--warm-gray);
  font-size: .88rem;
  font-style: italic;
  margin-block: 12px 14px;
}
.feature__body h3 { margin-bottom: 6px; }
.feature__gu { font-family: var(--font-gu); color: var(--gold-deep); margin-bottom: 12px; }
.feature__excerpt { color: var(--text-soft); margin-bottom: 22px; }

/* ═══ HOME: CTA band ════════════════════════════════════════════════ */
.cta-band {
  position: relative;
  background: var(--grad-dark);
  color: #fff;
  text-align: center;
  padding-block: clamp(60px, 8vw, 100px);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 100% at 50% 50%, rgba(201, 146, 42, .22), transparent 70%);
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band h2 em { color: var(--gold-bright); font-style: italic; }
.cta-band p { color: rgba(253, 246, 238, .78); max-width: 52ch; margin: 0 auto 30px; }