/* ==========================================================================
   ENJOY RODI GARGANICO — sistema visivo a sé stante (ispirato a "Zipline"),
   pensato per stare sotto la stessa nav di AstroBrand ma rompere con tutto
   il resto: canvas crema, fotografia piena pagina, titoli enormi condensati,
   un solo colore d'accento (qui: turchese, non il viola della reference).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --er-color-canvas: #f7f4e8;
  --er-color-ink: #000000;
  --er-color-border: #c6c3ba;
  --er-color-accent: #12a4a0; /* Acqua di Gargano — sostituisce il Drone Violet della reference */
  --er-color-accent-ink: #f7f4e8;

  --er-font-display: 'Anton', ui-sans-serif, system-ui, sans-serif; /* sostituto di fkScreamer */
  --er-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;    /* sostituto di fkGroteskNeue */

  --er-text-caption: 14px;
  --er-text-body: 16px;
  --er-text-body-lg: 18px;
  --er-text-subheading: 22px;
  --er-text-heading-sm: 40px;
  --er-text-heading: 90px;
  --er-text-heading-lg: 120px;
  --er-text-display: 150px;

  --er-radius: 20px;

  --er-space-4: 4px; --er-space-12: 12px; --er-space-16: 16px; --er-space-20: 20px;
  --er-space-24: 24px; --er-space-48: 48px; --er-space-60: 60px; --er-space-120: 120px; --er-space-128: 128px;
}

.er-page { background: var(--er-color-canvas); font-family: var(--er-font-body); color: var(--er-color-ink); }
.er-page * { box-sizing: border-box; }
.er-page img { max-width: 100%; display: block; }

.er-body { font-size: var(--er-text-body); line-height: 1.4; letter-spacing: -0.16px; color: var(--er-color-ink); }
.er-body-lg { font-size: var(--er-text-body-lg); line-height: 1.4; letter-spacing: -0.18px; }
.er-caption { font-size: var(--er-text-caption); line-height: 1.2; letter-spacing: -0.14px; opacity: 0.7; }
.er-subheading { font-family: var(--er-font-body); font-size: var(--er-text-subheading); line-height: 1; letter-spacing: -0.22px; font-weight: 600; }

.er-display {
  font-family: var(--er-font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}
.er-display.xl { font-size: var(--er-text-display); }
.er-display.lg { font-size: var(--er-text-heading-lg); }
.er-display.md { font-size: var(--er-text-heading); }
.er-display.sm { font-size: var(--er-text-heading-sm); }

@media (max-width: 900px) {
  .er-display.xl { font-size: 84px; }
  .er-display.lg { font-size: 64px; }
  .er-display.md { font-size: 52px; }
}
@media (max-width: 560px) {
  .er-display.xl { font-size: 56px; }
  .er-display.lg { font-size: 44px; }
  .er-display.md { font-size: 38px; }
}

/* Bottoni */
.er-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--er-font-body); font-size: var(--er-text-body); font-weight: 500;
  border-radius: var(--er-radius);
  padding: 14px 24px;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--er-color-ink);
  transition: opacity 0.15s ease;
}
.er-btn:hover { opacity: 0.75; }
.er-btn-filled { background: var(--er-color-ink); color: var(--er-color-canvas); }
.er-btn-ghost { background: transparent; color: var(--er-color-ink); }
.er-btn-ghost-on-photo { background: transparent; color: var(--er-color-canvas); border-color: var(--er-color-canvas); }

/* Hero fotografico a piena pagina */
.er-hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.er-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0) 70%);
}
.er-hero-content { position: relative; z-index: 1; padding: var(--er-space-48) var(--er-space-24) var(--er-space-60); max-width: 900px; }
.er-hero--right { justify-content: flex-end; }
.er-hero--right .er-hero-content { margin-left: auto; }
.er-hero .er-display { color: var(--er-color-canvas); }
.er-hero .er-body-lg { color: var(--er-color-canvas); margin: var(--er-space-16) 0 var(--er-space-24); max-width: 46ch; }
.er-hero .er-body { color: var(--er-color-canvas); max-width: 50ch; }
.er-hero-placeholder {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, #e4e0d0, #e4e0d0 14px, #d8d4c2 14px, #d8d4c2 28px);
  display: flex; align-items: center; justify-content: center;
  color: #8a8672; font-family: var(--er-font-body); font-size: 14px; text-align: center; padding: 20px;
}

/* Sezione centrata su canvas crema */
.er-section { padding: var(--er-space-120) var(--er-space-24); }
.er-section-narrow { max-width: 720px; margin: 0 auto; text-align: center; }
@media (max-width: 700px) { .er-section { padding: var(--er-space-60) var(--er-space-16); } }

/* Card outline crema */
.er-card {
  background: var(--er-color-canvas);
  border: 1px solid var(--er-color-ink);
  border-radius: var(--er-radius);
  padding: var(--er-space-24);
}

/* Card accento turchese */
.er-card-accent {
  background: var(--er-color-accent);
  color: var(--er-color-accent-ink);
  border-radius: var(--er-radius);
  padding: var(--er-space-24);
}

/* Griglia categorie / galleria */
.er-grid { display: grid; gap: var(--er-space-24); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1200px; margin: 0 auto; }
.er-photo {
  border-radius: var(--er-radius);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #e4e0d0, #e4e0d0 14px, #d8d4c2 14px, #d8d4c2 28px);
  display: flex; align-items: center; justify-content: center;
  color: #8a8672; font-size: 13px; text-align: center; padding: 16px;
  margin-bottom: var(--er-space-16);
}
.er-photo img { width: 100%; height: 100%; object-fit: cover; }
.er-photo.square { aspect-ratio: 1 / 1; }

/* Galleria full-bleed */
.er-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.er-gallery .er-photo { border-radius: 0; margin-bottom: 0; aspect-ratio: 1/1; }
@media (max-width: 700px) { .er-gallery { grid-template-columns: repeat(2, 1fr); } }

/* CTA finale full-bleed scuro */
.er-cta {
  background: var(--er-color-ink); color: var(--er-color-canvas);
  text-align: center; padding: var(--er-space-120) var(--er-space-24);
}
.er-cta .er-display { color: var(--er-color-canvas); }
.er-cta .er-btn-filled { background: var(--er-color-canvas); color: var(--er-color-ink); border-color: var(--er-color-canvas); }

/* Variante per foto storiche chiare (es. seppia/vintage): overlay chiaro invece che scuro, testo in Ink */
.er-hero--historic::after {
  background: linear-gradient(to left, rgba(247,244,232,0.97) 0%, rgba(247,244,232,0.9) 25%, rgba(247,244,232,0.55) 45%, rgba(247,244,232,0.1) 65%, rgba(247,244,232,0) 80%);
}
@media (max-width: 900px) {
  .er-hero--historic::after {
    background: linear-gradient(to left, rgba(247,244,232,0.97) 0%, rgba(247,244,232,0.95) 55%, rgba(247,244,232,0.7) 80%, rgba(247,244,232,0.3) 95%, rgba(247,244,232,0.05) 100%);
  }
}
.er-hero--historic .er-display,
.er-hero--historic .er-body,
.er-hero--historic .er-body-lg,
.er-hero--historic .er-caption {
  color: var(--er-color-ink);
}