/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
  --color-primary: #003A70;
  --color-secondary: #6485C7;
  --color-accent: #DBF2FB;
  --color-dark: #24306B;
  --color-white: #fff;
  --color-black: #000;
  --font-serif: 'Luiss Serif';
  --font-sans: 'Luiss Sans';
  --border-radius-sm: 20px;
  --border-radius-lg: 40px;
  --border-width: 2px;
  --container-max-width: 1364px;
  --header-height-mobile: calc(600px - 64px - 40px);
  --header-height-desktop: calc(604px - 64px - 40px);
  --header-max-height: 604px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
  --fs-small: clamp(14px, 2.5vw, 16px);
  --fs-medium: clamp(16px, 3vw, 18px);
  --fs-large: clamp(17px, 3.2vw, 19px);
  --fs-xl: clamp(20px, 4vw, 24px);
  --fs-xxl: clamp(22px, 4.5vw, 26px);
  --fs-xxxl: clamp(26px, 5vw, 32px);
  --fs-huge: clamp(30px, 5.5vw, 35px);
  --fs-landing-title: clamp(43px, 8vw, 80px);
  --fs-landing-subtitle: clamp(26px, 6vw, 64px);
}

/* ==========================================================================
	 CONTAINER E LAYOUT GLOBALI
	 ========================================================================== */

.container, .container-lg, .container-md, .container-sm, .container-xl {
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: var(--container-max-width);
  }
}

/* ==========================================================================
	 HEADER
	 ========================================================================== */

/* Mobile first - stili base */

#header-inner {
  height: var(--header-height-mobile);
}

#desktop-header {
/*  background-image: url("../../assets/img/Header_mobile.jpg"); */
  background-size: contain;
  background-repeat: no-repeat;
}

/* Tablet */

@media (min-width: 768px) {
  #header-inner {
    height: var(--header-height-desktop);
  }
}

@media (min-width: 768px) {
  #desktop-header {
    max-height: var(--header-max-height);
/*    background-image: url("../../assets/img/Header_desktop.jpg"); */
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* Large desktop - ottimizzazioni aggiuntive se necessarie */

@media (min-width: 1200px) {
  #desktop-header {
    background-position: center center;
  }
}

/* ==========================================================================
	 LANDING - TYPOGRAPHY CONTAINER
	 ========================================================================== */

/* Mobile first - stili base */

#landing-typo-container {
  top: 152px;
  padding: 0 1rem;
}

/* Small tablets */

@media (min-width: 576px) {
  #landing-typo-container {
    top: 120px;
    padding: 0 1.5rem;
  }
}

/* Tablet e desktop */

@media (min-width: 768px) {
  #landing-typo-container {
    top: auto;
    bottom: 0;
    right: 0;
    max-width: 1300px;
    padding: 0;
  }
}

/* Large desktop - margini aggiustati */

@media (min-width: 1200px) {
  #landing-typo-container {
    max-width: 1400px;
    right: 2rem;
  }
}

/* ==========================================================================
	 LANDING - TITOLI E TESTI
	 ========================================================================== */

#landing-intro {
  font-size: var(--fs-small);
  margin-bottom: clamp(20px, 5vw, 40px);
  font-family: var(--font-sans);
  line-height: 1.5;
}

/* Mobile first - stili base */

#landing-title {
  font-family: var(--font-serif);
  font-weight: bold;
  font-style: italic;
  margin: 0;
  height: auto;
  line-height: 1.1;
  font-size: var(--fs-landing-title);
}

#landing-subtitle {
  font-family: var(--font-serif);
  margin: 0;
  height: auto;
  line-height: 1.2;
  font-size: var(--fs-landing-subtitle);
}

/* Non serve più media query per font-size, gestito da clamp() */

/* ==========================================================================
	 LANDING - INFO SECTION
	 ========================================================================== */

.landing-info {
  font-family: var(--font-sans);
  color: var(--color-primary);
  padding: clamp(1rem, 3vw, 2rem);
}

.landing-info h4 {
  font-size: var(--fs-xl);
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.landing-info p {
  font-size: var(--fs-large);
  line-height: 1.6;
}

/* ==========================================================================
	 SECTIONS
	 ========================================================================== */

/* Mobile first - stili base */

#section-1 {
  padding-top: clamp(20px, 5vw, 40px);
}

#section-1 p {
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* Small tablets e desktop */

@media (min-width: 576px) {
  #section-1 p {
    font-size: var(--fs-xl);
    line-height: 1.5;
  }
}

/* Desktop - spaziature aggiuntive */

@media (min-width: 992px) {
  #section-1 {
    padding-top: 60px;
  }
}

/* ==========================================================================
	 BUTTONS
	 ========================================================================== */

#register-now {
  font-size: var(--fs-xl);
  font-family: var(--font-sans);
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-width: var(--border-width);
  padding: clamp(0.5rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem);
  transition: all 0.3s ease;
}

#two-days {
  font-family: var(--font-serif);
  border-color: var(--color-white);
  font-size: var(--fs-huge);
  margin-bottom: clamp(15px, 3vw, 20px);
  border-width: var(--border-width);
  color: var(--color-primary);
  padding: clamp(8px, 2vw, 10px) clamp(50px, 10vw, 100px);
}

#schedule {
  font-family: var(--font-serif);
  border-color: var(--color-primary);
  font-size: var(--fs-huge);
  margin-bottom: clamp(15px, 3vw, 20px);
  padding: 0 clamp(50px, 10vw, 100px);
  border-width: var(--border-width);
  color: var(--color-primary);
}

#contact-us {
  font-family: var(--font-serif);
  border-color: var(--color-white);
  font-size: var(--fs-huge);
  margin-bottom: clamp(15px, 3vw, 20px);
  padding: 0 clamp(50px, 10vw, 100px);
  border-width: var(--border-width);
  color: var(--color-white);
}

/* Media query per migliorare UX sui dispositivi touch */

@media (max-width: 767px) {
  #register-now, #two-days, #schedule, #contact-us {
    min-height: 44px;
  }
}

/* ==========================================================================
	 VIRTUAL SECTION
	 ========================================================================== */

#virtual-open {
  font-size: var(--fs-xxxl);
  color: var(--color-primary);
  font-family: var(--font-sans);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.virtual-info-card {
  max-width: 300px;
  border-radius: var(--border-radius-lg);
  font-family: var(--font-sans);
  color: var(--color-primary);
  margin: clamp(0.5rem, 2vw, 1rem);
}

.virtual-info-card-inner {
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--border-radius-lg);
  height: clamp(250px, 30vw, 300px);
  align-content: center;
  font-family: var(--font-sans);
  color: var(--color-primary);
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* Small tablets - layout ottimizzato */

@media (min-width: 576px) {
  .virtual-info-card {
    max-width: 320px;
  }
}

/* Desktop - layout a griglia */

@media (min-width: 992px) {
  .virtual-info-card {
    max-width: 280px;
  }
}

@media (min-width: 992px) {
  .virtual-info-card-inner {
    height: 300px;
  }
}

/* ==========================================================================
	 EXCLUSIVE SECTION
	 ========================================================================== */

#exclusive-title {
  font-size: var(--fs-xxxl);
  color: var(--color-primary);
  font-family: var(--font-sans);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.masterclass-card {
  width: auto;
  margin: clamp(0.5rem, 2vw, 1rem);
}

.masterclass-card-inner {
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-secondary);
  background-image: url("../../assets/img/luxa.org-opacity-changed-._background%20card%20pallini2.png");
}

.masterclass-card-inner > div {
  border: var(--border-width) solid var(--color-white);
  border-radius: var(--border-radius-lg);
  color: var(--color-white);
  height: clamp(140px, 20vw, 160px);
  align-items: center;
  align-content: center;
  padding: clamp(0.5rem, 2vw, 1rem);
}

.masterclass-card p {
  font-size: var(--fs-medium);
  font-family: var(--font-sans);
  line-height: 1.4;
  margin: 0;
}

/* Tablet - layout migliorato */

@media (min-width: 768px) {
  .masterclass-card-inner > div {
    height: 160px;
  }
}

/* ==========================================================================
	 DAY CARDS
	 ========================================================================== */

.day-title {
  font-size: var(--fs-xxxl);
  color: var(--color-primary);
  font-family: var(--font-sans);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

#day-1 {
  border-right: 1px solid var(--color-primary);
}

/* Su mobile rimuovi il border per evitare layout issues */

@media (max-width: 767px) {
  #day-1 {
    border-right: none;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(1rem, 3vw, 2rem);
  }
}

.day-card {
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-dark);
  background-image: url("../../assets/img/background%20card%20onda.svg");
  background-position: center;
  /*margin: clamp(0.5rem, 2vw, 1rem);*/
}

.day-card-inner {
  border: var(--border-width) solid var(--color-white);
  border-radius: var(--border-radius-lg);
  max-width: clamp(300px, 50vw, 378px);
  margin: 0 auto;
  font-family: var(--font-sans);
  height: clamp(280px, 35vw, 320px);
  align-items: center;
  align-content: center;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.day-card p {
  color: var(--color-white);
  font-size: var(--fs-xl);
  line-height: 1.4;
  margin: 0;
}

/* Desktop - layout ottimizzato */

@media (min-width: 992px) {
  .day-card-inner {
    max-width: 378px;
    height: 320px;
  }
}

/* ==========================================================================
	 CONTACT SECTION
	 ========================================================================== */

#col-1 {
  border-right: 1px solid var(--color-black);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Su mobile rimuovi il border per layout pulito */

@media (max-width: 767px) {
  #col-1 {
    border-right: none;
    border-bottom: 1px solid var(--color-black);
    padding-right: 0;
    padding-bottom: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(1rem, 3vw, 2rem);
  }
}

#col-1 p {
  font-size: var(--fs-xl);
  color: var(--color-white);
  font-family: var(--font-sans);
  line-height: 1.6;
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
}