.view-car-types-list .view-header {
  .field--name-body {
    width: clamp(320px, 66%, 800px);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--margin-m);
  }
}


/* Hero Layout for Car Types List Page */

/* Break out of the container for the header */
.view-car-types-list .view-header {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 2rem;
  padding: 0;
}

/* Hero Image Styling */
.view-car-types-list .view-header .field--name-field-block-cover-image {
  position: relative;
  width: 100%;
  height: 70dvh; /* Hero height */
  overflow: hidden;
}

.view-car-types-list .view-header .field--name-field-block-cover-image img, .view-car-types-list .view-header .field--name-field-block-cover-image picture, .view-car-types-list .view-header .field--name-field-block-cover-image figure {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  
}

/* Page Title Styling (Overlay) */
.view-car-types-list .view-title-hero {
  position: absolute;
  top: 30%; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  text-shadow: 0 2px 6px var(--c-black-transparent-1);
  z-index: 22;
  margin: 0;
  text-align: center;
  width: fit-content;
;
  padding: var(--margin-m) var(--margin-l);
  background: var(--blue-base);
  border-radius: var(--br-s);
  font-size: var(--fc-h1plus);
  font-weight: bold;

}

@media all and (width <= 768px) {

  /* Hero Image Styling */
.view-car-types-list .view-header .field--name-field-block-cover-image {
  position: relative;
  width: 100%;
  height: 50dvh; /* Hero height */
  overflow: hidden;
}

  .view-car-types-list .view-title-hero {
    font-size: var(--fc-h1plus);
    top: 10%;

  }
}


/* hoempage block car types list styles */

.block-views-blockcar-types-list-block-1 > h2 {
    text-align: center;
    font-size: var(--fc-h2);
    font-weight: var(--fw-bold);
    color: var(--blue-base);
    margin-bottom: var(--margin-l);
}




/*  List Grid Layout */

/* ******************************* */
/*  VIEW CAR GROUPS */
/* these views are used in the default page view and in the block */

.view-car-groups-catalog {
    overflow: hidden;
    width: 100%;
}

.main-content .view-car-groups-catalog {
    border-bottom: 1px solid var(--grey-base);
}

.main-content .view-car-groups-catalog > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--margin-m);

    padding-bottom: var(--margin-m);
    

    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    &::-webkit-scrollbar {
      height: 12px;
    }

    &::-webkit-scrollbar-thumb {

      background-color: var(--grey-dark-2);
      border-radius: var(--br-s);
    }

}

.main-content .view-car-groups-catalog > ul > li {
    background: linear-gradient(180deg, var(--white-original) 70%, var(--white) 100%);
    border: 1px solid var(--grey-light-1);
    border-radius: var(--br-m);
    padding: 0;

    flex: 0 0 25%;
    width: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--margin-xxs);

    &::before {
        content: none;
        background-image: none;
        display: none;
    }
}

@media all and (width <= 768px) {
    .main-content .view-car-groups-catalog > ul > li {
        flex: 0 0 70%;

    }
}

.view-car-groups-catalog .views-field-field-image {

  img, picture, figure {
      width: 100%;
      height: 100%;
      object-fit: contain;
      aspect-ratio: 4 / 3;
  }
}

.view-car-groups-catalog .views-field-title {
    font-family: var(--ff-sans2);
    font-size: var(--fc-h3);
    color: var(--white);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    background-color: var(--blue-base);
    padding: var(--margin-xxs) var(--margin-m);
    border-radius: var(--br-s) var(--br-s) var(--br-s) 0;
    width: fit-content;

    position: absolute;
    top: 0;
    left: 0;

    .car-group-prefix {
        font-size: var(--fc-small);
        font-weight: var(--fw-semibold);
        color: var(--grey-base);
        margin-right: var(--margin-xs);
    }
}

.view-car-groups-catalog .views-field-field-subtitle {
    font-family: var(--ff-sans2);
    font-size: var(--fc-h2);
    line-height: 1;
    color: var(--blue-base);
    font-weight: var(--fw-extrabold);
    text-align: center;

    .car-group-subtitle-suffix {
        font-size: var(--fc-small);
        font-weight: var(--fw-semibold);
        color: var(--blue-base);
        margin-left: var(--margin-xs);
        display: block;
    }
}

.views-field-field-car-category {
    font-size: var(--fc-small);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--grey-dark-2);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    text-align: center;

}

.views-field-field-editorial-description {
    font-size: var(--fc-small);
    color: var(--grey-dark-2);
    padding: var(--margin-s) var(--margin-m);
    text-align: center;
    flex-grow: 1;
}

.view-car-groups-catalog .views-field-fieldset-1 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--margin-m);
  padding: var(--margin-m);
  margin-top: var(--margin-s);

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--margin-xxs);
    border: 0;

    li {
      margin: 0;
      padding: 0;
      border: 0;
    }
  }

  .fieldset-01 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--margin-s);
  }
}

.view-car-groups-catalog .views-field-fieldset-1 .fieldset-01 > .views-field {
  background-color: var(--grey-light-3);
  border: 1px solid var(--grey-light-2);
  color: var(--grey-dark-2);
  padding: var(--margin-xs) var(--margin-m);

  border-radius: var(--br-s);
  font-family: var(--ff-sans1);
  font-size: var(--fc-small);
  font-weight: var(--fw-semibold);  
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--margin-xs);
  white-space: nowrap;
  width: fit-content;

  &::before {
    content: '';
    display: inline-block;
    width: var(--fs-p);
    height: var(--fs-p);
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: var(--margin-s);
    opacity: 0.6;
  }

}
  
.view-car-groups-catalog .views-field-fieldset-1 .fieldset-01 > .views-field-field-car-power-type::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116.27 109.06"><g id="Layer_1-2" data-name="Layer 1"><g><path d="M26.12,0l17.42,7.94c2.28-5.44,6.67.7,10.3,1.23,1.62-3.54,5.71-5.32,9.33-3.43l35.7,27.45c1.7,1.41,2.13,3.14,1.39,5.24l-21.93,34.44c-1,1.27-2.01,1.86-3.68,1.36l-26.84-18.89-5.32-25.4c.23-3.04,2.4-5.41,3.84-7.96-.04-.54-6.49-3.12-7.09-4.11-.84-1.37.41-2.13.61-3.41l-15.79-7.09H0V0h26.12ZM68.09,32.8l-13.64,10.58c.07,2.61-1.03,8.15.93,9.99,5.03,2.91,9.9,7.72,14.89,10.49,2.62,1.46,5.27,1,7.18-1.33l10.5-16.35-18.2-12.78c-.51-.27-1.03-.7-1.65-.6Z"/><path d="M97.09,49.87c-.23-.29,2.43-4.46,2.86-4.95.15-.18,0-.43.52-.37,2.95,1.41,5.49,3.81,6.72,6.89l9.09,41.97c-.46,21.86-32.99,20.49-30.61-1.99.68-6.4,5.39-17.81,4.21-23.56-.33-1.6-1.41-2.33-2.18-3.62l3.34-5.16c2.12,1.24,4.06,4.06,4.79,6.37,2.4,7.59-3.29,19.19-4.01,27.1-1.23,13.56,19.43,13.63,17.88-.25l-8.33-38c-.56-2.07-2.29-3.8-4.28-4.43Z"/><path d="M72.5,41.4l2.97,19.31c-1,2.37-3.72,1.82-4.87-.15l-2.59-16-5.45-3.99,3.97-3.1,5.96,3.93Z"/></g></g></svg>');
}

.view-car-groups-catalog .views-field-fieldset-1 .fieldset-01 > .views-field-field-car-seats::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.69 117.44"><g id="Layer_1-2" data-name="Layer 1"><g><path d="M100.69,27.61c-.98,7.76-2.08,15.5-3.31,23.22-2.4,15.08-4.92,30.75-7.92,45.69-.04.18.13.61-.26.46-.14-.05-.12-.42-.26-.64-4.15-6.39-11.75-7.64-17.77-2.89h-.35c-5.13-4.52-5.87-11.82-4.63-18.21.35-1.78.96-3.62,1.54-5.34,3.66-10.78,8.61-21.41,12.36-32.19,1.65-4.43,7.62-10.09,12.54-10.09h8.06Z"/><path d="M0,117.44l4.29-14.28,54.66-.03c6.38-.51,9.58-3.31,14.13-7.05,7.23-5.95,15.96.54,13.94,9.41-.86,3.79-2.72,7.71-3.7,11.51l-.28.44H0Z"/><path d="M6.52,99.87v-4.07c0-2.24,2.18-6.08,3.8-7.61,5.01-4.73,11.41-3.68,17.66-3.17,11.77.97,23.54,2.27,35.32,3.26.62.26.9,1.7,1.26,2.36.99,1.84,2.34,3.61,3.89,4.99.14.7-3.48,2.41-4.16,2.69-1.97.81-3.94,1.28-6.06,1.54H6.52Z"/><path d="M100.69,24.35h-9.51c-11.19,0-8.75-19.39-2.02-23.21,1.95-1.11,6.07-1.9,7.64.03l3.89,23.19Z"/></g></g></svg>');
}

.view-car-groups-catalog .views-field-fieldset-1 .fieldset-01 > .views-field-field-car-transmission::before {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.18 87.01"><g id="Layer_1-2" data-name="Layer 1"><path d="M14.54,64.35c4.26,1.57,7.54,4.69,8.23,9.32,1.78,11.97-13.55,18.21-20.44,8.74-4.82-6.61-1.65-15.51,6-17.82l.03-41.85C2.46,21.05-.8,15.44.17,9.39.6,6.65,3.14,3.22,5.54,1.86c9.29-5.31,19.7,2.88,16.94,13.15-.9,3.34-4.47,7.08-7.94,7.63v16.69h23.31l.26-.26v-16.43c-1.58-.16-3.28-1.3-4.47-2.32-5.31-4.54-5.11-13.02.27-17.46,7.7-6.35,18.75-.79,18.67,9.03-.04,5.18-3.67,9.4-8.44,11v16.17l.26.26h23.91l.26-.26v-16.43c-8.9-2.14-11.42-13.98-4.33-19.78,12.27-10.04,26.57,8.87,14.22,18.06-1.18.88-2.46,1.31-3.67,2.01l-.03,20.44c-.03.7-1.57,2.16-2.14,2.16h-28.47v18.84c3.31,1.18,6.11,3.48,7.54,6.73,3.16,7.14-2.15,15.49-9.86,15.9-10.6.56-16.25-12.65-8.28-19.89,1.42-1.29,2.91-1.88,4.58-2.74v-18.84H14.54v18.84ZM16.66,11.67c0-2.85-2.31-5.17-5.17-5.17s-5.17,2.31-5.17,5.17,2.31,5.17,5.17,5.17,5.17-2.31,5.17-5.17ZM46.33,11.66c0-2.85-2.31-5.17-5.17-5.17s-5.17,2.31-5.17,5.17,2.31,5.17,5.17,5.17,5.17-2.31,5.17-5.17ZM76.8,11.67c0-2.86-2.32-5.18-5.18-5.18s-5.18,2.32-5.18,5.18,2.32,5.18,5.18,5.18,5.18-2.32,5.18-5.18ZM16.64,75.54c0-2.83-2.3-5.13-5.13-5.13s-5.13,2.3-5.13,5.13,2.3,5.13,5.13,5.13,5.13-2.3,5.13-5.13ZM46.3,75.53c0-2.83-2.3-5.13-5.13-5.13s-5.13,2.3-5.13,5.13,2.3,5.13,5.13,5.13,5.13-2.3,5.13-5.13Z"/></g></svg>');
}

.view-car-groups-catalog .views-field-fieldset-1 .fieldset-01 > .views-field-field-car-doors::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.1 86.27"><g id="Layer_1-2" data-name="Layer 1"><path d="M0,31.87C40.49.71,58.3-.93,108.37.26c1.06,9.02.79,21.58.88,30.83l-12.01.67,3.11-26.25c-39.24-.2-56.25.83-88.57,25.02-1.23,2.74-1.41,6.04-2.43,8.92l100.32-4.32c4.61,16.24,4.56,48.3-17.22,51.15,0,0-92.44,0-92.44,0V31.87ZM95.4,47.85c-2.57.55-13.49-1.16-12.14,3.11.25,1.11,1.55,1.39,2.51,1.49,4.64.23,10.01.67,14.59.13,1.83-.42,2.71-2.64,1.33-4.03-1.2-1.22-4.6-.74-6.29-.7Z"/></g></svg>');
}



/* Button styling if there is a link */
.view-car-groups-catalog .views-field-view-node  {
    
    margin-top: auto;
    margin-bottom: var(--margin-m);


    a {
    background-color: var(--accent-5);
    color: var(--blue-dark-1);
    padding: var(--margin-s) var(--margin-m);
    border-radius: var(--br-m);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fc-p);
    text-align: center;
    transition: all 0.3s ease-in-out;
    }

    a:hover {
        background-color: var(--white);
        color: var(--blue-dark-1);
        transform: scale(1.02);
    }

    a::after {
        content: ' →';
        margin-left: var(--margin-xs);
    }
}

.view-car-groups-catalog .views-field-view-node a:hover {
    background-color: var(--white);
}

/* ******************************* */
/*  VIEW CAR GROUPS - HEADER STYLES */

/* Hero Header for Car Groups Page (mimics stations list) */
.view-car-groups-catalog .view-header {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 2rem;
  padding: 0;
}

.view-car-groups-catalog .view-header .field--name-field-block-cover-image {
  position: relative;
  width: 100%;
  height: 50dvh;
  overflow: hidden;
}

.view-car-groups-catalog .view-header .field--name-field-block-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Page Title Styling (Overlay) */
.view-car-groups-catalog .view-title-hero {
  position: absolute;
  top: 20%; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  text-shadow: 0 2px 6px var(--c-black-transparent-1);
  z-index: 22;
  margin: 0;
  text-align: center;
  width: fit-content;
  padding: var(--margin-m) var(--margin-l);
  background: var(--blue-base);
  border-radius: var(--br-s);
  font-size: var(--fc-h1plus);
  font-weight: bold;
}

/* Hide the default page title block on the car types list page */
body.path-flotta #block-filorent01-page-title, 
body.path-fleet #block-filorent01-page-title {
  display: none;
}