/*
 Theme Name:   vikra-theme
 Template:     hello-elementor
 Author:       vitatae
 Version:      1.0.0
*/

/* #region  --------- FONTS e ROOT --------- */
@font-face {
  font-display: swap;
  font-family: 'Absans Regular';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/absans-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2') format('woff2');
}

:root {
  /* --- TIME --- */
  --t-bezier: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  --t-bezier-sm: 0.1s cubic-bezier(0.19, 1, 0.22, 1);

  /* --- FONTS --- */
  --ff-title: 'Absans Regular', sans-serif;
  --ff-sur: 'IBM Plex Sans', monospace, sans-serif;
  --ff-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- TYPOGRAPHY SCALE (FLUID) --- */
  --fs-1: clamp(2.5rem, 1.2rem + 5vw, 4.7rem);
  --fs-2: clamp(2rem, 1.2rem + 3vw, 3rem);
  --fs-3: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --fs-4: clamp(1.4rem, 1.2rem + 1vw, 2rem);

  --fs-text: clamp(17px, 14px + 0.5vw, 19px);
  --fs-accent: var(--fs-text);

  --fs-sur: clamp(13px, 10px + 1vw, 15px);

  /* --- LINE HEIGHTS (Minimal/Stylish) --- */
  --lh-dis: 1.06;
  --lh-md: 1.4;
  --lh-text: 1.72;

  /* --- LETTER SPACING --- */
  --lsp-lg: 0.04em;
  --lsp-md: 0.01em;
  --lsp-sm: -0.01em;

  /* --- SPACING --- */
  /* Unità base */
  --base: 6px;

  /* Scala dei margini e padding */
  --space-05: calc(var(--base) * 0.5); /* 3px  - Micro distanze */
  --space-1:  var(--base);             /* 6px  - Elementi vicini */
  --space-2:  calc(var(--base) * 2);   /* 12px - Padding standard */
  --space-3:  calc(var(--base) * 3);   /* 21px - Distanza tra blocchi piccoli */
  --space-4:  calc(var(--base) * 4);   /* 24px - Padding sezioni */
  --space-6:  calc(var(--base) * 6);   /* 32px - Grande respiro */
  --space-8:  calc(var(--base) * 8);   /* 48px - Hero spacing */
  --space-10: calc(var(--base) * 10);  /* Footer gap */
  --space-12: calc(var(--base) * 12);  /* Title card bottom */
  --space-16: calc(var(--base) * 16);  /* 112px - Sezioni full-screen */

  --grid-c: 12;
  --gap-c: var(--space-2);
  --gap-r: var(--space-2);

  --h-header: 58px;
  --lat-padding: 16px;

  /* --- STICKY WRAP --- */
  --h-bar: 44px;
  --h-bar-dbl: calc(var(--h-bar) * 2);

  /* --- COLORS --- */
  --bkg-1:     #fbfbf7;
  --bkg-2:     #edeae0; /* #efefe9; */
  --bkg-3:     #352d2d;
  --nero:      #0d0101;
  --grigio:    #8e8c86;
  --line-light:#dedede;
  --line-dark: #b9b8b5;
  --accent:    #1f5780;

  --accent-1: #197db7;
  --accent-2: #0a6bac;
  --accent-3: #336ba4;
  --accent-4: #2684cc;
  --accent-5: #428ec4;
  --accent-6: #087ba5;

  --text-switch: #b4cbdb;
  --events-bkg-switch: var(--accent);
  --line-color-switch: #6791b0;
  --header-bkg-switch: var(--bkg-2);

  --photo-filter: grayscale(100%) sepia(14%);
}

.f-1, .f-2, .f-3, .f-4, .f-ch {
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-feature-settings: "liga" 1, "dlig" 1, "hlig" 1;
}

.f-1, .f-2, .f-3, .f-4, .f-ch, .f-text, .f-accent, .f-icon { font-family: var(--ff-title); font-weight: 400; }

.f-1 { font-size: var(--fs-1); line-height: var(--lh-dis); letter-spacing: var(--lsp-sm); }
.f-2 { font-size: var(--fs-2); line-height: var(--lh-dis); letter-spacing: var(--lsp-sm); word-spacing: 0.03em; }
.f-3 { font-size: var(--fs-3); line-height: var(--lh-dis); letter-spacing: var(--lsp-sm); word-spacing: 0.03em; }
.f-4 { font-size: var(--fs-4); line-height: var(--lh-md);  letter-spacing: var(--lsp-sm); word-spacing: 0.03em; }

.f-ch { font-size: var(--fs-3); line-height: var(--lh-dis); letter-spacing: var(--lsp-sm); word-spacing: 0.03em; }

.f-accent, .f-text { font-size: var(--fs-text); letter-spacing: 0; }
.f-accent { line-height: var(--lh-md); }
.f-text   { line-height: var(--lh-text); word-spacing: 0.03em; }

.f-sur, .contact-form-wrap :is(input, textarea)::placeholder { 
  font: 500 var(--fs-sur)/1.3 var(--ff-sur); 
  letter-spacing: 0.1em; text-transform: uppercase; 
}

.f-cat { 
  font: 500 var(--fs-sur)/1.3 var(--ff-sur); 
  letter-spacing: 0.1em;
}

.f-system, 
.wpcf7-not-valid-tip, 
.wpcf7-response-output { 
  font-family: var(--ff-system);
  font-size: clamp(12px, 12px + 5vw, 13px);
  line-height: var(--lh-md);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.f-bold { font-weight: 600; }
.f-icon { font-size: 28px; }

@media (max-width: 479px) {
  .f-ch {
    font-size: var(--fs-4); letter-spacing: 0; word-spacing: 0; line-height: 1.2;
  }
}

@media (min-width: 480px) {
  :root {
    --lat-padding: 30px;
  }
}

/* TABLET 768 - 1023 */
@media (min-width: 768px) {
  :root {
    --gap-c: var(--space-4);
    --h-header: 68px;
    --h-bar: 36px;
  }
}

/* TABLET - LG 1024 - 1279 */
@media (min-width: 1024px) {
  :root {
    --base: 8px;
    --lat-padding: 50px;
  }
}

/* DESKTOP - SM 1280 1535 */
@media (min-width: 1280px) {
  :root {
    --base: 10px;
    --h-header: 74px;
    --lat-padding: 5vw;
  }
}

/* DESKTOP - LG 1536 > */
@media (min-width: 1536px) {
  :root {
    --base: 12px;
    --h-header: 80px;
    --lh-text: 1.82;
  }
}
/* #endregion */

/* #region  --------- CORE - RESET & BASE --------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; /* Gestito dalle classi f-title-* */
  margin-block-start: 0;
  margin-block-end: 0;
}

p, ul, ol, figure {
  margin-block-start: 0;
  margin-block-end: 0;
}

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

/* Spazio tra paragrafi nel contenuto WYSIWYG e articoli */
p + p,
article p + p {
  margin-top: 1.5em;
}

/* Eccezione: sub-heading eventi non vuole spazio in più */
.event-sub p + p {
  margin-top: 0;
}
/* #endregion */

/* #region  --------- GENERAL BODY, LIGHTBOX, IMGS e PADDINGS --- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
  height: auto;
  background-color: var(--bkg-2);
}

body {
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  color: var(--nero);
  -webkit-font-smoothing: antialiased;
}

/* Blocca transizioni durante il caricamento iniziale — evita flash di colori */
body.is-loading * {
  transition: none !important;
}

#main-content {
  flex: 1 0 auto;
}

.max-width {
  margin: 0;
  width: 100%;
  padding-left: var(--lat-padding);
  padding-right: var(--lat-padding);
}

#colophon {
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  z-index: 80;
}

/* --- FANCYBOX --- */
.fancybox__caption { display: none !important; }

.fancybox__button--prev,
.fancybox__button--next {
  display: flex !important;
  opacity: 1 !important;
}

.fancybox__carousel .fancybox__slide {
  transform: none !important;
  transition: opacity 0.4s ease-in-out !important;
  opacity: 0;
  pointer-events: none;
}
.fancybox__carousel .fancybox__slide.is-selected {
  opacity: 1;
  pointer-events: auto;
}
.fancybox__container { z-index: 500 !important; }
.fancybox__viewport {
  overflow: visible !important;
}

a.lightbox img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: zoom-in;
}

.event-gallery a.lightbox:hover img {
  transform: scale(1.03);
  opacity: 0.8;
}

.u-filter { filter: var(--photo-filter); }

/* Full screen senza lateral padding in Mobile */
@media (max-width: 767px) {
  .mob-img-full {
    margin-left: calc(-1 * var(--lat-padding)) !important;
    margin-right: calc(-1 * var(--lat-padding)) !important;
    width: calc(100% + 2 * var(--lat-padding)) !important;
  }
}

/* --- LAZY LOAD --- */
.u-lazy-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.u-lazy-load.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* TEXTURES */
.texture-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/asfalt-light.png');
  background-repeat: repeat;
  opacity: 0.2; /* Regola l'intensità qui */
  pointer-events: none;
  -webkit-mask-size: 50px 50px;
  mask-size: 50px 50px;
}
/* #endregion */

/* #region  --------- LINK e BUTTONS SYSTEM --------- */
/* RESET BASE */
a, 
button, 
input[type="submit"], 
.wpcf7-submit,
button::after, 
button::before {
  -webkit-tap-highlight-color: transparent;
  background: transparent !important;
  background-image: none !important;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Estendi tap-highlight ad altri input */
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

.vikra-contact-box,
#hamburger,
#hamburger * {
  -webkit-tap-highlight-color: transparent;
}

/* Fix iOS Safari */
input[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* --- Class NO UNDERLINE --- */
.no-underline a, .no-underline a:visited {
  text-decoration: none;
  color: inherit;
  opacity: 1;
  transition: opacity var(--t-bezier);
}

.no-underline a:not(.vikra-btn):not([class*="btn"]):hover {
  text-decoration: none;
  color: inherit;
  opacity: 0.5;
}

/* --- FEEDBACK DI INTERAZIONE (UX) al click--- */
a:active, 
button:active, 
.arrow-trigger:active,
.wpcf7-submit:active,
input[type="submit"]:active {
  opacity: 0.5;
  transition: opacity 0.1s ease;
}

input[type="submit"], 
.wpcf7-submit,
button,
.vikra-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-flex; 
}

/* --- STILE UNDERLINE DEFAULT --- */
a, 
a:visited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-dark);
  color: inherit;
  opacity: 1;
  transition: text-decoration-color var(--t-bezier), opacity var(--t-bezier);
}

a:hover,
.underline-active a.active-lang,
.underline-active .current-page-item > a,
.underline-active .current-menu-item > a {
  color: inherit;
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: inherit;
}

@media (min-width: 1280px) {
  .card-content a, 
  .card-content a:visited,
  .card-content a:hover,
  .card-content .underline-active a.active-lang,
  .card-content .underline-active .current-page-item > a,
  .card-content .underline-active .current-menu-item > a {
    text-decoration-thickness: 2px;
  }
}

/* --- UNDERLINE ACTIVE di base non ha linea --- */
.underline-active a {
  color: inherit;
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  transition: opacity var(--t-bezier), text-decoration-color var(--t-bezier);
}

.underline-active a:hover {
  color: inherit;
  opacity: 0.5;
}

.underline-active a.active:hover,
.underline-active a.active-lang:hover,
.underline-active .current-page-item > a:hover,
.underline-active .current-menu-item > a:hover {
  opacity: 1;
}

/* --- NAV SCROLL - non serve classe --- */
.nav-scroll a,
.nav-scroll button,
button.sort-btn {
  display: inline-flex;
  align-items: baseline;
  color: inherit;
  opacity: 0.5;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  transition: opacity var(--t-bezier), text-decoration-color var(--t-bezier);
}

.nav-scroll a:hover,
.nav-scroll button:hover,
button.sort-btn:hover {
  color: inherit;
  opacity: 1;
  text-decoration-color: transparent;
}

.u-nav .nav-scroll a.active,
.u-nav .nav-scroll button.active {
  color: inherit;
  opacity: 1;
  text-decoration-color: inherit;
}

.u-bar .sort-btn.active {
  color: inherit;
  opacity: 1;
  text-decoration-color: transparent;
  font-weight: 600;
}

/* --- LINK WITH ARROW --- */
.link-w-arrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;
  gap: 1ch;
}

/* --- ANIMAZIONI ARROW --- */
.is-appeared .magic-arrow-icon.main {
  transform: translate(100%, -100%);
}
.is-appeared .magic-arrow-icon.clone {
  transform: translate(0%, 0%);
}

/* --- BUTTONS --- */
.no-underline .vikra-btn,
button.wpcf7-submit,
input[type="submit"] {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  padding: 1.2em 1.2em;
  border: 1px solid var(--line-dark);
  border-radius: 50px;
  background-color: transparent;
  transition: color var(--t-bezier), border-color var(--t-bezier), background-color var(--t-bezier);
  color: inherit;
  opacity: 1;
}

.vikra-btn:hover,
button.wpcf7-submit:hover,
input[type="submit"]:hover {
  border-color: var(--nero);
  color: var(--nero);
  opacity: 1;
}

/* --- BUTTONS SPECIFICI: View All & Load More (STATO DEFAULT) --- */
#view-all-button.vikra-btn,
#load-more-button.vikra-btn {
  border-color: var(--line-color-switch);
  color: var(--text-switch);
  transition: all var(--t-bezier) !important;
}

#view-all-button.vikra-btn:hover,
#load-more-button.vikra-btn:hover {
  border-color: var(--text-switch);

}

/* --- View Past (PIÙ SPECIFICO, va DOPO) --- */
body.view-past #view-all-button,
body.view-past #load-more-button {
  border: 1px solid var(--line-dark);
}

body.view-past #view-all-button:hover,
body.view-past #load-more-button:hover {
  border-color: var(--nero);
  color: var(--nero);
}

.vikra-btn:active,
#view-all-button:active,
#load-more-button:active
button.wpcf7-submit:active,
input[type="submit"]:active {
  background-color: var(--nero) !important;
  color: var(--bkg-1) !important;
  border-color: var(--nero) !important;
  transition: none !important;
}

/* --- FOCUS STATES (Accessibilità) --- */
/* Nascondi outline per click mouse/touch */
:focus:not(:focus-visible) {
  outline: none;
}

/* Mostra outline SOLO per tastiera */
:focus-visible {
  outline: 2px solid var(--nero);
  outline-offset: 3px;
}

/* Bottoni: più spazio */
button:focus-visible,
input[type="submit"]:focus-visible,
.wpcf7-submit:focus-visible {
  outline-offset: 4px;
  color: var(--nero);
}
/* #endregion */

/* #region  --------- TITLE CARD --------- */
.full-card-wrap, .card-content {
  scrollbar-width: none;
}

.full-card-wrap::-webkit-scrollbar,
.card-content::-webkit-scrollbar {
  display: none;
}

.full-card-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: var(--space-6);
  padding-bottom: var(--space-10);
  overflow: hidden;
}

/* --- CARD CONTENT --- */
.card-content {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: start;
  gap: var(--space-6);
  z-index: 10; /* Sopra gli SVG */
}

.pg-about .card-content, .pg-repertoire .card-content, .pg-events .card-content {
  margin-top: var(--h-header);
}

.pg-about .full-card-wrap, .pg-repertoire .full-card-wrap, .pg-events .full-card-wrap {
  padding-top: 0 !important;
}

.home .card-content .card-icons-2, .pg-about .card-content .card-icons, .pg-repertoire .card-content .card-icons, .pg-events .card-content .card-icons {
  display: none;
}

.card-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 10;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.card-order, 
.card-surtitle {
  flex-shrink: 0;      /* Impedisce ai testi di "rimpicciolirsi" o accorciarsi */
  white-space: nowrap; /* Evita che il testo vada a capo se lo spazio è poco */
}

.card-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-icons svg {
  width: auto;
  height: 24px;
  display: block;
  fill: currentColor;
}

@media (min-width: 680px) {
  .card-icons svg {
    width: auto;
    height: 28px;
  }
}

.card-subtitle { color: var(--grigio); }
.card-title {
  width: 100%;
  color: var(--nero);
}

.card-title::first-letter {
  margin-left: -0.05em;
  display: inline-block; /* Necessario per applicare il margine */
}

/* --- CARD BOTTOM (Testi) --- */
.card-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: var(--space-8);
  flex: 1;
  justify-content: flex-end; /*  -------- QUI CAMBIA per alto in mobile */
  position: relative;
  z-index: 10; /* Sopra gli SVG */
}

@media (min-width: 680px) {
  .card-content {
    justify-content: start;
  }
  /* --- CARD BOTTOM --- */
  .card-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; /*  -------- Contact box in desktop è centrato verticalmente */
    gap: var(--gap-c);
  }
  /* riga, colonna, span riga, span colonna */
  .card-subtitle  { grid-area: 1 / 1 / 2 / 2;  z-index: 5; }
  .card-contact { grid-area: 1 / 2 / 2 / 3;  z-index: 5; }
}

@media (min-width: 1550px) {
  .card-bottom {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* riga, colonna, span riga, span colonna */
  .card-contact { grid-area: 1 / 3 / 2 / 4; }
}

/* --- CONTENITORE SVG --- */
.card-svg-container {
  position: absolute;
  inset: 0; /* Copre tutta la card */
  pointer-events: none;
  display: none;
  /* display: flex; */
  justify-content: var(--svg-justify, center); 
  align-items: var(--svg-align, center);
  overflow: hidden;
}

/* --- SVG DINAMICO --- */
.card-dynamic-svg {
  display: block;
  /* mix-blend-mode: multiply; */
  object-fit: contain;
}

.svg-container-left .card-dynamic-svg {
  width: auto;
  height: 100%;
}

.svg-container-right .card-dynamic-svg {
  width: auto;
  height: 100%;
}

/* --- GESTIONE LAYER (Sinistra / Destra) --- */
/* Layer primario (quello con z-index più alto) */
.svg-container-left { 
  z-index: 1;
  justify-content: var(--svg-justify, center);
  align-items: var(--svg-align, center);
}

/* Layer secondario */
.svg-container-right { 
  z-index: 2;
  justify-content: var(--svg-justify, center);
  align-items: var(--svg-align, center);
}

/* --- VARIANTI DI POSIZIONAMENTO (Inserire classe in php per spostare), mobile tutto centrale --- */
.is-left { --svg-justify: center; }
.is-right { --svg-justify: center; }
.is-bottom { --svg-align: center; }
.is-top { --svg-align: center; }

@media (min-width: 768px) {
  .is-left { --svg-justify: flex-start; }
  .is-right { --svg-justify: flex-end; }
  .is-bottom { --svg-align: flex-end; }
  .is-top { --svg-align: flex-start; }
}

/* --- SVG STROKE e/o COLORS --- */
.card-dynamic-svg {
  vector-effect: non-scaling-stroke;
  --svg-stroke: 1px;
  /* stroke-width: 1px; */
  /* mix-blend-mode: overlay; */
}
/* #endregion */

/* #region  --------- GRID --------- */
/* --- U-GRID: flex-col → 4col → 12col --- */
.u-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible; /* Necessario per sticky items */
}

.u-grid > * {
  width: 100%;
}

@media (min-width: 480px) {
  .u-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-c), minmax(0, 1fr));
    grid-auto-rows: min-content;
    align-items: start;
    column-gap: var(--gap-c);
  }
  .u-grid > * {
    width: auto;
  }
}

/* --- U-GRID MOB-FLUID: 1fr auto in mobile → u-grid in tablet/desktop --- */
@media (max-width: 479px) {
  .u-grid.mob-fluid {
    display: grid;
    grid-template-columns: 1fr auto !important;
    min-height: 100%;
    column-gap: var(--gap-c);
    row-gap: 3px !important;
  }
  .u-grid.mob-fluid .fluid-col-center {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }
  .u-grid.mob-fluid .fluid-col-top {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  .pg-repertoire .u-grid.mob-fluid {
    display: grid;
    grid-template-columns: 1fr auto !important;
    min-height: 100%;
    column-gap: var(--gap-c);
    row-gap: 3px !important;
  }
  .pg-repertoire .u-grid.mob-fluid .fluid-col-center {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }
  .pg-repertoire .u-grid.mob-fluid .fluid-col-top {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
  }
}
/* #endregion */

/* #region  --------- STICKY --------- */
/* --- STICKY WRAP --- che è u-nav + u-wrap */
.u-sticky-wrap {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  height: var(--h-bar);
  background-color: var(--bkg-2);
  display: flex;
  flex-direction: column;
  justify-content: start;
  top: var(--h-header);
  z-index: 70;
  transition: background-color var(--t-bezier-sm), color var(--t-bezier-sm);
}

.events-list .u-sticky-wrap {
  background-color: var(--events-bkg-switch);
}

/* --- STICKY NAV --- */
.u-nav {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 100%;
  height: var(--h-bar);
}

.u-bar {
  height: var(--h-bar);
  align-content: end;
}

/* --- STICKY ELEMENT --- */
.u-sticky-el {
  display: flex;
  position: relative;
  top: auto;
  margin: 0;
  padding: 0;
}

.u-bar .line-separator {
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (max-width: 767px) {
  .u-sticky-wrap {
    border-bottom: 1px solid var(--line-light);
  }
  .events-list .u-sticky-wrap {
    border-bottom: 1px solid var(--line-color-switch);
  }
  .u-bar {
    display: none;
  }
}

@media (min-width: 768px) {
  .u-sticky-wrap {
    height: var(--h-bar-dbl);
  }
  .pg-repertoire .u-nav .nav-scroll {
    display: none;
  }
  .pg-repertoire .u-bar {
    display: grid;
    height: var(--h-bar);
    row-gap: 4px;
    align-items: end;
  }
  .u-bar span {
    display: none;
  }
}

@media (min-width: 1280px) {
  .u-bar span {
    display: flex;
  }
}

.events-list .u-bar .line-separator {
  border-color: var(--line-color-switch);
}

/* --- BREAKPOINTS BAR - NAV - BLOCK - ITEM - SPACER--- */
/* Desktop in su */
@media (min-width: 1280px) {
  .u-bar {
    display: grid;
    height: var(--h-bar);
    row-gap: 4px;
    align-items: end;
    align-content: end;
  }

  /* Stato lista vuota: u-sticky-block testo interno cambia opacità */
  .events-list.is-empty .u-bar span {
    opacity: 0.3;
    transition: opacity var(--t-bezier);
    pointer-events: none;
  }

  .events-list.is-empty .u-bar .line-separator {
    opacity: 0.3;
    transition: opacity var(--t-bezier);
  }

  /* Sticky element diventa Sticky */
  .u-sticky-el {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--h-header) + var(--h-bar-dbl));
    z-index: 10;
  }
}

/* --- Dentro sticky-nav, NAV SCROLL --- */
.u-nav .nav-scroll {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  gap: 3ch;
  align-items: center;
  justify-content: start; /* a sx */
}

/* --- GHOST SCROLL + FADE LATERALE (solo Mobile) --- */
@media (max-width: 767px) {
  .u-sticky-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* In chiusura: sparisce in 0.3s senza ritardi */
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .u-sticky-wrap.is-ghost-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* In apertura: micro-ritardo di 0.15s per non essere troppo brusca */
    transition: opacity 0.3s ease 0.2s, visibility 0.3s 0.2s;
  }
  /* Durante la fase di sparizione manteniamo la transizione attiva */
  .u-sticky-wrap.is-ghost-hiding {
    opacity: 0;
    visibility: hidden;
  }
  .u-nav .nav-scroll {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .u-nav .nav-scroll.needs-fade-right {
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
    mask-image: linear-gradient(to right, black 60%, transparent 100%);
  }
  .u-nav .nav-scroll.has-scrolled:not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 65%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 65%, transparent 100%);
  }
  .u-nav .nav-scroll.is-end {
    -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
    mask-image: linear-gradient(to left, black 60%, transparent 100%);
  }
}

/* --- RESET GHOST e FADE in Tablet + Desktop --- */
@media (min-width: 768px) {
  /* Annulla ogni logica ghost mobile */
  .u-sticky-wrap {
    opacity: 1;
    pointer-events: auto;
  }
  /* Rimuove fade laterali */
  .u-nav .nav-scroll {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
    justify-content: end; /* a dx */
    align-items: end !important;
  }
}

.u-nav .nav-scroll a {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .u-nav .nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .u-nav .nav-scroll::-webkit-scrollbar {
    display: none;
  }
}

.u-bottom-spacer {
  position: relative;
  width: 100%;
  height: 100px; /* Questo spinge via il block in Repertoire */
  background-color: var(--bkg-2);
}

@media (min-width: 1024px) {
  .u-bottom-spacer {
    height: 200px;
  }
}
/* #endregion */

/* #region  --------- HEADER e NAVIGATION --------- */
html.open-overlay,
body.open-overlay {
  overflow: hidden;
  height: auto;
  position: relative;
}

#master-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--h-header);
  background-color: var(--header-bkg-switch, var(--bkg-2));
  display: flex;
  align-items: center;
  box-sizing: border-box !important;
  z-index: 100;
  transition: background-color var(--t-bezier), color var(--t-bezier-sm);
}

/* --- Classe per lo switch istantaneo --- */
body.no-header-transition #master-header {
  transition: none !important;
}

/* --- HEADER OVERLAY --- */
#header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Fallback per browser vecchi */
  height: 100vh;
  height: 100dvh;
  background-color: var(--bkg-2);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: none;
}

#header-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: none;
}

#header-overlay .lang-switch-container,
#header-overlay .header-main-menu,
#header-overlay .header-social-wrapper {
  opacity: 0;
  transition: none;
}

#header-overlay.is-open .lang-switch-container,
#header-overlay.is-open .header-main-menu,
#header-overlay.is-open .header-social-wrapper {
  opacity: 1;
  transition: opacity var(--t-bezier);
}

#header-overlay.is-open .lang-switch-container  { transition-delay: 0.1s; }
#header-overlay.is-open .header-main-menu       { transition-delay: 0.2s; }
#header-overlay.is-open .header-social-wrapper  { transition-delay: 0.3s; }

/* --- CONTAINER INTERNO HEADER --- */
.header-container {
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- HAMBURGER --- */
#hamburger {
  width: 24px;
  height: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 10px;
  box-sizing: content-box;
  margin: -18px -10px;
  outline: none;
}

@media (min-width: 1024px) {
  #hamburger { width: 36px; height: 10px; }
}

/* Hamburger bars */
.menu-bar {
  width: 100%;
  height: 1.5px;
  background-color: var(--nero);
  transition: transform var(--t-bezier), background-color var(--t-bezier-sm);
}

@media (min-width: 1024px) {
  .menu-bar { height: 2px; }
}

/* Animazione X */
#hamburger.is-active .bar-top {
  transform: translateY(3.25px) rotate(45deg);
}
#hamburger.is-active .bar-bottom {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (min-width: 1024px) {
  #hamburger.is-active .bar-top {
    transform: translateY(4px) rotate(45deg);
  }
  #hamburger.is-active .bar-bottom {
    transform: translateY(-4px) rotate(-45deg);
  }
}

/* --- LOGO --- */
.site-branding {
  line-height: 0;
}

.main-logo svg {
  display: block;
  height: calc(var(--h-header) * 0.58);
  width: auto;
  fill: currentColor;
}

.main-logo {
  display: block;
  line-height: 0;
  color: var(--nero);
  transition:  color var(--t-bezier-sm);
}

@media (min-width: 1024px) {
  .main-logo svg {
    height: calc(var(--h-header) * 0.55);
    max-height: 50px;
  }
}

/* --- CAMBI COLORE --- */
/* Overlay open */
body.open-overlay #master-header {
  transition: none;
}

body.open-overlay .main-logo { opacity: 0 !important; pointer-events: none; }
body.open-overlay .menu-bar { background-color: var(--nero) !important }

/* Logo e hamburger */
body.has-dark-logo .main-logo { color: var(--nero); }
body.has-dark-logo .menu-bar { background-color: var(--nero); }

body.has-light-logo .main-logo { color: var(--bkg-2); }
body.has-light-logo .menu-bar { background-color: var(--bkg-2); }

/* --- POSIZIONAMENTO ELEMENTI INTERNI OVERLAY --- */
.header-overlay-content {
  display: flex;
  flex-direction: column;
  /* Fallback per browser vecchi */
  height: 100vh; 
  height: 100dvh;
  box-sizing: border-box;
  padding: calc(var(--h-header) + 20px) 30px;
  justify-content: space-between;
  gap: 3em;
}

/* Selettore lingue */
.lang-switch-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 40px;
}

/* Main menu */
.header-main-menu {
  width: 100%;
}

.header-main-menu .nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  align-items: start;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-main-menu .nav-list li {
  width: auto;
  display: block;
}

.header-main-menu .nav-list a {
  display: inline-block;
}

/* Social wrapper */
.header-social-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 3.2ch;
}

.header-social-wrapper svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  opacity: 0.8;
}

/* --- LAYOUT DESKTOP --- */
@media (min-width: 1024px) {
  .header-overlay-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Rimosso la virgola */
    gap: var(--gap-c);
    padding-top: calc(var(--h-header) + 50px);
    padding-bottom: calc(var(--h-header) + 50px);
  }
  .lang-switch-container {
    grid-column: 2; /* Posizionato nella colonna 2 */
    grid-row: auto;
    align-self: start;
    gap: 70px;
  }
  .header-main-menu{
    grid-column: 2; /* Posizionato nella colonna 2 */
    grid-row: auto;
    align-self: start;
  }
  .header-main-menu .nav-list { gap: 1em; }
  .header-social-wrapper{
    grid-column: 2; /* Posizionato nella colonna 2 */
    grid-row: auto;
    align-self: end;
  }
}
/* #endregion */

/* #region  --------- FRONT PAGE --------- */
#hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background-color: var(--nero);
  clip-path: inset(0 0 0 0);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  filter: var(--photo-filter);
}

@media (min-width: 1024px) {
  .hero-bg {
    position: fixed;
  }
}

.hero-bg-desktop { display: none; }
.hero-bg-mobile  { display: block; }

@media (min-width: 768px) {
  .hero-bg-mobile  { display: none; }
  .hero-bg-desktop { display: block; }
}

@media (min-width: 1024px) {
  .hero-bg { position: fixed; }
}

.hero-items-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  color: var(--bkg-1);
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: calc((100lvh - 100svh) + 40px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .hero-items-wrap {
    padding-bottom: var(--h-header);
  }
}

/* --- HERO BTN --- */
.hero-btn,
.hero-btn:focus {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: end;
  justify-content: end;
  align-self: flex-end;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: all var(--t-bezier);
}

.arrow-down .magic-arrow-icon {
  color: var(--bkg-1);
}

.arrow-down.magic-arrow-mask path {
  stroke-width: 1.6;
}

@media (min-width: 768px) {
  .hero-btn,
  .hero-btn:focus {
    width: 56px;
    height: 56px;
  }
}

@media (min-width: 1024px) {
  .hero-btn,
  .hero-btn:focus {
    width: 50px;
    height: 50px;
  }
}

/* --- HOME ITEMS --- */
.home-item {
  position: relative;
  z-index: 10;
}

.home-tagline-wrap {
  scroll-margin-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
}

.home-tagline-text {
  max-width: 800px;
} 

.home-about-wrap {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  gap: var(--space-10);
}

.home-about-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-about-inner a {
  align-self: center;
}

@media (max-width: 680px) {
  .contact-form { margin-bottom: var(--space-4); }
}

@media (max-width: 768px) {
  .home-about-text {
    padding-bottom: var(--space-4);
  }
}

@media (min-width: 480px) {
  .home-about-inner {
    display: contents;
  }
  .home-about-wrap {
    display: grid;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    column-gap: var(--gap-c);
    row-gap: var(--space-2);
  }
  .home-about-inner a {
    justify-self: center;
  }
  .home-about-title { 
    grid-row: auto;
    grid-column: 1 / span 12;
  }
  .home-about-text { 
    grid-row: auto;
    grid-column: 1 / span 12;
    text-align: justify;
    hyphens: auto;
  }
  .home-about-link { 
    grid-row: auto;
    grid-column: 1 / span 12;
  }
  .home-link-vikra { margin-bottom: var(--space-8);}
}

@media (min-width: 768px) {
  .home-about-text { margin-top: 0em; }
  .home-about-inner a {
    justify-self: end;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .home-about-title { 
    grid-row: auto;
    grid-column: 2 / span 10;
  }
  .home-about-text { 
    grid-row: auto;
    grid-column: 2 / span 10;
  }
  .home-about-link { 
    grid-row: auto;
    grid-column: 2 / span 10;
  }
}

@media (min-width: 980px) {
  .home-about-title { 
    grid-row: auto;
    grid-column: 3 / span 8;
  }
  .home-about-text { 
    grid-row: auto;
    grid-column: 3 / span 8;
  }
  .home-about-link { 
    grid-row: auto;
    grid-column: 3 / span 8;
  }
}

@media (min-width: 1550px) {
  .home-about-title { 
    grid-row: auto;
    grid-column: 4 / span 6;
  }
  .home-about-text { 
    grid-row: auto;
    grid-column: 4 / span 6;
  }
  .home-about-link { 
    grid-row: auto;
    grid-column: 4 / span 6;
  }
}

/* --- HOME TEXTS e LINKS --- */
.home-tagline-text,
.home-about-wrap a {
  text-align: center;
}

.home-tagline-repertoire {
  align-self: flex-end;
  text-align: right;
  justify-content: flex-end;
  max-width: 450px;
}

.home-tagline-repertoire-link {
  margin-top: -0.2em;
}

/* --- HOME ABOUT IMAGES --- */
.home-about-img-1 img,
.home-about-img-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
  display: block;
}

.home-about-img-2 img {
  object-position: center bottom;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-about-img-1,
  .home-about-img-2 {
    aspect-ratio: 16 / 7;
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .home-about-img-1,
  .home-about-img-2 {
    aspect-ratio: 16 / 6;
    overflow: hidden;
  }
}
/* #endregion */

/* #region  --------- EVENTS - MAPPATURA VARIABILI GRID --------- */
/* --- HEADER COLUMNS --- */
.col-date     { grid-area: var(--row-col-date) / var(--col-col-date) / auto / span var(--span-col-date); }
.col-location { grid-area: var(--row-col-loc) / var(--col-col-loc) / auto / span var(--span-col-loc); }
.col-title    { grid-area: var(--row-col-title) / var(--col-col-title) / auto / span var(--span-col-title); }

/* --- EVENT CONTENT ELEMENTS --- */
.event-cat      { grid-area: var(--row-cat)   / var(--col-cat)   / auto / span var(--span-cat); }
.event-date     { grid-area: var(--row-date)  / var(--col-date)  / auto / span var(--span-date); }
.event-location { grid-area: var(--row-loc)   / var(--col-loc)   / auto / span var(--span-loc); }
.event-title    { grid-area: var(--row-title) / var(--col-title) / auto / span var(--span-title); }
.event-sub      { grid-area: var(--row-sub)   / var(--col-sub)   / auto / span var(--span-sub); }

.events-list .fluid-col-top { 
  grid-area: var(--row-arrow) / var(--col-arrow) / auto / span var(--span-arrow); /* Questa è la magic arrow */
}
/* #endregion */

/* #region  --------- EVENTS - COORDINATE --------- */
/* MOB FLUID FINO 479px */
@media (max-width: 479px) {
  .event-item-header {
    --row-date:  1; --col-date:  1;   --span-date:  1;
    --row-loc:   2; --col-loc:   1;   --span-loc:   1;
    --row-title: 3; --col-title: 1;   --span-title: 2;
    --row-arrow: 1; --col-arrow: 2;   --span-arrow: 1;
  }
}

@media (min-width: 480px) and (max-width: 559px) {
  .event-item-header {
    --row-date:  1; --col-date:  1;   --span-date:  4;
    --row-loc:   1; --col-loc:   5;   --span-loc:   6;
    --row-title: 2; --col-title: 1;   --span-title: 12;
    --row-arrow: 1; --col-arrow: 11;  --span-arrow: 2;
  }

  .event-item-body {
    --row-sub:   1; --col-sub:   1; --span-sub:   12;
    --row-cat:   2; --col-cat:   1; --span-cat:   12;
  }
}

@media (min-width: 560px) and (max-width: 767px) {
  .event-item-header {
    --row-date:  1; --col-date:  1;   --span-date:  3;
    --row-loc:   1; --col-loc:   4;   --span-loc:   7;
    --row-title: 2; --col-title: 4;   --span-title: 8;
    --row-arrow: 1; --col-arrow: 11;  --span-arrow: 2;
  }

  .event-item-body {
    --row-sub:   1; --col-sub:   4; --span-sub:   8;
    --row-cat:   2; --col-cat:   4; --span-cat:   9;
  }
}

/* --- Tabl SM in su (12 colonne) ma look uguale 4 colonne --- */
@media (min-width: 768px) and (max-width: 1279px) {
  .event-item-header {
    --row-date:  1; --col-date:  1;   --span-date:  3;
    --row-loc:   1; --col-loc:   4;   --span-loc:   8;
    --row-title: 2; --col-title: 4;   --span-title: 7;
    --row-arrow: 1; --col-arrow: 12;  --span-arrow: 1;
  }

  .event-item-body {
    --row-sub:   1; --col-sub:   4; --span-sub:   7;
    --row-cat:   2; --col-cat:   4; --span-cat:   9;
  }
}

/* --- Desk SM (12 colonne) --- */
@media (min-width: 1280px) {
  .u-bar {
    --row-col-date:  1; --col-col-date:  1; --span-col-date:  2;
    --row-col-loc:   1; --col-col-loc:   3; --span-col-loc:   4;
    --row-col-title: 1; --col-col-title: 7; --span-col-title: 5;
  }

  .event-item-header {
    --row-date:      1; --col-date:      1; --span-date:      2;
    --row-loc:       1; --col-loc:       3; --span-loc:       4;
    --row-title:     1; --col-title:     7; --span-title:     5;
    --row-arrow:     1; --col-arrow:    12; --span-arrow:     1;
  }

  .event-item-body {
    --row-sub:       1; --col-sub:       7; --span-sub:       5;
    --row-cat:       2; --col-cat:       7; --span-cat:       5;
  }
}
/* #endregion */

/* #region  --------- EVENT CARD - STRUTTURA --------- */
.full-card-link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  cursor: pointer !important;
  background-color: transparent;
}

/* Elimina pseudo-elementi sul link overlay */
.full-card-link::before,
.full-card-link::after {
  content: none !important;
  display: none !important;
}

/* CARD CONTAINER (Ricorda che non è un grid e non è un sticky quindi bisogna dire 100%) */
.event-card {
  display: flow-root;
  pointer-events: auto;
  position: relative;
  width: 100%;
  overflow: visible;
  border-top: 1px solid var(--line-dark);
}

.event-card:first-of-type {
  border-top-color: transparent;
}

.event-item-header .fluid-col-top { /* FRECCIA a dx */
  justify-self: end;
}

.event-item-header, .event-item-body {
  background-color: var(--events-bkg-switch);
}

/* --- EVENT ITEM HEADER + BODY (tutto nella grid speciale, la arrow è posizionata tramite la sua classe --- */
/* Desktop */
@media (min-width: 1280px) {
  .event-item-body {
    z-index: 5;
    margin: 220px 0 200px 0;
  }
}

/* --- ELEMENTI SPECIFICI --- */
.event-location {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3ch;
  row-gap: 0px;
}

.event-location .city::after {
  content: ",";
  margin-right: 0.5ch;
}

.event-location .venue {
  display: inline-block;
}

.events-list-ajax-wrap .text-message {
  padding: 6em 0;
}

@media (min-width: 768px) {
  .events-list-ajax-wrap .text-message {
    padding: 2em 0;
  }
}

.events-list-ajax-wrap {
  display: block;
  overflow: visible; /* Forza lo scroll verso l'esterno */
  min-height: 1px;   /* Evita collassi del margine */
}
/* #endregion */

/* #region  --------- EVENT CARD - PADDINGS, ANIMAZIONI e COLORI --------- */
.event-card {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.event-item-header, .event-item-body {
  padding-top: 0;
  padding-bottom: 0;
}

.event-item-header .event-title {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.event-item-header .magic-arrow-wrap {
  margin-top: 0.2ch;
}

.event-card .event-cat {
  padding-top: var(--space-6);
}

@media (min-width: 480px) {
  .event-card {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

@media (min-width: 768px) {
  .event-card .event-cat {
    padding-top: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .event-card {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .event-item-header .event-title {
    margin-top: -0.4ch;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .event-item-header {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .event-card:last-child .event-item-body {
    margin-bottom: var(--space-3);
  }
}

/* Event CATEGORY e SUB */
@media (min-width: 480px) {
  .event-card .event-cat {
    align-self: start;
  }
}

/* Mobile: nessuna animazione */
.event-card .event-sub {
  opacity: 1;
  transform: none;
}

.event-card .event-cat {
  opacity: 1;
  transform: none;
  align-self: end;
}

/* Tablet in su: animazione scroll-driven */
@media (min-width: 768px) {
  .event-card .event-cat {
    align-self: start;
    justify-self: start;
  }
}

/* --- ANIMAZIONE SCROLL-DRIVEN: DESKTOP BASE (1280px - 1499px) --- */
@media (min-width: 1280px) {
  .event-card .event-item-body {
    view-timeline-name: --card-squeeze;
    view-timeline-axis: block;
  }
  .event-card .event-sub,
  .event-card .event-cat {
    will-change: transform, opacity;
    animation: fly-up-large linear forwards;
    animation-timeline: --card-squeeze;
    animation-range: entry 10% exit 80%;
    opacity: 0;
  }
}

/* --- ANIMAZIONE SCROLL-DRIVEN: DESKTOP LARGE (1500px in su) --- */
@media (min-width: 1500px) {
  .event-card .event-sub,
  .event-card .event-cat {
    /* Usiamo una nuova animazione o regoliamo il range per schermi più alti */
    animation-name: fly-up-extra-large;
    animation-range: entry 5% exit 90%; 
  }
}

/* --- KEYFRAMES 1280px --- */
@keyframes fly-up-large {
  0% { transform: translateY(100px); opacity: 0; }
  40% { transform: translateY(0); opacity: 1; }
  58% { transform: translateY(0); opacity: 1; }
  62% { transform: translateY(0); opacity: 0.1; }
  100% { transform: translateY(-100px); opacity: 0; }
}

/* --- KEYFRAMES 1500px (Movimento più ampio per schermi grandi) --- */
@keyframes fly-up-extra-large {
  0% { transform: translateY(150px); opacity: 0; }
  40% { transform: translateY(0); opacity: 1; }
  68% { transform: translateY(0); opacity: 1; }
  72% { transform: translateY(0); opacity: 0.1; }
  100% { transform: translateY(-150px); opacity: 0; }
}

/* SAFARI non supporta */
@supports not (animation-timeline: scroll()) {
  .event-card .event-sub {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .event-card .event-cat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/*
.event-cat { display: none !important }
*/

@media (max-width: 767px) {
  .event-cat svg { width: auto; height: 24px !important; }
}

@media (min-width: 1280px) {
  .event-cat span { align-self: flex-end; }
  .event-cat svg { width: auto; height: 28px; align-self: flex-end; }
  .pg-single-event .event-cat { flex-direction: row-reverse; }
}

/* --- COLORI EVENT CAT: DEFAULT (UGUALI) --- */
.event-cat svg * { fill: currentColor; }
.event-cat[data-cat] svg * { fill: currentColor; }
.event-status-pill.is-today, .event-status-pill.is-upcoming { border: 1px solid var(--accent); background-color: var(--accent); color: var(--bkg-2); }

/* --- COLORI EVENT CAT: VIEW-PAST & SINGLE-EVENT (DIVERSI) --- */
body.view-past .event-cat svg *, .pg-single-event .event-cat svg * { fill: var(--accent) }
body.view-past .event-cat[data-cat="competition"] svg *, .pg-single-event .event-cat[data-cat="competition"] svg * { fill: var(--accent-1) }
body.view-past .event-cat[data-cat="concert"] svg *, .pg-single-event .event-cat[data-cat="concert"] svg * { fill: var(--accent-2) }
body.view-past .event-cat[data-cat="default"] svg *, .pg-single-event .event-cat[data-cat="default"] svg * { fill: var(--accent-3) }
body.view-past .event-cat[data-cat="festival"] svg *, .pg-single-event .event-cat[data-cat="festival"] svg * { fill: var(--accent-4) }
body.view-past .event-cat[data-cat="multidisciplinary"] svg *, .pg-single-event .event-cat[data-cat="multidisciplinary"] svg * { fill: var(--accent-5) }
body.view-past .event-cat[data-cat="news"] svg *, .pg-single-event .event-cat[data-cat="news"] svg * { fill: var(--accent-6) }

/* --- STATUS PILL COORDINATE (SINGLE EVENT / PAST) --- */
.single-ev-type[data-cat="competition"] .event-status-pill { background-color: var(--accent-1); border-color: var(--accent-1); color: var(--bkg-2); }
.single-ev-type[data-cat="concert"] .event-status-pill { background-color: var(--accent-2); border-color: var(--accent-2); color: var(--bkg-2); }
.single-ev-type[data-cat="default"] .event-status-pill { background-color: var(--accent-3); border-color: var(--accent-3); color: var(--bkg-2); }
.single-ev-type[data-cat="festival"] .event-status-pill { background-color: var(--accent-4); border-color: var(--accent-4); color: var(--bkg-2); }
.single-ev-type[data-cat="multidisciplinary"] .event-status-pill { background-color: var(--accent-5); border-color: var(--accent-5); color: var(--bkg-2); }
.single-ev-type[data-cat="news"] .event-status-pill { background-color: var(--accent-16); border-color: var(--accent-6); color: var(--bkg-2); }
/* #endregion */

/* #region  --------- EVENTS LIST - COLORE e tutto il resto, non le card) --------- */
/* Stato Past — classe ora sul body */
body.view-past {
  --events-bkg-switch: var(--bkg-2);
  --text-switch: var(--nero);
  --line-color-switch: var(--line-light);
}

@media (min-width: 768px) {
  body.view-past {
    --line-color-switch: var(--line-dark);
  }
}
/* Ereditarietà per i componenti interni */

.events-list > * {
  color: var(--text-switch);
}

/* Tempo per avere eventi lista */
#switch-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bkg-2);
  opacity: 0;
  transition: opacity var(--t-bezier-sm);
  pointer-events: none;
  z-index: 80;
}

/* --- BLOCCO LISTA EVENTI --- */
.events-list {
  position: relative;
  overflow: visible;
  display: flow-root;
  z-index: 60;
  background-color: var(--events-bkg-switch);
}

.events-list.is-empty {
  min-height: 30vh;
}

/* LOAD MORE / VIEW ALL */
.load-view-wrap {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 70;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  display: flow-root;
  background-color: var(--events-bkg-switch);
}

.load-view-wrap .vikra-btn,
#view-all-btn {
  pointer-events: auto;
  cursor: pointer;
  color: var(--text-switch);
}

@media (min-width: 768px) {
  .load-view-wrap {
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .load-view-wrap {
    padding-bottom: var(--space-8);
  }
}

.col-date, .col-location, .col-title {
  opacity: 0.7;
}

body.view-past .col-date, 
body.view-past .col-location, 
body.view-past .col-title {
  opacity: 0.5;
}
/* #endregion */

/* #region  --------- SINGLE EVENT - COLORE e STRUTTURA --------- */
/* --- PADDING TOP PERCHé NON HA TITLE CARD --- */
.pg-single-event .single-ev-wrap {
  position: relative;
  padding-top: calc(var(--h-header) + 26px);
}

@media (max-width: 1279px) {
  .pg-single-event .u-sticky-wrap {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .pg-single-event .single-ev-wrap {
    padding-top: calc(var(--h-header) + var(--h-bar-dbl));
  }
}

@media (min-width: 1280px) {
  .pg-single-event .u-sticky-wrap {
    margin-top: var(--h-header);
  }
  .pg-single-event .single-ev-wrap {
    padding-top: 0;
  }
}

/* --- INTERNO Coordinate, gap, paddings --- */
.u-grid.single-ev-wrap {
  column-gap: var(--gap-c);
  row-gap: var(--space-2);
}

.single-ev-sidebar { display: flex; row-gap: var(--space-4); }

.single-ev-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  justify-content: center;
}

.single-ev-wrap .mob-img-full {
  margin-top: calc(var(--space-2) * -1);
  padding-bottom: var(--space-2);
}

.single-ev-sidebar, .single-ev-content {
  display: flex;
  flex-direction: column;
}

/* --- 480px: tutto a piena larghezza, contenuto come display contents --- */
@media (min-width: 480px) {
  .single-ev-sidebar {
    grid-row: auto;
    grid-column: 1 / span 12;
  }
  .single-ev-meta {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .single-ev-wrap .single-ev-content { display: contents; }
  .single-ev-wrap .mob-img-full {
    grid-row: auto;
    grid-column: 1 / span 12;
  }
  .event-description {
    grid-row: auto;
    grid-column: 1 / span 12;
    text-align: justify;
    hyphens: auto;
  }
  .event-website {
    grid-row: auto;
    grid-column: 1 / span 12;
    justify-self: end;
  }
  .event-gallery {
    grid-row: auto;
    grid-column: 1 / span 12;
  }
}
 
/* --- 768px: margini laterali, simile a about 768-979 --- */
@media (min-width: 768px) and (max-width: 979px) {
  .single-ev-wrap {
    row-gap: var(--space-4);
  }
  .single-ev-sidebar {
    grid-column: 2 / span 10;
  }
  .single-ev-wrap .mob-img-full {
    grid-column: 2 / span 10 !important;
    padding-bottom: var(--space-4);
  }
  .event-description {
    grid-column: 2 / span 10;
  }
  .event-website {
    grid-column: 2 / span 10;
    justify-self: end;
  }
  .event-gallery {
    grid-column: 2 / span 10;
  }
}
 
/* --- 980px: centratura più stretta, immagine full width --- */
@media (min-width: 980px) and (max-width: 1129px) {
  .single-ev-wrap {
    row-gap: var(--space-4);
  }
  .single-ev-sidebar {
    grid-column: 2 / span 10;
  }
  .single-ev-wrap .mob-img-full {
    grid-column: 2 / span 10;
  }
  .event-description {
    grid-column: 3 / span 8;
    text-align: justify;
    hyphens: auto;
  }
  .event-website {
    grid-column: 3 / span 8;
    justify-self: end;
  }
  .event-gallery {
    grid-column: 3 / span 8;
  }
}
 
/* --- 1130px - 1279px: colonne centrali, immagine più larga --- */
@media (min-width: 1130px) and (max-width: 1279px) {
  .single-ev-sidebar {
    grid-column: 3 / span 8;
  }
  .single-ev-wrap .mob-img-full {
    grid-column: 3 / span 8 !important;
  }
  .event-description {
    grid-column: 3 / span 8;
  }
  .event-website {
    grid-column: 3 / span 8;
    justify-self: end;
  }
  .event-gallery {
    grid-column: 3 / span 8;
  }
}
 
/* --- 1280px+: layout sidebar sinistra / contenuto destra --- */
@media (min-width: 1280px) {
  .single-ev-wrap {
    padding-top: var(--space-6);
    row-gap: 0;
  }
  .single-ev-sidebar {
    grid-column: 1 / span 6;
    padding-bottom: var(--space-10);
    row-gap: var(--space-2);
  }
  .single-ev-meta {
    padding-top: var(--base);
    padding-bottom: var(--base);
  }
  .single-ev-wrap .single-ev-content { display: flex; grid-column: 7 / span 6; gap: var(--space-4); }
  .event-description {
    text-align: left;    /* Torna all'allineamento naturale a sinistra */
    hyphens: manual;     /* Disattiva la sillabazione automatica */
    word-break: normal;  /* Assicura che le parole non vengano spezzate */
  }
  .single-ev-wrap .mob-img-full {
    padding-top: 0; padding-bottom: 0;
    margin-top: 0.5ch !important;
  }
}

/* --- SINGLE EV TYPE --- */
.single-ev-type {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}

.single-ev-type .event-status-pill {
  grid-column: 1;
  justify-self: start;
}

.single-ev-type .event-cat {
  grid-column: 2;
  justify-self: end;
}

/* --- BREAKPOINTS --- */
@media (max-width: 1279px) {
  .single-ev-meta {
    border-top: 1px solid var(--line-light);
  }
  /* Se non c'è l'immagine principale, aggiungiamo il bordo sotto */
  .single-ev-meta.no-main-image {
    border-bottom: 1px solid var(--line-light);
  }
}

@media (min-width: 1280px) {
  .single-ev-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    order: 3;
  }
  .single-ev-type .event-cat {
    margin-top: 2em;
  }
}

/* --- EVENT TYPE & STATUS PILL --- */
.event-cat {
  display: flex;
  align-items: center; /* Ora funziona perché il div è un blocco */
  gap: 12px;
}

.event-cat svg {
  display: block; /* Toglie lo spazio vuoto sotto l'immagine */
  height: 30px;
  width: auto;
}

.event-cat .f-cat {
  /* Essendo un div, ora non serve altro per allinearlo */
  margin: 0;
  line-height: 1;
}

.event-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  width: fit-content;
  align-self: flex-start;
}

/* --- EVENT WEBSITE --- */
.event-website {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  align-self: flex-end;
}

/* ---  EVENT GALLERY --- */
.event-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Solo su schermi molto grandi (Desktop Wide) passiamo a 2 colonne */
@media (min-width: 1350px) {
  .event-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .event-gallery-item:only-child {
    grid-column: 1 / -1;
  }
}

.event-gallery-item {
  position: relative;
  overflow: hidden;
  background-color: var(--bkg-2); /* colore al caricamenteo */
  border-radius: 2px;
}

.event-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* #endregion */

/* #region  --------- SINGLE EVENT NAVIGATION --------- */
.event-nav-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--line-light);
  padding-top: 2em;
  padding-bottom: 2em;
  margin-top: var(--space-10);
}

/* MOBILE: Larghezza 75% e allineamenti alternati */
.nav-item {
  width: 75%;
}

.prev-item {
  align-self: flex-start;
}

.next-item {
  align-self: flex-end;
}

/* NAV LINK: Freccia sempre sopra il testo in tutti i breakpoint */
.nav-link {
  display: flex;
  flex-direction: column; /* Freccia sopra */
  align-items: flex-start; /* Default a sinistra per prev-item */
  gap: 0.3em; /* Spazio tra freccia e testo */
  text-decoration: none;
  color: inherit;
  transition: opacity var(--t-bezier);
}

/* Allineamento a destra per il link "Next" */
.next-item .nav-link {
  align-items: flex-end; /* Spinge freccia e testo a destra */
  text-align: right;
}

.nav-info {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  flex: 1;
  max-width: 360px;
}

/* Troncamento testo SOLO in Mobile (< 768px) */
@media (max-width: 767px) {
  .nav-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    line-clamp: 2; /* Risolve errore VS Code */
    text-overflow: ellipsis;
  }
}

/* TABLET & DESKTOP (da 768px) */
@media (min-width: 768px) {
  .event-nav-wrap {
    justify-content: space-between;
    flex-direction: row;
    gap: var(--gap-c);
    padding-top: 3em;
    padding-bottom: 3em;
  }

  .nav-item {
    width: 100%;
    align-self: stretch;
  }

  .nav-title {
    display: block;
    -webkit-line-clamp: initial;
    line-clamp: initial;
    overflow: visible;
  }

  /* Spazio maggiore tra freccia e testo su schermi grandi */
  .nav-info {
    max-width: 400px;
    gap: 0.5em;
    flex: none;
  }
}
/* #endregion */

/* #region  --------- ABOUT --------- */
.u-top-layer { display: flex; flex-direction: column; width: 100%; gap: var(--space-10); padding-top: var(--space-4); padding-bottom: var(--space-8); }
.u-pusher { padding-top: var(--space-10); }
.about-img { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.about-section { column-gap: var(--gap-c); row-gap: var(--space-2); }

@media (min-width: 480px) {
  .about-section .u-sticky-el { 
    grid-row: auto;
    grid-column: 1 / span 12;
  }
  .about-section .about-bio { 
    grid-row: auto;
    grid-column: 1 / span 12;
    text-align: justify;
    hyphens: auto;
  }
  .about-section .about-img { 
    grid-row: auto;
    grid-column: 1 / span 12;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .u-top-layer { gap: var(--space-16); }
  .about-section {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .about-section .u-sticky-el { 
    grid-column: 2 / span 10;
  }
  .about-section .about-bio { 
    grid-column: 2 / span 10;
  }
  .about-section .about-img { 
    grid-column: 2 / span 10;
  }
}

@media (min-width: 980px) {
  .u-top-layer { gap: var(--space-16); padding-top: 0px; }
  .about-section {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .about-section .u-sticky-el { 
    grid-column: 3 / span 8;
  }
  .about-section .about-bio { 
    grid-column: 3 / span 8;
  }
  .about-section .about-img {
    grid-column: 1 / span 12;
  }
}

@media (min-width: 1130px) and (max-width: 1279px) {
  .about-section .u-sticky-el { 
    grid-column: 3 / span 8;
  }
  .about-section .about-bio { 
    grid-column: 3 / span 8;
  }
  .about-section .about-img { 
    grid-column: 3 / span 8;
  }
}

@media (min-width: 1280px) {
  .about-section .u-sticky-el { 
    grid-column: 1 / span 6;
  }
  .about-section .about-bio { 
    grid-column: 7 / span 6;
    text-align: left;    /* Torna all'allineamento naturale a sinistra */
    hyphens: manual;     /* Disattiva la sillabazione automatica */
    word-break: normal;  /* Assicura che le parole non vengano spezzate */
  }
  .about-section .about-img { 
    grid-column: 7 / span 6;
  }
}

/* --- AWARDS --- */
.award-item, .award-inner, .personnel-card, .u-bottom-layer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--bkg-2);
}

.awards-grid-wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  padding: var(--space-4) 0;
  column-gap: var(--gap-c);
  row-gap: 0;
  align-content: center;
  list-style: none;
}

.award-item {
  padding: 1.5em ;
  min-height: 200px;
  position: relative;
  /* MOBILE DEFAULT: Solo bordo sotto */
  border-bottom: 1px solid #1f1d1d;
}

.award-item:last-child {
  border-bottom: none;
}

/* --- AWARDS TABLET & DESKTOP (Specifiche Griglia) --- */
@media (min-width: 768px) {
  .awards-grid-wrap { 
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
  .award-item {
    /* Ripristino bordi per la griglia */
    border-bottom: 1px solid #1f1d1d;
    margin-top: -1px; 
  }
  .award-item:last-child,
  .award-item:nth-last-child(2) {
    border-bottom: none;
  }
}

@media (min-width: 1024px) {
  .award-inner {
    max-width: 380px !important;
  }
}


/* --- ELEMENTI INTERNI AWARDS --- */
.award-inner {
  max-width: 280px;
  margin: 0 auto;
  gap: 1em;
}

.award-inner-1, .award-inner-2, .award-inner-3 {
  line-height: 1.1;
  width: 100%;
}

.award-inner-1 sup {
  font-family: var(--ff-sur);
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  top: -0.2em;
}

.award-inner-1 small {
  font-family: var(--ff-sur);
  font-size: 14px;
}

.award-inner .f-system, .personnel-info .f-system {
  font-style: italic;
  opacity: 0.5;
}

/* --- PERSONNEL --- */
.personnel-card {
  align-items: center;
  text-align: center;
}

.personnel-card {
  position: relative;
}

.personnel-info {
  position: relative;
  text-align: center;
  opacity: 1;
  color: var(--nero);
}

@media (min-width: 1280px) {
  .personnel-photo {
    transition: opacity var(--t-bezier);
  }
  .personnel-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--nero);
    opacity: 0;
    transition: opacity var(--t-bezier);
    cursor: default;
  }
  .personnel-card:hover .personnel-photo {
    opacity: 0.2;
  }
  .personnel-card:hover .personnel-info {
    opacity: 1;
  }
}

.personnel-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  column-gap: var(--gap-c);
  row-gap: var(--gap-r);
  align-items: start;
  justify-items: center;
  list-style: none;
}

/* --- Responsive Grid --- */
@media (min-width: 500px) {
  .personnel-wrap {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

@media (min-width: 980px) {
  .personnel-wrap {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (min-width: 1280px) {
  .personnel-wrap {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* --- Personnel Photo & Protection --- */
.personnel-card .image-wrapper {
  position: relative;
  width: 100%; /* Assicura che lo scudo copra l'area corretta */
}

/* Scudo invisibile sopra la foto */
.personnel-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: block;
  margin-bottom: 12px;
  object-fit: cover;
  /* Blocchi di protezione */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.personnel-name,
.personnel-role {
  user-select: none;
  -webkit-user-select: none;
}
/* #endregion */

/* #region  --------- U-REVEAL SYSTEM --------- */
/* --- ELEMENTI DI BASE --- */
.u-top-layer,
.u-void,
.u-bottom-layer,
.u-pusher {
  position: relative;
}

.u-top-layer,
.u-pusher {
  background-color: var(--bkg-2);
  z-index: 10;
}

.u-void {
  z-index: 10;
}

.u-bottom-layer {
  background-color: var(--bkg-3);
  height: auto;
  inset: auto 0;
  z-index: 10;
  overflow: visible;
}

/* --- LOGICA TABLET --- */
@media (min-width: 768px) {
  .u-void {
    width: 100%;
    height: 100vh;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    z-index: 5;
    background: transparent;
  }
  .u-bottom-layer {
    position: fixed;
    top: var(--h-header);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--h-bar-dbl));
    overflow: hidden; 
    z-index: 0;
  }
  .u-bottom-layer .awards-grid-wrap {
    /* Il punto zero è gestito dal JS in base al viewport */
    transform: translate3d(0, 0, 0); 
    will-change: transform;
    transition: none;
  }
}

/* --- LOGICA DESKTOP --- */
@media (min-width: 1024px) {
  .u-bottom-layer {
    top: calc(var(--h-header) + var(--h-bar-dbl));
  }
}
/* #endregion */

/* #region  --------- REPERTOIRE --------- */
.repertoire-row {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--line-light);
}

.repertoire-row:first-of-type {
  border-top-color: transparent;
}

.u-bar .rep-media,
.repertoire-row .fluid-col-top {
  justify-self: end; /* FRECCIA a dx e anche MEDIA */
}

.repertoire-row .rep-media {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.u-bar .rep-composer { grid-column: var(--col-composer)    / span var(--span-composer); }
.u-bar .rep-title    { grid-column: var(--col-composition) / span var(--span-composition); }
.u-bar .rep-media    { grid-column: var(--col-media)       / span var(--span-media); }

.repertoire-row .rep-composer { grid-column: var(--col-composer)    / span var(--span-composer); }
.repertoire-row .rep-title    { grid-column: var(--col-composition) / span var(--span-composition); }
.repertoire-row .rep-media    { grid-column: var(--col-media)       / span var(--span-media); }

@media (max-width: 767px) {
  .repertoire-row {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  #repertoire-list-container[data-active-col="media"] .repertoire-row .magic-arrow-mask path {
    stroke-width: 2;
  }
}

/* --- TABLET SM--- */
@media (min-width: 768px) {
  .pg-repertoire .u-grid { align-items: center; }
  .repertoire-row .rep-composer,
  .repertoire-row .rep-title,
  .repertoire-row .rep-media {
    grid-row: 1;
  }
  .repertoire-row {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    align-items: baseline;

    --col-composer:    7; --span-composer:    5;
    --col-composition: 1; --span-composition: 5;
    --col-media:      12; --span-media:       1;
  }
  .u-bar {
    --col-composer:    7; --span-composer:    5;
    --col-composition: 1; --span-composition: 5;
    --col-media:      12; --span-media:       1;
    
  }

  .repertoire-row .magic-arrow-mask { justify-self: end; }

  /* --- LOOK CHANGE COLONNA ATTIVA --- */
  #repertoire-list-container[data-active-col="media"] .repertoire-row .magic-arrow-mask path {
    stroke-width: 2;
  }
}

#repertoire-list-container[data-active-col="composer"] .rep-composer,
#repertoire-list-container[data-active-col="title"] .rep-title {
  font-family: var(--ff-title);
  font-size: var(--fs-3);
  line-height: 1.1;
  letter-spacing: var(--ls-sm); 
  word-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* --- SORT BTN "V" --- */
button.sort-btn::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.5ch;
  margin-right: 1ch;
  border-right: 1.5px solid var(--nero);
  border-bottom: 1.5px solid var(--nero);
  transform: rotate(45deg) translateY(-5px);
  transition: transform var(--t-bezier), opacity var(--t-bezier);
  opacity: 1;
  vertical-align: baseline;
}

button.sort-btn.active.sort-desc::after {
  transform: rotate(-135deg) translateY(2px);
}

@media (min-width: 1280px) { 
  button.sort-btn::after {
    width: 7px;
    height: 7px;
    margin-left: 1ch;
  }
}
/* #endregion */

/* #region  --------- FOOTER --------- */
#colophon { 
  position: static;
  background-color: var(--bkg-2);
  border-top: 1px solid var(--line-light);
}

.foot-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
  gap: var(--space-8);
}

/* --- COLONNE --- */
.foot-left,
.foot-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-10);
}

/* Mob LG + Tab SM */
@media (min-width: 480px) and (max-width: 1023px) {
  .home .foot-left { grid-column: 1 / 1;}
  .home .foot-right { grid-column: 2 / 1;}
  .foot-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-c);
    row-gap: var(--space-8);
    align-items: end;
  }
  .foot-branding {
    grid-column: 1 / 1;
  }
  .foot-socials {
    grid-column: 2 / 2;
  }
  .foot-menu, .foot-utility {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .foot-left,
  .foot-right {
    gap: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .foot-left,
  .foot-right {
    gap: var(--space-4);
  }
  .foot-utility { display: flex; margin-top: var(--space-4) }
}

/* --- FOOT BRANDING --- */
.foot-branding { 
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.foot-branding-top span { 
  display: flex;
  flex-direction: column;
  gap: 12px;  
}

.branding-email { 
  display: block;
  margin-top: 0.5em;
}

/* --- FOOT SOCIALS e FOOT MENU --- */
.foot-socials, .foot-menu .nav-list, .foot-utility { 
  display: flex;
  flex-direction: column;
  gap: 1.2em; 
}

.foot-socials-row {
  border-bottom: 1px solid var(--line-dark);
  align-items: center;
  padding-bottom: 5px;
}

a.foot-socials-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Solo foot-menu */
.foot-menu .nav-list { 
  list-style: none;
}

/* Valore di precisione non breakpoint */
@media (min-width: 575px) {
  .foot-menu .nav-list { 
    flex-direction: row; 
    gap: 3em;
  }
}

/* --- FOOT UTILITY --- */
.foot-utility { 
  align-items: flex-end;
}

/* --- FOOT BOTTOM --- */
.foot-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 40px;
  border-top: 1px solid var(--line-light);
  gap: var(--space-4);
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 1ch;
}

/* --- Cittò a capo in Mob LG e Tab SM --- */
@media (min-width: 480px) and (max-width: 1023px) {
  .tablet-break { display: block; }
  .home .tablet-break { display: block; }
}

/* --- IN HOMEPAGE --- */
@media (min-width: 480px) and (max-width: 1023px) {
  .home .foot-left .foot-branding {
    display: none;
  }
  .home .foot-right .foot-branding {
    display: flex !important;

  }
}

@media (min-width: 1024px) {
  .foot-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: var(--gap-c);
    row-gap: var(--space-8);
    align-items: start;
  }

}

.home .foot-right .foot-branding {
  display: none;
}
/* #endregion */

/* #region  --------- VIKRA CONTACT BOX & FORM 7 --------- */
/* IMPORTANTE HONEYPOT */
.hp-hidden {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: -1;
}

/* Sblocca l'ereditarietà per tutti i campi form che hanno una tua classe f- */
.contact-form-wrap input[class*="f-"], 
.contact-form-wrap textarea[class*="f-"],
.contact-form-wrap input[type="submit"][class*="f-"] {
  font-family: inherit !important;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none; /* Per evitare il look "Apple" su iPhone */
  appearance: none;
}

/* Forza i Placeholder a usare il font dei titoli (f-sur) come desiderato */
.contact-form-wrap input::placeholder, 
.contact-form-wrap textarea::placeholder {
  opacity: 0.7;
}

/* CONTACT BOX */
.vikra-contact-box {
  display: block;
  border: 1px solid var(--line-dark);
  border-radius: 50px;
  padding: 1.4em 1.4em;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  transition: max-width var(--t-bezier);
}

@media (min-width: 1024px) and (max-width: 1299px) {
  .vikra-contact-box {
    max-width: 556px;
  }
}

@media (min-width: 1300px) {
  .vikra-contact-box {
    max-width: 448px;
  }
}

.form-toggle-check:checked ~ .vikra-contact-box {
  width: 100%;
  max-width: 100%;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* centrato verticalmente */
  min-height: 42px;
  pointer-events: none;
}

.box-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-bezier), opacity var(--t-bezier), margin var(--t-bezier);
  pointer-events: auto;
  cursor: default;
}

.form-inner { 
  overflow: hidden; 
  min-height: 0;
  pointer-events: auto; /* Assicura che l'interno del form sia sempre cliccabile */
}

/* Fix specifico per i wrapper di Contact Form 7 che bloccano il cursore */
.wpcf7-form-control-wrap {
  display: block;
  pointer-events: auto;
}

/* Stato Aperto */
.form-toggle-check:checked ~ .vikra-contact-box {
  border-bottom: 1px solid var(--line-dark);
}

.form-toggle-check:checked ~ .vikra-contact-box .box-content {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 40px;
}

.icon-minus, .form-toggle-check, .wpcf7-spinner { display: none; }
.form-toggle-check:checked ~ .vikra-contact-box .icon-plus { display: none; }
.form-toggle-check:checked ~ .vikra-contact-box .icon-minus { display: inline-block; }
.form-toggle-check:checked ~ .vikra-contact-box .box-header { min-height: 40px; }

/* Contact Form 7 Layout */
.contact-form-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3ch;
  align-items: center;
}

.form-name, .form-surname, .form-email, .form-subject, .form-message { grid-column: span 4; }

/* Valore di precisione non Breakpoint */
@media (min-width: 560px) {
  .form-name, .form-surname, .form-email, .form-subject {
    grid-column: span 2;
  }
  .form-message {
    grid-column: span 4;
  }
}

/* Struttura base dei campi (width e reset necessari) */
.contact-form-wrap input:not([type="submit"]), 
.contact-form-wrap textarea {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none; /* Rimuove il blu di default */
  -webkit-tap-highlight-color: transparent; /* Rimuove il flash blu al tocco su mobile */
}

/* Feedback al focus: usiamo le variabili di brand */
.contact-form-wrap input:not([type="submit"]):focus {
  border-bottom-color: var(--line-dark);
}

.contact-form-wrap input:not([type="submit"]) {
  border-bottom: 1px solid var(--line-dark);
  padding: 0 0 10px 0;
}

.form-message textarea {
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 2ch;
  min-height: 4em;
  resize: vertical;
}

/* Send */
.form-send {
  grid-column: 3 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

@media (max-width: 767px) {
  .form-send { grid-column: span 4; align-items: center; }
}

.wpcf7-not-valid-tip, .wpcf7-response-output { border: none !important; color: red; }


/* -- Apertura CONTACT BOX modifica CARD e FOOTER --- */
/* Stato base (chiuso) */
.card-contact { 
  z-index: 5;
  transition: all var(--t-bezier);
}

/* Quando la checkbox DENTRO card-contact o footer è selezionata */
@media (min-width: 1024px) {
  .foot-wrapper:has(.form-toggle-check:checked) .foot-left { grid-column: 1 / -1; grid-row: 1 / 2 }
  .foot-wrapper:has(.form-toggle-check:checked) .foot-right { grid-column: 2 / -1; grid-row: 2 / 3 }
}

.card-bottom:has(.form-toggle-check:checked) {
  grid-template-columns: 1fr; /* Cambia la griglia: da 2 colonne a 1 */
}

/* Quando la checkbox è selezionata, nascondi il sottotitolo */
.card-bottom:has(.form-toggle-check:checked) .card-subtitle {
  display: none;
}

.card-bottom:has(.form-toggle-check:checked) .card-contact {
  grid-column: 1 / -1; /* Occupa tutta la larghezza */
}
/* #endregion */

/* #region  --------- PRIVACY AND COOKIE POLICY --------- */
body.privacy-policy #main-content { min-height: 80vh; padding-top: var(--space-10); padding-bottom: var(--space-10); }
body.privacy-policy main #content .page-header { padding-bottom: var(--h-bar); }
.iubenda-link { display: flex; padding-top: 1em; } /* Nella pagina con link iubenda */

/* --- COOKIE BANNER --- */
.cookie-banner {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  align-items: center;
  background-color: var(--bkg-1);
  border-top: 1px solid var(--line-dark);
  z-index: 1000;
  padding: 16px var(--lat-padding);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 130px;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px 40px;
  flex-wrap: wrap;
  width: 100%;
}

.cookie-banner-text {
  width: 100%
}

.cookie-banner-buttons {
  display: inline-flex;
  flex-direction: row;
  gap: 20px;
  flex-shrink: 0;
}

.cookie-btn-close {
  margin-left: 1.5em;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--nero);
  line-height: 1;
  padding: 4px 8px;
  align-self: end;
}

.cookie-btn {
  padding: 8px 20px !important;
}

@media (min-width: 1024px) {
  .cookie-banner {
    min-height: 170px;
  }
  .cookie-banner-text {
    width: auto;
    flex: 1;
    font-size: 17px !important;
  }
  .cookie-btn-close {
    align-self: center;
  }
}
/* #endregion */

/* #region  --------- MAGIC ARROW e LINE SEPARATOR --------- */
.magic-arrow-mask {
  position: relative;
  overflow: hidden;
  width: 21px;
  height: 21px;
}

/* Dimensioni fisse per direzioni specifiche e aree speciali */
#colophon .magic-arrow-mask, .arrow-left.magic-arrow-mask, .arrow-right.magic-arrow-mask {
  width: 14px;
  height: 14px;
}

.arrow-down.magic-arrow-mask {
  width: 21px;
  height: 21px;
}

.link-w-arrow .magic-arrow-mask, #colophon .arrow-up.magic-arrow-mask {
  width: 10px;
  height: 10px;
}

@media (min-width: 768px) {
  .magic-arrow-mask { width: 30px; height: 30px; }
  #colophon .magic-arrow-mask, .arrow-down.magic-arrow-mask, .arrow-left.magic-arrow-mask, .arrow-right.magic-arrow-mask {
    width: 18px;
    height: 18px;
  }
  .arrow-down.magic-arrow-mask {
    width: 28px;
    height: 28px;
  }
  .link-w-arrow .magic-arrow-mask, #colophon .arrow-up.magic-arrow-mask {
    width: 14px;
    height: 14px;
  }
}

.magic-arrow-icon {
  width: 100%; height: 100%;
  display: block; transition: none;
}

.magic-arrow-icon.clone {
  position: absolute; top: 0; left: 0;
}

/* --- Stati di partenza del CLONE --- */
.magic-arrow-icon.clone { transform: translate(-100%, 100%); } /* Default ↗ */
.arrow-up .magic-arrow-icon.clone { transform: translate(0, 100%); }
.arrow-down .magic-arrow-icon.clone { transform: translate(0, -100%); }
.arrow-left .magic-arrow-icon.clone { transform: translate(100%, 0); }
.arrow-right .magic-arrow-icon.clone { transform: translate(-100%, 0); }

/* --- ANIMAZIONE UNIFICATA --- */
.arrow-trigger:hover .magic-arrow-icon,
.arrow-trigger:active .magic-arrow-icon,
.arrow-trigger.arrow-animate .magic-arrow-icon {
  transition: transform 0.5s cubic-bezier(0.6, 0.01, 0, 1);
}

/* Uscita della MAIN */
.arrow-trigger:hover .magic-arrow-icon.main, .arrow-trigger:active .magic-arrow-icon.main, .arrow-trigger.arrow-animate .magic-arrow-icon.main { transform: translate(100%, -100%); } /* Default */
.arrow-trigger:hover .arrow-up .magic-arrow-icon.main, .arrow-trigger.arrow-animate .arrow-up .magic-arrow-icon.main { transform: translate(0, -100%); }
.arrow-trigger:hover .arrow-down .magic-arrow-icon.main, .arrow-trigger.arrow-animate .arrow-down .magic-arrow-icon.main { transform: translate(0, 100%); }
.arrow-trigger:hover .arrow-left .magic-arrow-icon.main, .arrow-trigger.arrow-animate .arrow-left .magic-arrow-icon.main { transform: translate(-100%, 0); }
.arrow-trigger:hover .arrow-right .magic-arrow-icon.main, .arrow-trigger.arrow-animate .arrow-right .magic-arrow-icon.main { transform: translate(100%, 0); }

/* Entrata della CLONE (Sempre a 0,0 per tutti) */
.arrow-trigger:hover .magic-arrow-icon.clone,
.arrow-trigger:active .magic-arrow-icon.clone,
.arrow-trigger.arrow-animate .magic-arrow-icon.clone {
  transform: translate(0, 0) !important;
  transition-delay: 0.1s;
}

/* --- RESPONSIVE & UTILS --- */
@media (max-width: 767px) {
  .arrow-trigger:active .magic-arrow-icon, .arrow-trigger.arrow-animate .magic-arrow-icon { transition-duration: 0.3s; }
}

/* Stroke 2px */
@media (min-width: 768px) {
  .event-card .magic-arrow-mask path,
  .repertoire-row .magic-arrow-mask path {
    stroke-width: 1.6;
  }
}

.line-separator { width: 100%; border-bottom: 1px solid var(--line-dark); }
/* #endregion */