/* base.css - Stili di base e utility */

/* ===== FONT ===== */

@font-face {
    font-family: 'Gotham-Book';
    src: url('/wp-content/themes/nx-design/assets/font/MYRIADPRO-REGULAR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }

@font-face {
    font-family: 'Gotham-Medium';
    src: url('/wp-content/themes/nx-design/assets/font/MYRIADPRO-BOLD.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    }

@font-face {
    font-family: 'Gotham-Bold';
    src: url('/wp-content/themes/nx-design/assets/font/MYRIADPRO-BOLD.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    }

@font-face {
    font-family: 'PlayFairDisplay';
    src: url('/wp-content/themes/nx-design/assets/font/PlayfairDisplay-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    }
    
@font-face {
    font-family: 'Myriad-pro-bold';
    src: url('/wp-content/themes/nx-design/assets/font/MYRIADPRO-BOLD.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    }
    
@font-face {
    font-family: 'Myriad-pro-regular';
    src: url('/wp-content/themes/nx-design/assets/font/MYRIADPRO-REGULAR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }

/* ===== VARIABILI ===== */

:root {
    /* Colori */
    --color-primary: #ED1C24;
    --color-text: #1E1E1E;
    --color-title: #0A0A0A;
    --color-grey: #999999;
    --color-primary-bg: #FFC6C8;
    --color-white: #ffffff;
    --color-dark: #000000; 

    /* Tipografia */
    --font-family-gotham-book: 'Gotham-Book', 'Gotham-Medium', 'Gotham-Bold';
    --font-family-gotham-medium: 'Gotham-Medium';
    --font-family-gotham-bold: 'Gotham-Bold';
    --font-family-play: 'PlayFairDisplay';
    --font-family-myriad-pro-bold: 'Myriad-pro-bold';
    --font-family-myriad-pro-regular: 'Myriad-pro-regular';

    /* Font size */
    --font-size-xs: 14px;
    --font-size-s: 16px;
    --font-size-xm: 24px;
    --font-size-m: 26px;
    --font-size-l: 30px;
    --font-size-xl: 40px;
    --font-size-xxl: 60px;
    --font-size-xxxl: 68px;
    --font-size-max: 78px;

    /* Space */
    --space-xs: 4px;
    --space-s: 8px;
    --space-xm: 16px;
    --space-m: 32px;
    --space-l: 48px;
    --space-xl: 64px;
    --space-xxl: 96px;
    --space-xxxl: 128px;
    --space-max: 256px;

    /* Font weight */
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;

    /* Line height */
    --line-hegiht-extrasmall: 1;
    --line-height-small: 1.2;
    --line-height-medium: 1.4;
    --line-height-large: 1.6;

    /* Line height */
    --letter-spacing: 0;

    /* Border radius */
    --radius-none: 0;
    --radius-normal: 12px;
    --radius-button: 500px;

    /* Box shadows */
    --shadow-normal: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    --shadow-price: 0 0px 6px 0 rgba(237, 28, 36, 1);

    /* Z-indexes */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-dark);
  background-color: var(--color-white);
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* ===== TIPOGRAFIA ===== */
h1, .h1 {
    font-size: var(--font-size-max);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-myriad-pro-bold);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
  }

h1 span {
    font-family: var(--font-family-myriad-pro-regular);
    color: var(--color-primary);
    letter-spacing: -0.02em !important;
}
  
h2, .h2 {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-gotham-medium);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
}

h2 span {
    color: var(--color-primary);
    letter-spacing: -0.02em !important;
}
  
h3, .h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-gotham-medium);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
}
  
h4, .h4 {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-gotham-medium);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
}

h5, .h5 {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-gotham-medium);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
}

h6, .h6 {
    font-size: var(--font-size-xm);
    font-weight: var(--font-weight-500);
    font-family: var(--font-family-gotham-medium);
    color: var(--color-title);
    letter-spacing: -0.02em !important;
}

p {
    font-size: var(--font-size-xm);
    font-weight: var(--font-weight-400);
    font-family: var(--font-family-gotham-book);
    color: var(--color-text);
    letter-spacing: -0.02em !important;
}

p b{
    font-family: var(--font-family-gotham-medium);
    letter-spacing: -0.02em !important;
}

a {
    font-size: var(--font-size-xm);
    font-weight: var(--font-weight-400);
    font-family: var(--font-family-gotham-book);
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.02em !important;
}

a:hover {
    color: var(--color-dark);
    letter-spacing: -0.02em !important;
}

button {
    font-family: var(--font-family-gotham-book);
}

button span {
    font-family: var(--font-family-gotham-book);
}

/* ===== CONTAINER ===== */
.container {
    padding: var(--space-l) var(--space-xxxl);
    width: 100%;
}

.container-small {
    padding: var(--space-m) var(--space-xxxl);
    width: 100%;
}

/* ===== UTILITY ===== */
/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-xm { gap: var(--space-xm); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.flex-1 {flex: 1;}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font weights */
.font-normal { font-family: var(--font-family-gotham-book); }
.font-medium { font-family: var(--font-family-gotham-medium); }
.font-bold { font-family: var(--font-family-gotham-bold); }

/* Position */
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}

/* Transform */
.uppercase {text-transform: uppercase;}

/* Width */
.w-100 {width: 100%;}
.w-75 {width: 75%;}
.w-50 {width: 50%;}

/* Heigth */
.h-100 {height: 100%;}

/* color */
.color-white {color: var(--color-white);}
.color-black {color: var(--color-dark);}
.color-primary {color: var(--color-primary);}
.color-title {color: var(--color-title);}
.color-text {color: var(--color-text);}
.color-grey {color: var(--color-grey);}

/* z-index */
.z-index-0 {z-index: var(--z-0);}
.z-index-10 {z-index: var(--z-10);}
.z-index-20 {z-index: var(--z-20);}
.z-index-30 {z-index: var(--z-30);}

/* margin */
.m-auto {margin: auto;}
.mb-16 {margin-bottom: var(--space-xm);}
.mb-32 {margin-bottom: var(--space-m);}
.mb-64 {margin-bottom: var(--space-xl);}

/* font size */
.fs-20 {font-size: var(--font-size-m);}
.fs-24 {font-size: var(--font-size-l);}
.fs-32 {font-size: var(--font-size-xl);}

/* Opacity */
.opacity-80 {opacity: 0.8;}

.nojq {display: none;}

html {margin: 0 !important;}

/* 1️⃣  il contenitore diventa grid  ------------------- */
.vantages-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(3,1fr); /* 3, non di più */
  justify-content:center;              /* centra se lo spazio è maggiore */
}

/* 2️⃣  la card: larghezza 100% dello span di grid ------ */
.vantages-item{
  background:#fff;
  padding:var(--space-m);
  border-radius:var(--radius-normal);
  box-shadow:var(--shadow-normal);
}

/* 3️⃣  breakpoint opzionale (tablet 2 colonne) -------- */
@media (min-width:768px) and (max-width:1023px){
  .vantages-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

/* il tuo container già c’è: aggiungigli solo queste due righe */
.video-box-test {
  inline-size: 100%;        /* occupa tutta la larghezza disponibile */
  aspect-ratio: 16 / 9;     /* rapporto classico video; cambia se ti serve */
}

/* l’iframe riempie il box al 100 % */
.video-box-test iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}