@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* overwrite main theme */

:root {
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 2rem;

  --color--primary: #1a1a1a;
  --color--primary-30: #0f2fa2;
  --color--secondary: #666;
}

/* Core layout & spacing variables (very important) */
:root {
  --sp0: 0;
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 1.5rem;
  --sp4: 2rem;
  --sp5: 3rem;
  --sp6: 4rem;
  --content-left: 0;
}
/* Page width & containers */
:root {
  --max-width: 1200px;          /* Main content width */
  --content-max-width: 800px;  /* Text content width */
  --site-padding: 1.5rem;      /* Horizontal padding */
}
/* Typography (fonts, sizes, rhythm) */
:root {
  --font-sans: "Inter", sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: var(--font-sans);

  --font-size-base: 1rem;
  --line-height-base: 1.6;

  --heading-line-height: 1.25;
}

:root {
  --color--primary: #1a1a1a;
  --color--secondary: #555;

  --color--link: #0046ff;
  --color--link-hover: #002a99;

  --color--background: #ffffff;
  --color--background-alt: #f6f6f6;

  --color--border: #ddd;
  --color--border-light: #eee;

  --color--text: #00002e;
  --color--text-muted: #666;

    --color-text-neutral-soft: var(--color--gray-45);
    --color-text-neutral-medium: var(--vi-surface-brand);
    --color-text-neutral-loud: var(--color--text);
    --color-text-primary-medium: var(--color--link);
    --color-text-primary-loud: var(--color--primary-30);
}
/* Header & navigation */
:root {
  --header-height: 4rem;
  --header-background-color: var(--color--background);
  --header-text-color: var(--color--text);
}
/* Buttons */
:root {
  --button-bg-color: var(--color--primary);
  --button-text-color: #fff;
  --button-border-radius: 0.25rem;

  --button-padding-y: 0.6rem;
  --button-padding-x: 1.2rem;
}
/* Forms */
:root {
  --form-element-border-color: var(--color--border);
  --form-element-border-radius: 0.25rem;
  --form-element-padding: 0.6rem;

  --focus-outline-color: #0055cc;
  --focus-outline-width: 2px;
}
/* Cards / blocks / containers */
:root {
  --card-background-color: var(--color--background);
  --card-border-radius: 0.5rem;
  --card-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/*Messages (status / warning / error)*/
:root {
  --color--success: #2e8540;
  --color--warning: #f0ad4e;
  --color--error: #d9534f;
  --color--info: #31708f;
}
/* Dark mode (optional but supported) */
@media (prefers-color-scheme: dark) {
  :root {
    --color--background: #121212;
    --color--text: #eee;
    --color--link: #6ea8ff;
  }
}



/* styles begin */
:root {
  
  --vi-gray-dark: #344154;
  --vi-max-ch:80ch;
  --vi-c-text: var(--color--text); 
  --vi-c-secondary: #15ADE1;
  --vi-c-secondary-10:#E0F0F6;
  --vi-surface-brand: #00002e;
  --vi-c-orange: rgb(203, 86, 14);
  --vi-c-secondary-dark: #0f2fa2;

  --vi-transition: all 0.4s ease-in-out;

  --vi-sh-1: 0 0 0.5px 0.5px rgba(24, 39, 75, .08), 0 6px 12px 0 rgba(24, 39, 75, .08);
  --vi-sh-2: : 0 0 0.5px 0.5px rgba(24, 39, 75, .08), 0 10px 22px 0 rgba(24, 39, 75, .1);
  --vi-sh-3: 0 0 0.5px 0.5px rgba(24, 39, 75, .08), 0 12px 32px 0 rgba(24, 39, 75, .12);
  --vi-sh-4: 0 0 0.5px 0.5px rgba(24, 39, 75, .08), 0 14px 42px 0 rgba(24, 39, 75, .12);
  --vi-sh-5: 0 0 0.5px 0.5px rgba(24, 39, 75, .08), 0 18px 52px 0 rgba(24, 39, 75, .14);

  --color--primary-50: var(--vi-c-secondary);

  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
  --grid-col-count: 6;
  --grid-gap: var(--sp);
  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */

  @media (min-width: 43.75rem) {
    --grid-col-count: 14;
    --grid-gap: var(--sp2);
  }
  @media (min-width: 62.5rem) {
    --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
  }
  @media (min-width: 75rem) {
    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
  }
  @media (min-width: 90rem) {
    --grid-full-width: calc(var(--max-width) - var(--sp4));
  }
}
/*type*/
:root {
  --vi-ff-d: Inter, arial, sans-serif;
  --ff-d: var(--vi-ff-d);

  --vi-f-2xs: 0.75rem / 0.875rem Inter, arial, sans-serif;
  --vi-f-xs: 0.875rem / 1.25rem Inter, arial, sans-serif;
  --vi-f-s: 1rem / 1.5rem Inter, arial, sans-serif;
  --vi-f-m: 1.125rem / 1.75rem Inter, arial, sans-serif;
  --vi-f-l: 1.25rem / 1.75rem Inter, arial, sans-serif;
  --vi-f-xl: 1.375rem / 2rem Inter, arial, sans-serif;
  --vi-f-2xl: 1.5rem / 2.25rem Inter, arial, sans-serif;
  --vi-f-3xl: 1.75rem / 2.25rem Inter, arial, sans-serif;
  --vi-f-4xl: 2rem / 2.75rem Inter, arial, sans-serif;
  --vi-f-5xl: 2.25rem / 3rem Inter, arial, sans-serif;
  --vi-f-6xl: 2.5rem / 3rem Inter, arial, sans-serif;
  --vi-f-7xl: 3.25rem / 3.75rem Inter, arial, sans-serif;
  --vi-f-8xl: 3.75rem / 4.25rem Inter, arial, sans-serif;
  --vi-f-9xl: 4.5rem / 4.875rem Inter, arial, sans-serif;
  --vi-f-10xl: 6rem / 6rem Inter, arial, sans-serif;

  --vi-fs-2xs: 0.75rem;
  --vi-fs-xs: 0.875rem;
  --vi-fs-s: 1rem;
  --vi-fs-m: 1.125rem;
  --vi-fs-l: 1.25rem;
  --vi-fs-xl: 1.375rem;
  --vi-fs-2xl: 1.5rem;
  --vi-fs-3xl: 1.75rem;
  --vi-fs-4xl: 2rem;
  --vi-fs-5xl: 2.25rem;
  --vi-fs-6xl: 2.5rem;
  --vi-fs-7xl: 3.25rem;
  --vi-fs-8xl: 3.75rem;
  --vi-fs-9xl: 4.5rem;
  --vi-fs-10xl: 6rem;

  --vi-lh-3xs: 0.875rem;
  --vi-lh-2xs: 1rem;
  --vi-lh-xs: 1.25rem;
  --vi-lh-s: 1.5rem;
  --vi-lh-m: 1.75rem;
  --vi-lh-l: 2rem;
  --vi-lh-xl: 2.25rem;
  --vi-lh-2xl: 2.5rem;
  --vi-lh-3xl: 2.75rem;
  --vi-lh-4xl: 3rem;
  --vi-lh-5xl: 3.25rem;
  --vi-lh-6xl: 3.5rem;
  --vi-lh-7xl: 3.75rem;
  --vi-lh-8xl: 4.25rem;
  --vi-lh-9xl: 4.875rem;
  --vi-lh-10xl: 6rem;
}

/* helper */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-1 {margin-top: 1rem !important;}
.mb-1 {margin-bottom: 1rem !important;}
.mv-1 {margin-top: 1rem !important;margin-bottom: 1rem !important;}
.mt-2 {margin-top: 2rem !important;}
.mb-2 {margin-bottom: 2em !important;}
.mv-2 {margin-top: 2rem !important;margin-bottom: 2rem !important;}
.mt-3 {margin-top: 3rem !important;}
.mb-3 {margin-bottom: 3rem !important;}
.mv-3 {margin-top: 3rem;margin-bottom: 3em !important;}

html {
  font:var(--ff-d);
  font-weight: 400;
  line-height: auto;
}
body {
  background-image: none;
  color:var(--vi-surface-brand);;
  background-color: #fff;
  background-image: none;;
  font-family: var(--ff-d);
  hyphens: none;
}

/* type */
.vi-type-display,
.vi-heading-1, #vi h1,
.vi-heading-2, #vi h2,
.vi-heading-3, #vi h3,
.vi-heading-4, #vi h4,
.vi-heading-5, #vi h5,
.vi-heading-6, #vi h6,
.vi-paragraph-2xl,
.vi-type-paragraph-xl {
  color: var(--vi-surface-brand);
    ont-family: var(--vi-ff-d);
    font-weight: 300;
}

.vi-type-display {
    font-size: var(--vi-fs-6xl)!important;
    line-height: var(--vi-lh-3xl)!important;
    @media (min-width: 480px) {
      font-size:var(--vi-fs-7xl)!important;
      line-height: var(--vi-lh-7xl)!important
    } 
    @media (min-width: 768px) {
      font-size:var(--vi-fs-9xl)!important;
      line-height: var(--vi-lh-9xl)!important
    }
    @media (min-width: 1140px) {
      font-size:var(--vi-fs-10xl)!important;
      letter-spacing: 2px!important;
      line-height: var(--vi-lh-10xl)!important
    }
}

.vi-heading-1, #vi h1 {
    font-size: var(--vi-fs-4xl)!important;
    line-height: var(--vi-lh-xl)!important;
    @media (min-width: 480px) {
        font-size:var(--vi-fs-6xl)!important;
        line-height: var(--vi-lh-3xl)!important
    }
    @media (min-width: 768px) {
        font-size:var(--vi-fs-7xl)!important;
        line-height: var(--vi-lh-6xl)!important
    }
    @media (min-width: 1140px) {
        font-size:var(--vi-fs-8xl)!important;
        line-height: var(--vi-lh-7xl)!important
    }
}

.vi-heading-2, #vi h2 {
    font-size: var(--vi-fs-2xl)!important;
    line-height: var(--vi-lh-l)!important;
    @media (min-width: 480px) {
        font-size:var(--vi-fs-4xl)!important;
        line-height: var(--vi-lh-xl)!important
    }
    @media (min-width: 768px) {
        font-size:var(--vi-fs-5xl)!important;
        line-height: var(--vi-lh-3xl)!important
    }
    @media (min-width: 1140px) {
        font-size:var(--vi-fs-6xl)!important;
        line-height: var(--vi-lh-4xl)!important
    }
}

.vi-heading-3, #vi h3 {
    font-size: var(--vi-fs-m)!important;
    line-height: var(--vi-lh-m)!important;
    @media (min-width: 480px) {
        font-size:var(--vi-fs-2xl)!important;
        line-height: var(--vi-lh-l)!important
    }
    @media (min-width: 768px) {
        font-size:var(--vi-fs-3xl)!important;
        line-height: var(--vi-lh-xl)!important
    }
}

.vi-heading-4, #vi h4 {
    font-size: var(--vi-fs-m)!important;
    line-height: var(--vi-lh-m)!important;
    @media (min-width: 768px) {
        font-size:var(--vi-fs-2xl)!important;
        line-height: var(--vi-lh-xl)!important
    }
}

.vi-heading-5, #vi h5 {
    font-size: var(--vi-fs-m)!important;
    line-height: var(--vi-lh-s) !important;
    @media (min-width: 768px) {
        font-size:var(--vi-fs-xl)!important;
        line-height: var(--vi-lh-m)!important
    }
}

.vi-heading-6, #vi h6 {
    font-size: var(--vi-fs-s)!important;
    line-height: var(--vi-lh-s) !important;
    @media (min-width: 768px) {
        font-size:var(--vi-fs-m)!important;
        line-height: var(--vi-lh-m)!important
    }
}

.vi-paragraph-2xl {
    font-size: var(--vi-fs-l)!important;
    line-height: var(--vi-lh-m)!important;
    max-width: var(--vi-max-ch);
    @media (min-width: 480px) {
        font-size:var(--vi-fs-xl)!important;
        line-height: var(--vi-lh-l)!important
    }
    @media (min-width: 1140px) {
        font-size:var(--vi-fs-2xl)!important;
        line-height: var(--vi-lh-xl)!important
    }
}

.vi-paragraph-xl {
    font-size: var(--vi-fs-xl)!important;
    line-height: var(--vi-lh-l)!important
}


p, h1, h2, h3, h4, h5, h6, li {
  max-width: var(--vi-max-ch);
}
a {
  color: var(--color--link);
  &:hover {
    color: var(--color--link-hover);
  }

  &:focus {
    outline: solid 2px currentColor;
    outline-offset: 2px;
  }
}
.node__title a, #vi h2 a {
  text-decoration: none;
  &:hover {
    color: var(--color--link-hover);
    text-decoration: underline;
  } 
} 

#vi body , #vi body .text-content  {
  font-size: var(--vi-fs-m);
  line-height: var(--vi-lh-m);
}
/* header */
body:not(.is-always-mobile-nav) .header-nav {
  @media (min-width: 75rem) {
    justify-content:flex-start
  }
}

.site-header {
  @media (min-width: 75rem) {
    min-height: 0;
    border-block-end: none;
  }
}
.site-header__inner__container {
  anchor-name: --header-inner;
  align-items: center;
  position: relative;
}
.vi-menu {
  border-top: 1px solid var(--vi-surface-brand);
  @media (width > 1200px) {
      border-bottom: 1px solid var(--vi-surface-brand);
  } 
  & .mobile-buttons {
    height: 0;
    margin: 0;
    & .mobile-nav-button {
      &:focus { outline: none;}
      &:focus-visible { outline: solid 2px var(--color--primary-40);}
  

      position: absolute; 
      position-anchor: --header-inner; 
      top: calc(anchor(top) + 3rem);
      right: anchor(right);


      & .mobile-nav-button__label {
        font-size: var(--vi-fs-xs);
        font-weight: 400;
        display: none;
      }
      & .mobile-nav-button__icon {
        width:1.5rem;
        &::before {
          transform: translateY(-10px);
        }    
        &::after {
          transform: translateY(6px);
        }
      }
    }
    & .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
      &::before {
          transform: translateY(-0.1875rem) rotate(-45deg);
      }
      &::after {
        transform: translateY(-0.1875rem) rotate(45deg);
      }
    }
  }
}

body:not(.is-always-mobile-nav) {
  @media (min-width: 75rem) {
    & ul.menu primary-nav__menu {
      & > li.primary-nav__menu-item {
        &:not(:last-child) {
          padding-right: 1rem;
        }
      }
    }

    & ul.primary-nav__menu--level-2 {
      width: 15.625rem;
      overflow: unset;
      & > li > a {
        &:after {
          display: none;
        }
        &:hover { 
          background-color: var(--vi-c-secondary-10);
        }
      }
    }

  }
}      

.vi-logo {
  height: 100px;
  display: block;
  background-image: url(../images/viladrau-logo-color.svg);
  background-repeat: no-repeat;
  background-size: 230px;
  overflow: hidden; 
  width: 70px;
  
  @media (min-width: 768px) {
    width: 250px;
  }
}

.site-header__initial { display:none; }

.primary-nav__menu-link {
  color: var(--vi-c-text);
  font-weight: 400;
  &:hover {
    color: inherit;
  }
  &:focus {
    outline: auto 2px var(--color--primary-50);
    outline-offset: 2px;
  }
}
.primary-nav__menu-link--nolink {
  color: var(--vi-c-text);
}
body:not(.is-always-mobile-nav) .header-nav {
  @media (min-width: 978px) {
      visibility: visible;
  }
}

body:not(.is-always-mobile-nav) {
  @media (min-width: 75rem) {
    & .primary-nav__menu-link {
      letter-spacing: 0.02em;
      font-size: 1rem;
      line-height: var(--sp1-5);
      position: relative;
      &:after {
        content: "";
        width: 100%;
        bottom: -5px;
        position: absolute;
        height: 8px;
        background-color: transparent;
      }
      &:hover {
        &:after {
          background-color: var(--vi-c-secondary);
        }
      }
    }
  }
}

.site-header__inner__container {
}
.block-search-wide__wrapper {
  & .block-search-wide__container {
    padding:0;
    & .block-search-wide__grid {
      display: block;
      & form {
        margin: 0;
        padding: 0;
      }
    }
  }
  & input[type="search"] {
    width: 450px;
    height: 130px;
    padding: 1rem;
  }
  & .search-form__submit {
    & .icon--search {
      display: block;
      margin: 0 auto;
      position: relative;
      width: 2rem;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}

#vi-search-top {
  @media (width < 1200px) {
    display: none;
    &.vi-selected {
      display: block;
      position: absolute;
      top: 6.2rem;
      background: #fff;
      width: 100vw;
      left: calc((100vw - 100%) / (-2));;
      padding: .5rem 2rem;
      box-shadow: var(--vi-sh-3);
      & form {
        text-align: center;
        & .js-form-item {
          width: calc(80% - 80px);
          & input {
            width: 100%;
          }
        }
      }
    }
  }
}

button.vi-search-toggle {
  @media (width < 1200px) {
    display: block;
    margin: 0 auto;
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%2315ADE1' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 2.5rem;
    right: 4rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
}
/* footer */
[class^="vi-footer-bg"] {
  --vi-footer-bg-height:480px;
  --vi-footer-bg-width:2880px;
  width: 100%;
  height: var(--vi-footer-bg-height);
  position: relative;
  &:before, &:after  {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--vi-footer-bg-height);
      background-position: center top;
    background-repeat: repeat-x;
    background-size: var(--vi-footer-bg-width);
    left: 0;
    top: 0;
  }
  &:before {
    background-image: url(../images/viladrau-map-illu.svg);
    z-index: 2;
  }
  &:after {
    background-image: url(../images/viladrau-map-ibg-01.svg);  
  }
}

#vi .site-footer {
  position: relative; /* stack above left social bar */
  color: #fff;
  border-top:1px solid #fff;
  background: var(--vi-gray-dark);
  font: var(--vi-f-s);
  & .menu {
    margin-inline-start: 0;
    list-style: none;
    display: flex;
    gap:1rem;
    & ul {
      margin-inline-start: var(--sp);
    }
    & li {
      margin-block-end: var(--sp0-5);
    }
  }
  & a {
    color: inherit;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  & .vi-footer-top {
    margin:1rem 0;
    --bs-columns: 2;
    & > div {
      grid-column: auto/span 1;
    }
    & > div:nth-child(2) {
      /* direccion */
      padding: 3rem 0 2rem 0;
    }
    @media ( width > 992px) {
      --bs-columns: 8;
      & > div {
        grid-column: auto/span 2;
      }
      & > div:nth-child(2) {
        /* direccion */
        grid-column: auto/span 2;
        padding: 3rem 0 1rem 0;
      }
      & > div:nth-child(3) {
        grid-column: auto/span 3
      }
      & > div:nth-child(4) {
        grid-column: auto/span 1
      }
    }
  }
  & .vi-footer-bottom {
    border-top: 1px solid #fff;
    padding:1rem 0;
    & .menu {
      justify-content: space-between;
      margin: 0 3rem;
    }
  }
  /* text block */
  & .text-content, & .cke_editable  {
    font: var(--vi-f-s);
    @media (min-width: 43.75rem) {
      font: var(--vi-f-s);
    }
  }
}

.container {
  margin: 0 auto;
  max-width: 1600px;
  padding-inline: 1rem;
}

.main-content {
  @media (min-width: 75rem) {
    margin-inline-end: auto;
    width: 100%;
  }
}

/* block highlight municipal notice */
.vi-highlight-notice {
  border:5px solid var(--vi-c-secondary);
  padding: 1rem;
}

.viladrau-carousel {
  --vi-carousel-home-height: 420px;
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw);
  margin-bottom: 4rem;

  & .splide__arrow {
    background: rgba(255,255,255,.4);
    border: 1px solid black;
    width: 3rem;
    height: 3rem;
  }
  & .splide__arrow--prev {
  }
  & .splide__pagination {
    bottom: -1.2rem;
    & .splide__pagination__page {
      border: 1px solid #ccc;
      opacity: 1;
    }
  }
  & .viladrau-carousel__toggle {
    position: absolute;
    bottom: -2.5rem;
    left: 2rem;
    background-color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--vi-surface-brand);
    font-size: 0;
    transition: var(--vi-transition);
    &:before {
      position: absolute;
      top: .25rem;
      left: .5rem;
      font-size: 1.2rem;
      color:var(--vi-c-secondary)
    }
    &[aria-pressed="false"]:before {
      content: "▶"; /* play */
    }
    &[aria-pressed="true"]:before {
      content: "⏸"; /* pause */
      top: .2rem;
    }
    &:hover {
      background-color: var(--vi-c-secondary-10);
      cursor:pointer
    }
  }
  & .splide__track {
    overflow: hidden;
  }
  & .splide__slide {
    min-width: 100%; 

    & .field--type-image {
      min-width: 100%;
      overflow: hidden;

      @media (width < 1140px) {
        height: var(--vi-carousel-home-height);
      }
        
      @media (min-width: 768px) {
      }

      & img, & picture {
        width: 100%;
        height: 100%;
        display: block;
      }
      & img {
        object-fit: cover;
      }
    }
  }

  & .splide__slide {
    & .paragraph--type--slide {
        & .field--name-field-title {
      } 
    }
  }
}


.vi-slide {
  position:relative;
  &::before {
    @media (width > 1140px) {
      content: "";
      width: 50%;
      height: 100%;
      display: block;
      background: rgba(255, 253, 253, 0.40);
      position: absolute;
    }
  }
  & .vi-slide__image {
  }

  & .vi-slide__content {
    z-index: 2;
    width: 100%;
    background-color: var(--vi-c-secondary-10); 
    padding: 2rem;

    @media (width > 1140px) {
      padding:0;
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      left: 10%;
      max-width: 40%;
      background-color: transparent;
    }
    & .vi-slide__title {
      margin-top: 0;
    }
    & .vi-slide__text {}

  }
}

#vi .node__content .layout:not(:first-child) {
  margin: 2rem 0 4rem 0;
}
.vi-band,
#home .block-views-blockagenda-block-1 {
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw);
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}


#home .block-views-blockagenda-block-1 > div {
  margin: 1rem auto;
  @media (min-width: 576px) {
      max-width: 540px;
  }
  @media (min-width: 768px) {
      max-width: 720px;
  }
  @media (min-width: 992px) {
      max-width: 960px;
  }
  @media (min-width: 1200px) {
      max-width: 1140px;
  }
  @media (min-width: 1400px) {
      max-width: 1320px;
  }
}
#home .block-views-blockagenda-block-1 {
  background-color: rgb(236,236,236); 
  position: relative
}


.vi-band.vi-quick-link-container:before,
#home .block-views-blockagenda-block-1:before  {
    content: "";
    position: absolute;
    width: 500px;
    height: 100%;
    opacity: .3;
    overflow: hidden;
    top: 0;
    background-image: url(/themes/custom/viladrau/images/vi-font-deco-01.svg);
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: center;
}
#home .block-views-blockagenda-block-1:before {
  background-image: url(/themes/custom/viladrau/images/vi-font-deco-02.svg);
  width: 700px;
  background-size: 700px;
  opacity: .2;
  background-position-x: -200px;
}

.vi-band.vi-quick-link-container > div {
  position: relative;
  z-index:2;
}
/*a un click block*/
.vi-quick-link-container {
  background-color: var(--vi-c-secondary-10);
  & ul.vi-quick-link-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    list-style-type: none;
    margin: 0;
    padding:0;
    & li.vi-quick-link-list__item {   
      & .vi-quick-link-item {
        max-width: 200px;
        margin:0 auto;
        text-align: center;
        & a {
          text-decoration: none;
          color: var(--vi-surface-brand);
          display: block;
          & img {
            transition: var(--vi-transition);
          }
          &:hover {
            text-decoration: underline;
            & img { 
              transform: scale(1.2);
            }
          }
          & img {
            max-width: 140px;
            margin:0 auto;
          }
          & quick-link-item__icon {}
          & .quick-link-item__label {}
        } 
      }
    } 
  }
} 
/* home */
#home{ 
  & #content.grid-full {
    max-width: none;
    padding: 0;
    width: 100%;
    display: block;
  }
  & #block-viladrau-page-title {
    display: none;
  }
  & #main .main-content__container {
    padding-block-start: 0;
    @media (min-width: 43.75rem) {
      padding-block-start: 0;
    }
  }
}
/* news agenda projects block */

.vi-block-list {
  --vi-block-color: var(--vi-c-secondary);
  --vi-block-p: 1.5rem;
  & .vi-card {
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: var(--vi-sh-1);
    border-radius: 4px;
  }
  & .vi-card-news {--vi-block-color: var(--vi-c-secondary);}
  & a.vi-card-agenda {
    --vi-block-color: var(--vi-c-orange);
    border-radius: 4px; 
    & .vi-card__title {
      font-size: var(--vi-fs-xl);
    }
    & .vi-card__arrow {
      background-image: url(../images/vi-arrow-orange.svg);
    }
    &:hover .vi-card__arrow { 
      background-image: url(../images/vi-arrow-orange-hover.svg);
      transform: translateX(4px);
    }
  } 
  &.vi-hub-index {
      & ul {
        @media (min-width: 1200px) {
          grid-template-columns: repeat(2, 1fr);
        }
      }
  }
  & ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);

    @media (min-width: 576px) {}
    @media (min-width: 768px) {}
    @media (min-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 1200px) {
        grid-template-columns: repeat(4, 1fr);
    }
    @media (min-width: 1400px) {}
    gap: 2rem;
    list-style-type: none;
    margin: 0;
    padding:0;
    & li {
      & > div {background-color: #fff;}
      & .views-field, & .field-content {
        display: block;
        height: 100%;;
      } 
      &, & * {
        transition: var(--vi-transition);
      }
      & a:hover {  
        color:#fff; 
        background-color: var(--vi-block-color);
        img {
          transform: scale(1.2);
        }
        .vi-card__arrow {
          background-image: url(../images/vi-arrow-hover.svg);
          transform: translateX(4px);
        }
      }
      & a {
        display: block;
        padding-bottom: 2rem;
        text-decoration: none;
        color: var(--vi-surface-brand);
        font: var(--vi-f-m);
        height: 100%;
        border-bottom: 4px solid var(--vi-block-color);
        position:relative;
        & .vi-card__image {
          display: block;
          anchor-name: --news-image;
          aspect-ratio: 16 / 9;
          object-fit: cover;
          overflow: hidden;
          & img {
            width: 100%;
          }
        }
        & .vi-card__category {
          background-color: var(--vi-block-color);
          color:#fff;   
          text-transform: uppercase;
          display: inline-block;
          position: absolute;
          position-anchor: --news-image;
          bottom: anchor(bottom);     
        }
        & .vi-card__date {
          display: block;
        }
        & .vi-card__category, & .vi-card__date {
          font-size: var(--vi-fs-s);
        }
        & .vi-card__category, & .vi-card__date, & .vi-card__title, & .vi-card__descripition {
          display: block;
          padding: calc(var(--vi-block-p) / 2) var(--vi-block-p) calc(var(--vi-block-p) / 2) var(--vi-block-p) ;
        }
        & .vi-card__title h3 {
          margin: 0;
        }
      }
    }
  }
}

.vi-card__arrow {
  position: absolute;
  width: 40px;
  height: 30px;
  background-image: url(../images/vi-arrow.svg);
  background-repeat: no-repeat;
  display: block;
  right: 1rem;
  bottom: 1rem;
}

.view-agenda .vi-block-list {
  & ul {
    @media (min-width: 576px) {}
    @media (min-width: 768px) {}
    @media (min-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 1200px) {
        grid-template-columns: repeat(3, 1fr);
    }
  }    
}

.index-section {
  margin:2rem 0
}
.field--name-field-index-sections > .field__label  {display:none}


.block__content{
  position: relative;
}



.splide.vi-block-list {
  & ul {
    display: flex;
    gap: 0;
    & li {
      padding:1rem;
    }
  }
  & .splide__arrow {
    background: transparent;
    border: 1px solid black;
    width: 3rem;
    height: 3rem;
    bottom: -7rem;
    top: unset;
  }
  & .splide__arrow--prev {
    right: 5rem;
    left: unset;
  }
  @media (width < 992px) {
    width: 752px;
  }
  @media (width < 768px) {
    width: 540px;
  }
}



.vi-block-projectes, .vi-block-home  {
  margin-left: -1rem;
  margin-right: -1rem;
  height: 100%;
  padding-bottom: 6em;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid black;
    bottom: 5rem;
  }
}



#home .view-header {
  position: absolute;
  right: 0;
  top:-3rem;
  & a {
    position: relative;
    text-decoration: none;
    &:after {}
    &:hover {text-decoration: underline;}
  }
}

/* category pages */

.path-noticies, .path-agenda, .path-projectes { 
  & .vi-block-list {
    & ul {
        
        @media (min-width: 768px) {
          grid-template-columns: repeat(1, 1fr);
        }
        @media (min-width: 992px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (min-width: 1200px) {
            grid-template-columns: repeat(2, 1fr);
        }
      & .vi-card_date, & .vi-card_title  {
        padding:1rem;
      }
      & a {
        font: var(--vi-f-xl);
        padding-bottom: 1rem;
        & .vi-card_date {
          font: var(--vi-f-s);
        }
      }
    }
  }
  & .main-content .grid-full {
    display: block;
  } 
}
.path-projectes { 
  & .vi-block-list ul {
    @media (min-width: 1200px) {
        grid-template-columns: repeat(3, 1fr);
    }
  }
}

.vi-block-grid {
  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:1.5rem;
    @media (width > 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    & li {
      padding:1.5rem;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: var(--vi-sh-1);
      box-sizing: border-box;
      height: 100%;
      overflow: hidden;
      position: relative;
      border-top: 2px solid var(--vi-c-secondary);
      & .vi-contact-title{
        display: block;
        margin-bottom: 1.5rem;
        a {
          text-decoration: none;
          font-size: var(--vi-fs-l);
          &:hover {
            text-decoration: underline;
          }
        }
      }
      & .vi-contact-body {
        display: grid;
        grid-template-columns: repeat(1, 1fr);

        @media (width > 1400px) {
          & {
            grid-template-columns: repeat(2, 1fr);
            gap:1.5rem;
          }
          & > div:only-child {
            grid-column: 1 / -1;
          }
        }

        & > div > div {
          display: flex;
          gap: .5rem;
          & > span > span {
            display: block;
          }
        }
      }
    }
  }
}

.vi-info {
  & > div {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
  } 
  & .vi-info-contact > span:last-child > span{
    display: block;
  }
}

.vi_date {
  font-size: var(--vi-fs-s);
}

/* form elements */
:root {
  --vi-form-item-height:2.75rem;
}
#vi :where(input, label, select) {
  min-height: var(--vi-form-item-height);
  font-family: var(--vi-ff-d);
  font-size: var(--vi-fs-s);
  line-height: var(--vi-lh-s);
}
input:not([types="submit"]) {
  border-radius: 2px;
}
input[type="submit"],
.button  {
	appearance: none;
  background: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
	font: var(--vi-f-s);
  margin: 0;
  min-width: var(--vi-form-item-height);
  text-decoration: none;
 	border:2px solid transparent;
 	padding: calc(.75rem - 2px) calc(1rem - 2px);
	display: inline-flex;
	align-items: center;
	gap: 1rem;
  height: auto;
  font-weight: 500;
	@media (min-width: 768px) {
		font-size: var(--vi-fs-m);
		line-height: var(--vi-lh-m);
	}
  &:hover,
  &:focus {
    font-weight: inherit;
    background-color: var(--vi-c-secondary-dark);
  }
}
.button--primary, .button.button--primary {
  background-color: var(--vi-c-secondary);
  border: 0 solid transparent;
  color: #fff;
  min-width: var(--vi-form-item-height);
}
#vi select {
  min-height: var(--vi-form-item-height);
  padding-right: 3rem;
  font-size: var(--vi-fs-s);
}
.views-exposed-form {
  display: flex;
  gap: 1rem;
  align-items: end;
  & label.form-item__label {
    padding-bottom: .5rem;
  }
  & select {
    min-width: 300px;
  }
}
/* end form elements */

/* breadcrumb */

#vi .breadcrumb {
  font:var(--vi-f-xs);
  & .breadcrumb__content {
    overflow: clip;
    & ol {
      display: flex;
      white-space: normal;
      overflow: unset;
      max-width: 100%;
      flex-direction: row;
      & li.breadcrumb__item  {
        & a.breadcrumb__link {
          color: var(--vi-surface-brand);
          text-decoration: underline;
        }
        &:nth-child(n + 2) {
          padding-left:2rem;
          position: relative;
          &::before {
            margin-inline: 0;
            position: absolute;
            left: .6rem;
            top: .3rem;
            border-color: var(--vi-surface-brand);;
          }
        }
      }
    }
  }
}
/* end breadcrumb */