/*
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 */
/**
 * HERO
 *
 * Hero header component
 * opd-hero general class
 * opd-hero--has-background-image for image on background
 * opd-hero--has-top-tags for hero with top tag list eg ACTIVITIES
 * opd-hero--has-right-column for hero with right info box (archivi, classi)
*/
/* ------------------------------------ *\
  #HERO
\* ------------------------------------ */
.opd-hero {
  --_hero-height: var(--hero-height, 66vh);
  --_hero-max-height: var(--hero-max-height, 50vh);
  --_hero-min-height: var(--hero-min-height, 17.86em);
  --_hero-image-height: var(--hero-image-height);
  --_hero-image-min-height: var(--hero-image-min-height);
  --_hero-image-aspect-ratio: var(--hero-image-aspect-ratio);
  --_hero-background-color: var(--hero-background-color);
  --_hero-padding-y-t: var(--hero-padding-y-t);
  --_hero-padding-y-b: var(--hero-padding-y-b);
  --_hero-category-order: var(--hero-category-order, " ");
  --_hero-content-gradient: var(--hero-content-gradient, linear-gradient(0deg, rgba(0, 0, 0, 0.6) 21%, rgba(0, 0, 0, 0.55) 36%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.4) 54%, rgba(0, 0, 0, 0.3) 60.5%, rgba(0, 0, 0, 0.25) 63%, rgba(0, 0, 0, 0) 74%));
  --_hero-text-display: var(--hero-text-display, grid);
  --_hero-text-min-height: var(--hero-text-min-height, " ");
  --_hero-text-spacing-y-b: var(--hero-text-spacing-y-b, 2.1875rem);
  --_hero-text-flex-flow: var(--hero-text-flex-flow, " ");
  --_hero-text-with-tags-display: var(--hero-text-with-tags-display, " ");
  --_hero-text-with-tags-flex-flow: var(--hero-text-with-tags-flex-flow, " ");
  --_hero-text-color: var(--hero-text-color, hsl(214deg, 13%, 24%));
  --_hero-datas-section-bg: var(--hero-datas-section-bg, rgba(0, 0, 0, 0.11));
  --_hero-datas-section-flex-wrap: var(--hero-datas-section-flex-wrap, " ");
  --_hero-datas-section-justify-content: var(--hero-datas-section-justify-content, " ");
  --_hero-datas-font-base-size: var(--hero-datas-font-base-size, clamp(0.75rem, 1rem + 1.5vw, 0.875rem));
  --_hero-datas-number-font-size: var(--hero-datas-number-font-size, 1.8em);
  padding-top: var(--_hero-padding-y-t);
  padding-bottom: var(--_hero-padding-y-b);
  background-color: var(--_hero-background-color);
}
.opd-hero__text {
  display: var(--_hero-text-display);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: var(--_hero-text-flex-flow);
          flex-flow: var(--_hero-text-flex-flow);
  min-height: var(--_hero-text-min-height);
  padding-bottom: var(--_hero-text-spacing-y-b);
  color: var(--_hero-text-color);
}
.opd-hero__text-with-tags {
  display: var(--_hero-text-with-tags-display);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: var(--_hero-text-with-tags-flex-flow);
          flex-flow: var(--_hero-text-with-tags-flex-flow);
  /* specific text wrapper for headings with top tags and side text column - hero with right column/infos */
}
.opd-hero__taglist {
  margin-bottom: 0.625rem;
  -webkit-box-ordinal-group: var(--_hero-category-order);
      -ms-flex-order: var(--_hero-category-order);
          order: var(--_hero-category-order);
}
* + .opd-hero__subtitle {
  margin-top: 1em;
}
.opd-hero__figure {
  display: block;
  position: relative;
}
.opd-hero__figure-description {
  padding: 1em;
  background-color: rgba(0, 0, 0, 0.31);
  position: absolute;
  left: 0;
  bottom: 0.5em;
  font-size: 0.75rem;
  color: #ffffff;
}
.opd-hero__image {
  width: 100%;
  height: var(--_hero-image-height);
  min-height: var(--_hero-image-min-height);
  aspect-ratio: var(--_hero-image-aspect-ratio);
  -o-object-fit: cover;
     object-fit: cover;
}
.opd-hero__image.is-placeholder {
  -o-object-position: right center;
     object-position: right center;
}
.opd-hero__info-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.6em;
  font-size: clamp(0.75rem, 1rem + 1.5vw, 0.875rem);
}
* + .opd-hero__info-detail {
  margin-top: 1.5em;
}
.opd-hero__info-detail-icon {
  font-size: clamp(1rem, 1rem + 1.2vw, 1.25rem);
  color: hsl(214deg, 13%, 24%);
}

/* ------------------------------------ *\
  #HERO-HAS-IMAGE-BACKGROUND
\* ------------------------------------ */
.opd-hero--has-image-background {
  --hero-text-color: #ffffff;
  --hero-image-height: min(var(--_hero-height), var(--_hero-max-height));
  --hero-image-min-height: var(--_hero-min-height);
  display: grid;
  grid-template-areas: "hero";
  height: clamp(var(--_hero-min-height), var(--_hero-height), var(--_hero-max-height));
}
.opd-hero--has-image-background > * {
  grid-area: hero;
}
.opd-hero--has-image-background .opd-hero__image {
  z-index: -1;
}
.opd-hero--has-image-background .opd-hero__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background-image: var(--_hero-content-gradient);
}

/* ------------------------------------ *\
  #HAS-TOP-TAGS
\* ------------------------------------ */
.opd-hero--has-top-tags {
  --hero-category-order: -1;
  --hero-text-display: flex;
  --hero-text-flex-flow: column nowrap;
  --hero-text-with-tags-display: flex;
  --hero-text-with-tags-flex-flow: column nowrap;
}

/* ------------------------------------ *\
  #HERO-SMALL
\* ------------------------------------ */
.opd-hero--s {
  --hero-height: 150px;
  --hero-max-height: 150px;
  --hero-min-height: 150px;
}

/* ------------------------------------ *\
  #HERO-SECTION-DATAS
\* ------------------------------------ */
/* Section datas  */
.opd-hero__section-datas {
  padding: 0.9375rem 0;
  background-color: var(--_hero-datas-section-bg);
  font-family: "Nib Pro", serif;
  font-size: var(--_hero-datas-font-base-size);
  color: var(--_hero-text-color);
}
.opd-hero__datas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: var(--_hero-datas-section-flex-wrap);
      flex-wrap: var(--_hero-datas-section-flex-wrap);
  -webkit-box-pack: var(--_hero-datas-section-justify-content);
      -ms-flex-pack: var(--_hero-datas-section-justify-content);
          justify-content: var(--_hero-datas-section-justify-content);
  gap: 1em;
}
.opd-hero__datas-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0.3125rem 1.25rem;
  line-height: 1.1;
}
.opd-hero__datas-label {
  color: hsl(41deg, 22%, 83%);
}
.opd-hero__datas-value {
  line-height: 1;
}
.opd-hero__datas-value + .opd-hero__datas-label {
  margin-left: 1ch;
  padding-left: 1ch;
  border-left: 1px solid rgba(200, 194, 182, 0.3);
}
.opd-hero__datas-number {
  font-size: var(--_hero-datas-number-font-size);
}

/* ------------------------------------ *\
  #HERO-HAS-RIGHT-COLUMN
\* ------------------------------------ */
/* Hero with infos */
.opd-hero--has-right-column {
  --hero-content-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 17%, rgba(0, 0, 0, 0.66) 45%, rgba(0, 0, 0, 0.15) 96.84%);
}
.opd-hero--has-right-column.opd-hero--has-top-tags {
  --hero-text-flex-flow: " ";
}
.opd-hero--has-right-column .opd-hero__text-with-tags {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* ------------------------------------ *\
  #HERO-HAS-SECTION-DECORATION
\* ------------------------------------ */
/* Hero with SECTION top decoration for MUSEO, CONSERVAZIONE E RICERCA, FORMAZIONE */
/* Differenziaton with class: */
/* is-museo */
/* is-conservazione-ricerca */
/* is-formazione */
.opd-hero--has-section-decoration {
  --hero-section-decoration-width: var(--section-decoration-width-mobile);
  --hero-section-decoration-height: var(--section-decoration-width-mobile);
  --hero-section-decoration-margin-left: " ";
  --_hero-section-decoration-spacing: calc(
      var(--hero-section-decoration-spacing, var(--hero-section-decoration-height)) + 0.625rem
  );
  --_hero-content-padding-top: var(--hero-content-padding-top, var(--_hero-section-decoration-spacing));
  --_hero-text-padding-left: var(--hero-text-padding-left, " ");
  --hero-section-decoration: var(--section-decoration);
  --hero-section-decoration-position: left bottom;
  --hero-section-decoration-size: cover;
  position: relative;
}
.opd-hero--has-section-decoration .opd-hero__content {
  padding-top: var(--_hero-content-padding-top);
}
.opd-hero--has-section-decoration .opd-hero__text {
  padding-left: var(--_hero-text-padding-left);
}
.opd-hero--has-section-decoration .opd-hero__text::before {
  content: "";
  display: block;
  width: var(--hero-section-decoration-width);
  height: var(--hero-section-decoration-height);
  margin-left: var(--hero-section-decoration-margin-left);
  position: absolute;
  top: 0;
  background: var(--hero-section-decoration) var(--hero-section-decoration-position) no-repeat;
  background-size: var(--hero-section-decoration-size);
}
.opd-hero--has-section-decoration-left {
  /* Decoration on text left side  */
  --hero-text-display: flex;
  --hero-text-flex-flow: column nowrap;
}

/* ------------------------------------ *\
  #HERO-SIMPLE
\* ------------------------------------ */
.opd-hero--simple {
  --hero-padding-y-t: clamp(1.875rem, 5vw, 4.6875rem);
  --hero-padding-y-b: var(--_hero-padding-y-t);
  --hero-background-color: hsl(40deg, 20%, 97%);
  --hero-text-spacing-y-b: 0;
  --hero-image-aspect-ratio: 16/7;
  background-image: url("/wp-content/themes/opd/assets/images/logo-bg-gray-hero.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 75%;
}
.opd-hero--simple * + .opd-hero__media {
  margin-top: var(--_hero-padding-y-t);
}

/* ------------------------------------ *\
  #HERO-HAS-THUMB-IMAGE-LEFT
\* ------------------------------------ */
.opd-hero--has-thumb-image-left {
  --_hero-thumb-image-size: var(--hero-thumb-image-size);
  --hero-image-aspect-ratio: 1/1;
}
.opd-hero--has-thumb-image-left .opd-hero__content {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.1875rem);
}

/* ------------------------------------ *\
  #HERO-INFOS
\* ------------------------------------ */
/* Side block with main content infos - reusable outside HERO component */
.opd-hero-infos {
  --_hero-infos-background-color: var(--hero-infos-background-color, hsl(40deg, 20%, 97%));
  --_hero-infos-color: var(--hero-infos-color, hsl(214deg, 13%, 24%));
  --_hero-infos-margin-left: var(--hero-infos-margin-left, " ");
  --_hero-infos-font-size: var(--hero-infos-font-size, clamp(0.75rem, 1rem + 1.5vw, 0.875rem));
  display: grid;
  width: min(100%, 330px); /* 100% */
  margin-left: var(--_hero-infos-margin-left);
  padding: 1.5rem;
  background-color: var(--_hero-infos-background-color);
  color: var(--_hero-infos-color);
  font-size: var(--_hero-infos-font-size);
}
.opd-hero-infos__title + *, .opd-hero-infos__list + * {
  margin-top: 1.25rem;
}
.opd-hero-infos .opd-btn + .opd-btn {
  margin-top: 0.9375rem;
}

/* ------------------------------------ *\
  #HERO-ACTIONS
\* ------------------------------------ */
/* Hero section - used in hero slider */
.opd-hero__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.5rem;
  padding-top: 2.5rem;
}
.opd-hero__actions * + .opd-watch-video-action {
  padding-left: 1.875rem;
  border-left: 1px solid hsl(40deg, 14%, 75%);
}

/* ------------------------------------ *\
  #HERO-SLIDE
\* ------------------------------------ */
/* Hero component used in hp slider - set diffe */
.opd-hero--slide {
  --hero-min-height: 35rem;
  --hero-content-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.6) 64%, rgba(0, 0, 0, 0.1) 85%);
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (max-width: 1024px) {
  .opd-hero--has-right-column {
    --hero-height: auto;
  }
  .opd-hero--has-right-column.opd-hero--has-image-background {
    --hero-image-height: 100%;
  }
  .opd-hero--has-right-column .opd-hero__text {
    gap: 1.5625rem;
  }
}
@media all and (max-width: 767px) {
  .opd-hero {
    --hero-datas-section-flex-wrap: wrap;
  }
  .opd-hero--has-right-column, .opd-hero--has-right-column.opd-hero--has-top-tags {
    --hero-text-flex-flow: column nowrap;
  }
}
@media all and (min-width: 768px) {
  .opd-hero {
    --hero-datas-font-base-size: clamp(1rem, 1rem + 1.2vw, 1.25rem);
    --hero-datas-number-font-size: 2.5em;
    --hero-datas-section-justify-content: space-between;
  }
  .opd-hero--has-right-column {
    --hero-content-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0) 85%);
    --hero-text-display: flex;
  }
  .opd-hero--has-right-column .opd-hero__text {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .opd-hero--has-section-decoration {
    --hero-section-decoration-width: var(--section-decoration-width-tablet);
    --hero-section-decoration-height: var(--section-decoration-height-tablet);
  }
  .opd-hero--has-section-decoration-left {
    /* Decoration on text left side  */
    /* Remove top padding fopr decoration space */
    /* Add text left padding equal to decoration width + some space, for decoration space */
    /* Add decoration left margin equal to text left padding, for text padding compensation */
    --hero-content-padding-top: " ";
    --hero-text-padding-left: calc(var(--hero-section-decoration-width) + 1.5625rem);
    --hero-section-decoration-margin-left: calc(var(--hero-text-padding-left) * -1);
    --hero-text-min-height: calc(var(--hero-section-decoration-height) - var(--_hero-padding-y-t));
  }
  .opd-hero--has-section-decoration-left.opd-hero--has-right-column {
    /* Manage responsive combination for header with right info content and decoration on the left  */
    --hero-text-flex-flow: " ";
  }
  .opd-hero--has-thumb-image-left {
    --hero-thumb-image-size: clamp(100px, 20vw, 214px);
  }
  .opd-hero--has-thumb-image-left .opd-hero__content {
    grid-template-areas: "image text";
    grid-template-columns: var(--_hero-thumb-image-size) 1fr;
  }
  .opd-hero--has-thumb-image-left .opd-hero__image {
    grid-area: image;
  }
  .opd-hero--has-thumb-image-left .opd-hero-hero__text {
    grid-area: text;
  }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
  .opd-hero--has-section-decoration-left.opd-hero--has-right-column {
    --hero-content-padding-top: 2.5rem;
  }
}
@media all and (min-width: 1025px) {
  .opd-hero--has-image-background {
    --hero-height: 66vh;
    --hero-max-height: 46.5em;
    --hero-min-height: 31.25em;
  }
  .opd-hero--s {
    --hero-height: 200px;
    --hero-max-height: 200px;
    --hero-min-height: 200px;
  }
  .opd-hero--has-section-decoration {
    --hero-section-decoration-width: var(--section-decoration-width-desktop);
    --hero-section-decoration-height: var(--section-decoration-height-desktop);
  }
  .opd-hero--has-right-column {
    --hero-content-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0) 85%);
  }
}