/* ========== Layout ========== */

.relevance-paragraph .layout__region--content > .field--name-field-title {
  width: 100%;
}


/* --------- Layout View Mode 3 --------- */

.paragraph--viewmode-vm-3 {
    padding: 10px;
}


.paragraph-relevance-hidden {
  display: none !important;
}











/* ========== Paragraphs view mode 3 ========== */

.paragraph-left-column {
}

.paragraph-left-column .icon-placeholder {
  display: block;
  float: left;
  width: 110px;
  height: 90px;
}

.paragraph--viewmode-vm-3 {
  width: auto;
  margin: 0 auto;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.06);
   /* overflow: hidden;keeps rounded corners clean */
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.paragraph--viewmode-vm-3 .nomads-paragraph-icon-wrapper {
  display: flex;
  gap: 18px;
  text-align: left;
}
.paragraph--viewmode-vm-3 h2 {
  margin: 25px 10px 0;
}

/* ??? welcher ??? */
.paragraph--viewmode-vm-3.nomads-paragraph-modal-link-wrapper {
  text-align: right;
  width: 100%;
  display: flexbox;
  border-top: 1px solid #035c8f;
}


/* Paragraph view mode 3 head row */
.paragraph--viewmode-vm-3 .nomads-paragraph-header {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}


.paragraph--viewmode-vm-3 .nomads-paragraph-icon-wrapper {
  position: absolute;
  top: 0px;
  left: 0;
}
.paragraph--viewmode-vm-3 .nomads-paragraph-title {
  flex: 1 1 auto;
}
.paragraph--viewmode-vm-3 .nomads-paragraph-icon {
  height: 100px;
}
.paragraph--viewmode-vm-3 .nomads-paragraph-icon img {
  width: 100px;
  height: auto;
  display: block;
}


.paragraph--viewmode-vm-3.relevance-paragraph .paragraph-left-column .field--name-field-country {
  margin: 15px 0 5px 110px;
  text-align: center;
}
.paragraph--viewmode-vm-3.relevance-paragraph .paragraph-left-column .field--name-field-country a {
  color: #035c8f;
}
.paragraph--viewmode-vm-3.relevance-paragraph .paragraph-left-column .field--name-field-date {
  font-size: 16px;
  font-weight: 600;
  margin: 5px 0 5px 110px;
  text-align: center;
}






/* ========== Paragraph Icon Fields ========== */

/* ------- Digital: Internet Speed Icons ------- */

.nomads-icon-paragraph .field--name-field-internet-speed {
  text-align: center;
}

.nomads-icon-paragraph .field--name-field-internet-speed .container-inline.field__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.nomads-icon-paragraph .field--name-field-internet-speed .double-field-first,
.nomads-icon-paragraph .field--name-field-internet-speed .double-field-second {
  display: inline-flex;
  align-items: center;
  font-size: 18pt;
  font-weight: 700;
}

.nomads-icon-paragraph .field--name-field-internet-speed .double-field-first::before,
.nomads-icon-paragraph .field--name-field-internet-speed .double-field-second::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: auto 5px auto 20px;
  background: url("/sites/default/files/data-icons/internet-up.svg") center center / contain no-repeat;
}

.nomads-icon-paragraph .field--name-field-internet-speed .double-field-first::before {
  transform: rotate(180deg);
}

.nomads-icon-paragraph .field--name-field-internet-speed .double-field-first::after,
.nomads-icon-paragraph .field--name-field-internet-speed .double-field-second::after {
  content: " Mb/s";
  font-size: 12pt;
  font-weight: 400;
  margin: auto 20px auto 5px;
}








/* ??? Notwendig ??? */

.paragraph--viewmode-vm-3:not(.relevance-paragraph) {
  position: relative;
}

.paragraph--viewmode-vm-3:not(.relevance-paragraph) > .nomads-paragraph-modal-link-wrapper {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.paragraph--viewmode-vm-3:not(.relevance-paragraph) > .nomads-paragraph-modal-link-wrapper img {
  width: 36px;
  height: 36px;
  display: block;
}

.paragraph--viewmode-vm-3:not(.relevance-paragraph) > .nomads-paragraph-modal-link-wrapper .ajax-progress-throbber {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}

.paragraph--viewmode-vm-3:not(.relevance-paragraph) > .nomads-paragraph-modal-link-wrapper .ajax-progress-throbber .message {
  display: none;
}














/* ========== Paragraphs view mode 2 ========== */

.paragraph--viewmode-vm-2 {
  display: flex;
  flex-direction: column;
  max-height: 695px;
  gap: 10px;
  text-align: center;
  padding: 3px;
}
.paragraph--viewmode-vm-2 .nomads-paragraph-header {
  position: relative;
  display: flex;
  gap: 12px;
  text-align: left;
}
.paragraph--viewmode-vm-2 .nomads-paragraph-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
  text-align: center;
}
.paragraph--viewmode-vm-2 .nomads-paragraph-icon img {
  width: 80px;
}

.paragraph--viewmode-vm-2 .nomads-paragraph-title {
  flex: 1 1 auto;
  width: 100%;
  margin-top: 15px;
  text-align: center;
}

.paragraph--viewmode-vm-2 .nomads-paragraph-title h2 {
  font-size: 14pt;
  font-weight: 600;
  color: #015180;
}
.paragraph--viewmode-vm-2 .nomads-paragraph-label-wrapper {
  top: -15px;
  left: 70px;
  background-color: #fff;
  padding: 0 20px;
  position: absolute;
}

.paragraph--viewmode-vm-2 .nomads-paragraph-title-wrapper {
  position: relative;
}


/* ---------- View mode 2 fields ---------- */

.paragraph--viewmode-vm-2.relevance-paragraph .field__label {
  font-family: Inter;
  font-size: 10pt;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 7px;
}
.paragraph--viewmode-vm-2 .field--label-above .field__label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    color: #0570A1;
}
.paragraph--viewmode-vm-2 .field--label-above .field__label::before,
.paragraph--viewmode-vm-2 .field--label-above .field__label::after {
  content: "";
  width: 130px;
  height: 1px;
  background: #0DAFC5;
}
.paragraph--viewmode-vm-2 .nomads-pill {
  font-size: 8pt;
}





.paragraph--viewmode-vm-2 .price-range-wrapper {
  font-size: 14pt;
}


.paragraph--viewmode-vm-2 .field--name-field-lodging .nomads-pill,
.paragraph--viewmode-vm-2 .nomads-hosting-period .nomads-hosting-period__text > :nth-child(1) .nomads-pill {
  font-size: 10pt;
}

.paragraph--viewmode-vm-2 .field--name-field-crew .nomads-pill {
  font-size: 12pt;
}

.paragraph--viewmode-vm-2 .inline-mayor-pills .field {
  display: inline-block;
  width: 30%;
  text-align: center;
}

.paragraph--viewmode-vm-2 .inline-mayor-pills .nomads-pill {
  font-size: 10pt;
}

.paragraph--viewmode-vm-2 .inline-mayor-pills .field .field__label {
  white-space: wrap;
  font-size: 7pt !important;
}



.paragraph--viewmode-vm-2 .field--name-field-description {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
  text-align: left;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

/* ---------- Images ---------- */

.paragraph--viewmode-vm-2 .field--name-field-images {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  margin-top: auto;
  flex-shrink: 0;
  order: 3;
}
.paragraph--viewmode-vm-2 .field--name-field-images .field__item {
  flex: 0 0 auto;
}




/* ========== Paragraphs - Open Modal Icon ========== */

.nomads-paragraph-modal-link-wrapper {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 500;
  background: #fff;
  width: 36px;
  height: 36px;
}
.paragraph--viewmode-vm-2 .nomads-paragraph-modal-link-wrapper {
  order: 2;
  top: -15px;
  right: -15px;
}
.nomads-paragraph-modal-link-wrapper img {
  width: 36px;
  height: 36px;
  display: block;
}
.nomads-paragraph-modal-link-wrapper .ajax-progress-throbber {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}
.nomads-paragraph-modal-link-wrapper .ajax-progress-throbber .message {
  display: none;
}



/* ========== Paragraphs view mode modal ========== */