/* ============================================================
   Biauto Group Multibrand Index — Styles
   Layout: header (plate) + 4-tile main + footer band (100px)
   Full viewport: 100vw × 100vh su desktop, scroll su mobile/tablet
   Responsive: desktop ≥1024 (4col) / tablet 768-1023 (2x2) / mobile <768 (col)
   ============================================================ */

/* Reset + base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — gestisce URL bar mobile/iOS */
  overflow: hidden; /* no scroll, viewport coverage esatto su tutti i device */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #FFFFFF;
  background: #000000;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   Header — plate "BIAUTO GROUP" centered (alto, logo prominente)
   ============================================================ */
.bg-header {
  background: #FFFFFF;
  padding: 28px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #E5E5E5;
  flex-shrink: 0;
  width: 100%;
}

.bg-header__logo {
  display: block;
  line-height: 0;
}

.bg-header__logo img {
  height: 72px; /* logo prominente, ~3x del footer */
  width: auto;
}

/* ============================================================
   Main — 4 brand tiles (full viewport width, fills remaining height)
   ============================================================ */
.brands {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  width: 100%;
  min-height: 0; /* permette al grid di non eccedere flex parent */
}

.brand-tile {
  position: relative;
  overflow: hidden;
  display: block;
  color: #FFFFFF;
  transition: transform 0.4s ease;
  min-height: 0; /* permette ai tile di rispettare grid-template-rows */
}

/* Hero — sfondo colorato (placeholder), sostituibile con background-image quando arrivano gli asset */
.brand-tile__hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform 0.6s ease;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Sfondi hero per brand: WebP background-image + color fallback per slow loading.
   Il color fallback si vede mentre l'immagine viene scaricata, poi sostituito dal WebP. */
.brand-tile--triumph .brand-tile__hero {
  background-color: #1A1A1A;
  background-image: url('../images/triumph-hero.webp');
}
.brand-tile--bmw .brand-tile__hero {
  background-color: #0A2E4C;
  background-image: url('../images/bmw-hero.webp');
}
.brand-tile--mercedes .brand-tile__hero {
  background-color: #2C2C2C;
  background-image: url('../images/mercedes-hero.webp');
}
.brand-tile--outletgomme .brand-tile__hero {
  background-color: #3A2A1A;
  background-image: url('../images/outletgomme-hero.webp');
}

.brand-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 2;
  transition: background 0.4s ease;
}

.brand-tile__content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
  text-align: center;
}

/* Logo: contenitore. I loghi reali sono <img> dentro, oppure dashed placeholder. */
.brand-tile__logo {
  max-width: 280px;
  width: 75%;
}

/* Modifier --bmw: il logo BMW Motorrad co-brand è wide (780x250 ratio 3.12),
   ha bisogno di piu spazio orizzontale per essere leggibile */
.brand-tile__logo--bmw {
  max-width: 320px;
  width: 82%;
}

.brand-tile__logo--placeholder {
  aspect-ratio: 200 / 80;
  background: rgba(255, 255, 255, 0.08);
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.brand-tile__logo--placeholder::after {
  content: "LOGO";
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  font-weight: 500;
}

/* Coming Soon placeholder (Mercedes + Outletgomme, in attesa di pubblicazione)
   Box pill-shaped, fit-content del testo + padding compatto, bianco quasi solido per
   massimo contrasto col testo arancione */
.brand-tile__logo--coming-soon {
  /* override base .brand-tile__logo width/max-width per shrink-to-fit */
  width: auto;
  max-width: none;
  align-self: center;

  /* Fill animation triggerata dall'hover sul TILE parent (non sul badge stesso).
     Gradient 50/50 + background-size 200%: slide del bianco da sinistra a destra. */
  background-image: linear-gradient(to right, #FFFFFF 50%, #E55E2B 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background-position 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s ease;
}

.brand-tile__logo--coming-soon::after {
  content: "COMING SOON";
  color: #FFFFFF;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.35s ease 0.1s;
}

/* Hover sul TILE (non sul badge): fill bianco slide-in + testo arancione.
   Cursor resta default sul tile (e' impostato in .brand-tile--coming-soon { cursor: default }). */
@media (hover: hover) {
  .brand-tile--coming-soon:hover .brand-tile__logo--coming-soon {
    background-position: left bottom;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
  .brand-tile--coming-soon:hover .brand-tile__logo--coming-soon::after {
    color: #E55E2B;
  }
}

.brand-tile__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.brand-tile__label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Hover desktop — solo per tile attivi (link), non per coming-soon */
@media (hover: hover) {
  .brand-tile:not(.brand-tile--coming-soon):hover .brand-tile__hero {
    transform: scale(1.06);
  }
  .brand-tile:not(.brand-tile--coming-soon):hover .brand-tile__overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.40) 100%);
  }
}

/* Focus visible — solo per tile interagibili */
.brand-tile:not(.brand-tile--coming-soon):focus-visible {
  outline: 3px solid #E55E2B;
  outline-offset: -3px;
}

/* Coming-soon tile: non interagibile, cursor default, leggera opacita */
.brand-tile--coming-soon {
  cursor: default;
}
.brand-tile--coming-soon .brand-tile__overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
}

/* ============================================================
   Footer band (sfondo dark, low-profile vs header alto)
   Desktop: 50px fisso. Tablet/mobile: cresce se testo wrappa, ma sempre dentro 100vh
   (il grid .brands si adatta via flex: 1 1 auto).
   ============================================================ */
.bg-footer {
  background: #2A2A2A;
  color: #B0B0B0;
  min-height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  width: 100%;
}

.bg-footer__inner {
  max-width: 1400px;
  width: 100%;
  text-align: center;
}

.bg-footer__legal {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.bg-footer__link {
  color: #B0B0B0;
  text-decoration: underline;
  text-decoration-color: rgba(176, 176, 176, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.bg-footer__link:hover {
  color: #FFFFFF;
  text-decoration-color: #FFFFFF;
}

.bg-footer__link:focus-visible {
  outline: 2px solid #E55E2B;
  outline-offset: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet 768-1023 — grid 2x2, sempre 100vh, no scroll */
@media (max-width: 1023px) {
  .brands {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

/* Mobile <768 — colonna singola con 4 row, sempre 100vh, no scroll */
@media (max-width: 767px) {
  .brands {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .brand-tile__logo {
    max-width: 185px; /* Triumph + altri loghi standard su mobile */
  }
  .brand-tile__logo--bmw {
    max-width: 180px;
  }
  /* COMING SOON ridotto su mobile per non sborder dal tile / dominare la composizione */
  .brand-tile__logo--coming-soon {
    padding: 7px 14px;
  }
  .brand-tile__logo--coming-soon::after {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }
  .brand-tile__content {
    gap: 12px;
    padding: 16px 12px;
  }
  .brand-tile__label {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
  }
  .bg-footer {
    padding: 6px 12px;
    min-height: 44px;
  }
  .bg-footer__legal {
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  .bg-header {
    padding: 18px 0;
  }
  .bg-header__logo img {
    height: 52px;
  }
}

/* Print — minimal */
@media print {
  .brand-tile__hero, .brand-tile__overlay {
    display: none;
  }
  .brand-tile {
    color: #000;
  }
}