/* ==========================================================================
   Ocean — Style custom background
   Gestione degli sfondi di sezione: classificazione delle famiglie
   (chiaro / scuro / media) e contesto cromatico dei testi.
   Caricato per ultimo: adatta i componenti in base allo sfondo della sezione.
   ========================================================================== */

/* ==========================================================================
   1) Contesto cromatico
   ========================================================================== */
/* Contesto chiaro (default): bianco, grigi, primario titanio, tinte chiare di divisione */
:root {
  --context-heading: var(--color-ink);
  --context-text: var(--color-text);
  --context-muted: var(--color-muted);
  --context-label: var(--color-muted);
  --context-link: var(--color-primary);
  --context-line: var(--color-line-strong);
  --context-line-soft: var(--color-line-strong);
  --context-btn-primary-bg: var(--color-ink);
  --context-btn-primary-border: var(--color-ink);
  --context-btn-primary-fg: var(--color-off-white);
  --context-btn-primary-hover-bg: var(--color-steel-dark);
  --context-btn-primary-hover-border: var(--color-steel-dark);
  --context-btn-primary-hover-fg: var(--color-off-white);
  --context-btn-secondary-bg: transparent;
  --context-btn-secondary-border: var(--color-ink);
  --context-btn-secondary-fg: var(--color-ink);
  --context-btn-secondary-hover-bg: var(--color-ink);
  --context-btn-secondary-hover-border: var(--color-ink);
  --context-btn-secondary-hover-fg: var(--color-off-white);
  --context-btn-link-fg: var(--color-ink);
}

/* Contesto scuro: nero/grigio scuro, divisioni piene, sfondi media (immagine/video) */
:is(.bg-black,.bg-grey-dark,.bg-medical,.bg-promotional,.bg-industrial,.has--bg-media,.has--video-background) {
  --context-heading: var(--color-off-white);
  --context-text: var(--color-off-white);
  --context-muted: rgba(247,248,249,.78);
  --context-label: rgba(247,248,249,.62);
  --context-link: var(--color-off-white);
  --context-line: rgba(247,248,249,.2);
  --context-line-soft: rgba(247,248,249,.22);
  --context-division: var(--division-light);
  --context-btn-primary-bg: var(--color-off-white);
  --context-btn-primary-border: var(--color-off-white);
  --context-btn-primary-fg: var(--color-ink);
  --context-btn-primary-hover-bg: transparent;
  --context-btn-primary-hover-border: var(--color-off-white);
  --context-btn-primary-hover-fg: var(--color-off-white);
  --context-btn-secondary-bg: transparent;
  --context-btn-secondary-border: rgba(247,248,249,.5);
  --context-btn-secondary-fg: var(--color-off-white);
  --context-btn-secondary-hover-bg: var(--color-off-white);
  --context-btn-secondary-hover-border: var(--color-off-white);
  --context-btn-secondary-hover-fg: var(--color-ink);
  --context-btn-link-fg: var(--color-off-white);
}

/* Superfici chiare dentro un contesto scuro: ripristinano il contesto chiaro */
:is(.card,.list-compare,.block-form-quotation__form,.block-case-study__note) {
  --context-heading: var(--color-ink);
  --context-text: var(--color-text);
  --context-muted: var(--color-muted);
  --context-label: var(--color-muted);
  --context-link: var(--color-primary);
  --context-line: var(--color-line);
  --context-line-soft: var(--color-line);
  --context-division: var(--division);
  --context-btn-primary-bg: var(--color-ink);
  --context-btn-primary-border: var(--color-ink);
  --context-btn-primary-fg: var(--color-off-white);
  --context-btn-primary-hover-bg: var(--color-steel-dark);
  --context-btn-primary-hover-border: var(--color-steel-dark);
  --context-btn-primary-hover-fg: var(--color-off-white);
  --context-btn-secondary-bg: transparent;
  --context-btn-secondary-border: var(--color-ink);
  --context-btn-secondary-fg: var(--color-ink);
  --context-btn-secondary-hover-bg: var(--color-ink);
  --context-btn-secondary-hover-border: var(--color-ink);
  --context-btn-secondary-hover-fg: var(--color-off-white);
  --context-btn-link-fg: var(--color-ink);
}

/* ==========================================================================
   2) Sfondi delle sezioni
   ========================================================================== */
/* Sfondi — rimappatura su palette acciaio/off-white */
.bg-white {background-color:var(--color-paper) !important;}
.bg-grey-light {background-color:var(--color-surface) !important;}
.bg-grey {background-color:var(--color-grey) !important;}
.bg-grey-dark, .bg-black {background-color:var(--color-graphite) !important;color:var(--color-off-white);}
/* Primario = superficie grigio titanio (chiara): testi scuri, non più gruppo scuro */
.bg-primary {background-color:var(--color-titanium) !important;color:var(--color-text);}

/* Divisioni: lo sfondo è il colore della divisione */
.bg-medical {background-color:var(--color-medical) !important;color:var(--color-off-white);--division: var(--color-medical);--division-light:var(--color-medical-light);}
.bg-promotional {background-color:var(--color-promotional) !important;color:var(--color-off-white);--division: var(--color-promotional);--division-light:var(--color-promotional-light);}
.bg-industrial {background-color:var(--color-industrial) !important;color:var(--color-off-white);--division: var(--color-industrial);--division-light:var(--color-industrial-light);}

/* Sfondi chiari di divisione: il colore di divisione riempie lo sfondo della sezione (tinta chiara) */
.bg-medical-light {background-color:rgba(var(--color-medical-rgb),.12) !important;}
.bg-promotional-light {background-color:rgba(var(--color-promotional-rgb),.12) !important;}
.bg-industrial-light {background-color:rgba(var(--color-industrial-rgb),.12) !important;}

/* Pattern tecnico discreto sulle sezioni scure */
.bg-black::after, .bg-grey-dark::after,
.bg-medical::after, .bg-promotional::after, .bg-industrial::after {
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:70px 70px,70px 70px;
}
.bg-black > .container, .bg-black > .container-fluid,
.bg-primary > .container, .bg-primary > .container-fluid,
.bg-grey-dark > .container, .bg-grey-dark > .container-fluid,
.bg-medical > .container, .bg-medical > .container-fluid,
.bg-promotional > .container, .bg-promotional > .container-fluid,
.bg-industrial > .container, .bg-industrial > .container-fluid {position:relative;z-index:1;}

/* ==========================================================================
   3) Testi, titoli e componenti
   I componenti usano i token di contesto: su sfondo chiaro i valori coincidono
   con la base, su sfondo scuro vengono invertiti dalla famiglia.
   ========================================================================== */
/* Titoli e testi di sezione */
.section .section-title h1, .section .section-title h2, .section .section-title h3,
.section .section-title h4, .section .section-title h5, .section .section-title h6 {color:var(--context-heading);}
.section .text {color:var(--context-text);}
.section .text p {color:var(--context-muted);}
.section .text strong {color:var(--context-heading);}
.section .text a {color:var(--context-link);}
.section .section-title .pre-title {color:var(--context-division, var(--division));}
.section .section-title .pre-title::before {background:var(--context-division, var(--division));}

/* Certificazioni */
.section .certification__title {color:var(--context-heading);}
.section .certification__text {color:var(--context-label);}
.section .certification__item {border-top-color:var(--context-line-soft);}

/* Counter */
.section .counter__item {border-top-color:var(--context-line);}
.section .counter, .section .counter-text {color:var(--context-heading);}
.section .counter_text {color:var(--context-label);}

/* Pulsanti su fondo scuro: inversione */
.section .btn-primary {background-color:var(--context-btn-primary-bg);border-color:var(--context-btn-primary-border);color:var(--context-btn-primary-fg);}
.section .btn-primary:hover, .section .btn-primary:focus {background-color:var(--context-btn-primary-hover-bg) !important;border-color:var(--context-btn-primary-hover-border) !important;color:var(--context-btn-primary-hover-fg) !important;}
.section .btn-secondary {background-color:var(--context-btn-secondary-bg);border-color:var(--context-btn-secondary-border);color:var(--context-btn-secondary-fg);}
.section .btn-secondary:hover, .section .btn-secondary:focus {background-color:var(--context-btn-secondary-hover-bg) !important;border-color:var(--context-btn-secondary-hover-border) !important;color:var(--context-btn-secondary-hover-fg) !important;}
.section .btn-link {color:var(--context-btn-link-fg);}

/* CTA su fondo */
.block-cta.bg-primary, .block-cta.bg-black, .block-cta.bg-grey-dark,
.block-cta.bg-medical, .block-cta.bg-promotional, .block-cta.bg-industrial {padding-top:170px;padding-bottom:170px;}
.bg-white .block-cta__note, .bg-grey-light .block-cta__note, .bg-grey .block-cta__note, .bg-primary .block-cta__note {border-top-color:var(--color-line);}

/* ==========================================================================
   4) Responsive
   ========================================================================== */

/* Smartphone */
@media only screen and (max-width:767px) and (min-width:320px) {
  .block-cta.bg-primary, .block-cta.bg-black, .block-cta.bg-grey-dark,
  .block-cta.bg-medical, .block-cta.bg-promotional, .block-cta.bg-industrial {padding-top:88px;padding-bottom:88px;}
}

/* Tablet */
@media only screen and (min-width:768px) and (max-width:991px) {
  .block-cta.bg-primary, .block-cta.bg-black, .block-cta.bg-grey-dark,
  .block-cta.bg-medical, .block-cta.bg-promotional, .block-cta.bg-industrial {padding-top:120px;padding-bottom:120px;}
}

/* Tablet Landscape */
@media only screen and (min-width:992px) and (max-width:1199px) {
}

/* Laptop 13' - 1366x768 Non-Retina */
@media only screen and (min-width:1200px) and (max-width:1366px) {
}

/* Laptop 4:3 - 1440x1080 */
@media only screen and (min-width:1367px) and (max-width:1440px) {
}