/* =====================================================
   FILE: components.css

   PURPOSE:
   Reusable interface and content components.

   THIS FILE COVERS:
   - Buttons
   - Button-style links
   - Inline links
   - Icons
   - Cards
   - Tour cards
   - CTA blocks
   - Forms
   - Badges
   - Breadcrumbs
   - Accordions
   - Reusable image treatments
   - Navigation components where reusable

   NOTES:
   Use this file for any styled element that appears
   in more than one place across the site.
===================================================== */

/* ==================================================
Site Loader
================================================== */

.site-loader {
  position: fixed;
  inset: 0;

  z-index: 2147483647;

  display: grid;
  place-items: center;

  background: var(--color-teal-3, #043235);

  opacity: 1;
  visibility: visible;
  pointer-events: all;

  transition:
    opacity 400ms ease,
    visibility 0s linear 400ms;
}


/* --------------------------------------------------
Logo
-------------------------------------------------- */

.site-loader__mark {
  display: block;

  width: clamp(180px, 18vw, 270px);
  max-width: 55vw;
  height: auto;

  opacity: 0;

  transform: scale(0.98);
  transform-origin: center;

  animation:
    site-loader-mark-in 450ms ease-out 100ms forwards;
}


/* --------------------------------------------------
Loaded
-------------------------------------------------- */

.site-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* --------------------------------------------------
Logo entrance
-------------------------------------------------- */

@keyframes site-loader-mark-in {

  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* --------------------------------------------------
Reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .site-loader__mark {
    opacity: 1;
    transform: none;
    animation: none;
  }

}


/* ==================================================
   01. Buttons
================================================== */

.btn{
  --btn-text: currentColor;
  --btn-text-hover: currentColor;
  --btn-border: currentColor;
  --btn-border-hover: currentColor;
  --btn-fill: transparent;

  position: relative;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  box-sizing: border-box;

  padding: var(--btn-padding-y) var(--btn-padding-x);

  border: var(--btn-border-width) solid var(--btn-border);
  border-radius: var(--btn-radius);

  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;

  color: var(--btn-text);
  background: transparent;

  text-decoration: none;
  cursor: pointer;

  transition:
    color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease);
}

/* Sliding fill */

.btn::before{
  content: "";

  position: absolute;
  inset: calc(var(--btn-border-width) * -1);
  z-index: -1;

  background: var(--btn-fill);

  transform: translateX(0);

  transition:
    transform var(--motion-speed) var(--motion-ease);
}

.btn:hover {
  color: var(--btn-text-hover);
  border-color: var(--btn-border-hover);
}

.btn:hover::before {
  transform: translateX(-100%);
}

/* ==================================================
   Booking button
================================================== */

.btn-book {
  --btn-text: #043235;
  --btn-text-hover: #043235;
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-radius: 0;
  --btn-border-width: 0;

  width: 100%;
  min-height: 100%;

  font-size: 17px;

  color: #043235;

  background-color: #e59a38;
  background-image:
    linear-gradient(
      to right,
      #e59a38 0 50%,
      #ebb360 50% 100%
    );
  background-position: left center;
  background-size: 200% 100%;

  transition:
    background-position var(--motion-speed) var(--motion-ease),
    color var(--motion-speed) var(--motion-ease);
}

.btn-book.btn-book-inline {
  width: auto !important;

  padding: var(--btn-padding-y) var(--btn-padding-x);

  border-radius: 40px !important;
}

.btn-book::before {
  display: none;
}

.btn-book:hover {
  color: #043235;

  background-position: right center;
}

/* ==================================================
   Button variants
================================================== */

.btn-on-dark{
  --btn-text: var(--color-bg-teal-3);
  --btn-text-hover: var(--color-bg-sand);
  --btn-border: var(--color-bg-sand);
  --btn-border-hover: var(--color-bg-sand);
  --btn-fill: var(--color-bg-sand);
}

.btn-on-light {
  --btn-text: var(--color-bg-sand);
  --btn-text-hover: var(--color-bg-teal-3);
  --btn-border: var(--color-bg-teal-3);
  --btn-border-hover: var(--color-bg-teal-3);
  --btn-fill: var(--color-bg-teal-3);
}

.btn-on-dark-home{
  --btn-text: var(--color-bg-teal-3);
  --btn-text-hover: var(--color-bg-dark-sand);
  --btn-border: var(--color-bg-dark-sand);
  --btn-border-hover: var(--color-bg-dark-sand);
  --btn-fill: var(--color-bg-dark-sand);
}

/* ==================================================
   Bricks form submit buttons
================================================== */

input.bricks-button.bricks-background-primary,
input.bricks-button.bricks-background-secondary {
  box-sizing: border-box;

  padding: var(--btn-padding-y) var(--btn-padding-x);

  border-width: var(--btn-border-width);
  border-style: solid;
  border-radius: var(--btn-radius);

  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;

  cursor: pointer;

  background-size: 200% 100% !important;
  background-position: left center !important;

  transition:
    color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease),
    background-position var(--motion-speed) var(--motion-ease);
}

/* Primary = btn-on-light */

input.bricks-button.bricks-background-primary {
  color: var(--color-bg-sand) !important;
  border-color: var(--color-bg-teal-3) !important;

  background-color: transparent !important;
  background-image:
    linear-gradient(
      to right,
      var(--color-bg-teal-3) 0 50%,
      transparent 50% 100%
    ) !important;
}

input.bricks-button.bricks-background-primary:is(:hover, :focus-visible) {
  color: var(--color-bg-teal-3) !important;
  border-color: var(--color-bg-teal-3) !important;

  background-position: right center !important;
}

/* Secondary = btn-on-dark */

input.bricks-button.bricks-background-secondary {
  color: var(--color-bg-teal-3) !important;
  border-color: var(--color-bg-sand) !important;

  background-color: transparent !important;
  background-image:
    linear-gradient(
      to right,
      var(--color-bg-sand) 0 50%,
      transparent 50% 100%
    ) !important;
}

input.bricks-button.bricks-background-secondary:is(:hover, :focus-visible) {
  color: var(--color-bg-sand) !important;
  border-color: var(--color-bg-sand) !important;

  background-position: right center !important;
}

/* ==================================================
   Contact form submit button
================================================== */

.contact-section__form
:is(input, button).bricks-button.bricks-background-primary {
  box-sizing: border-box;

  width: auto !important;

  padding: var(--btn-padding-y) var(--btn-padding-x);

  border-width: var(--btn-border-width);
  border-style: solid;
  border-color: var(--color-bg-teal-3) !important;
  border-radius: var(--btn-radius);

  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;

  color: var(--color-bg-sand) !important;

  cursor: pointer;

  background-color: transparent !important;
  background-image:
    linear-gradient(
      to right,
      var(--color-bg-teal-3) 0 50%,
      transparent 50% 100%
    ) !important;
  background-position: left center !important;
  background-size: 200% 100% !important;

  transition:
    color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease),
    background-position var(--motion-speed) var(--motion-ease);
}

.contact-section__form
:is(input, button).bricks-button.bricks-background-primary:is(
  :hover,
  :focus-visible
) {
  color: var(--color-bg-teal-3) !important;
  border-color: var(--color-bg-teal-3) !important;

  background-position: right center !important;
}

/* ==================================================
   02. Links
================================================== */

.link-inline,
.rich-text a,
.brxe-text a,
.brxe-text-basic a,
.brxe-post-content a,
a.tour-glance__value,
.tour-glance__value > a,
a.tour-card__glance-value,
.tour-card__glance-value > a {
  color: currentColor;
  font-weight: var(---link-font-weight-inline);
  text-decoration: none;
	font-style: normal;

  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% var(--link-underline-thickness);
  background-position: left 100%;

  transition:
    background-size var(--motion-speed) var(--motion-ease),
    color var(--motion-speed) var(--motion-ease);
}

.link-inline:hover,
.rich-text a:hover,
.brxe-text a:hover,
.brxe-text-basic a:hover,
.brxe-post-content a:hover,
a.tour-glance__value:hover,
.tour-glance__value > a:hover,
a.tour-card__glance-value:hover,
.tour-card__glance-value > a:hover {
  background-size: 0% var(--link-underline-thickness);
}

a.tour-glance__value,
a.tour-card__glance-value {
  display: inline-block;
  width: fit-content;
}

.link-arrow,
.rich-text a.link-arrow,
.brxe-text a.link-arrow,
.brxe-text-basic a.link-arrow,
.brxe-post-content a.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--link-arrow-gap);
  width: fit-content;

  color: currentColor;
  font-weight: var(--link-font-weight-inline);
  text-decoration: none;

  background-image: none;
}

.link-arrow:hover,
.rich-text a.link-arrow:hover,
.brxe-text a.link-arrow:hover,
.brxe-text-basic a.link-arrow:hover,
.brxe-post-content a.link-arrow:hover {
  background-size: 0;
}

.link-arrow::after,
.rich-text a.link-arrow::after,
.brxe-text a.link-arrow::after,
.brxe-text-basic a.link-arrow::after,
.brxe-post-content a.link-arrow::after {
  content: "";
  display: inline-block;
  width: var(--link-arrow-size);
  height: var(--link-arrow-size);
  background-color: currentColor;
  flex-shrink: 0;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  transform: translateY(var(--link-arrow-y));
  transition: transform var(--motion-speed) var(--motion-ease);
}

.link-arrow:hover::after,
.rich-text a.link-arrow:hover::after,
.brxe-text a.link-arrow:hover::after,
.brxe-text-basic a.link-arrow:hover::after,
.brxe-post-content a.link-arrow:hover::after {
  transform: translateY(var(--link-arrow-y)) translateX(var(--link-arrow-shift));
}

/* ==================================================
   Combined Inline Link + Arrow
================================================== */

.link-inline.link-arrow {
  position: relative;

  /* Link-arrow normally removes background underlines */
  background-image: none;
}

/* Animated underline beneath text only */

.link-inline.link-arrow::before {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: calc(
    100% - var(--link-arrow-size) - var(--link-arrow-gap)
  );
  height: var(--link-underline-thickness);

  background-color: currentColor;

  transform: scaleX(1);
  transform-origin: left center;

  transition:
    transform var(--motion-speed) var(--motion-ease);
}

/* Retract underline on hover/focus */

.link-inline.link-arrow:hover::before,
.link-inline.link-arrow:focus-visible::before {
  transform: scaleX(0);
}

/* ==================================================
   Multi-line Link
================================================== */

.link-inline.link-arrow.multi-line-link {
  display: inline;

  width: auto;
  max-width: 100%;

  text-align: center;

  background-image:
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size:
    100% var(--link-underline-thickness);
  background-position:
    left 100%;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* Remove standard combined-link underline */

.link-inline.link-arrow.multi-line-link::before {
  display: none;
}


/* Retract each line underline */

.link-inline.link-arrow.multi-line-link:hover,
.link-inline.link-arrow.multi-line-link:focus-visible {
  background-size:
    0% var(--link-underline-thickness);
}

/* ==================================================
   PAGE HERO
================================================== */

.page-hero {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding-inline: 0 !important;

  overflow: clip;

  background: var(--color-bg-sand);
  color: var(--color-text-light-bg);
}

/* ==================================================
   PAGE HERO: MEDIA
================================================== */

.page-hero__media {
  --parallax-y: 0px;

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: none;
  height: 75vh;

  margin-inline: 0;

  overflow: hidden;
}


/* Top gradient
-------------------------------------------------- */

.page-hero__media::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 2;

  display: block;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.36) 0%,
      rgba(0, 0, 0, 0.22) 12%,
      rgba(0, 0, 0, 0) 32%
    );

  pointer-events: none;
}

/* ==================================================
   PAGE HERO: IMAGE LOAD
================================================== */

.page-hero__image {
  opacity: 0;

  transition:
    opacity 250ms ease;
}


/* Image ready
-------------------------------------------------- */

.page-hero__media.is-image-ready .page-hero__image {
  opacity: 1;
}


/* Reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .page-hero__image {
    transition: none;
  }

}


/* Parallax image element
-------------------------------------------------- */

.page-hero__image {
  position: absolute;

  top: -18%;
  left: 0;
  z-index: 0;

  display: block;

  width: 100%;
  height: 136% !important;

  margin: 0;
  padding: 0;

  border-radius: 0 !important;

  transform:
    translate3d(0, var(--parallax-y), 0)
    scale(1.08);

  transform-origin: center center;

  will-change: transform;
}

.page-hero__image picture,
.page-hero__image figure {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border-radius: 0 !important;
}

.page-hero__image:is(img),
.page-hero__image img {
  display: block;

  width: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center;

  border-radius: 0 !important;
}

/* Image nested inside a Bricks wrapper */

.page-hero__image img {
  height: 100% !important;
}

/* Page hero video
-------------------------------------------------- */

.page-hero__video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.page-hero__video video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* ==================================================
   Image CTA
================================================== */

.image-cta {
  width: 100%;
}


/* ==================================================
   Inner
================================================== */

.image-cta__inner {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: clamp(380px, 30vw, 500px);

  overflow: hidden;

  border-radius: var(--radius-media);
}


/* ==================================================
   Media
================================================== */

.image-cta__media {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  --parallax-y: 0px;
}

.image-cta__image {
  position: absolute;

  top: -20%;
  left: 0;

  display: block;

  width: 100%;
  height: 140%;

  object-fit: cover;

  /*
   Keep parallax separate from any transform
   applied by Bricks/global image effects.
  */
  translate: 0 var(--parallax-y, 0px);

  transform: scale(1.03);

  will-change: translate;
}


/* ==================================================
   Image CTA: Video
================================================== */

.image-cta-video,
.image-cta-video > *,
.image-cta-video video {
  width: 100%;
  height: 100%;
}

.image-cta-video video {
  display: block;

  max-width: none !important;

  object-fit: cover;
  object-position: center;

  border-radius: 0 !important;
}


/* ==================================================
   Overlay
================================================== */

.image-cta__overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: rgba(0, 0, 0, 0.3);
}


/* ==================================================
   Content
================================================== */

.image-cta__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1.25rem;

  width: min(calc(100% - 40px), 760px);

  padding-block:
    clamp(60px, 7vw, 100px);

  text-align: center;

  color: var(--color-text-dark-bg);
}

.image-cta__heading {
  max-width: 18ch;

  margin: 0;

  font-weight: var(--weight-body);

  color: inherit;
}

.image-cta__text {
  max-width: 52ch;

  margin: 0;

  color: inherit;
}

.image-cta__content .btn {
  margin-top: 0.35rem;
}


/* ==================================================
   Image CTA: Gift Variant
================================================== */

.image-cta-gift .image-cta__inner {
  min-height:
    clamp(304px, 24vw, 400px);
}

.image-cta-gift .image-cta__content {
  padding-block:
    clamp(48px, 5.6vw, 80px);
}


/* ==================================================
   Phone
================================================== */

@media (max-width: 767px) {

  .image-cta__inner {
    min-height: 360px;

    border-radius: var(--radius-media);
  }

  .image-cta__content {
    width: calc(100% - 40px);

    padding-block: 60px;
  }

  .image-cta__heading {
    max-width: 15ch;
  }

  .image-cta__text {
    max-width: 34ch;
  }


  /* Gift */

  .image-cta-gift .image-cta__inner {
    min-height: 320px;
  }

  .image-cta-gift .image-cta__content {
    padding-block: 48px;
  }

}

/* ==================================================
   Image CTA: Full Width Variant
================================================== */

.image-cta--full .content-inner {
  width: 100%;
  max-width: none;

  padding-inline: 0;
}

.image-cta--full .image-cta__inner {
  min-height: clamp(430px, 34vw, 560px);

  border-radius: 0;
}

/* ==================================================
Image CTA Actions
================================================== */

.image-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 1.5rem;
}

.image-cta__actions .btn {
  width: 170px;
  flex: 0 0 170px;

  padding-inline: 0;
}


/* FAQ link */

.image-cta__faq {
  margin-top: 1rem;

  font-size: var(--text-small);
  text-align: center;
}


/* ==================================================
Image CTA - Phone
================================================== */

@media (max-width: 767px) {

  .image-cta__actions .btn {
    width: 140px;
    flex: 0 0 140px;
  }

}


/* ==================================================
   PAGE HERO: CONTENT PANEL
================================================== */

.page-hero__panel {
  box-sizing: border-box;

  width: 100%;

  padding-top: var(--section-space-y-small);
  padding-right: 0;
  padding-bottom: var(--section-space-y-large);
  padding-left: 0;

  background: var(--color-bg-sand);
  color: var(--color-text-light-bg);
}

.page-hero__inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: start;

  width: 100%;
  padding-inline: var(--site-gutter);

  gap: clamp(2rem, 4vw, 6rem);
}


/* ==================================================
   PAGE HERO: HEADING
================================================== */

.page-hero__heading {
  max-width: 8em;

  margin: 0;

  color: inherit;
}


/* ==================================================
   PAGE HERO: INTRO
================================================== */

.page-hero__intro {
  width: 100%;
  max-width: none;

  margin: 0;

  font-family: var(--font-martina);
  font-size: var(--text-h3);
  font-weight: var(--weight-light, 300);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-heading-loose);
}

.page-hero__intro :is(h2, h3, h4, p) {
  margin: 0;

  font-family: inherit;
  font-size: var(--text-h3);
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}


/* ==================================================
   PAGE HERO: BODY COLUMN
================================================== */

.page-hero__body-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;

  gap: clamp(2rem, 3vw, 3rem);
}

.page-hero__body {
  width: 100%;
  max-width: none;

  margin: 0;

  font-size: var(--text-med);
  line-height: var(--lh-body);
}

.page-hero__body p {
  margin: 0 0 1em;
}

.page-hero__body p:last-child {
  margin-bottom: 0;
}

.page-hero__body a {
  color: inherit;

  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (min-width: 992px) {
  .page-hero__heading,
  .page-hero__intro,
  .page-hero__body-column {
    align-self: start;
  }

   .page-hero__body-column {
    padding-top: clamp(1.6rem, 1.5vw, 2rem);
  }
}


/* ==================================================
   PAGE HERO: TABLET
================================================== */

@media (max-width: 991px) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 1fr);

    gap: clamp(2.5rem, 6vw, 4.5rem);
  }

  .page-hero__heading,
  .page-hero__intro,
  .page-hero__body-column {
    width: 100%;
    max-width: 72rem;
  }
	.page-hero__media {
    height: 50vh;
  }

  .page-hero__image {
    top: -20%;

    height: 140% !important;

    transform:
      translate3d(0, var(--parallax-y), 0)
      scale(1.1);
  }
}


/* ==================================================
   PAGE HERO: MOBILE
================================================== */

@media (max-width: 767px) {
  .page-hero__body {
    font-size: var(--text-body);
  }
}

/* ==================================================
   04. MEDIA
================================================== */

/* Default Bricks image treatment */
.brxe-image:not(.image-no-radius) {
  overflow: hidden;
  border-radius: var(--radius-media);
}

.brxe-image:not(.image-no-radius) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* ==================================================
   06. IMAGE ACCORDION
================================================== */

.info-accordion {
  --info-accordion-gap: clamp(0.75rem, 2vw, 1.5rem);
  --info-accordion-radius: 24px;
  --info-accordion-min-height: clamp(28rem, 58vw, 42rem);
  --info-accordion-active-grow: 3;
  --info-accordion-overlay: 0.3;
  --info-accordion-content-padding: clamp(1.5rem, 3vw, 2.5rem);

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100%;
  min-height: var(--info-accordion-min-height);
  gap: var(--info-accordion-gap);
}

.info-accordion__item {
  position: relative;
  isolation: isolate;

  display: flex;
  flex: 1 1 0 !important;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;

  width: auto !important;
  min-width: 0 !important;
  min-height: var(--info-accordion-min-height);

  overflow: hidden;
  border: none;
  border-radius: var(--info-accordion-radius);
  background: transparent;
  cursor: pointer;

  transition: flex-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.info-accordion__item.is-active {
  flex: var(--info-accordion-active-grow) 1 0 !important;
}

.info-accordion__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;
  background: rgba(0, 0, 0, var(--info-accordion-overlay));
  pointer-events: none;
}

.info-accordion__media {
  position: absolute;
  inset: 0;
  z-index: -2;

  overflow: hidden;
  border-radius: inherit;
}

.info-accordion__media .brxe-image,
.info-accordion__media figure,
.info-accordion__media picture {
  display: block;

  width: 100%;
  height: 100%;
  margin: 0;

  overflow: hidden;
  border-radius: inherit;
}

.info-accordion__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: inherit;
}

.info-accordion__content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

  width: 100%;
  height: 100%;
  min-height: inherit;
  max-width: 42rem;
  padding: var(--info-accordion-content-padding);

  color: var(--color-text-dark-bg);
  text-align: left;
}

.info-accordion__title {
  width: 100%;
  margin: 0;
  color: currentColor;
}

.info-accordion__body {
  position: absolute;
  left: var(--info-accordion-content-padding);
  right: var(--info-accordion-content-padding);
  bottom: var(--info-accordion-content-padding);

  width: auto;
  max-width: 56rem;
  max-height: none;
  margin: 0;

  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;

  transition:
    opacity 0.16s ease 0s,
    visibility 0s linear 0.16s;
}

.info-accordion__item.is-active .info-accordion__body {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.55s ease 0.38s,
    visibility 0s linear 0s;
}

.info-accordion__body p {
  margin: 0;
}

.info-accordion__body a {
  position: relative;
  z-index: 2;

  color: currentColor;
  pointer-events: auto;
}

/* Desktop: body text spans 75% of the active panel */
@media (min-width: 992px) {
  .info-accordion__content {
    max-width: none;
  }

  .info-accordion__body {
    right: auto;
    width: 75%;
    max-width: none;
  }
}


/* Tablet and mobile: stacked image cards */

@media (max-width: 991px) {
  .info-accordion {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.25rem;
    min-height: 0;
  }

  .info-accordion__item,
  .info-accordion__item.is-active {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 26rem;
    cursor: default;
  }

  .info-accordion__content {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: inherit;
    padding: clamp(1.75rem, 4vw, 2.5rem);
  }

  .info-accordion__title {
    width: 100%;
    max-width: 100%;
  }

  .info-accordion__body,
  .info-accordion__item.is-active .info-accordion__body {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin-top: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .info-accordion__body {
    font-size: var(--text-body);
    line-height: 1.35;
  }
}

/* Small phones: taller cards */

@media (max-width: 477px) {
  .info-accordion__item,
  .info-accordion__item.is-active {
    min-height: 32rem;
  }

  .info-accordion__content {
    padding: 1.5rem;
  }
}

/* Respect reduced motion */

@media (prefers-reduced-motion: reduce) {
  .info-accordion__item,
  .info-accordion__body,
  .info-accordion__item.is-active .info-accordion__body {
    transition: none;
  }
}

/* ==================================================
   TEXT ACCORDION
================================================== */

.ne-accordion {
  --ne-accordion-color: var(--color-text-light-bg);
  --ne-accordion-border-color: currentColor;
  --ne-accordion-column-gap: clamp(2rem, 5vw, 5rem);
  --ne-accordion-trigger-padding-y: 1.25rem;
  --ne-accordion-content-padding-bottom: 1.5rem;
  --ne-accordion-icon-size: 18px;

  display: flex;
  align-items: flex-start;
  gap: var(--ne-accordion-column-gap);

  width: 100%;

  color: var(--ne-accordion-color);
}

.ne-accordion__source {
  display: contents;
}

.ne-accordion__column {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
}


/* ==================================================
   Accordion Item
================================================== */

.ne-accordion__item {
  width: 100%;
  min-width: 0;

  border-top: 1px solid var(--ne-accordion-border-color);
}

.ne-accordion__column
  .ne-accordion__item:last-child {
  border-bottom: 1px solid var(--ne-accordion-border-color);
}


/* ==================================================
   Accordion Trigger
================================================== */

.ne-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  width: 100%;
  min-height: 0;

  margin: 0 !important;

  padding:
    var(--ne-accordion-trigger-padding-y)
    0 !important;

  color: inherit;
  background: transparent;

  border: 0;

  text-align: left;
  cursor: pointer;
}

.ne-accordion__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.35rem;
}


/* ==================================================
   Accordion Title
================================================== */

.ne-accordion__title {
  align-self: center;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit;

  font-family: var(--font-heading);
  font-size: var(--text-h6);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-heading);
}


/* ==================================================
   Accordion Icon
================================================== */

.ne-accordion__icon {
  flex: 0 0 auto;
  align-self: center;

  display: block;

  width: var(--ne-accordion-icon-size);
  height: var(--ne-accordion-icon-size);

  margin: 0 !important;
  padding: 0 !important;

  background-color: currentColor;

  -webkit-mask:
    url("/wp-content/uploads/2026/07/arrow-right.svg")
    center / contain no-repeat;

  mask:
    url("/wp-content/uploads/2026/07/arrow-right.svg")
    center / contain no-repeat;

  font-size: 0;
  line-height: 1;

  transform: rotate(0deg);
  transform-origin: center;

  transition:
    transform
    0.3s
    var(--motion-ease);
}


/* Remove the original Font Awesome glyph */

.ne-accordion__icon::before {
  display: none !important;
  content: none !important;
}


/* Open icon */

.ne-accordion__trigger[aria-expanded="true"]
  .ne-accordion__icon {
  transform: rotate(90deg);
}


/* ==================================================
   Accordion Panel
================================================== */

.ne-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;

  min-height: 0;
  margin: 0;
  padding: 0;

  overflow: hidden;
  opacity: 0;

  transition:
    grid-template-rows
      0.75s
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity
      0.35s
      ease;
}

.ne-accordion__panel > * {
  min-height: 0;
  overflow: hidden;
}


/* Closed panel reset */

.ne-accordion__item:not(.is-open)
  .ne-accordion__panel {
  grid-template-rows: 0fr !important;

  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 0;
}


/* Open panel */

.ne-accordion__item.is-open
  .ne-accordion__panel {
  grid-template-rows: 1fr;

  opacity: 1;

  transition:
    grid-template-rows
      0.85s
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity
      0.45s
      ease
      0.08s;
}


/* ==================================================
   Accordion Content
================================================== */

.ne-accordion__content,
.ne-accordion__content > p{
  min-height: 0;

  margin: 0;
  padding-bottom: 0;

  color: inherit;

  font-size: var(--text-body-small);
  line-height: var(--lh-body);

  transition:
    padding-bottom
    0.45s
    ease;
}


/* Closed content reset */

.ne-accordion__item:not(.is-open)
  .ne-accordion__content {
  min-height: 0 !important;

  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  overflow: hidden;
}


/* Open content spacing */

.ne-accordion__item.is-open
  .ne-accordion__content {
  padding-bottom:
    var(--ne-accordion-content-padding-bottom);
}


/* Paragraph spacing */

.ne-accordion__content p {
  margin: 0;
}

.ne-accordion__content p + p {
  margin-top: 0.85em;
}


/* ==================================================
   Text Accordion: Mobile
================================================== */

@media (max-width: 767px) {
  .ne-accordion {
    flex-direction: column;
    gap: 0;
  }

  .ne-accordion__column {
    width: 100%;
  }

  .ne-accordion__column:not(:last-child)
    .ne-accordion__item:last-child {
    border-bottom: 0;
  }
}


/* ==================================================
   Text Accordion: Reduced Motion
================================================== */

@media (prefers-reduced-motion: reduce) {
  .ne-accordion__panel,
  .ne-accordion__item.is-open
    .ne-accordion__panel,
  .ne-accordion__content,
  .ne-accordion__icon {
    transition: none;
  }
}

/* ==================================================
   TESTIMONIAL: LARGE
================================================== */

.testimonial-large {
  width: 100%;

  color: inherit;
  text-align: center;
}

.testimonial-large blockquote.testimonial-content-wrapper {
  max-width: 900px;

  margin: 0 auto;

  font-family: var(--font-martina);
  font-size: var(--text-h3);
  font-weight: var(--weight-light, 300);
  line-height: var(--lh-heading-standard);
  letter-spacing: var(--ls-heading-loose);

  text-align: center;
}


/* Metadata
-------------------------------------------------- */

.testimonial-large .testimonial-meta-wrapper,
.testimonial-large .testimonial-meta,
.testimonial-large .testimonial-name,
.testimonial-large .testimonial-title {
  text-align: center;
}

.testimonial-large .testimonial-meta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.testimonial-large .testimonial-name,
.global-parallax__heading-sub,
.home-why__author {
  margin: 0;

  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--lh-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testimonial-large .testimonial-title,
.global-parallax__heading-source,
.home-why__source {
  margin: 0.25rem 0 0;

  font-family: var(--font-martina);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--lh-small);
  letter-spacing: 0.03em;
}


/* ==================================================
   GLOBAL PARALLAX SECTION
================================================== */

.global-parallax {
  --parallax-y: 0px;
  --global-parallax-overlay: 0.24;

  position: relative;
  isolation: isolate;

  display: grid !important;
  place-items: center;

  min-height: 75vh;
  min-height: 75svh;

  padding: 0;

  overflow: hidden;

  color: var(--color-text-dark-bg);
  background: var(--color-bg-teal-3);
}


/* Background image
-------------------------------------------------- */

.global-parallax__media {
  position: absolute;
  inset: -18% 0;

  z-index: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  transform:
    translate3d(0, var(--parallax-y), 0)
    scale(1.08);

  transform-origin: center center;

  will-change: transform;

  pointer-events: none;
}


/* Image overlay
-------------------------------------------------- */

.global-parallax::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  display: block;

  background: rgba(
    0,
    0,
    0,
    var(--global-parallax-overlay)
  );

  pointer-events: none;
}


/* Optional content
-------------------------------------------------- */

.global-parallax__content {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;

  padding-inline: var(--site-gutter);

  color: inherit;
  text-align: center;
}

.global-parallax__heading {
  width: 100%;
  max-width: 60rem;

  margin: 0;

	font-family: var(--font-martina);
	line-height: var(--lh-heading-standard);
	letter-spacing:var(--ls-heading-loose);
	font-weight: var(--weight-light);
  color: inherit;
  text-align: center;
}

.global-parallax__heading-sub {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.global-parallax__heading-sub:empty,
.global-parallax__heading-source:empty {
  display: none;
}


/* Tablet and mobile
-------------------------------------------------- */

@media (max-width: 991px) {
  .global-parallax {
    min-height: 50vh;
    min-height: 50svh;
  }

  .global-parallax__media {
    inset: -20% 0;

    transform:
      translate3d(0, var(--parallax-y), 0)
      scale(1.1);
  }
}


/* Landscape phone
-------------------------------------------------- */

@media (max-width: 767px) and (orientation: landscape) {
  .global-parallax {
    min-height: 100vh;
    min-height: 100svh;
  }
}


/* Reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .global-parallax__media {
    transform: scale(1.04);
    will-change: auto;
  }
}

/* ==================================================
   ALL SLIDER PAGINATION BARS
================================================== */

.slider-pagination-bars,
.testimonial-large,
.tour-gallery {
  --slider-pagination-margin-top: clamp(3rem, 5vw, 4rem);
  --slider-pagination-bar-width: 20px;
  --slider-pagination-bar-height: 2px;
  --slider-pagination-column-gap: 6px;
  --slider-pagination-row-gap: 8px;
  --slider-pagination-bar-color: rgba(0, 0, 0, 0.35);
  --slider-pagination-bar-active-color: currentColor;
}

/* On-dark testimonial slider */
.testimonial-large {
  --slider-pagination-bar-color: rgba(246, 245, 233, 0.75);
  --slider-pagination-bar-active-color: var(--color-bg-sand);
}

/* On-sand gallery slider */
.tour-gallery {
  color: var(--color-text-light-bg);
  --slider-pagination-bar-color: rgba(0, 0, 0, 0.35);
  --slider-pagination-bar-active-color: var(--color-text-light-bg);
}

.slider-pagination-bars .swiper-pagination,
.slider-pagination-bars .swiper-horizontal > .swiper-pagination-bullets,
.slider-pagination-bars .swiper-pagination-bullets.swiper-pagination-horizontal,
.testimonial-large .swiper-pagination,
.testimonial-large .swiper-horizontal > .swiper-pagination-bullets,
.testimonial-large .swiper-pagination-bullets.swiper-pagination-horizontal,
.tour-gallery .swiper-pagination,
.tour-gallery .swiper-horizontal > .swiper-pagination-bullets,
.tour-gallery .swiper-pagination-bullets.swiper-pagination-horizontal {
  position: static !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: var(--slider-pagination-row-gap) var(--slider-pagination-column-gap);

  width: 100% !important;
  max-width: none !important;
  margin: var(--slider-pagination-margin-top) auto 0 !important;
  padding: 0;
}

.slider-pagination-bars .swiper-pagination-bullet,
.testimonial-large .swiper-pagination-bullet,
.tour-gallery .swiper-pagination-bullet {
  width: var(--slider-pagination-bar-width) !important;
  height: var(--slider-pagination-bar-height) !important;
  min-width: var(--slider-pagination-bar-width);
  min-height: var(--slider-pagination-bar-height);

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--slider-pagination-bar-color) !important;

  opacity: 1 !important;
  transform: none !important;
}

.slider-pagination-bars .swiper-pagination-bullet-active,
.testimonial-large .swiper-pagination-bullet-active,
.tour-gallery .swiper-pagination-bullet-active {
  width: var(--slider-pagination-bar-width) !important;
  height: var(--slider-pagination-bar-height) !important;

  border-radius: 0 !important;
  background: var(--slider-pagination-bar-active-color) !important;

  opacity: 1 !important;
  transform: none !important;
}

.tour-gallery {
  --slider-pagination-bar-width: 14px;
  --slider-pagination-column-gap: 5px;
  --slider-pagination-row-gap: 8px;
}

/* ==================================================
   Tour Card
================================================== */

.tour-card {
  --tour-card-radius: clamp(1.75rem, 2.8vw, 2.4rem);
  --tour-card-height: clamp(45rem, 58vw, 59.5rem);
  --tour-card-button-height: clamp(4.25rem, 5vw, 5rem);
  --tour-card-blurb-height: clamp(5.75rem, 6.2vw, 6.75rem);
  --tour-card-image-position: center bottom;

  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: var(--tour-card-height);

  overflow: hidden;
  border: 0;
  border-radius: var(--tour-card-radius);

  background: transparent;
  color: var(--color-text-dark-bg);

  box-shadow: 0 1.25rem 3rem rgba(4, 50, 53, 0.14);
}

/* Media layer */

.tour-card__media {
  position: absolute;
  inset: 0 0 var(--tour-card-button-height) 0;
  z-index: 0;
  isolation: isolate;

  width: 100%;
  height: auto;
  overflow: hidden;

  border-radius: var(--tour-card-radius) var(--tour-card-radius) 0 0 !important;
}

/* Zoom the Bricks image wrapper, not the img, to avoid conflict with global image reveal */

.tour-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  opacity: 1 !important;
  transform: scale(1) !important;
  transform-origin: center bottom;
  transition: transform 0.9s var(--motion-ease) !important;
  will-change: transform;
}

.tour-card__image,
.tour-card__image figure,
.tour-card__image picture,
.tour-card__image img {
  display: block;

  width: 100% !important;
  height: 100% !important;
  margin: 0;

  border-radius: 0 !important;
}

.tour-card__image img {
  max-width: none !important;

  object-fit: cover !important;
  object-position: var(--tour-card-image-position) !important;
}

.tour-card:hover .tour-card__image,
.tour-card:focus-within .tour-card__image {
  transform: scale(1.025) !important;
}

/* ==================================================
   Tour Card: Gradient Overlay
================================================== */

/* Remove the old media overlay from vertical cards */

.tour-card:not(.tour-card--horizontal)
  .tour-card__media::after {
  display: none !important;
  content: none !important;
}


/*
Keep the gradient overlay limited to vertical tour
cards. Horizontal cards share the same class names.
*/

.tour-card:not(.tour-card--horizontal)
  .tour-card__content {
  isolation: isolate;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tour-card:not(.tour-card--horizontal)
  .tour-card__content::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.02) 18%,
      rgba(0, 0, 0, 0.12) 36%,
      rgba(0, 0, 0, 0.32) 54%,
      rgba(0, 0, 0, 0.52) 72%,
      rgba(0, 0, 0, 0.68) 100%
    );

  pointer-events: none;
}

.tour-card:not(.tour-card--horizontal)
  .tour-card__content > * {
  position: relative;
  z-index: 1;
}

/* Content */

.tour-card__content {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0 !important;

  width: 100%;
  min-height: var(--tour-card-height);
  height: var(--tour-card-height);

  pointer-events: none;
}

/* Heading */

.tour-card__heading {
  margin-top: auto !important;

  padding:
    clamp(1.25rem, 1.8vw, 1.8rem)
    clamp(1.35rem, 2vw, 2rem)
    clamp(0.45rem, 0.7vw, 0.8rem);
}

.tour-card__heading .tour-card__title {
  margin: 0 0 0.05em !important;

  font-weight: var(--weight-heading);
  font-size: clamp(1.7rem, 2.2vw, 2.8rem);
  line-height: 0.9 !important;
}

.tour-card__subtitle {
  max-width: 34rem;
  margin: 8px 0 8px !important;

  font-size: clamp(1.1rem, 1.05vw, 1.35rem);
  line-height: 1;
}

/* Glance metadata */

.tour-card__glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;

  width: 100%;
}

.tour-card__glance-item {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;

  min-width: 0;

  padding:
    clamp(0.6rem, 0.8vw, 0.8rem)
    clamp(1.35rem, 1.8vw, 1.8rem);

  background-color: transparent;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.tour-card__glance-item:nth-of-type(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.55);
}

.tour-card__glance-label {
  margin: 0;

  font-size: var(--text-caption);
  line-height: 1;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-card__glance-value {
  min-width: 0;
  margin: 0;

  font-size: var(--text-small);
  line-height: 1.1;
}

/* Blurb */

.tour-card__body {
  display: grid !important;
  align-items: center !important;

  flex: 0 0 var(--tour-card-blurb-height) !important;
  height: var(--tour-card-blurb-height) !important;

  box-sizing: border-box;
  margin: 0;

  padding-block: clamp(0.4rem, 0.55vw, 0.55rem) !important;
  padding-inline: clamp(1.15rem, 1.45vw, 1.45rem) !important;

  background-color: transparent;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0 !important;
}

.tour-card__blurb {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  margin: 0 !important;
  overflow: hidden;

  font-size: var(--text-small);
  line-height: 1.32;
}

/* ==================================================
   Tour Card: Link + Visual Button
================================================== */

/*
Outer card is the actual link.
Only applies when .tour-card renders as <a>.
*/

a.tour-card {
  color: var(--color-text-dark-bg);
  text-decoration: none !important;
  cursor: pointer;
}


/* Visual CTA */

.tour-card__button {
  position: relative;
  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: var(--tour-card-button-height);
  margin: 0 !important;

  border: 0 !important;
  border-radius:
    0
    0
    var(--tour-card-radius)
    var(--tour-card-radius)
    !important;

  box-shadow: none !important;
  transform: none !important;

  color: var(--color-bg-sand) !important;
  background-color: var(--color-bg-teal-3) !important;
  background-image: none !important;

  pointer-events: none;

  transition:
    background-color 0.35s var(--motion-ease),
    color 0.35s var(--motion-ease)
    !important;
}


/* No decorative button pseudos */

.tour-card__button::before,
.tour-card__button::after {
  display: none !important;
  content: none !important;
}


/* Mouse hover */

a.tour-card:hover .tour-card__button {
  color: var(--color-bg-sand) !important;
  background-color: #074647 !important;
}


/* Keyboard focus */

a.tour-card:focus-visible {
  outline:
    3px solid
    var(--color-accent);

  outline-offset: 4px;
}

a.tour-card:focus-visible .tour-card__button {
  color: var(--color-bg-sand) !important;
  background-color: #074647 !important;
}


/* Hover */

.tour-card__button:hover,
.tour-card:hover .tour-card__button {
  color: var(--color-bg-sand) !important;
  background-color: #074647 !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}


/* Keyboard focus */

.tour-card__button:focus-visible {
  color: var(--color-bg-sand) !important;
  background-color: #074647 !important;

  outline:
    3px solid
    var(--color-accent) !important;

  outline-offset: -5px;
}


/*
Also identify the whole card when its link
receives keyboard focus.
*/

.tour-card:has(
  .tour-card__button:focus-visible
) {
  outline:
    3px solid
    var(--color-accent);

  outline-offset: 4px;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .tour-card__image,
  .tour-card:hover .tour-card__image,
  .tour-card:focus-within .tour-card__image {
    transform: none !important;
    transition: none !important;
  }

  .tour-card__button {
    transition: none !important;
  }
}

.tour-card__badges {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.tour-card__badges:empty {
  display: none;
}

.tour-card__badge,
.home-events__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;

  padding: 0.35em 0.75em 0.3em;
  border-radius: 999px;

  background: var(--color-accent);
  color: var(--color-text-light-bg);

  font-family: var(--text-body);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}


/* ==================================================
   Tour Card: mobile height
================================================== */

@media (max-width: 600px) {
  .tour-card {
    --tour-card-height: clamp(49rem, 131vw, 56rem);
  }
}

/* ==================================================
   Tour Cards — Mobile
================================================== */

@media (max-width: 767px) {

  /* Softer, longer gradient */

  .tour-card:not(.tour-card--horizontal)
  .tour-card__content::before {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 8%,
      rgba(0, 0, 0, 0.10) 20%,
      rgba(0, 0, 0, 0.20) 34%,
      rgba(0, 0, 0, 0.32) 50%,
      rgba(0, 0, 0, 0.44) 70%,
      rgba(0, 0, 0, 0.54) 100%
    );
}

  /* Let the gradient do more of the work */

  .tour-card__glance-item {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* ==================================================
   Tour Card: Simple Variant
================================================== */

.tour-card--simple {
  --tour-card-height: clamp(44rem, 56vw, 56rem);
  --tour-card-button-height: clamp(4.25rem, 5vw, 5rem);
  --tour-card-blurb-height: clamp(4.75rem, 5.2vw, 5.75rem);
}

/* Simple vertical card gradient */

.tour-card--simple:not(.tour-card--horizontal)
  .tour-card__content::before {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.03) 30%,
      rgba(0, 0, 0, 0.12) 46%,
      rgba(0, 0, 0, 0.28) 60%,
      rgba(0, 0, 0, 0.48) 74%,
      rgba(0, 0, 0, 0.66) 100%
    );
}

/* Tighter heading area */

.tour-card--simple .tour-card__heading {
  padding:
    clamp(1rem, 1.4vw, 1.5rem)
    clamp(1.15rem, 1.6vw, 1.6rem)
    clamp(0.35rem, 0.55vw, 0.65rem);
}

.tour-card--simple .tour-card__title {
  font-size: clamp(1.7rem, 1.85vw, 2.25rem);
	line-height:var(--lh-heading-tight);
	padding-bottom:.5rem;
}

.tour-card--simple .tour-card__subtitle {
  margin-bottom: 4px !important;
  font-size: clamp(1rem, 1vw, 1.2rem);
}

/* Tighter metadata */

.tour-card--simple .tour-card__glance-item {
  padding:
    clamp(0.5rem, 0.65vw, 0.65rem)
    clamp(1rem, 1.3vw, 1.3rem);
}

/* Tighter blurb if keeping it */

.tour-card--simple .tour-card__body {
  padding-block: clamp(0.35rem, 0.45vw, 0.45rem) !important;
  padding-inline: clamp(1rem, 1.3vw, 1.3rem) !important;
}

.tour-card--simple .tour-card__blurb {
  line-height: 1.28;
}

/* Smaller mobile simple card */

@media (max-width: 600px) {
  .tour-card--simple{
    --tour-card-height: clamp(44rem, 128vw, 56rem);
  }
}

/* ==================================================
   Tour Card Grid Spacing
================================================== */

.tour-card-grid {
  --layout-grid-column-gap:
    clamp(2rem, 3.5vw, 4rem);

  --layout-grid-row-gap:
    clamp(3rem, 5vw, 6rem);
}


@media (max-width: 1300px) {

  .tour-card-grid {
    --layout-grid-column-gap:
      clamp(1.75rem, 3vw, 3rem);

    --layout-grid-row-gap:
      clamp(2.5rem, 5vw, 4rem);
  }
}


@media (max-width: 767px) {

  .tour-card-grid {
    --layout-grid-row-gap:
      clamp(2rem, 8vw, 3rem);
  }
}

/* ==================================================
   Tour Card List
================================================== */

.tour-card-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 4.5vw, 5rem);

  width: 100%;
}

.tour-card-list .tour-card-loop-item {
  width: 100%;
}


/* ==================================================
   Tour Card: Horizontal Variant
================================================== */

.tour-card--horizontal {
  --tour-card-height: clamp(36rem, 48vh, 54rem) !important;
  --tour-card-image-position: center center;
  --tour-card-horizontal-pad-x: clamp(0.75rem, 1vw, 1rem);
  --tour-card-horizontal-pad-y: clamp(1.1rem, 1.6vw, 1.65rem);
  --tour-card-horizontal-text: clamp(1.05rem, 1.1vw, 1.35rem);

  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(22rem, 1fr);
  column-gap: clamp(1.5rem, 2.5vw, 3rem);

  width: 100%;
  min-height: var(--tour-card-height) !important;
  height: var(--tour-card-height);

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: var(--color-text-light-bg);

  box-shadow: none !important;
}

.tour-card--horizontal
  .tour-card__content::before {
  display: none !important;
  content: none !important;
}

/* Image block */

.tour-card--horizontal .tour-card__media {
  position: relative !important;
  inset: auto !important;
  z-index: 1;

  width: 100%;
  height: 100%;
  overflow: hidden !important;

  border-radius: var(--tour-card-radius) !important;
  clip-path: inset(0 round var(--tour-card-radius));
}

.tour-card--horizontal .tour-card__media::after {
  display: none !important;
  content: none !important;
}

.tour-card--horizontal .tour-card__image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;

  width: 100% !important;
  height: 100% !important;

  opacity: 1 !important;
  transform: scale(1) !important;
  transform-origin: center center;
  transition: transform 0.9s var(--motion-ease) !important;
  will-change: transform;
}

.tour-card--horizontal .tour-card__image,
.tour-card--horizontal .tour-card__image figure,
.tour-card--horizontal .tour-card__image picture,
.tour-card--horizontal .tour-card__image img {
  display: block;

  width: 100% !important;
  height: 100% !important;
  margin: 0;

  border-radius: 0 !important;
}

.tour-card--horizontal .tour-card__image img {
  max-width: none !important;

  object-fit: cover !important;
  object-position: var(--tour-card-image-position) !important;
}

.tour-card--horizontal:hover .tour-card__image,
.tour-card--horizontal:focus-within .tour-card__image {
  transform: scale(1.025) !important;
}

/* Image-only link overlay */

.tour-card--horizontal .tour-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: block;

  border-radius: inherit;

  background: transparent !important;
  color: transparent !important;
  text-decoration: none !important;

  font-size: 0;
  line-height: 0;
}

/* Right column */

.tour-card--horizontal .tour-card__content {
  position: relative !important;
  z-index: 2;

  display: block !important;

  width: 100%;
  height: 100% !important;
  min-height: 0 !important;

  padding: 0 !important;

  background: transparent !important;
  color: var(--color-text-light-bg);

  pointer-events: auto;
}

.tour-card--horizontal .tour-card__inner {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  justify-items: stretch !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  gap: clamp(0.9rem, 1.2vw, 1.3rem) !important;

  padding: var(--tour-card-horizontal-pad-y) var(--tour-card-horizontal-pad-x) !important;
  box-sizing: border-box;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Heading */

.tour-card--horizontal .tour-card__heading {
  grid-row: 1;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tour-card--horizontal .tour-card__badges {
  margin: 0 0 clamp(0.45rem, 0.7vw, 0.65rem) 0 !important;
}

.tour-card--horizontal .tour-card__title,
.tour-card--horizontal .tour-card__heading h5,
.tour-card--horizontal .tour-card__heading h6 {
  margin: 0 0 0.06em !important;

  color: var(--color-text-light-bg);

  font-size: clamp(1.7rem, 2vw, 2.5rem);
  line-height: 0.95 !important;
}

.tour-card--horizontal .tour-card__subtitle {
  max-width: none;
  margin: 0 !important;
	padding-top:8px;

  color: var(--color-text-light-bg);

  font-size: var(--tour-card-horizontal-text);
  line-height: 1.15;
}

/* Glance metadata */

.tour-card--horizontal .tour-card__glance {
  grid-row: 2;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  width: 100% !important;
  padding: 0 !important;

  column-gap: clamp(1.25rem, 2vw, 2.25rem) !important;
  row-gap: clamp(0.8rem, 1.15vw, 1.15rem) !important;

  border: 0 !important;
  border-radius: 0 !important;
}

.tour-card--horizontal .tour-card__glance-item {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.18rem;

  padding: 0 !important;

  background: transparent !important;

  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  border: 0 !important;
  border-radius: 0 !important;
}

.tour-card--horizontal .tour-card__glance-item:nth-of-type(even) {
  border-left: 0 !important;
}

.tour-card--horizontal .tour-card__glance-value {
  color: var(--color-text-light-bg);
  font-size: var(--tour-card-horizontal-text);
}

.tour-card--horizontal .tour-card__glance-label {
  line-height: 1;
	color: var(--color-text-light-bg);
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
	font-size: var(--text-small) !important;
}

.tour-card--horizontal .tour-card__glance-value {
  line-height: 1.12;
}

/* Summary */

.tour-card--horizontal .tour-card-horizontal__body {
  grid-row: 3;

  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  align-self: start !important;
  justify-self: stretch !important;
}

.tour-card--horizontal .tour-card-horizontal__blurb {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;

  color: var(--color-text-light-bg);

  font-size: var(--text-body-small);
  line-height: 1.35;
  text-align: left !important;
}

/* Action */

.tour-card--horizontal .tour-card-horizontal__action {
  grid-row: 4;

  display: inline-flex !important;
  justify-self: stretch !important;
  align-self: end !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;

  text-align: center;
  white-space: nowrap;

  pointer-events: auto;
}

/* Tablet */

@media (max-width: 991px) {
  .tour-card--horizontal {
    --tour-card-height: clamp(38rem, 54vh, 54rem);

    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2.25rem);
  }

  .tour-card--horizontal .tour-card__title,
  .tour-card--horizontal .tour-card__heading h5,
  .tour-card--horizontal .tour-card__heading h6 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
  }
}

/* Mobile */

@media (max-width: 767px) {
  .tour-card-list {
    gap: clamp(3.5rem, 12vw, 5rem);
  }

  .tour-card--horizontal {
    --tour-card-height: auto;

    display: flex !important;
    flex-direction: column;
    row-gap: clamp(1.25rem, 5vw, 2rem);

    height: auto;
    min-height: 0;
  }

  .tour-card--horizontal .tour-card__media {
  aspect-ratio: 4 / 4.4;
  height: auto;
  min-height: clamp(32rem, 105vw, 44rem);

  border-radius: var(--tour-card-radius) !important;
  clip-path: inset(0 round var(--tour-card-radius));
}

  .tour-card--horizontal .tour-card__content {
    height: auto !important;
    min-height: 0 !important;
  }

  .tour-card--horizontal .tour-card__inner {
    height: auto !important;
    min-height: 0 !important;

    gap: clamp(0.9rem, 3.5vw, 1.25rem) !important;
    padding: 0 !important;
  }

  .tour-card--horizontal .tour-card-horizontal__blurb {
    -webkit-line-clamp: unset;
  }

  .tour-card--horizontal .tour-card-horizontal__action {
    width: 100% !important;
  }
}


/* ==================================================
   Team Card
   IMPORTANT: This card pattern is reused across multiple
   site components. Do not rename or refactor these classes
   without checking all existing instances sitewide.
================================================== */

.team-card {
  --tour-card-button-height: 0rem;
  --tour-card-image-position: center center;
	
	--tour-card-height: clamp(46rem, 58vw, 62rem);

  /* Compact name and role panel */
  --team-card-glance-height: clamp(4.75rem, 5.25vw, 6.25rem);

  /* Space between the control and the name panel */
  --team-card-control-gap: clamp(0.75rem, 1.5vw, 1rem);
}

/* Image and gradient fill the entire card */

.team-card .tour-card__media {
  inset: 0;

  border-radius: var(--tour-card-radius) !important;
}

/* ==================================================
   Team Card: name and role
================================================== */

.team-card .tour-card__glance {
  grid-template-columns: minmax(0, 1fr);

  width: 100%;
}

.team-card .tour-card__glance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;

  width: 100%;
  min-height: var(--team-card-glance-height);

  padding:
    clamp(0.35rem, 0.5vw, 0.5rem)
    clamp(1rem, 1.5vw, 1.5rem);

  text-align: center;
}

/* Remove inherited two-column divider */

.team-card .tour-card__glance-item:nth-of-type(even) {
  border-left: 0;
}

/* Name */

.team-card .tour-card__title,
.team-card .tour-card__glance-item > .brxe-heading {
  width: 100%;
  max-width: none;
  margin: 0 !important;

  text-align: center;
  line-height: 1 !important;
}

/* Role */

.team-card .tour-card__subtitle {
  width: 100%;
  max-width: none;
  margin: 0 !important;

  text-align: center;
  line-height: var(--lh-body);
}

/* ==================================================
   Team Card: biography panel
================================================== */

.team-card__bio {
  position: absolute;
  inset: 0;
  z-index: 4;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1rem, 1.5vw, 1.5rem);

  width: 100%;
  height: 100%;
  padding: clamp(2rem, 3vw, 3.5rem);

  overflow-y: auto;

  border-radius: inherit;

  background: var(--color-bg-teal-3);
  color: var(--color-text-dark-bg);

  text-align: left;

  visibility: hidden;
  pointer-events: none;

  transform: translateX(100%);

  transition:
    transform 0.45s var(--motion-ease),
    visibility 0s linear 0.45s;

  will-change: transform;
}

/* Biography heading */

.team-card__bio-title,
.team-card__bio > .brxe-heading {
  width: 100%;
  margin: 0;

  color: var(--color-text-dark-bg);
  text-align: left;
}

/* Biography text */

.team-card__bio-text {
  width: 100%;
  margin: 0;

  color: var(--color-text-dark-bg);
  text-align: left;
}

.team-card__bio-text p {
  margin-top: 0;
  margin-bottom: 0;
	font-size: var(--text-body-small);

  color: inherit;
}

/* Biography opened by click */

.team-card.is-open .team-card__bio {
  visibility: visible;
  pointer-events: auto;

  transform: translateX(0);

  transition-delay: 0s;
}

/* Desktop biography reveal */

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .team-card:hover .team-card__bio {
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition-delay: 0s;
  }
}

/* ==================================================
   Team Card: tablet and mobile controls
================================================== */

/* Completely hidden on desktop */

.team-card .team-card__controls {
  display: none !important;
}

/* Tablet and mobile only */

@media (max-width: 991px),
       (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  .team-card .team-card__controls {
    position: absolute;
    left: 50%;

    /* Bottom edge of button sits just above the name panel */
    bottom: calc(
      var(--team-card-glance-height) +
      var(--team-card-control-gap)
    );

    z-index: 6;

    display: grid !important;
    place-items: center;

    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    transform: translateX(-50%);
  }

  /* Both buttons occupy the exact same position */

  .team-card__info-trigger,
  .team-card__bio-close {
    grid-area: 1 / 1;

    display: grid;
    place-items: center;

    width: clamp(3.5rem, 8vw, 4rem);
    height: clamp(3.5rem, 8vw, 4rem);
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(246, 245, 233, 0.85) !important;
    border-radius: 50% !important;

    background: rgba(4, 50, 53, 0.5) !important;
    color: var(--color-bg-sand) !important;

    box-shadow: none !important;

    line-height: 1;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
      opacity 0.25s var(--motion-ease),
      visibility 0s linear 0.25s,
      background-color 0.3s var(--motion-ease),
      border-color 0.3s var(--motion-ease);
  }

  .team-card__info-trigger i,
  .team-card__bio-close i {
    color: inherit;

    font-size: 1.4rem;
    line-height: 1;
  }

  .team-card__info-trigger svg,
  .team-card__bio-close svg {
    width: 1.4rem;
    height: 1.4rem;

    fill: currentColor;
    color: inherit;
  }

  /* Closed card */

  .team-card__info-trigger {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
  }

  .team-card__bio-close {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Open card: close button replaces info button */

  .team-card.is-open .team-card__info-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .team-card.is-open .team-card__bio-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
  }

  .team-card__info-trigger:hover,
  .team-card__info-trigger:focus-visible,
  .team-card__bio-close:hover,
  .team-card__bio-close:focus-visible {
    border-color: var(--color-bg-sand) !important;
    background: var(--color-bg-teal-3) !important;
  }
}

/* ==================================================
   Team Card: reduced motion
================================================== */

@media (prefers-reduced-motion: reduce) {
  .team-card__bio,
  .team-card__info-trigger,
  .team-card__bio-close {
    transition: none;
  }
}

/* ==================================================
   Team Card: touch-device bio alignment
================================================== */

@media (hover: none) and (pointer: coarse) {
  .team-card__bio {
    justify-content: flex-start !important;

    padding-top: clamp(2.25rem, 6vw, 4rem);
    padding-bottom: calc(
      var(--team-card-glance-height) +
      var(--team-card-control-gap) +
      5rem
    );
  }
}

/* ==================================================
   PAST EVENTS GRID
================================================== */

/*
   Override the reusable grid's align-items:start
   so every loop item stretches to the full height
   of its grid row.
*/

.past-events__grid {
  align-items: stretch !important;
}


/* ==================================================
   PAST EVENT CARD: LOOP ITEM
================================================== */

.past-event-card-loop-item {
  display: flex;

  align-self: stretch;

  width: 100%;
  min-width: 0;
  height: 100%;
}


/* ==================================================
   PAST EVENT CARD
================================================== */

.past-event-card {
  --past-event-card-radius: 20px;

  display: flex;
  flex-direction: column;
  flex: 1;

  width: 100%;
  min-width: 0;
  height: 100%;

  background: transparent;
  color: var(--color-text-light-bg);
}


/* ==================================================
   PAST EVENT CARD: MEDIA
================================================== */

.past-event-card__media {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 4.4;

  overflow: hidden;

  border-radius: var(--past-event-card-radius);
  clip-path: inset(
    0 round var(--past-event-card-radius)
  );
}


/* Image wrapper
-------------------------------------------------- */

.past-event-card__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  transform: scale(1);
  transform-origin: center center;

  transition:
    transform 0.9s var(--motion-ease);

  will-change: transform;
}

.past-event-card__image figure,
.past-event-card__image picture {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
}


/* Actual image
-------------------------------------------------- */

.past-event-card__media img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: 0 !important;
}


/* Image hover
-------------------------------------------------- */

.past-event-card:hover .past-event-card__image,
.past-event-card:focus-within .past-event-card__image {
  transform: scale(1.025);
}


/* Image link overlay
-------------------------------------------------- */

.past-event-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: block;

  background: transparent;

  color: transparent;
  text-decoration: none;

  font-size: 0;
  line-height: 0;
}


/* ==================================================
   PAST EVENT CARD: CONTENT
================================================== */

/*
   Explicit grid rows guarantee that all buttons
   occupy the bottom row even when titles/intros
   have very different lengths.
*/

.past-event-card__content {
  display: grid;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto;

  align-items: start;

  flex: 1;

  width: 100%;
  min-width: 0;

  padding-top: clamp(1.25rem, 1.5vw, 1.75rem);
}


/* ==================================================
   PAST EVENT CARD: DATE
================================================== */

.past-event-card__date {
  grid-row: 1;

  width: 100%;

  margin: 0 0 0.8rem;

  color: var(--color-text-light-bg);

  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1.1;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ==================================================
   PAST EVENT CARD: TITLE
================================================== */

.past-event-card__title {
  grid-row: 2;

  width: 100%;

  margin: 0;

  color: var(--color-text-light-bg);

  line-height: var(--lh-heading-tight);
}

.past-event-card__title a {
  color: inherit;

  text-decoration: none;
}

/* ==================================================
   EVENT CARD: META
================================================== */

.event-card__meta {
  grid-row: 2;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* Meta stack
-------------------------------------------------- */

.event-card__meta-group {
  display: flex;
  flex-direction: column;

  gap: 0.8rem;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* Date / Recurring Dates / Duration
-------------------------------------------------- */

.event-card__date,
.event-card__dates,
.event-card__duration {
  width: 100%;

  margin: 0;
  padding: 0;

  color: var(--color-text-light-bg);

  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1.2;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ==================================================
   EVENT CARD: RECURRING DATE LIST
================================================== */

.event-card__dates ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.event-card__dates li {
  margin: 0;
  padding: 0;
}

.event-card__dates li + li {
  margin-top: 0.2rem;
}


/* ==================================================
   PAST EVENT CARD: INTRO
================================================== */

.past-event-card__intro {
  grid-row: 3;
  align-self: start;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  width: 100%;
  min-width: 0;

  margin: 1rem 0 0;

  overflow: hidden;

  color: var(--color-text-light-bg);

  font-size: var(--text-body-small);
  line-height: var(--lh-body);
}

.past-event-card__intro > * {
  margin-block: 0;
}

.past-event-card__intro > * + * {
  margin-top: 0.75em;
}


/* ==================================================
   PAST EVENT CARD: ACTION
================================================== */

/*
   Dedicated fourth row means every CTA sits
   along the same bottom edge of its grid row.
*/

.past-event-card__action {
  grid-row: 4;
  align-self: end;

  width: 100% !important;

  margin-top: 1.5rem !important;
}

.past-event-card__action.brxe-button,
.past-event-card__action.btn {
  width: 100% !important;
  max-width: none !important;
}


/* ==================================================
   PAST EVENT CARD: TABLET
================================================== */

@media (min-width: 768px) and (max-width: 991px) {

  .past-event-card__content {
    padding-top: 1.35rem;
  }

  .past-event-card__intro {
    margin-top: 0.9rem;
  }

  .past-event-card__action {
    margin-top: 1.5rem !important;
  }
}


/* ==================================================
   PAST EVENT CARD: PHONE
================================================== */

@media (max-width: 767px) {

  .past-event-card {
    --past-event-card-radius: 20px;
  }

  .past-event-card__media {
    aspect-ratio: 4 / 4.4;
  }

  .past-event-card__content {
    padding-top: 1.25rem;
  }

  .past-event-card__intro {
    margin-top: 0.9rem;
  }

  .past-event-card__action {
    margin-top: 1.5rem !important;
  }
}

.bricks-posts-nothing-found {
  color:var(--color-text-light-bg);
}

/* ==================================================
   TOUR FILTER
================================================== */

.tour-filter-section {
  background: var(--color-bg-sand);
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.tour-filter {
  --tour-filter-radius: 3rem;
  --tour-filter-field-height: 4.75rem;
  --tour-filter-field-inset: 2.4rem;

  width: 100%;
  background: var(--color-bg-teal-3);
  color: var(--color-bg-sand);
  border-radius: var(--tour-filter-radius);
  padding: clamp(2rem, 3vw, 3rem);
}

.tour-filter-code,
.tour-filter__form {
  width: 100%;
}

.tour-filter__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(1.5rem, 2vw, 2.5rem);
}


.tour-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.tour-filter__field label {
  margin: 0;
  padding-left: var(--tour-filter-field-inset);
  color: var(--color-bg-sand);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.tour-filter__select-wrap {
  position: relative;
  color: var(--color-bg-sand);
}

.tour-filter__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--tour-filter-field-inset);
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(-55%) rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  pointer-events: none;
}

.tour-filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: block;
  width: 100%;
  min-height: var(--tour-filter-field-height);
  margin: 0;
  padding: 0 4.25rem 0 var(--tour-filter-field-inset);

  border: 1px solid color-mix(in srgb, var(--color-bg-sand) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-sand) 8%, transparent);
  color: var(--color-bg-sand);

  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--lh-body);

  box-shadow: none;
  outline: none;
  cursor: pointer;
}

.tour-filter select:focus {
  outline: 1px solid var(--color-bg-sand);
  outline-offset: 1px;
}

.tour-filter select option {
  color: var(--color-text-light-bg);
}

.tour-filter__action {
  display: flex;
  align-items: flex-end;
}

.tour-filter__button {
  width: 100%;
  min-height: var(--tour-filter-field-height);
  justify-content: center;
  border-radius: 999px;
}

.tour-filter__button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

#tour-results {
  scroll-margin-top: calc(var(--tour-nav-height, 80px) + 2rem);
}

@media (min-width: 768px) and (max-width: 991px) {
  .tour-filter__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tour-filter__action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .tour-filter-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .tour-filter {
    --tour-filter-radius: 2rem;
    --tour-filter-field-inset: 1.5rem;

    padding: 1.5rem;
  }

  .tour-filter__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-filter__action {
    grid-column: auto;
  }
  
  #tour-results {
    scroll-margin-top: calc(var(--tour-nav-height, 80px) + 1rem);
  }
}

.tour-filter-no-results {
  width: 100%;
  margin: 0;
  color: var(--color-bg-teal-3);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  text-align: center;
}

/* ==================================================
   Branded Custom Selects
   Homepage Hero + All Tours
================================================== */


/* ==================================================
   Phone: Retain Native Selects
================================================== */

@media (max-width: 767px) {
  /* Hide generated custom controls */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select {
    display: none !important;
  }

  /*
   If the viewport is resized after enhancement,
   restore the genuine select.
  */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__native {
    position: static !important;

    width: 100% !important;
    height: auto !important;
    margin: 0 !important;

    overflow: visible !important;

    clip: auto !important;
    clip-path: none !important;

    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* ==================================================
   Desktop + Tablet
================================================== */

@media (min-width: 768px) {
  /* -----------------------------------------------
     Native select
  ----------------------------------------------- */

  /*
   Keep the genuine select in the form for submission,
   but visually hide it after JavaScript enhancement.
  */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__native {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    opacity: 0 !important;
    pointer-events: none !important;
  }


  /* -----------------------------------------------
     Remove original All Tours arrow
  ----------------------------------------------- */

  /*
   The original arrow remains available as a fallback
   and is removed only after the custom select exists.
  */

  .tour-filter
    .tour-filter__select-wrap.is-custom-select-ready::after {
    content: none;
    display: none;
  }


  /* -----------------------------------------------
     Component
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select {
    position: relative;

    width: 100%;
    min-width: 0;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select.is-open {
    z-index: 1000;
  }


  /* -----------------------------------------------
     Trigger: Shared foundation
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__trigger {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    width: 100%;
    min-width: 0;
    margin: 0;

    box-shadow: none;

    font-family: var(--font-body);
    line-height: 1.1;
    text-align: left;

    cursor: pointer;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__value {
    display: block;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* -----------------------------------------------
     Trigger: Homepage glass bar
  ----------------------------------------------- */

  .home-tour-finder--hero
    .ne-custom-select__trigger {
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    color: var(--color-text-dark-bg);

    font-size: var(--text-body-small);
    font-weight: var(--weight-regular);
  }


  /* -----------------------------------------------
     Trigger: All Tours pill
  ----------------------------------------------- */

  .tour-filter
    .ne-custom-select__trigger {
    min-height: var(--tour-filter-field-height);

    padding:
      0
      4.25rem
      0
      var(--tour-filter-field-inset);

    background:
      color-mix(
        in srgb,
        var(--color-bg-sand) 8%,
        transparent
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--color-bg-sand) 35%,
        transparent
      );

    border-radius: 999px;

    color: var(--color-bg-sand);

    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
  }

 :is(
  .home-tour-finder--hero,
  .tour-filter
)
.ne-custom-select__trigger:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


  /* -----------------------------------------------
     Trigger arrow
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__trigger::after {
    content: "";

    flex: 0 0 auto;

    width: 0.65rem;
    height: 0.65rem;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform:
      translateY(-0.15rem)
      rotate(45deg);

    transition:
      transform 300ms var(--motion-ease);
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select.is-open
  .ne-custom-select__trigger::after {
    transform:
      translateY(0.15rem)
      rotate(225deg);
  }


  /* -----------------------------------------------
     Dropdown menu: Shared
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__menu {
    position: absolute;
    left: 0;
    z-index: 99999;

    display: grid;
    gap: 0.1rem;

    width: max(100%, 18rem);
    max-height: min(25rem, 55vh);
    margin: 0;
    padding: 0.55rem;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--color-bg-sand);
    color: var(--color-text-light-bg);

    border:
      1px solid
      color-mix(
        in srgb,
        var(--color-bg-teal-3) 18%,
        transparent
      );

    border-radius: 1.4rem;

    box-shadow:
      0 1.4rem 3rem
      rgba(4, 50, 53, 0.24);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(0.5rem);

    /*
     Clips the scrollbar and contents to the rounded
     right-hand corners.
    */

    clip-path: inset(0 round 1.4rem);

    scrollbar-width: thin;
    scrollbar-color:
      rgba(4, 50, 53, 0.32)
      transparent;

    transition:
      opacity 200ms ease,
      visibility 200ms ease,
      transform 300ms var(--motion-ease);
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select.is-open
  .ne-custom-select__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
  }


  /* -----------------------------------------------
     Homepage menu position
  ----------------------------------------------- */

  .home-tour-finder--hero
    .ne-custom-select__menu {
    top: auto;
    bottom: calc(100% + 1rem);
  }

  /*
   Keep Physical Rating inside the right edge of the
   viewport.
  */

  .home-tour-finder--hero
    .home-tour-finder__field:nth-child(3)
    .ne-custom-select__menu {
    right: 0;
    left: auto;
  }


  /* -----------------------------------------------
     All Tours menu position
  ----------------------------------------------- */

  .tour-filter
    .ne-custom-select__menu {
    top: calc(100% + 0.75rem);
    bottom: auto;
  }


  /* -----------------------------------------------
     Options
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0.65rem 0.9rem;

    background: transparent;

    border: 0;
    border-radius: 0.9rem;

    box-shadow: none;

    color: inherit;

    font-family: var(--font-body);
    font-size: var(--text-body-small);
    font-weight: var(--weight-body);
    line-height: 1.08;
    text-align: left;

    cursor: pointer;

    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option:hover,
  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option:focus-visible {
    background: var(--color-accent);
    color: var(--color-bg-teal-3);

    outline: none;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option.is-selected {
    background: var(--color-bg-teal-3);
    color: var(--color-bg-sand);
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option.is-selected:hover,
  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__option.is-selected:focus-visible {
    background: var(--color-accent);
    color: var(--color-bg-teal-3);
  }


  /* -----------------------------------------------
     Scrollbar
  ----------------------------------------------- */

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__menu::-webkit-scrollbar {
    width: 0.6rem;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__menu::-webkit-scrollbar-track {
    margin-block: 0.7rem;

    background: transparent;
  }

  :is(
    .home-tour-finder--hero,
    .tour-filter
  )
  .ne-custom-select__menu::-webkit-scrollbar-thumb {
    background:
      color-mix(
        in srgb,
        var(--color-bg-teal-3) 32%,
        transparent
      );

    border: 2px solid var(--color-bg-sand);
    border-radius: 999px;
  }
}

/* ==================================================
   All Tours: Tablet Menu Alignment
================================================== */

@media (min-width: 768px) and (max-width: 991px) {
  /*
   Physical Rating occupies the right tablet column,
   so align its dropdown to the field’s right edge.
  */

  .tour-filter
    .tour-filter__field:nth-child(3)
    .ne-custom-select__menu {
    right: 0;
    left: auto;
  }
}

/* ==================================================
   Homepage Tour Finder: Visibility
================================================== */

.home-mobile-finder-section,
.home-tour-finder--mobile {
  display: none;
}


/* ==================================================
   Homepage Tour Finder: Mobile Section
================================================== */

@media (max-width: 767px) {
  /* Hide the finder inside the hero */

  .home-tour-finder--hero {
    display: none;
  }

  /* Show the separate mobile finder section */

  .home-mobile-finder-section {
    display: block;

    padding-top: var(--section-space-y);
    padding-bottom: var(--section-space-y);

    background: var(--color-bg-sand);
  }

   .home-tour-finder.home-tour-finder--mobile {
    --home-finder-radius: 2rem;
    --home-finder-field-height: 4.75rem;
    --home-finder-field-inset: 1.5rem;

    display: block;

    width: 100%;
    margin: 0;
    padding: 1.5rem;

    box-sizing: border-box;

    background: var(--color-bg-teal-3);
    color: var(--color-bg-sand);

    border-radius: var(--home-finder-radius);
  }

  .home-tour-finder--mobile .home-tour-finder__shortcode,
  .home-tour-finder--mobile .home-tour-finder__shortcode > * {
    width: 100%;
    margin: 0;
  }


  /* Form */

  .home-tour-finder--mobile .home-tour-finder__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 1.5rem;

    width: 100%;
    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }


  /* Fields */

  .home-tour-finder--mobile .home-tour-finder__field {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.85rem;

    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
  }


  /* Remove the desktop glass-bar dividers */

  .home-tour-finder--mobile
    .home-tour-finder__field:not(:first-child)::before {
    content: none !important;
    display: none !important;
  }


  /* Labels */

  .home-tour-finder--mobile
    .home-tour-finder__field label {
    margin: 0;
    padding-left: var(--home-finder-field-inset);

    color: var(--color-bg-sand);

    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-transform: none;
  }


  /* Custom arrow */

  .home-tour-finder--mobile
    .home-tour-finder__field::after {
    content: "";

    position: absolute;
    right: var(--home-finder-field-inset);
    bottom: calc(
      (var(--home-finder-field-height) - 0.75rem) / 2
    );

    width: 0.75rem;
    height: 0.75rem;

    border-right: 2px solid var(--color-bg-sand);
    border-bottom: 2px solid var(--color-bg-sand);

    transform: rotate(45deg);

    pointer-events: none;
  }


  /* Selects */

  .home-tour-finder--mobile
    .home-tour-finder__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    display: block;

    width: 100%;
    min-height: var(--home-finder-field-height);
    margin: 0;
    padding:
      0
      4.25rem
      0
      var(--home-finder-field-inset);

    background:
      color-mix(
        in srgb,
        var(--color-bg-sand) 8%,
        transparent
      );

    border:
      1px solid
      color-mix(
        in srgb,
        var(--color-bg-sand) 35%,
        transparent
      );

    border-radius: 999px;
    box-shadow: none;
    outline: none;

    color: var(--color-bg-sand);

    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: var(--lh-body);

    cursor: pointer;
  }

  .home-tour-finder--mobile
    .home-tour-finder__field select:focus,
  .home-tour-finder--mobile
    .home-tour-finder__field select:focus-visible {
    outline: 1px solid var(--color-bg-sand);
    outline-offset: 1px;
  }

  .home-tour-finder--mobile
    .home-tour-finder__field select option {
    background: var(--color-bg-sand);
    color: var(--color-text-light-bg);
  }


  /* Submit */

  .home-tour-finder--mobile
    .home-tour-finder__submit {
    width: 100%;
    min-height: var(--home-finder-field-height);
    height: auto;
    margin: 0;
    padding: 0 2rem;

    background-color: #e59a38;
    background-image: linear-gradient(
      to right,
      #e59a38 0 50%,
      #ebb360 50% 100%
    );
    background-position: left center;
    background-size: 200% 100%;

    border: 0;
    border-radius: 999px;

    color: #043235;

    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;

    transition:
      background-position
      var(--motion-speed)
      var(--motion-ease),
      color
      var(--motion-speed)
      var(--motion-ease);
  }

  .home-tour-finder--mobile
    .home-tour-finder__submit:hover,
  .home-tour-finder--mobile
    .home-tour-finder__submit:focus-visible {
    background-position: right center;
    color: #043235;
  }
}

/* ==================================================
   Icon and text columns
================================================== */

.icon-text-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-width: 0;

  gap: clamp(1.25rem, 2vw, 2rem);
}

.icon-text-column > .brxe-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  width: 50px;
  height: 50px;

  font-size: 50px;
  line-height: 1;
}

.icon-text-column > .brxe-text {
  width: 100%;
}

/* Bricks Image element used as an icon */

.icon-text-column > .brxe-image {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  width: 100%;
  height: 40px;

  margin-inline: auto;
}

.icon-text-column > .brxe-image picture,
.icon-text-column > .brxe-image figure {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  margin: 0;
}

.icon-text-column > .brxe-image img,
.icon-text-column > .brxe-image svg {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40px;

  margin-inline: auto;

  object-fit: contain;
}

/* Larger spacing between icon columns and rows on desktop */

@media (min-width: 992px) {
  .layout-grid-rows > .layout-grid--3-3-1 {
    column-gap: clamp(3rem, 5vw, 6rem);
  }

  .layout-grid-rows > .layout-grid--3-3-1
  + .layout-grid--3-3-1 {
    margin-top: clamp(5rem, 7vw, 8rem);
  }
}

/* ==================================================
   POPUP
================================================== */

/* ==================================================
   BRICKS POPUP WRAPPER RESET
================================================== */

.brx-popup.brxe-popup-4678 {
  background: transparent !important;
}

.brx-popup.brxe-popup-4678 > .brx-popup-content {
  position: static;

  width: 100%;
  max-width: none;
  min-height: 0;

  margin: 0;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;
}

/* ==================================================
   POPUP SHELL
================================================== */

.popup-shell {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;

  margin: 0;
  padding: 25px !important;

  border: 0;

  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;

  pointer-events: none;
}


/* Remove any Bricks section overlay/background layer */

.popup-shell::before,
.popup-shell::after {
  content: none !important;

  display: none !important;

  background: transparent !important;
}


/* Card remains interactive */

.popup-shell > .popup-card {
  pointer-events: auto;
}

.brx-popup.brxe-popup-4678 > .brx-popup-backdrop {
  background:
    rgba(0, 0, 0, 0.35);
}


/* ==================================================
   CARD
================================================== */

.popup-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: min(100%, 430px);
  max-height: calc(100dvh - 50px);

  margin: 0;
  padding: 0 !important;

  overflow: hidden;

  border-radius: 20px;

  background-color: var(--popup-bg) !important;
  color: var(--popup-text);
}


/* ==================================================
   COLOUR THEMES
================================================== */


/* Sand */

.popup-card[data-popup-bg="--color-bg-sand"] {
  --popup-bg: var(--color-bg-sand);
  --popup-text: var(--color-bg-teal-3);
}


/* Dark sand */

.popup-card[data-popup-bg="--color-bg-dark-sand"] {
  --popup-bg: var(--color-bg-dark-sand);
  --popup-text: var(--color-bg-teal-3);
}


/* Teal */

.popup-card[data-popup-bg="--color-bg-teal-3"] {
  --popup-bg: var(--color-bg-teal-3);
  --popup-text: var(--color-bg-sand);
}


/* Orange */

.popup-card[data-popup-bg="--color-accent"] {
  --popup-bg: var(--color-accent);
  --popup-text: var(--color-bg-teal-3);
}


/* Fallback */

.popup-card:not([data-popup-bg]),
.popup-card[data-popup-bg=""] {
  --popup-bg: var(--color-bg-sand);
  --popup-text: var(--color-bg-teal-3);
}


/* ==================================================
   IMAGE
================================================== */

.popup-card__media {
  position: relative;

  flex: 0 0 auto;

  width: 100%;
  aspect-ratio: 4 / 3;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


.popup-card__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  max-width: none;
  height: 100%;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover;
  object-position: center;

  border-radius: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ==================================================
   BODY
================================================== */

.popup-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  min-height: 0;

  padding: 24px 30px 20px;

  overflow-y: auto;

  overscroll-behavior: contain;
}


/* ==================================================
   CONTENT GROUPS
================================================== */

.popup-card__content,
.popup-card__optin {
  display: flex;
  flex-direction: column;

  width: 100%;

  gap: 0.75rem;
}


/* Remove default margins */

.popup-card__eyebrow,
.popup-card__heading,
.popup-card__text,
.popup-card__email-eyebrow,
.popup-card__email-heading,
.popup-card__email-text,
.popup-card__footer-text {
  margin: 0;
}


/* ==================================================
   TYPOGRAPHY
================================================== */


/* Headings: desktop + tablet */

.popup-card__heading,
.popup-card__email-heading {
  width: 75% !important;

  margin: 0;
}


/* Main copy */

.popup-card .popup-card__text,
.popup-card .popup-card__text p,
.popup-card .popup-card__email-text,
.popup-card .popup-card__email-text p {
  font-size: var(--text-body-small) !important;
}


/* Footer / legal */

.popup-card .popup-card__footer-text,
.popup-card .popup-card__footer-text p {
  font-size: var(--text-caption) !important;
  line-height: 1.4;

  opacity: 0.7;
}


/* Theme text colour */

.popup-card h1,
.popup-card h2,
.popup-card h3,
.popup-card h4,
.popup-card h5,
.popup-card h6,
.popup-card p,
.popup-card li,
.popup-card label {
  color: var(--popup-text);
}


/* Ordinary links */

.popup-card a:not(.btn) {
  color: var(--popup-text);
}


/* ==================================================
   CTA BUTTON
================================================== */

.popup-card__button {
  align-self: flex-start;

  margin-top: 0.25rem;
}


/* --------------------------------------------------
   Button on light backgrounds
-------------------------------------------------- */

.popup-card[data-popup-bg="--color-bg-sand"]
  .popup-card__button,
.popup-card[data-popup-bg="--color-bg-dark-sand"]
  .popup-card__button,
.popup-card[data-popup-bg="--color-accent"]
  .popup-card__button,
.popup-card:not([data-popup-bg])
  .popup-card__button,
.popup-card[data-popup-bg=""]
  .popup-card__button {

  --btn-text: var(--color-bg-sand);
  --btn-text-hover: var(--color-bg-teal-3);

  --btn-border: var(--color-bg-teal-3);
  --btn-border-hover: var(--color-bg-teal-3);

  --btn-fill: var(--color-bg-teal-3);
}


/* --------------------------------------------------
   Button on dark background
-------------------------------------------------- */

.popup-card[data-popup-bg="--color-bg-teal-3"]
  .popup-card__button {

  --btn-text: var(--color-bg-teal-3);
  --btn-text-hover: var(--color-bg-sand);

  --btn-border: var(--color-bg-sand);
  --btn-border-hover: var(--color-bg-sand);

  --btn-fill: var(--color-bg-sand);
}


/* ==================================================
   FOOTER
================================================== */

.popup-card__footer {
  width: 100%;

  margin-top: 40px;
}


/* ==================================================
   MAILERLITE COLOUR OVERRIDES
================================================== */

/*
 * Layout continues to come entirely from
 * the existing .footer-optin styling.
 */


/* Underline */

.popup-card .footer-optin .mailerlite-form-inputs {
  border-bottom-color:
    color-mix(
      in srgb,
      var(--popup-text) 40%,
      transparent
    );
}


/* Email */

.popup-card .footer-optin input[type="email"] {
  color: var(--popup-text);
}


.popup-card .footer-optin input[type="email"]::placeholder {
  color: var(--popup-text);

  opacity: 0.4;
}


/* Subscribe */

.popup-card .footer-optin .mailerlite-subscribe-submit {
  color: var(--popup-text);
}


/* Loader */

.popup-card .footer-optin .mailerlite-form-loader {
  color: var(--popup-text);
}

/* ==================================================
   POPUP CLOSE
================================================== */

.popup-card__close {
  position: absolute;

  top: 10px;
  right: 10px;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin: 0;
  padding: 0;

  color: var(--color-bg-sand);

  cursor: pointer;

  opacity: 0.85;

  transform: none !important;

  transition:
    opacity 0.25s ease;
}

.popup-card__close svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.25;

  transform: none !important;
}

.popup-card__close:hover,
.popup-card__close:focus-visible {
  opacity: 0.55;

  transform: none !important;
}

.popup-card__close:hover svg,
.popup-card__close:focus-visible svg {
  transform: none !important;
}

/* ==================================================
   PHONE
================================================== */

@media (max-width: 767px) {

  .popup-shell {
    padding: 15px !important;
  }


  .popup-card {
    max-height: calc(100dvh - 30px);
  }


  .popup-card__body {
    padding: 15px 15px 20px;
  }


  /* Full-width headings on phone */

  .popup-card__heading,
  .popup-card__email-heading {
    width: 100% !important;
  }


  .popup-card__footer {
    margin-top: 32px;
  }

}

/* ==================================================
   POPUP: MOTION
================================================== */

.popup-card {
  opacity: 1;
  transform: translateX(0);

  transition:
    opacity 650ms var(--motion-ease),
    transform 650ms var(--motion-ease);
}

.brx-popup.is-popup-closing .popup-card {
  opacity: 0;
  transform: translateX(24px);

  pointer-events: none;
}

.brx-popup-backdrop {
  transition:
    opacity 450ms var(--motion-ease);
}

.brx-popup.is-popup-closing
.brx-popup-backdrop {
  opacity: 0;
}

/* ==================================================
   POPUP: MAILERLITE SUCCESS
================================================== */

.popup-card .footer-optin .mailerlite-form-response {
  width: 100%;

  margin: 0;
  padding: 0;

  color: var(--popup-text);
}

.popup-card .footer-optin .mailerlite-form-response h4,
.popup-card .footer-optin .mailerlite-form-response p,
.popup-card .footer-optin .mailerlite-form-response code {
  margin: 0;
  padding: 0;

  font-family: var(--font-body);
  font-size: var(--text-body-small) !important;
  font-weight: inherit;
  line-height: 1.4;

  color: var(--popup-text) !important;

  background: transparent;
  border: 0;
}

.popup-card .footer-optin .mailerlite-form-response code {
  white-space: normal;
}


/* ==================================================
   TRUSTINDEX REVIEWS
================================================== */

.ti-widget,
.ti-widget-lightbox {
  --ti-text: #043235;
  --ti-bg: #ffffff;
  --ti-border: #ffffff;
  --ti-highlight: #4a8388;
  --ti-arrow: #043235;
}

/* Base */
.ti-widget .ti-widget-container,
.ti-widget-lightbox .ti-widget-lightbox-review-container {
  color: var(--ti-text) !important;
  font-family: var(--font-body) !important;
}

/* Header / summary bar */
.ti-widget .ti-widget-header {
  background: var(--ti-bg) !important;
  border-color: var(--ti-border) !important;
  border-radius: var(--radius-card, 24px) !important;
  box-shadow: none !important;
  color: var(--ti-text) !important;
}

/* Tabs */
.ti-widget .ti-platform-tabs,
.ti-widget .ti-tab-active {
  border-color: var(--ti-highlight) !important;
}

.ti-widget .ti-tab-item,
.ti-widget .ti-item-label,
.ti-widget .ti-tab-active .ti-item-label,
.ti-widget .ti-rating-text,
.ti-widget .ti-header-rating,
.ti-widget .ti-header-rating-reviews {
  color: var(--ti-text) !important;
}

/* Write review button */
.ti-widget .ti-header-write-btn {
  background: #ffffff !important;
  border: 2px solid var(--ti-text) !important;
  border-radius: 999px !important;
  color: var(--ti-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 0.85em 1.4em !important;
  text-decoration: none !important;
  transition:
    background-color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease),
    color var(--motion-speed) var(--motion-ease);
}

.ti-widget .ti-header-write-btn:hover,
.ti-widget .ti-header-write-btn:focus-visible {
  background-color: var(--ti-text) !important;
  border-color: var(--ti-text) !important;
  color: #ffffff !important;
}

/* Write review dropdown */
.ti-widget .ti-write-btn-dropdown-inner {
  background: #ffffff !important;
  border: 1px solid var(--ti-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.ti-widget .ti-write-btn-dropdown-item {
  color: var(--ti-text) !important;
}

.ti-widget .ti-write-btn-dropdown-item:hover {
  background: var(--ti-bg) !important;
}

/* Review cards */
.ti-widget .ti-review-item .ti-inner {
  background: #ffffff !important;
  border-color: #ffffff  !important;
  border-radius: var(--radius-card, 24px) !important;
  box-shadow: none !important;
  color: var(--ti-text) !important;
}

.ti-widget .ti-name,
.ti-widget .ti-date,
.ti-widget .ti-review-content,
.ti-widget .ti-review-text-container,
.ti-widget-lightbox .ti-lightbox-review-header,
.ti-widget-lightbox .ti-profile-details,
.ti-widget-lightbox .ti-name,
.ti-widget-lightbox .ti-date,
.ti-widget-lightbox .ti-review-text,
.ti-widget-lightbox .ti-review-text-container,
.ti-widget-lightbox .ti-review-text strong,
.ti-widget-lightbox .ti-review-text-container strong {
  color: var(--ti-text) !important;
  font-family: var(--font-body) !important;
}

.ti-widget .ti-name,
.ti-widget-lightbox .ti-name,
.ti-widget-lightbox .ti-review-text strong,
.ti-widget-lightbox .ti-review-text-container strong {
  font-weight: 600 !important;
}

.ti-widget-lightbox .ti-date {
  opacity: 0.65;
}

.ti-widget-lightbox .ti-review-text,
.ti-widget-lightbox .ti-review-text-container {
  line-height: 1.45 !important;
}

/* Read more */
.ti-widget .ti-read-more,
.ti-widget .ti-read-more-active {
  color: var(--ti-text) !important;
  opacity: 0.65;
  text-decoration: none !important;
}

.ti-widget .ti-read-more:hover,
.ti-widget .ti-read-more-active:hover {
  color: var(--ti-highlight) !important;
  opacity: 1;
}

/* Arrows */
.ti-widget .ti-controls .ti-next,
.ti-widget .ti-controls .ti-prev,
.ti-widget .ti-next,
.ti-widget .ti-prev,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-next,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-prev {
  background-color: #ffffff !important;
  border: 1px solid var(--ti-border) !important;
  box-shadow: none !important;
  color: var(--ti-arrow) !important;
  transition:
    background-color var(--motion-speed) var(--motion-ease),
    border-color var(--motion-speed) var(--motion-ease),
    color var(--motion-speed) var(--motion-ease);
}

.ti-widget .ti-controls .ti-next:hover,
.ti-widget .ti-controls .ti-prev:hover,
.ti-widget .ti-controls .ti-next:focus-visible,
.ti-widget .ti-controls .ti-prev:focus-visible,
.ti-widget .ti-next:hover,
.ti-widget .ti-prev:hover,
.ti-widget .ti-next:focus-visible,
.ti-widget .ti-prev:focus-visible,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-next:hover,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-prev:hover {
  background-color: var(--ti-text) !important;
  border-color: var(--ti-text) !important;
  color: #ffffff !important;
}

.ti-widget .ti-next::before,
.ti-widget .ti-prev::before,
.ti-widget .ti-next::after,
.ti-widget .ti-prev::after,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-next::before,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-prev::before,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-next::after,
.ti-widget-lightbox .ti-nav-arrow .ti-arrow-prev::after {
  border-color: currentColor !important;
  color: currentColor !important;
}

/* Progress line */
.ti-widget .ti-controls-line {
  background: rgba(4, 50, 53, 0.18) !important;
}

.ti-widget .ti-controls-line .dot {
  background: var(--ti-highlight) !important;
}

/* Verified badge */
.ti-widget .ti-widget-header-tick,
.ti-widget .ti-verified-review,
.ti-widget-lightbox .ti-verified-review {
  color: var(--ti-highlight) !important;
}

/* ==================================================
   TRUSTINDEX LIGHTBOX
================================================== */

.ti-widget-lightbox.ti-widget-lightbox-appeared {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.ti-widget-lightbox .ti-widget-lightbox-inner {
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(1rem, 3vw, 3rem) !important;
}

.ti-widget-lightbox .ti-review-item {
  background: #ffffff !important;
  border-color: #ffffff !important;
  border-radius: var(--radius-card, 24px) !important;
  box-shadow: none !important;
  color: var(--ti-text) !important;
}

.ti-widget-lightbox .ti-widget-lightbox-review-container {
  width: min(100%, 760px) !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;

  scrollbar-color: rgba(4, 50, 53, 0.35) transparent;
  scrollbar-width: thin;
}
.ti-widget-lightbox .ti-widget-lightbox-review-container-inner {
  overflow: visible !important;
}

.ti-widget-lightbox .ti-widget-lightbox-review-container::-webkit-scrollbar {
  width: 6px;
}

.ti-widget-lightbox .ti-widget-lightbox-review-container::-webkit-scrollbar-track {
  background: transparent;
}

.ti-widget-lightbox .ti-widget-lightbox-review-container::-webkit-scrollbar-thumb {
  background: rgba(4, 50, 53, 0.35);
  border-radius: 999px;
}

/* Close buttons */
.ti-widget-lightbox .ti-widget-lightbox-close,
.ti-widget-lightbox .ti-widget-lightbox-mobile-close-bottom {
  color: var(--ti-text) !important;
}

.ti-widget-lightbox .ti-widget-lightbox-mobile-close-bottom {
  background: #ffffff !important;
  border-top: 1px solid var(--ti-border) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

/* Page lock class added by JS */
html.ti-lightbox-open,
body.ti-lightbox-open {
  overflow: hidden !important;
}

/* ==================================================
   FareHarbor Lightframe
================================================== */

#fareharbor-lightframe-shade {
  --lightframe-shade-surface: rgba(0, 0, 0, 0.4);

  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}