@charset 'utf-8';

/* ----------------------------------------------------------------------------
 * PCT_AUTOGRID Adjustments
 * ------------------------------------------------------------------------- */
.gutter_none.gutter_none:is(.autogrid_row, .autogrid_wrapper) {
    margin-inline: calc(-1 * var(--gutter-size));

    @media(width < 768px) {
      margin-inline: calc(-1 * var(--gutter-size)) !important;
    }
}

.autogrid_grid .column, .column[class*=col_] {
    @media(width < 768px) {
      margin-bottom: var(--gutter-size);
    }
}

/*
 * PCT_AUTOGRID columns have a greedy selector
 * so we need to reset the values for other elements
 */
:is(.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12):is(td,li) {
  flex: initial;
  max-width: none;
}

form {
  .autogrid_grid,
  .autogrid_row,
  .autogrid_wrapper {
    @media (width < 768px) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
}


/* ----------------------------------------------------------------------------
 * IMAGE
 * ------------------------------------------------------------------------- */
figure {
  font-size: .8125rem;

  figcaption {
    color: #393939;
    margin-top: .5em;
    max-width: 100%;
  }

  a {
    background-color: black;
    display: inline-block;

    & > * {
      opacity: 0.85;
      transition: opacity .2s;
    }

    &:is(:hover, :focus, :active) > * {
      opacity: 1;
    }
  }
}


/* ----------------------------------------------------------------------------
 * GALLERY
 * ------------------------------------------------------------------------- */
.content-gallery {
  &.content-gallery--cols-1 { --listitem-minwidth: 100%; }
  &.content-gallery--cols-2 { --listitem-minwidth: 23.5rem; }
  &.content-gallery--cols-3 { --listitem-minwidth: 17.5rem; }
  &.content-gallery--cols-4 { --listitem-minwidth: 13.75rem; }
  &.content-gallery--cols-5 { --listitem-minwidth: 11.5rem; }
  &.content-gallery--cols-6 { --listitem-minwidth: 9.5rem; }

  ul {
    margin: 0;
    padding: 0;
    display: grid;
    grid-gap: var(--gutter-size);
    grid-template-columns: repeat(auto-fill, minmax(var(--listitem-minwidth, 10rem), 1fr));
  }
}


/* ----------------------------------------------------------------------------
 * MEDIAPLAYER
 * ------------------------------------------------------------------------- */
.content-youtube {
    .aspect {
    position: relative;
    width: 100%;
    height: auto;

    & > iframe {
      aspect-ratio: 16 / 9;
    }
  }

  img,
  iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 none;
  }
}

.aspect--16\:9  { aspect-ratio: 16 /  9; }
.aspect--16\:10 { aspect-ratio: 16 / 10; }
.aspect--21\:9  { aspect-ratio: 21 /  9; }
.aspect--4\:3   { aspect-ratio:  4 /  3; }
.aspect--3\:2   { aspect-ratio:  3 /  2; }


/* ----------------------------------------------------------------------------
 * RSCE CONTENT CONTAINER
 * ------------------------------------------------------------------------- */
.content-container {
  width: 100%;
  max-width: var(--global-width);
  margin-inline: auto;
  padding-inline: var(--gutter-size);
  overflow: hidden;
  position: relative;

    /* display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center; */

  & > * {
    position: relative;
  }

  & > .image_container.bg-image {
    inset: 0;
    position: absolute;

    img {
      inset: 0;
      position: absolute;
      max-width: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &.bg-size-cover img { object-fit: cover; }
    &.bg-size-contain img { object-fit: contain; }
  }

  &.full {
    max-width: 100%;
  }

  &.narrow {
    max-width: calc(var(--global-width) * .75);
    margin-inline: auto;
    padding-inline: var(--gutter-size);
    overflow: hidden;
  }

  &.narrower {
    max-width: calc(var(--global-width) * .5);
    margin-inline: auto;
    padding-inline: var(--gutter-size);
    overflow: hidden;
  }

  &[class*="align-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  /* horizontal alignment */
  &.align-center { align-content: center;  align-items: center; }
  &.align-left   { align-content: flex-start; align-items: flex-start; }
  &.align-right  { align-content: flex-end; align-items: flex-end; }

  /* vertical alignment */
  &.align-top           { justify-content: flex-start; }
  &.align-middle        { justify-content: center; }
  &.align-bottom        { justify-content: flex-end; }
  &.align-space-between { justify-content: space-between; }
  &.align-space-evenly  { justify-content: space-evenly; }
  &.align-space-around  { justify-content: space-around; }

  &.height-large {
    min-height: 75vh;
  }
}



/* ----------------------------------------------------------------------------
 * NEWS
 * ------------------------------------------------------------------------- */

/* News Cards (horizontal teaser boxes)
 * ------------------------------------------------------------------------- */
.mod_newslist.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: 1fr;
  gap: var(--gutter-size);
  margin-bottom: 3rem;

  .layout_latest {
    display: grid;
    background-color: var(--color-light-grey);
    color: var(--color-dark-grey);
    border-radius: 10px;
    overflow: hidden;

    &:hover {
      background-color: var(--color-primary);
    }

    & > * + * {
      margin-block-start: var(--flow-space, 1em);
    }

    .image_container {
      overflow: hidden;
      margin-top: 0;

      picture {
        max-width: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      img {
        max-width: unset;
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;
      }
    }

    h2 {
      font-family: var(--header-font-family);
      font-size: var(--step--1);
      font-weight: 700;
      line-height: 1.25;
      padding-inline: 1rem;
      display: flex;
      min-height: 3.5rem;
      align-items: center;

      a:is(:link, :visited) {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        overflow: hidden;
        text-decoration: none;
      }
    }

    &:hover h2 a:is(:link, :visited) {
      color: var(--color-white);
      text-decoration: underline;
      text-decoration-color: var(--color-white);
      text-decoration-thickness: 0.3ex;
      text-underline-offset: 0.1ex;
    }

    .ce_text {
      color: var(--color-deep-dark-grey);
      font-size: var(--step--1);
      font-weight: 400;
      line-height: 1.4;
      padding-inline: 1rem;
      min-height: 5rem;
    }

    .more {
      display: none;
    }

    .info {
      order: 5;
      font-size: var(--step--2);
      padding: 0 1rem 1rem;

      .newscard:hover & {
        color: var(--color-white);
      }
    }
  }
}

/* News List (vertical teaser boxes)
 * ------------------------------------------------------------------------- */
.mod_newslist.list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gutter-size);

  .layout_latest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--gutter-size);
    grid-row-gap: 0;

    .info {
      grid-area: 2 / 2 / 3 / 4;
      margin: .25rem 0;
      font-size: var(--step--2);
    }

    h2 {
      grid-area: 1 / 2 / 2 / 4;
      margin: -.25rem 0 0;
      font-size: var(--step-3);
      line-height: 1;

      a {
        color: var(--color-secondary);
        text-decoration: none;

        &:hover {
          color: var(--color-primary);
          text-decoration: underline;
          text-decoration-color: var(--color-primary);
          text-decoration-thickness: 0.25ex;
          text-underline-offset: 0.1ex;
        }
      }
    }

    .ce_text {
      grid-area: 3 / 2 / 4 / 4;
    }

    .more {
      grid-area: 4 / 2 / 5 / 4;
    }

    .image_container {
      grid-area: 1 / 1 / 5 / 2;
    }

    @media (0 <= width < 680px) {
      .image_container { grid-area: 1 / 1 / 1 / 4; }
      h2               { grid-area: 2 / 1 / 2 / 4; margin-top: var(--space-reduced); }
      .info            { grid-area: 3 / 1 / 3 / 4; }
      .ce_text         { grid-area: 4 / 1 / 4 / 4; }
      .more            { grid-area: 5 / 1 / 5 / 4; margin-bottom: var(--space-huge); }
    }
  }


}


/* News details
 * ------------------------------------------------------------------------- */
.mod_newsreader {
  .layout_full {
    display: grid;

    h1 {
      margin-top: 7rem;
      text-align: center;
      order: 1;
    }

    h2 {
      order: 2;
      text-align: center;
      font-size: var(--step-3);
      max-width: initial;
    }

    .info {
      text-align: center;
      order: 3;
    }

    /*
     * All user generated elements get the same (lower) order to sort them
     * below the header
     */
    & > *:not(h1):not(h2):not(.info) {
      order: 4;
    }
  }

  .back {
    text-align: center;
    margin-bottom: 7rem;
  }
}


/* ----------------------------------------------------------------------------
 * PAGINATION
 * used for news, events, gallery, etc.
 * ------------------------------------------------------------------------- */
nav[data-pagination],
.pagination {
  margin-block-start: var(--space-l);

  p {
      text-align: center;

      @media (0 <= width < 500px) {
        display: none;
      }
  }

  ol,
  ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: var(--gutter-size);
    padding: 0;
  }

  a,
  strong {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-secondary);
    padding: 0 .5rem;
    color: var(--color-white);

    &:hover {
      background-color: var(--color-primary);
    }
  }

  a:is(:link, :visited) {
    text-decoration: none;
  }

  li:not(.previous, .next) a,
  li:not(.previous, .next) strong {
    width: 3rem;
  }
}

/* ----------------------------------------------------------------------------
 * CONTENT SLIDER 
 * New slider based on swiper.js
 * ------------------------------------------------------------------------- */
.content-swiper {
  --swiper-navigation-size: 2rem; 
  --swiper-navigation-color: var(--color-accent2);
  --swiper-pagination-color: var(--color-accent2);

  background-color: var(--color-light-grey);

  .swiper-slide {
    padding: 2rem 5rem;
  }

  button {
    background: none;
    border: none;
    padding: 1.5rem;
    border-radius: 5px;
  }
}