/* Scoped to the two new Home experiences; legacy tours and booking stay intact. */
.xb-home-experiences { padding-block: 1rem 1.5rem; }
.xb-home-experiences > .xb-container { max-width: 100rem; }
.xb-experiences-heading { text-align: center; margin-bottom: .75rem; }
.xb-experiences-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 0 .4rem;
  color: var(--xb-accent-gold);
  font-size: clamp(.75rem, 1.5vw, 1rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.xb-experiences-eyebrow::before,
.xb-experiences-eyebrow::after {
  content: "";
  width: clamp(1.5rem, 8vw, 6rem);
  height: 1px;
  flex-shrink: 0;
  background: var(--xb-accent-gold);
}
.xb-home-experiences .xb-experiences-heading h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.8vw, 3.25rem);
  text-transform: uppercase;
  text-wrap: balance;
}
.xb-experiences-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.xb-experience {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--xb-border-subtle);
  border-radius: 4px;
  overflow: hidden;
}
.xb-experience-photo {
  position: relative;
  aspect-ratio: 2 / 1;
  margin-bottom: -2rem;
  background: #000;
  isolation: isolate;
  container-type: inline-size;
}
.xb-experience-photo img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgb(0 0 0 / 92%) 70%, rgb(0 0 0 / 62%) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgb(0 0 0 / 92%) 70%, rgb(0 0 0 / 62%) 82%, transparent 100%);
}
/* Keep Teide in view when the approved portrait photograph fills a landscape card. */
.xb-experience-photo--dayTour img { object-position: 50% 28%; }
.xb-experience-discount-stamp {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(1rem, 3cqi, 1.5rem);
  inset-inline-end: clamp(1rem, 3cqi, 1.5rem);
  width: clamp(5.5rem, 18cqi, 6.875rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(0 0 0 / 32%);
  box-shadow: 0 .2rem .8rem rgb(0 0 0 / 24%);
  color: var(--xb-accent-gold);
  transform: rotate(-5deg);
  backdrop-filter: blur(1.5px);
}
.xb-experience-discount-ring {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.xb-experience-discount-ring path:first-child {
  stroke-width: 2.5;
  stroke-dasharray: 71 2 18 1 32 3;
}
.xb-experience-discount-ring path:last-child {
  opacity: .62;
  stroke-width: 1.25;
  stroke-dasharray: 38 2 12 1 24 3;
  transform: rotate(2deg);
  transform-origin: center;
}
.xb-experience-discount-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: .2em;
  font-family: var(--xb-font-body);
  line-height: 1;
}
.xb-experience-discount-main { display: flex; align-items: flex-start; }
.xb-experience-discount-main strong {
  font-size: clamp(2.5rem, 8.5cqi, 3.35rem);
  font-weight: 800;
  letter-spacing: -.08em;
}
.xb-experience-discount-main span {
  margin: .18em 0 0 .12em;
  font-size: clamp(1.15rem, 3.7cqi, 1.5rem);
  font-weight: 700;
}
.xb-experience-discount-copy small {
  margin-top: -.12em;
  padding-left: .18em;
  font-size: clamp(.625rem, 2.1cqi, .8rem);
  font-weight: 700;
  letter-spacing: .22em;
}
.xb-home-experiences .xb-experience-body h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
  text-transform: uppercase;
}
/* Keep compound tour names intact, scaling only when the card requires it. */
.xb-home-experiences:lang(nl) .xb-experience--sunsetTour h3 {
  font-size: min(clamp(1.75rem, 3.2vw, 2.75rem), calc((100cqi - 2rem) / 13));
}
.xb-home-experiences:lang(de) .xb-experience--sunsetTour h3 { font-size: min(clamp(1.75rem, 3.2vw, 2.75rem), calc((100cqi - 2rem) / 14.2)); }
.xb-experience-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 2rem 1rem 1rem; }
.xb-experience-summary { margin: 0 0 .9rem; font-size: .8125rem; line-height: 1.4; text-transform: uppercase; }
.xb-experience-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}
.xb-experience-prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  padding: .55rem .65rem;
  border: 1px solid var(--xb-border-subtle);
  font-size: .75rem;
  line-height: 1.2;
}
.xb-experience-prices li > span:last-child { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.xb-experience-prices s { color: var(--xb-text-secondary); }
.xb-experience-prices strong { color: var(--xb-accent-gold); font-size: 1rem; }
.xb-experience-facts {
  display: grid;
  grid-template-columns: .65fr 1fr 1.3fr;
  gap: .75rem;
  list-style: none;
  margin: auto 0 1rem;
  padding: 0;
}
.xb-experience-facts li { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .8125rem; line-height: 1.35; }
.xb-experience-facts svg { width: 1.75rem; height: 1.75rem; flex: none; color: var(--xb-accent-gold); }
.xb-experience-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.xb-experience-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3rem;
  padding: .5rem .65rem;
  border: 1px solid var(--xb-accent-gold);
  border-radius: 4px;
  font-family: var(--xb-font-body);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.xb-experience-info { color: var(--xb-accent-gold); background: transparent; }
.xb-experience-info:disabled { cursor: not-allowed; }
.xb-experience-info small { display: block; margin-top: .2rem; font-size: .625rem; font-weight: 400; text-transform: none; }
.xb-experience-book { color: var(--xb-background); background: var(--xb-accent-gold); cursor: pointer; }
.xb-experience-cta > span[aria-hidden] { font-size: 1.25rem; flex: none; }
.xb-experience-cta:focus-visible { outline: 2px solid var(--xb-text-primary); outline-offset: -5px; }
.xb-experience-book:hover { filter: brightness(1.08); }
@media (max-width: 767px) {
  .xb-experiences-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .xb-experiences-heading { margin-bottom: 1rem; }
  .xb-experience-photo { aspect-ratio: 1.8 / 1; }
  .xb-experience-discount-stamp { inset-block-start: .75rem; inset-inline-end: .75rem; width: 5rem; }
  .xb-experience-discount-main strong { font-size: 2.45rem; }
  .xb-experience-discount-main span { font-size: 1.1rem; }
  .xb-experience-discount-copy small { font-size: .6rem; }
  .xb-experience-facts { gap: .5rem; }
  .xb-experience-facts li { gap: .35rem; font-size: .75rem; }
  .xb-experience-cta { font-size: .8125rem; gap: .5rem; }
}
