/**
** Theme Container Image and Text
** This file contains the styles for the container with image and text element in the theme.
*/

.wp-block-uagb-container.cont-img-txt {
  gap: 0;
  padding: 0;
  align-items: stretch;
}

.wp-block-uagb-container.cont-img-txt * {
  color: var(--ast-global-color-3);
}

.wp-block-uagb-container.cont-img-txt .col-img {
  padding: 0;
}

.wp-block-uagb-container.cont-img-txt .col-img .wp-block-uagb-image {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.wp-block-uagb-container.cont-img-txt .col-img {
  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10) !important;
  overflow: hidden;
}

.wp-block-uagb-container.cont-img-txt .col-img img {
  object-fit: cover;
  max-width: 100%;
  height: 100% !important;
  display: block;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wp-block-uagb-container.cont-img-txt .col-txt {
  gap: var(--gap-m);
  padding: var(--gap-m) var(--gap-l);
  background-color: var(--ast-global-color-0);
  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
}

.wp-block-uagb-container.cont-img-txt .col-txt .wp-block-list {
  margin-left: 10px;
}

.wp-block-uagb-buttons-child.display-no {
  display: none;
}

/** reverse version **/
.wp-block-uagb-container.cont-img-txt.reverse .col-img {
  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0 !important;
  overflow: hidden;
}

.wp-block-uagb-container.cont-img-txt.reverse .col-txt {
  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10) !important;
}

/** Large **/
.wp-block-uagb-container.cont-img-large-txt {
  gap: var(--gap-l);
}

/** Grid Version **/
.wp-block-uagb-container.cont-grid {
  gap: var(--gap-xl);
  height: 760px;
  padding: 0;
}

.wp-block-uagb-container.cont-grid .col-img-txt {
  gap: var(--gap-m);
  padding: 0;
  height: 87%;
}

.wp-block-uagb-container.cont-grid .col-img-txt:first-of-type {
  align-self: start;
}

.wp-block-uagb-container.cont-grid .col-img-txt .wp-block-uagb-image img {
  filter: brightness(0.7);
}

.wp-block-uagb-container.cont-grid
  .col-img-txt
  .wp-block-uagb-image.no-filter
  img {
  filter: none !important;
}

.wp-block-uagb-container.cont-grid .col-img-txt:last-of-type {
  align-self: end;
}

.wp-block-uagb-container.cont-grid h2.uagb-heading-text {
  color: var(--ast-global-color-0);
}

.wp-block-uagb-container.cont-grid
  .wp-block-uagb-advanced-heading:has(h2.uagb-heading-text) {
  transform: translate(10%, 100%);
  z-index: 99;
  position: relative;
}

.wp-block-uagb-container.cont-grid h5.uagb-heading-text {
  color: var(--ast-global-color-3);
}

.wp-block-uagb-container.cont-grid .wp-block-uagb-image {
  border-radius: var(--border-radius-10);
  overflow: hidden;
}

/* responsive */
@media (max-width: 760px) {
  .wp-block-uagb-container.cont-grid {
    height: 100%;
  }

  .wp-block-uagb-container.cont-grid
    .wp-block-uagb-advanced-heading
    h2.uagb-heading-text {
    font-size: var(--xxl-font-size) !important;
    line-height: 1.23;
  }
}

/** Zimmer **/
.wp-block-uagb-container.cont-rooms {
  padding: 0 !important;
  gap: var(--cont-gap);
}

.wp-block-uagb-container.cont-rooms .cont-room {
  padding: 0 !important;
  gap: 0 !important;
}

.wp-block-uagb-container.cont-rooms .cont-room .col-img .spectra-image-gallery {
  margin-bottom: 0 !important;
}

.wp-block-uagb-container.cont-rooms .cont-room .col-txt {
  position: relative;
}

.wp-block-uagb-container.cont-rooms .cont-room .col-txt .cont-headings {
  gap: var(--gap-s);
  padding: 0;
}

.wp-block-uagb-container.cont-rooms .cont-room .col-txt .wp-block-uagb-buttons,
.wp-block-uagb-container.cont-ferienhaus .cont-txt .wp-block-uagb-buttons {
  position: absolute !important;
  top: 0;
  right: var(--gap-l);
  transform: translateY(-55%);
  --my-size: var(--gap-xl);
  width: var(--my-size) !important;
}

.wp-block-uagb-container.cont-rooms .cont-room .col-txt .uagb-button__link,
.wp-block-uagb-container.cont-ferienhaus .cont-txt .uagb-button__link {
  color: var(--ast-global-color-0) !important;
  font-size: 0.688rem;
}

.wp-block-uagb-container.cont-rooms
  .cont-room
  .col-txt
  .wp-block-uagb-buttons
  .wp-block-button__link,
.wp-block-uagb-container.cont-ferienhaus
  .cont-txt
  .wp-block-uagb-buttons
  .wp-block-button__link {
  position: relative;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--ast-global-color-3) !important;
  width: var(--my-size);
  height: var(--my-size);
  gap: 6px;
}

/* buttons */
.cont-rooms-btns {
  padding: 0 !important;
  max-width: 950px !important;
  background-color: var(--ast-global-color-3);
  border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
  height: unset;
}

.cont-rooms-btns .uagb-buttons__wrap {
  gap: var(--gap-m) !important;
}

.wp-block-uagb-container.cont-rooms-btns a.uagb-buttons-repeater {
  padding-top: 1.85rem !important;
  padding-bottom: 1.85rem !important;
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-verfuegbarkeit
  .uagb-button__link::before {
  background-image: url(../../img/icon-verfuegbar.svg);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-preis
  .uagb-button__link::before {
  background-image: url(../../img/icon-preis-berechnen.svg);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-anfragen
  .uagb-button__link::before {
  background-image: url(../../img/icon-anfragen.svg);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-buchen
  .uagb-button__link::before {
  background-image: url(../../img/icon-buchen.svg);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-buchen
  .uagb-button__link {
  color: var(--ast-global-color-0);
}

.cont-rooms-btns .uagb-buttons__wrap .wp-block-button__link {
  border: none !important;
  padding: 10px !important;
  transition: all 0.5s ease-in-out;
}

.cont-rooms-btns .uagb-buttons__wrap .wp-block-button__link .uagb-button__link {
  color: var(--ast-global-color-1);
  display: flex;
  gap: var(--gap-s);
  align-items: center;
  text-align: left;
  transition: all 0.5s ease-in-out;
}

.cont-rooms-btns
  .wp-block-uagb-buttons
  .wp-block-button
  a.wp-block-button__link:hover {
  background-color: inherit !important;
}

.cont-rooms-btns
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child:not(.btn-buchen)
  a.wp-block-button__link:hover
  .uagb-button__link {
  color: var(--ast-global-color-0) !important;
}

.cont-rooms-btns
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child.btn-buchen
  a.wp-block-button__link:hover
  .uagb-button__link {
  color: var(--ast-global-color-1) !important;
}

.cont-rooms-btns
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child:not(.btn-buchen):hover
  .uagb-button__link::before {
  filter: brightness(0) invert(1);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-uagb-buttons-child.btn-buchen:hover
  .uagb-button__link::before {
  background-image: url(../../img/icon-buchen-gold.svg);
}

.cont-rooms-btns
  .uagb-buttons__wrap
  .wp-block-button__link
  .uagb-button__link::before {
  content: "";
  display: inline-block;
  --my-size: 1.538em;
  width: var(--my-size);
  height: var(--my-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.5s ease-in-out;
}

/**Slider*/
.wp-block-uagb-container.col-img .wp-block-uagb-image-gallery,
.wp-block-uagb-container.col-img .spectra-image-gallery,
.wp-block-uagb-container.col-img .uagb-slick-carousel,
.wp-block-uagb-container.col-img .slick-list.draggable,
.wp-block-uagb-container.col-img .slick-track,
.wp-block-uagb-container.col-img .slick-slide,
.wp-block-uagb-container.col-img .slick-slide > div,
.wp-block-uagb-container.col-img .spectra-image-gallery__media-wrapper,
.wp-block-uagb-container.col-img .spectra-image-gallery__media {
  height: 100% !important;
}

/* Ferienhaus */
.wp-block-uagb-container.cont-ferienhaus {
  border-radius: var(--border-radius-10);
  gap: 0 !important;
  overflow: hidden;
}

.wp-block-uagb-container.cont-ferienhaus .wp-block-uagb-image-gallery {
  max-height: 750px;
}

.wp-block-uagb-container.cont-ferienhaus .wp-block-uagb-image-gallery picture {
  border-radius: var(--border-radius-10);
  overflow: hidden;
}

.wp-block-uagb-container.cont-ferienhaus .cont-txt {
  background-color: var(--ast-global-color-0);
  padding: var(--gap-xl) var(--gap-m);
  gap: var(--gap-m);
  border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
}

.wp-block-uagb-container.cont-ferienhaus .wp-block-uagb-container.cont-txt > * {
  max-width: 1000px;
}

.wp-block-uagb-container.cont-ferienhaus .cont-txt * {
  max-width: 1000px;
}

.wp-block-uagb-container.cont-ferienhaus .cont-txt ul.wp-block-list {
  columns: 2;
  column-gap: var(--gap-xl);
}

/** Activities */
.wp-block-uagb-container .cont-activities .uagb-container-inner-blocks-wrap {
  gap: var(--gap-m);
}

/* in editor */

.block-editor-block-list__block .block-editor-block-list__block.btn-grundriss {
  position: absolute !important;
  top: 0;
  right: var(--gap-l);
  transform: translateY(-55%);
  --my-size: var(--gap-xl);
  width: var(--my-size) !important;
}

.block-editor-block-list__block
  .block-editor-block-list__block.btn-grundriss
  .wp-block-button__link {
  position: relative;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--ast-global-color-3) !important;
  width: var(--gap-xl);
  height: var(--gap-xl);
  gap: 6px;
}

.wp-block-uagb-container.cont-rooms
  .cont-room
  .col-txt
  .wp-block-uagb-buttons
  .wp-block-button__link::before,
.wp-block-uagb-container.cont-ferienhaus
  .cont-txt
  .wp-block-uagb-buttons
  .wp-block-button__link::before {
  content: "";
  display: inline-block;
  position: relative;
  top: -5px;
  background-image: url(../../img/icon-grundriss.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  --my-size: 21%;
  width: var(--my-size) !important;
  height: var(--my-size);
  pointer-events: none;
}

.editor-styles-wrapper .block-editor-block-list__block.cont-img-txt {
  background-color: #fff;
}

.editor-styles-wrapper
  .wp-block-uagb-container
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  column-gap: 0 !important;
  row-gap: 20px !important;
}

.editor-styles-wrapper a {
  color: var(--ast-global-color-3) !important;
}

@media screen and (max-width: 1200px) {
  .cont-rooms-btns .uagb-buttons__wrap {
    gap: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 990px) {
  .wp-block-uagb-container.cont-img-txt {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .wp-block-uagb-container.cont-img-txt.reverse {
    flex-direction: column-reverse;
  }

  .wp-block-uagb-container.cont-img-txt .wp-block-uagb-container.col-img,
  .wp-block-uagb-container.cont-img-txt .wp-block-uagb-container.col-txt {
    max-width: 100%;
  }

  .wp-block-uagb-container.col-img .wp-block-uagb-image-gallery,
  .wp-block-uagb-container.col-img .spectra-image-gallery,
  .wp-block-uagb-container.col-img .uagb-slick-carousel,
  .wp-block-uagb-container.col-img .slick-list.draggable,
  .wp-block-uagb-container.col-img .slick-track,
  .wp-block-uagb-container.col-img .slick-slide,
  .wp-block-uagb-container.col-img .slick-slide > div,
  .wp-block-uagb-container.col-img .spectra-image-gallery__media-wrapper,
  .wp-block-uagb-container.col-img .spectra-image-gallery__media {
    height: auto !important;
  }

  #main .wp-block-uagb-container.cont-img-txt .col-img,
  #main .wp-block-uagb-container.cont-img-txt .col-txt {
    border-radius: 0 !important;
  }

  .wp-block-uagb-container.cont-img-txt {
    border-radius: var(--border-radius-10) !important;
    overflow: hidden;
  }

  .wp-block-uagb-container.col-img figure,
  .wp-block-uagb-container.col-img figure img {
    width: 100% !important;
  }

  .wp-block-uagb-container.cont-img-txt .col-txt {
    padding: var(--gap-m);
  }

  .wp-block-uagb-container.cont-room .wp-block-uagb-container.cont-img-txt {
    border-radius: 0 !important;
  }

  .cont-rooms-btns .uagb-buttons__wrap {
    display: flex !important;
  }

  .cont-rooms-btns
    .wp-block-uagb-buttons:not(.btn-grundriss)
    .uagb-buttons__wrap:has(.btn-verfuegbarkeit)
    .wp-block-uagb-buttons-child:nth-child(1) {
    display: none;
  }

  .wp-block-uagb-container.cont-img-txt .col-txt .wp-block-list {
    margin-left: 0;
  }

  .wp-block-uagb-container.cont-ferienhaus .wp-block-uagb-image-gallery picture,
  .wp-block-uagb-container.cont-rooms .uagb-slick-carousel {
    border-top-left-radius: var(--border-radius-10);
    border-top-right-radius: var(--border-radius-10);
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  .cont-rooms-btns
    .wp-block-uagb-buttons:not(.btn-grundriss)
    .uagb-buttons__wrap
    .wp-block-uagb-buttons-child
    .uagb-button__link::before {
    display: none;
  }

  .cont-rooms-btns
    .wp-block-uagb-buttons:not(.btn-grundriss)
    .uagb-buttons__wrap {
    flex-direction: row !important;
  }

  .wp-block-uagb-container.cont-ferienhaus .cont-txt {
    padding: var(--gap-l) var(--gap-m);
  }

  .wp-block-uagb-container.cont-rooms
    .cont-room
    .col-txt
    .wp-block-uagb-buttons
    .wp-block-button__link,
  .wp-block-uagb-container.cont-ferienhaus
    .cont-txt
    .wp-block-uagb-buttons
    .wp-block-button__link {
    gap: 1px;
  }

  .wp-block-uagb-container.cont-rooms
    .cont-room
    .col-txt
    .wp-block-uagb-buttons,
  .wp-block-uagb-container.cont-ferienhaus .cont-txt .wp-block-uagb-buttons {
    right: var(--gap-s);
  }

  .wp-block-uagb-container.cont-rooms
    .cont-room
    .col-txt
    .wp-block-uagb-buttons,
  .wp-block-uagb-container.cont-ferienhaus .cont-txt .wp-block-uagb-buttons {
    --my-size: 5em;
  }

  .wp-block-uagb-container.cont-rooms .cont-room .col-txt .uagb-button__link,
  .wp-block-uagb-container.cont-ferienhaus .cont-txt .uagb-button__link {
    font-size: 0.588rem;
  }

  .wp-block-uagb-container.cont-ferienhaus .cont-txt ul.wp-block-list {
    -moz-columns: 1;
    columns: 1;
  }

  .wp-block-uagb-container.cont-rooms-btns a.uagb-buttons-repeater {
    padding-top: 1.15em !important;
    padding-bottom: 1.15em !important;
  }
}

@media screen and (max-width: 767px) {
  .wp-block-uagb-container.cont-rooms
    .cont-room
    .col-txt
    .wp-block-uagb-buttons,
  .wp-block-uagb-container.cont-ferienhaus .cont-txt .wp-block-uagb-buttons {
    top: -3%;
  }
}