/* ============================================================
   OFFSEE — home.css
   Stili della sola homepage. Caricato dopo base.css; i token
   e le classi condivise vengono da lì (non si ridefiniscono).
   ============================================================ */

/* ------------------------------------------------------------
   HERO — full-width, foto diurna, testo su scrim navy in basso
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy); /* dietro la foto mentre carica */
}

.hero-media img {
  width: 100%;
  height: min(88svh, 56rem);
  min-height: 32rem;
  object-fit: cover;
  object-position: center;
}

/* Scrim funzionale per la leggibilità del testo (navy, dal basso) */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22, 50, 74, 0.62) 0%,
    rgba(22, 50, 74, 0.24) 42%,
    rgba(22, 50, 74, 0) 68%
  );
  pointer-events: none;
}

.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--paper);
  padding-bottom: clamp(2.25rem, 6vw, 4.5rem);
}

.hero-kicker {
  color: rgba(246, 240, 227, 0.85);
  margin-bottom: var(--space-3);
}

.hero-title {
  max-width: 13em;
  margin-bottom: var(--space-6);
}

/* ------------------------------------------------------------
   IN EVIDENZA
   ------------------------------------------------------------ */
.featured-more {
  margin-top: var(--space-7);
  text-align: center;
}

/* ------------------------------------------------------------
   CAMPAGNA — trittico full-bleed, caption a cartellino
   ------------------------------------------------------------ */
.campagna-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .campagna-grid { grid-template-columns: repeat(3, 1fr); }
}

.campagna-shot {
  position: relative;
  overflow: hidden;
  background: var(--sand-tint);
}

.campagna-shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 480ms var(--ease);
}
@media (min-width: 768px) {
  .campagna-shot img { aspect-ratio: 4 / 5; }
}
.campagna-grid:hover .campagna-shot img { transform: scale(1.02); }

/* Cartellino mono su carta, come il badge delle card */
.campagna-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
}

.campagna-cta {
  margin-top: var(--space-6);
  text-align: center;
}

/* ------------------------------------------------------------
   IL BRAND
   ------------------------------------------------------------ */
.brand-link-row { margin-top: var(--space-5); }

.link-plain {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15rem;
  transition: border-color var(--dur) var(--ease);
}
.link-plain:hover { border-bottom-color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .campagna-shot img, .link-plain { transition: none; }
  .campagna-grid:hover .campagna-shot img { transform: none; }
}