/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/* ------------------------------------ *\
  #BOX
\* ------------------------------------ */
/* Blue background elements */
.opd-box {
  --_box-display: var(--box-display, block);
  --_box-gap: var(--box-gap, " ");
  --box-background-v-padding: 2.1875rem;
  --box-background-h-padding: 1.5625rem;
  --box-background-color: #1C4D5E;
  --_box-background-image: var(--box-background-image, " ");
  --box-background-position: right bottom;
  --box-text-color: #ffffff;
  --box-text-size: clamp(0.875rem, 1rem + 1.5vw, 1rem);
  --box-icon-font-size: 2.5rem;
  --_box-content-display: var(--box-content-display);
  --_box-content-gap: var(--box-content-gap);
  --_box-content-template-columns: var(--box-content-template-columns);
  --_box-title-size: var(--box-title-size, clamp(1.25rem, 1rem + 1.2vw, 1.75rem));
  --_box-description-font-size: var(--box-description-font-size, 1rem);
  --_box-description-line-height: var(--box-description-line-height, 1.4);
  display: var(--_box-display);
  gap: var(--_box-gap);
  padding: var(--box-background-v-padding) var(--box-background-h-padding);
  background-color: var(--box-background-color);
  background-image: var(--_box-background-image);
  background-position: var(--box-background-position);
  background-repeat: no-repeat;
  color: var(--box-text-color);
  font-size: var(--box-text-color);
}
.opd-box__icon {
  font-size: var(--box-icon-font-size);
}
.opd-box__info-emphasis {
  font-size: clamp(1.125rem, 1rem + 1.2vw, 1.5rem);
  font-family: "Nib Pro", serif;
}
.opd-box__info-label {
  font-weight: 400;
}
.opd-box__content {
  display: var(--_box-content-display);
  gap: var(--_box-content-gap);
  grid-template-columns: var(--_box-content-template-columns);
}
.opd-box__info-group p + p {
  margin-top: 1.2em;
}
.opd-box__title {
  margin-bottom: 0.7em;
  font-size: var(--_box-title-size);
  font-family: "Nib Pro", serif;
  font-weight: 400;
}
.opd-box__description {
  font-size: var(--_box-description-font-size);
  line-height: var(--_box-description-line-height);
}

/* ------------------------------------ *\
  #BOX-CONTACTS
\* ------------------------------------ */
.opd-box--contacts .opd-box__text {
  display: grid;
  gap: 1.5em;
}

/* ------------------------------------ *\
  #BOX-CTA
\* ------------------------------------ */
.opd-box {
  --box-content-display: grid;
  --box-content-gap: 2.5rem;
  --box-background-v-padding: clamp(1.5625rem, 4vw, 2.5rem);
  --box-background-h-padding: var(--box-background-v-padding);
}
.opd-box--cta-full {
  --box-background-v-padding: clamp(2.1875rem, 4vw, 3.75rem);
  /* cta FULLWIDTH */
  --box-title-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
}

/* ------------------------------------ *\
  #BOX-SMALL
\* ------------------------------------ */
/* BOXES for infos - museo, ecc */
.opd-box--has-logo-bg {
  --box-background-image: var(--decoration-logo-semitransparent);
}
.opd-box--has-icon {
  /* box with left icon and right text */
  --box-display: flex;
  --box-gap: 1.25rem;
}
.opd-box--has-icon-top {
  /* box with top icon */
  --box-icon-font-size: 4rem;
}
.opd-box--has-icon-top .opd-box__title {
  margin-bottom: 0.15em;
}
.opd-box--has-icon-and-title {
  --box-display: grid;
  --box-gap: 1em;
  --box-background-v-padding: clamp(1.25rem, 4vw, 2.1875rem);
  --box-icon-font-size: 2.125rem;
  --box-description-font-size: 1.125rem;
  /* Box info museo */
}
.opd-box--has-icon-and-title .opd-box__content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.25rem;
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (max-width: 767px) {
  .opd-box__cta {
    width: 100%;
  }
}
@media all and (min-width: 768px) {
  .opd-box--cta-full {
    --box-content-template-columns: 2fr 1fr;
  }
  .opd-box--cta-full .opd-box__cta-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}