/* RC88 · L'ingresso all'Arte nella Home.
   Una sola fascia, interamente cliccabile, come l'Atlante delle Rotte: il
   titolo stesso è il comando. Niente etichetta, niente frase, niente pulsante
   giallo dentro: chi la incontra capisce in un secondo che si entra. */

.arte-home-banner {
  --arte-home-ink: #3f270c;
  --arte-home-ink-soft: #6b5b4a;
  --arte-home-gold: #a56a18;
  --arte-home-gold-light: #f6bf4d;
  --arte-home-gold-deep: #d88422;
  --arte-home-paper: #fffaf0;
  --arte-home-line: rgba(83, 61, 32, .18);
  --arte-home-radius: 20px;
  --arte-home-shadow: 0 12px 30px rgba(63, 39, 12, .10);
  width: min(var(--home-feature-max-width, 1120px), calc(100% - (var(--home-feature-gutter, 24px) * 2)));
  margin: 14px auto;
}

.arte-home-banner[hidden] {
  display: none !important;
}

/* Un unico pulsante che riempie la fascia. */
.arte-home-hit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.4vw, 18px);
  width: 100%;
  min-height: 84px;
  padding: clamp(12px, 2.6vw, 20px) clamp(14px, 3vw, 24px);
  border: 1px solid var(--arte-home-line);
  border-radius: var(--arte-home-radius);
  background: linear-gradient(150deg, #fffdf8, #fdf2da 55%, #f8e5bc);
  box-shadow: var(--arte-home-shadow);
  color: var(--arte-home-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.arte-home-hit:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(63, 39, 12, .16);
  filter: brightness(1.03) saturate(1.04);
}

.arte-home-hit:focus-visible {
  outline: 3px solid rgba(165, 106, 24, .5);
  outline-offset: 3px;
}

.arte-home-hit:active {
  transform: translateY(0);
}

.arte-home-art {
  display: grid;
  place-items: center;
  width: clamp(56px, 12vw, 76px);
  height: clamp(56px, 12vw, 76px);
  border: 1px solid var(--arte-home-line);
  border-radius: 16px;
  background: var(--arte-home-paper);
  transition: transform .18s ease;
}

.arte-home-art svg {
  display: block;
  width: 76%;
  height: 76%;
}

.arte-home-hit:hover .arte-home-art {
  transform: rotate(-2deg) translateY(-1px);
}

.arte-home-frame { fill: var(--arte-home-gold-light); stroke: var(--arte-home-ink); stroke-width: 2; }
.arte-home-canvas { fill: var(--arte-home-paper); }
.arte-home-sun { fill: var(--arte-home-gold-deep); }
.arte-home-hills { fill: var(--arte-home-gold); opacity: .78; }
.arte-home-column,
.arte-home-base { fill: none; stroke: var(--arte-home-ink); stroke-width: 2.2; stroke-linecap: round; }
.arte-home-bust { fill: #c98a2e; stroke: var(--arte-home-ink); stroke-width: 1.6; }
.arte-home-shoulders { fill: #c98a2e; stroke: var(--arte-home-ink); stroke-width: 1.4; }

.arte-home-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.arte-home-title {
  color: var(--arte-home-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.08;
  text-wrap: balance;
}

.arte-home-arrow {
  color: var(--arte-home-gold);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-weight: 900;
  transition: transform .18s ease;
}

.arte-home-hit:hover .arte-home-arrow {
  transform: translateX(4px);
}

@media (max-width: 650px) {
  .arte-home-banner {
    border-radius: 14px;
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .arte-home-hit {
    min-height: 72px;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .arte-home-art {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .arte-home-title {
    font-size: clamp(1.32rem, 6.4vw, 1.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arte-home-hit,
  .arte-home-arrow,
  .arte-home-art {
    transition: none;
  }
}