/* Schema di massima per seuqenza props

  .component {

    // -------------------  1. Layout
    display: flex;
    flex-direction: column;

    // -------------------  2. Size
    width: 100%;
    min-height: 50px;

    // -------------------  3. Box model
    padding: 16px;
    margin: 8px 0;

    // -------------------  4. Visual
    background: white;
    border: 1px solid #ddd;

    // -------------------  5. Typography
    font-size: 14px;
    color: #333;

    // -------------------  6. Interactions
    transition: background 0.2s;
    
    // -------------------  Hover & Pseudos
    &:hover {
      background: #f0f0f0;
    }

  }
  
*/

/*

  Pages:
    
    /servizi
    /offerta
  ---

*/
/*

  /servizi
    
    Hero-Services
    Services-Steps
    Slider Text
    Slider Heading
    Slider Transition // Anatomy
    Slider Featworks
  ---

*/
body.servizi {

  /* 
  
    Hero-Services
    
  */
  /*  Cambio colore stroke stellina   */
  .cta-link-wrapper {
    --star-stroke-color: var(--color-primary-light);
  }

  /*  Stili per il Paragrafo nella Hero */
  @media (min-width:990px) {

      .layer--hero-services-text 
      .title-regular {
          max-width: 15ch;
      }

    .layer--hero-services-text 
    .paragraph-body {
          max-width: 40ch;
      }
  }

  /*
    Services-Steps

  */
  /*  
    Services-Steps // Step - 1  
  */
  /* Layout Grid per quando
  .step-1-text ha display:contents
  su tablet */
  @media (min-width: 990px) {

      .step-service-1 {
          row-gap: var(--spacing-small);

          & .aside-counter-wrapper {
              grid-column: 1/2;
              grid-row: 1/2;
          }

          & .aside-image-box {
              grid-column: 2/3;
              grid-row: 1/2;
          }

          & .common-paragraph--container {
              grid-column: 1/3;
              grid-row: 2/3;
          }
      }
  }

  /*  
    Services-Steps // Step - 3  
  */
  /* Padding destro dei paragraph-body */
  @media (min-width: 1600px) {
    .step-service-3 
    .common-paragraph-body {
      max-width: 55ch;
  }
  }

  /*  
    Services-Steps // Step - 4  
  */
  /* Position sticky per il common button */
  @media (min-width: 1100px) {
    .common-button-wrapper--step-4 
    {position: relative;}

    .common-button-wrapper--step-4 
    .common-button {
      position: sticky;
      top: calc(var(--header-height) + 0px);
    }
  }

  /*

    Slider Text
    
  */
  /* Spacing del component common paragraph heading */
  .slide-text 
  .common-paragraph.common-paragraph--spacing 
  .common-paragraph-heading {
    margin-bottom: var(--spacing-xs);
  }

  /*

    Slider Heading
    
  */
  /* Allineamento testo */
  .slider-heading-wrapper .common-paragraph-heading {
    text-align: center;
  }

  /*
  
    Slider Top

  */
  /* Effetto text-stroke sulle label per staccare da svg che fa da linea negl grafico */
  .module-bottom-label__span {
    position: relative;
  }
  .module-bottom-label__span::before {
    content: attr(data-text);
    position: absolute;
    top:0;
    left: 0;
    z-index: -1;
    /* --color è definito su classe .primary-dark nel contenitore di questo elemento */
    -webkit-text-stroke-color: var(--color); 
    -webkit-text-stroke-width: 10px;
    color:var(--color);
  }
  @media(min-width:991px) {
    .module-bottom-label__span {
      anchor-name: --svg-anchor-position;
      
    }
    .module-bottom__svg-wrapper--desktop svg {
      transform: translate(20px, -2.5ch);
    }    
    .module-bottom__svg-wrapper--desktop {
      
      position-anchor: --svg-anchor-position;
      bottom: anchor(bottom);
      width: 100%;
      left: anchor(left);
      transform: unset;
      overflow: clip;
      
    }
  }
  @media(min-width:1366px) { 
    .module-bottom__svg-wrapper--desktop svg {
      
      transform: translateY(-.5ch);
    }
    .module-bottom__svg-wrapper--desktop {
      left: unset;
      right: calc(anchor(right) - 20px);
      width: fit-content;
    }
  }

  /*

    Slider Featworks

  */
    /* Reset margin-bottom del paragraph */
  #dark-section-featwork 
  .common-paragraph.common-paragraph--spacing 
  > .common-paragraph-heading {
    margin-bottom: unset;
    padding-bottom: var(--spacing-small);
  }
  @media (min-width: 767px) {
    #dark-section-featwork 
    .common-paragraph.common-paragraph--spacing 
    > .common-paragraph-heading {  
    padding-bottom: unset;
    }
  }

  /* Spegne la NAV */
  @media (max-width: 990px) {
  .custom-nav.featwork {
    display: none;
  }}

  /* Definisce la NAV */
  @media (min-width: 990px) {
  .custom-nav.featwork {
    display: flex;
    padding-right: var(--grid-col);
    padding-top: var(--spacing-xs);
    
    & .custom-nav-btn {
      background-color: transparent;
    }
  
    & svg path {
      stroke: var(--color-primary-dark);
    }
  }}

  /* Elemento BEFORE per simulare lo sfondo diviso a metà con bordi arrotondati, per far sembrare che le featured images escano fuori dallo sfondo scuro */
  .swiper__featwork::before, .swiper__featwork::after {
    content: '';
  }
  .swiper__featwork {
    display: grid;
  }
  .swiper__featwork::before {
    position: absolute;
    inset: 0 var(--frame-padding) 50%;
    background-color: var(--color-primary-dark);
    border-end-start-radius: calc(var(--common-image-border-radius) * 2);
    border-end-end-radius: calc(var(--common-image-border-radius) * 2); 
  }

}

/* Slider Transition // Anatomy */
body.servizi:not(.logged-in) {
  
  /*

    Slider Transition // Anatomy

  */
  /* Elemento spento nel builder, altrimenti spegneva gli elementi */
  /* Transizioni testo per slider Anatomy - parte sotto con solo testi e i 4 step */
  /* Lo slider è un */
  

    /* Variabile per delay */
    .swiper__anatomy {
        --d: .3;
    }

    /* Contenitore dei numeri Index */
    .slide-index {
        overflow: clip;
    }

    /* Senza questo, non si muovono */
    .slide-index-nr-main__span,
    .slide-index-nr__span {
      display: inline-block;
  }

  /* Stato iniziale -- Nr Principale  */
  .swiper-slide .slide-index-nr-main__span {
      transform: translateY(100%);
  }

  /* Stato Attivo -- Nr Principale */
  .swiper-slide-active .slide-index-nr-main__span {
      transform: translateY(0%);
      transition-property: transform;
      transition-duration: 1.2s;
      transition-delay: calc(var(--d) * 0.2s);
      transition-timing-function: cubic-bezier(.48, .58, .15, .89);
  }

  /* Stato iniziale -- Numeri Normali  */
  .swiper-slide .slide-index-nr__span {
      transform: translateY(100%);
  }

  /* Stato Attivo -- Numeri Normali */
  .swiper-slide-active .slide-index-nr__span {
      transform: translateY(0%);
      transition-property: transform;
      transition-duration: 1.2s;
      transition-timing-function: cubic-bezier(.48, .58, .15, .89);
  }

  .swiper-slide-active .slide-index-nr:nth-child(1) .slide-index-nr__span {
      transition-delay: calc(var(--d) * 0.4s);
  }

  .swiper-slide-active .slide-index-nr:nth-child(2) .slide-index-nr__span {
      transition-delay: calc(var(--d) * 0.8s);
  }

  .swiper-slide-active .slide-index-nr:nth-child(3) .slide-index-nr__span {
      transition-delay: calc(var(--d) * 1s);
  }


  /* Testo */
  /* Testo -- Stato inattivo  */
  /* Testo -- Animazione da..  */
  .swiper-slide .paragraph-lead {
      opacity: 0;
      transform: translateY(100%);
      transition-property: all;
      transition-duration: 1.2s;
  }

  .swiper-slide .paragraph-body {
      opacity: 0;
    transition-property: all;
      transition-duration: 1.2s;

  }

  /* Testo -- Stato Attivo  */
  /* Testo -- Animazione ..a  */
  .swiper-slide-active .paragraph-lead {
      transform: translateY(0%);
      opacity: 1;
      transition-property: all;
      transition-duration: 1.2s;
      transition-delay: calc(var(--d) * 0.3s);
      transition-timing-function: cubic-bezier(.48, .58, .15, .89);
  }

  .swiper-slide-active .paragraph-body {
      opacity: 1;
      transition-property: all;
      transition-duration: 1s;
      transition-timing-function: linear;
  }

  .swiper-slide-active h3.paragraph-lead {
      transition-delay: calc(var(--d) * 0.6s);
  }

  .swiper-slide-active p.paragraph-lead {
      transition-delay: calc(var(--d) * 0.9s);
  }

  .swiper-slide-active .paragraph-body {
      transition-delay: calc(var(--d) * 1.2s);
  }

  
}


/*

  /offerta

  ---
  Style Common P Body
  Styles No Slider
  Styles Custom Nav
  Style Button
  Style Time Card Heading
  ---

*/
body.offerta {

  /* Style Common P Body */
  .module-text--common-paragraph-wrapper 
  .common-paragraph-body {
    width: min(100%, 650px);  
  }

  

  /* NB - *$Module-Heading*
  *$Price-Badge* */
  
  /* Card Heading Layout -- Pacchetti 3 fissi qui sotto  */
  .card-package-heading 
  .module-heading {
    display: contents;
  }
  /* */
  .card-package-heading 
  .row-sub-title {
    grid-column: 1/3;
    grid-row: 2/3;  
  }
  .card-package-heading 
  .row-title {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .card-package-heading 
  .price-badge {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .card-package-heading 
  .price-badge 
  .price-badge--text {
    align-items: flex-end;
  }
  .card-package-heading 
  .price-badge.price-badge--layout {
    flex-flow: row wrap;
    justify-content: flex-end;
  }
  /* --- */ 
  /* Card Heading Layout -- Pacchetti TIME è FLEX  */
  .card-time-package-heading 
  .module-heading {
    grid-column: 1/3;
    grid-row: 2/3; 
  } 
   .card-time-package-heading 
  .price-badge {
    grid-column: 1/3;
    grid-row: 1/2; 
    margin-block: 0 var(--spacing-xs);
  }
  /*
  @media (min-width: 991px) {
    .card-time-package-heading 
    .module-heading {
      grid-column: 1/3;
      grid-row: 1/2; 
    } 
    .card-time-package-heading 
    .price-badge {
      grid-column: 1/3;
      grid-row: 2/3; 
      
    }
  }*/

  /* Styles Custom Nav - CardsPackages */
  .custom-nav.cards-packages {
    display: flex;
    /* Allinea su asse principale - Row */
    justify-content: center;
    
    & .custom-nav-btn {
      background-color: transparent;
      padding: 2rem;
    }
  
    & svg path {
      stroke: var(--color-primary-dark);
    }
  }

  /* Styles Custom Nav - CardsTime */
  .custom-nav.cards-time  {
    display: flex;
    /* Allinea su asse principale - Row */
    justify-content: flex-end;
    
    & .custom-nav-btn {
      background-color: transparent;
      padding: 0rem;
    }
  
    & svg path {
      stroke: var(--color-primary-dark);
    }
  }
  
  /* Style Button */
  .common-button-wrapper--frame-package .common-button {
    max-width: 250px;
  }

  /* Style Time Card Heading */ /* Cosi il $Price-Badge si allinea con il titolo */
  @media (min-width: 600px) and (max-width: 766px) {
  .card-time-package-heading {
    display: flex;
    flex-direction: row;    
  }  
}

}

/* Slide List Transition // Package-Time / Slide-List */
/* Slide List Transition // Package-Time / Module-Cards-Time */
body.offerta {
  
  .module-cards-time--card {
  --delay: 1;
  }

  /* Sottolineature sui tre <li> che hanno il nome del pacchetto time */
  /* Stato INATTIVO */
  .swiper-slide-slide-list .slide-list-label::after {
  transform: scaleX(0);
  transform-origin: 100% 0%;
  transition: transform 0.5s ease-in-out;
  }
  /* Stato ATTIVO */
  .swiper-slide-slide-list.active .slide-list-label::after {
   transform: scaleX(1);
  transform-origin: 0% 0%;
  }
}