/* ##########################################################################
   HOMEPAGE - ADEGUAMENTO G44 (da mettere in casino_home_new.css)
   ########################################################################## */

/* ==========================================================================
   FONT - Barlow / Barlow Condensed (file in ./font/)
   ========================================================================== */

/* Barlow - testi correnti */
@font-face {
  font-family: "Barlow";
  src: url("./font/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("./font/Barlow-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("./font/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("./font/Barlow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Barlow Condensed - titoli, kicker, numeri */
@font-face {
  font-family: "Barlow Condensed";
  src: url("./font/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./font/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./font/BarlowCondensed-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./font/BarlowCondensed-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./font/BarlowCondensed-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}



/* ==========================================================
   G44 - TEMA SPORTCASH (override)
   Selettore section.g44 (piu' specifico di .g44 del file base): cosi'
   vince anche se questo file viene caricato PRIMA di g44.css, come
   succede ora sulla homepage.
   ========================================================== */
section.g44 {
  --g44-font-body: 'Barlow', sans-serif;
  --g44-font-display: 'Barlow Condensed', sans-serif;

  --g44-bg: #0D110E;
  --g44-fg: #FFFFFF;
  --g44-muted: #AEB5AF;
  --g44-link: #FF8A3D;
  --g44-accent: #FF6600;
  --g44-accent-contrast: #111511;

  --g44-featured-bg: #0E6634;
  --g44-featured-muted: #D6EADD;
  --g44-featured-ring: rgba(255, 255, 255, 0.06);

  --g44-wins-bg: #18201B;
  --g44-wins-line: #232B25;
  --g44-wins-avatar-bg: #232B25;
  --g44-wins-amount: #FF8A3D;

  --g44-card-bg: #1C2A21;
  --g44-card-muted: #AEB5AF;
}


/* ==========================================================
   G44 - LARGHEZZA COME IL MOCKUP
   Sulla homepage #centralContainer e' a tutta larghezza
   (container-fluid): il blocco casino del mockup sta in una
   colonna da 1360px con 24px di margine ai lati.
   ========================================================== */
#centralContainer > section.g44 {
  box-sizing: border-box;
  width: min(1312px, calc(100% - 48px));
  margin: 0 auto 40px;
}


/* ==========================================================
   G44 - MOBILE (fino a 767px)
   - blocco con 12px ai lati, come il mockup mobile
   - niente scorrimento orizzontale della pagina: solo la riga
     dei giochi scorre, dentro il blocco
   - ultimo gioco non tagliato: il padding-right di un contenitore
     che scorre viene ignorato da Safari/iOS, lo spazio finale lo
     da' un elemento vuoto
   ========================================================== */
@media (max-width: 767px) {
  section.g44,
  #centralContainer > section.g44 {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 12px 28px !important;
    overflow: hidden !important;
  }

  section.g44 .g44__head,
  section.g44 .g44__top,
  section.g44 .g44__grid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  section.g44 .g44__grid {
    padding-right: 0 !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  section.g44 .g44__grid::after {
    content: "";
    flex: 0 0 6px;
  }
  section.g44 a.g44-card {
    scroll-snap-align: start;
  }
}

/* homepage mobile: il <main id="idContentMain"> ha la classe .row di Bootstrap,
   i suoi margini negativi (-12px per lato) facevano scorrere la pagina in orizzontale */
@media (max-width: 767px) {
  main#idContentMain.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

html, body#body, #idContentMain { background: transparent !important; }
#idContentMain { padding: 0 !important; margin: 0 !important; }
#centralContainer, #mainContentContainer { padding: 0 !important; }
.g44 { margin: 0 !important; }