/* =========================================================
   XPERIENCEFINDER MALTA
   TEST EXPERIENCE PAGE
   ========================================================= */


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

.xfm-experience-page {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
  padding: 36px 24px 50px;

  box-sizing: border-box;

  color: #334155;
}


/* =========================================================
   HEADER
   ========================================================= */

.xfm-exp-header {
  margin: 0 0 24px;
}

.xfm-exp-header-content {
  max-width: 1000px;
}

.xfm-exp-kicker,
.xfm-exp-section-kicker {
  display: block;

  margin: 0 0 8px;

  color: #B08A2E;

  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;

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

.xfm-exp-header h1 {
  max-width: 1050px;

  margin: 0 0 16px;

  color: #0F172A;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 800;

  letter-spacing: -0.04em;
}

.xfm-exp-intro {
  max-width: 900px;

  margin: 0;

  color: #475569;

  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.xfm-exp-gallery {
  width: 100%;

  margin: 0 0 22px;

  overflow: hidden;

  background: #EAF0F5;

  border-radius: 20px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.10);
}

.xfm-exp-gallery img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

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


/* =========================================================
   EXPERIENCE FACTS
   ========================================================= */

.xfm-exp-facts {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 1px;

  margin: 0 0 30px;

  overflow: hidden;

  background: rgba(15, 23, 42, 0.08);

  border:
    1px solid rgba(15, 23, 42, 0.08);

  border-radius: 18px;

  box-shadow:
    0 7px 20px rgba(15, 23, 42, 0.05);
}

.xfm-exp-fact {
  min-width: 0;

  padding: 18px;

  background: #FFFFFF;
}

.xfm-exp-fact-label {
  display: block;

  margin: 0 0 5px;

  color: #64748B;

  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

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

.xfm-exp-fact strong {
  display: block;

  color: #17324D;

  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}


/* =========================================================
   NORMAL CONTENT SECTION
   ========================================================= */

.xfm-exp-section {
  margin: 0 0 18px;
  padding: 24px 26px;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FBFCFE 100%
    );

  border:
    1px solid rgba(15, 23, 42, 0.07);

  border-radius: 18px;

  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.045);
}

.xfm-exp-section h2,
.xfm-exp-info-card h2 {
  margin: 0 0 14px;

  color: #0F172A;

  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: -0.025em;
}

.xfm-exp-section p {
  margin: 0 0 14px;

  color: #475569;

  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 500;
}

.xfm-exp-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.xfm-exp-highlight-list,
.xfm-exp-simple-list,
.xfm-exp-info-card ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.xfm-exp-highlight-list li,
.xfm-exp-simple-list li,
.xfm-exp-info-card li {
  position: relative;

  margin: 0 0 10px;
  padding-left: 20px;

  color: #334155;

  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
}

.xfm-exp-highlight-list li:last-child,
.xfm-exp-simple-list li:last-child,
.xfm-exp-info-card li:last-child {
  margin-bottom: 0;
}

.xfm-exp-highlight-list li::before,
.xfm-exp-simple-list li::before,
.xfm-exp-info-card li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0.7em;

  width: 7px;
  height: 7px;

  transform: translateY(-50%);

  background: #38BDF8;

  border-radius: 50%;
}

.xfm-exp-highlight-list li::before {
  background: #D4A017;
}


/* =========================================================
   INCLUDED / EXCLUDED
   ========================================================= */

.xfm-exp-two-column {
  display: grid;

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

  gap: 18px;

  margin: 0 0 18px;
}

.xfm-exp-info-card {
  padding: 24px 26px;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FBFCFE 100%
    );

  border:
    1px solid rgba(15, 23, 42, 0.07);

  border-radius: 18px;

  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.045);
}


/* Included */

.xfm-exp-info-card--included {
  border-top:
    3px solid rgba(34, 197, 94, 0.72);
}

.xfm-exp-info-card--included
.xfm-exp-section-kicker {
  color: #16834B;
}

.xfm-exp-info-card--included li::before {
  background: #22C55E;
}


/* Excluded */

.xfm-exp-info-card--excluded {
  border-top:
    3px solid rgba(239, 68, 68, 0.62);
}

.xfm-exp-info-card--excluded
.xfm-exp-section-kicker {
  color: #B33A3A;
}

.xfm-exp-info-card--excluded li::before {
  background: #EF4444;
}


/* =========================================================
   SYSTEM DATA
   Hidden visually but retained in DOM
   ========================================================= */

.xfm-exp-system-data {
  display: none;
}


/* =========================================================
   BREADCRUMB — BOTTOM
   ========================================================= */

.xfm-exp-breadcrumb {
  margin: 26px 0 0;
  padding: 18px 0 0;

  border-top:
    1px solid rgba(15, 23, 42, 0.08);

  color: #64748B;

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .xfm-experience-page {
    padding:
      18px
      16px
      40px;
  }


  /* Header */

  .xfm-exp-header {
    margin-bottom: 18px;
  }

  .xfm-exp-header h1 {
    margin-bottom: 12px;

    font-size: 29px;
    line-height: 1.06;
  }

  .xfm-exp-intro {
    font-size: 15px;
    line-height: 1.58;
  }


  /* Gallery */

  .xfm-exp-gallery {
    margin-bottom: 14px;

    border-radius: 16px;
  }

  .xfm-exp-gallery img {
    aspect-ratio: 16 / 10;
  }


  /* Facts */

  .xfm-exp-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    margin-bottom: 18px;

    border-radius: 16px;
  }

  .xfm-exp-fact {
    padding: 14px;
  }

  .xfm-exp-fact strong {
    font-size: 13px;
  }


  /* Sections */

  .xfm-exp-section,
  .xfm-exp-info-card {
    margin-bottom: 12px;

    padding: 18px;

    border-radius: 16px;
  }

  .xfm-exp-section h2,
  .xfm-exp-info-card h2 {
    margin-bottom: 11px;

    font-size: 21px;
  }

  .xfm-exp-section p {
    font-size: 15px;
    line-height: 1.58;
  }


  /* Two column becomes stacked */

  .xfm-exp-two-column {
    grid-template-columns: 1fr;

    gap: 0;

    margin-bottom: 0;
  }


  /* Lists */

  .xfm-exp-highlight-list li,
  .xfm-exp-simple-list li,
  .xfm-exp-info-card li {
    margin-bottom: 9px;

    font-size: 14.5px;
    line-height: 1.5;
  }

/* =========================================================
   BOOKING
   ========================================================= */

.xfm-exp-booking {
  margin: 0 0 22px;
  padding: 24px 26px;

  background: #FFFFFF;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;

  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.08);
}

.xfm-exp-booking h2 {
  margin: 0 0 18px;

  color: #0F172A;

  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;

  letter-spacing: -0.025em;
}

.xfm-exp-booking-widget {
  width: 100%;
  overflow: hidden;
}

.xfm-exp-booking-widget .bokunWidget,
.xfm-exp-booking-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {

  .xfm-exp-booking {
    margin-bottom: 14px;
    padding: 18px;

    border-radius: 16px;
  }

  .xfm-exp-booking h2 {
    margin-bottom: 14px;
    font-size: 21px;
  }

}