/* ==== HOMEPAGE – MAGI INOX ==== */

/* Utility */
:root {
  --mi-container: min(1140px, 92vw);
  --mi-gap: 24px;
  --mi-gap-lg: 48px;
  --mi-dark: #1b1b1b;
  --mi-gray: #6b6b6b;
  --mi-accent: #c40000; /* se vuoi richiamare un rosso aziendale */
}

/* Layout base */
.mi-home { overflow-x: clip; }

/* ------------- HERO ------------- */
.mi-hero {
  position: relative;
  min-height: clamp(60vh, 72vh, 820px);
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  isolation: isolate;
}

.mi-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.mi-hero__video {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;          /* 16:9 full cover */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  pointer-events: none;
}

.mi-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.55) 70%);
  z-index: -1;
}

.mi-hero__inner { padding-inline: 24px; }

.mi-hero__kicker {
  margin: 0 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .9;
}

.mi-hero__title {
  margin: 0;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 800;
}

/* ------------- INTRO ------------- */
.mi-intro { padding: clamp(48px, 6vw, 96px) 0; background:#fff; }
.mi-intro__inner { width: var(--mi-container); margin-inline: auto; padding-inline: 16px; }
.mi-intro__title { font-size: clamp(28px, 3.2vw, 36px); margin-bottom: 16px; color: var(--mi-dark); }
.mi-intro__text p { color: var(--mi-gray); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; margin: 0 0 14px; }
.mi-intro__text strong { color: var(--mi-dark); }

/* ------------- DUO ------------- */
.mi-duo {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px) 1fr;
  align-items: center;
  gap: var(--mi-gap-lg);
  padding: clamp(48px, 7vw, 110px) 0;
  background:#f7f7f7;
}

.mi-duo__col { display: flex; justify-content: center; }
.mi-duo__col--content { text-align: center; padding-inline: 12px; }
.mi-duo__figure { margin: 0; max-width: 520px; aspect-ratio: 13/15; overflow: clip; border-radius: 8px; }
.mi-duo__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mi-duo__eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mi-gray);
  font-weight: 600;
}

.mi-duo__heading { margin: 0 0 10px; font-size: clamp(28px, 4vw, 44px); }
.mi-duo__lead { margin: 0 0 18px; font-size: clamp(18px, 1.6vw, 22px); color: var(--mi-dark); }

/* CTA */
.mi-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease, color .2s ease;
}

.mi-btn--primary {
  background: var(--mi-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.mi-btn--primary:hover,
.mi-btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* ===== DUO HERO RINFORZATO ===== */
.mi-duo--focus {
  background: #efefef;                    /* più chiaro */
  padding: clamp(56px, 8vw, 120px) 0;
  grid-template-columns: 1fr minmax(360px, 620px) 1fr;  /* centrale più largo */
  gap: clamp(28px, 5vw, 64px);
}

/* card centrale con glass effect */
.mi-duoCard{
  display:grid; place-items:center; text-align:center;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 80px);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  outline: 1px solid rgba(0,0,0,.06);
}

/* tipografia forte */
.mi-kicker{
  margin:0;
  font-size: 14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#c40000;                          /* accento brand */
  font-weight:700;
}

.mi-display{
  margin: 0;
  font-size: clamp(44px, 7vw, 82px);
  line-height:.98;
  font-weight: 800;
  letter-spacing: .02em;
  color:#525252;                           /* grigio scuro elegante */
}

.mi-sub{
  margin: 0 0 6px;
  font-size: clamp(16px,1.4vw,18px);
  color:#2b2b2b;
  line-height:1.45;
}

/* CTA grande */
.mi-btn--lg{ padding:14px 26px; font-size:16px; }
.mi-btn--primary{ background:#d31919; }               /* rosso più visibile */
.mi-btn--primary:hover{ background:#b91515; }

/* immagini più “fotografiche” con ombra morbida */
.mi-duo__figure{ max-width:min(560px, 92%); border-radius:12px; overflow:hidden; }
.mi-duo__figure--shadow{ box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.mi-duo__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* spaziatura fine tra elementi card */
.mi-duoCard .mi-display + .mi-sub{ margin-top:-6px; }
.mi-duoCard .mi-sub + .mi-btn{ margin-top:6px; }

/* ——— Responsive ——— */
@media (max-width:1200px){
  .mi-duo--focus{ grid-template-columns: 1fr minmax(320px, 520px) 1fr; }
}
@media (max-width:1024px){
  .mi-duo--focus{ grid-template-columns: 1fr; gap: 28px; }
  .mi-duo__figure{ max-width:min(560px, 92vw); }
  .mi-duoCard{ background:#fff; }
}