/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.single-trip .single-trip-title {
  margin: 0;
}
.single-trip .single-trip-main-image {
  --wavy-radius: var(--rounded);
  --wavy-height: calc(3 / 2 * var(--wavy-radius));
  min-width: calc(2 * var(--wavy-radius));
  min-height: calc(2 * var(--wavy-radius) + var(--wavy-height) - var(--wavy-radius));
  mask-image: url(/wp-content/themes/rattin.ch/dist/cbcf2cb263565d97.svg), url(/wp-content/themes/rattin.ch/dist/42a37b19b9dc19be.svg), url(/wp-content/themes/rattin.ch/dist/e106c5a98b01cf5d.svg), url(/wp-content/themes/rattin.ch/dist/8dd3e06265973bc0.svg), linear-gradient(to top, #000, #000), linear-gradient(to top, #000, #000), url(/wp-content/themes/rattin.ch/dist/f70a92f14e6d6eac.svg);
  mask-repeat: no-repeat;
  mask-position: top left, top right, left calc(100% - var(--wavy-height) + var(--wavy-radius)), right calc(100% - var(--wavy-height) + var(--wavy-radius)), var(--wavy-radius) top, left var(--wavy-radius), var(--wavy-radius) 100%;
  mask-size: var(--wavy-radius) var(--wavy-radius), var(--wavy-radius) var(--wavy-radius), var(--wavy-radius) var(--wavy-radius), var(--wavy-radius) var(--wavy-radius), calc(100% - 2 * var(--wavy-radius)) var(--wavy-radius), 100% calc(100% - 2 * var(--wavy-radius) - var(--wavy-height) + var(--wavy-radius)), calc(100% - 2 * var(--wavy-radius)) calc(var(--wavy-radius) + var(--wavy-height) - var(--wavy-radius));
}
.single-trip .single-trip-gallery-container {
  position: relative;
  margin-top: var(--element-spacing-sm);
}
.single-trip .single-trip-photos-badge {
  position: absolute;
  top: var(--element-spacing-xs);
  right: var(--element-spacing-xs);
  z-index: 10;
  display: flex;
  gap: 0.375rem;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-radius: var(--rounded);
  background: var(--primary-100);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.875rem;
}
.single-trip .single-trip-photos-badge:focus:not(:focus-visible) {
  outline: none;
}
.single-trip .single-trip-photos-badge:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.single-trip .single-trip-photos-badge:not(:hover):not(:active) {
  color: var(--primary-600);
  background-color: var(--white);
}
.single-trip .single-trip-section {
  margin-top: var(--element-spacing-sm);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--element-spacing);
  column-gap: /* grow(32, 112) */ clamp(2rem, 0.2170542636rem + 7.7519379845vw, 7rem);
}
.single-trip .single-trip-section :is(.single-trip-column-meta, .single-trip-column-main) > :first-child, .single-trip .single-trip-section :is(.single-trip-column-meta, .single-trip-column-main) > link:first-child + * {
  margin-top: 0;
}
.single-trip .single-trip-section :is(.single-trip-column-meta, .single-trip-column-main) > :last-child {
  margin-bottom: 0;
}
.single-trip .single-trip-section :is(.single-trip-column-meta, .single-trip-column-main) > :is(.lead-text, .lead-text-small):first-child > :first-child {
  margin-top: 0;
}
.single-trip .single-trip-section :is(.single-trip-column-meta, .single-trip-column-main) > :is(.lead-text, .lead-text-small):last-child > :last-child {
  margin-bottom: 0;
}
.single-trip .single-trip-section .single-trip-column-meta :where(dl, dd, dt) {
  padding: 0;
  margin: 0;
}
.single-trip .single-trip-section .single-trip-column-meta :where(dl, dd, dt) dt:not(:first-child) {
  padding-top: 0.75rem;
}
.single-trip .single-trip-section .single-trip-column-meta :where(dl, dd, dt) dd {
  font-size: /* grow(20, 26) */ clamp(1.25rem, 1.1162790698rem + 0.5813953488vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  padding-top: 0.375rem;
}
.single-trip .single-trip-section .single-trip-column-meta :where(dl, dd, dt) dd:not(:last-child) {
  padding-bottom: 0.75rem;
}
@media (width >= 992px /* md */) {
  .single-trip .single-trip-section {
    grid-template-columns: 8fr 4fr;
  }
  .single-trip .single-trip-section .single-trip-column-meta {
    order: 1;
  }
}
.single-trip .single-trip-booking-button {
  margin-top: var(--element-spacing-sm);
  display: flex;
  justify-content: center;
}