/* =========================================================
   EXPLOREPALGHAR
   EXPERIENCES PAGE
   ========================================================= */

.experiences-page{
  background:var(--off-white);
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.experience-breadcrumb-wrap{
  background:var(--cream);
  border-bottom:1px solid rgba(32,37,34,.07);
}

.experience-breadcrumb{
  min-height:48px;

  display:flex;
  align-items:center;
  gap:9px;

  font-size:.8rem;
  color:var(--gray);
}

.experience-breadcrumb a{
  color:var(--green-dark);
}

.experience-breadcrumb a:hover{
  color:var(--terracotta);
}


/* =========================================================
   HERO
   ========================================================= */

.experience-hero{
  position:relative;
  min-height:610px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;
  isolation:isolate;

  background:var(--green-dark);
}

.experience-hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
}

.experience-hero-media img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;
}

.experience-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(8,25,22,.92) 0%,
      rgba(8,25,22,.80) 33%,
      rgba(8,25,22,.45) 68%,
      rgba(8,25,22,.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,25,22,.05),
      rgba(8,25,22,.45)
    );
}

.experience-hero-inner{
  width:100%;
}

.experience-hero-content{
  max-width:760px;

  padding-top:90px;
  padding-bottom:80px;
}

.experience-hero .eyebrow{
  color:var(--gold);
}

.experience-hero .eyebrow::before{
  background:var(--gold);
}

.experience-hero h1{
  max-width:20ch;

  color:var(--off-white);

  font-size:
    clamp(2.5rem,5vw,3.5rem);
}

.experience-hero-lede{
  max-width:62ch;

  margin-top:22px;

  color:rgba(255,253,249,.86);

  font-size:1.07rem;
}

.experience-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;

  margin-top:30px;
}

.experience-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;

  margin-top:30px;
}

.experience-hero-meta span{
  padding:6px 11px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:30px;

  background:
    rgba(255,255,255,.07);

  color:
    rgba(255,253,249,.78);

  font-size:.72rem;
  font-weight:600;

  letter-spacing:.04em;
}


/* =========================================================
   INTRO
   ========================================================= */

.experience-intro{
  padding:80px 0;
}

.experience-intro-layout{
  display:grid;

  grid-template-columns:
    minmax(260px,.75fr)
    minmax(0,1.25fr);

  gap:80px;

  align-items:start;
}

.experience-intro h2{
  max-width:12ch;

  font-size:
    clamp(2rem,3.4vw,2.8rem);
}

.experience-intro-copy{
  max-width:720px;
}

.experience-intro-copy p{
  margin-bottom:18px;

  color:var(--gray);

  font-size:1rem;
}

.experience-intro-copy p:first-child{
  color:var(--charcoal);

  font-size:1.08rem;
}

.experience-note{
  padding:18px 20px;

  border-left:
    3px solid
    var(--gold);

  background:var(--cream);
}


/* =========================================================
   DIRECTORY
   ========================================================= */

.experience-directory{
  padding:90px 0;

  background:var(--sand);
}

.experience-section-head{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:30px;

  margin-bottom:36px;
}

.experience-section-head > div:first-child{
  max-width:690px;
}

.experience-section-head h2{
  font-size:
    clamp(2rem,3vw,2.7rem);
}

.experience-section-head p:not(.eyebrow){
  max-width:60ch;

  margin-top:12px;

  color:var(--gray);
}

.experience-result-count{
  flex:0 0 auto;

  margin-bottom:4px;

  color:var(--gray);

  font-size:.84rem;
}

.experience-result-count strong{
  color:var(--green-dark);

  font-size:1rem;
}


/* =========================================================
   FILTERS
   ========================================================= */

.experience-filter-bar{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:22px;

  margin-bottom:38px;

  padding:17px 18px;

  border:
    1px solid
    rgba(32,37,34,.08);

  border-radius:12px;

  background:var(--off-white);

  box-shadow:var(--shadow-sm);
}

.experience-category-filters{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

.experience-filter-pill{
  padding:8px 15px;

  border:
    1px solid
    rgba(32,37,34,.14);

  border-radius:30px;

  background:transparent;

  color:var(--gray);

  font-size:.78rem;
  font-weight:600;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.experience-filter-pill:hover,
.experience-filter-pill.is-active{
  background:var(--green);
  border-color:var(--green);

  color:var(--off-white);
}

.experience-location-filter{
  flex:0 0 auto;

  display:flex;
  align-items:center;

  gap:9px;
}

.experience-location-filter > span{
  color:var(--gray);

  font-size:.75rem;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.05em;
}

.experience-location-filter select{
  min-width:190px;

  padding:10px 34px 10px 12px;

  border:
    1px solid
    rgba(32,37,34,.16);

  border-radius:7px;

  background:var(--white);

  color:var(--charcoal);

  font:inherit;
  font-size:.82rem;
}


/* =========================================================
   GRID
   ========================================================= */

.experience-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:24px;
}


/* =========================================================
   EXPERIENCE CARD
   ========================================================= */

.experience-card{
  min-width:0;

  overflow:hidden;

  border:
    1px solid
    rgba(32,37,34,.07);

  border-radius:14px;

  background:var(--off-white);

  box-shadow:var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .2s ease;
}

.experience-card:hover{
  transform:translateY(-4px);

  box-shadow:var(--shadow-md);
}

.experience-card[hidden]{
  display:none !important;
}


/* IMAGE */

.experience-card-image{
  position:relative;

  aspect-ratio:16/11;

  overflow:hidden;

  background:#ddd4c4;
}

.experience-card-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transition:transform .45s ease;
}

.experience-card:hover
.experience-card-image img{
  transform:scale(1.035);
}


/* STATUS */

.experience-status{
  position:absolute;

  top:13px;
  left:13px;

  padding:6px 10px;

  border-radius:30px;

  background:
    rgba(255,253,249,.94);

  box-shadow:
    0 3px 12px
    rgba(0,0,0,.10);

  color:var(--green-dark);

  font-size:.68rem;
  font-weight:700;

  letter-spacing:.03em;
}

.experience-status--seasonal{
  color:#85512e;
}

.experience-status--check{
  color:#765e21;
}


/* BODY */

.experience-card-body{
  padding:20px;
}

.experience-category{
  margin-bottom:6px;

  color:var(--terracotta);

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.experience-card h3{
  margin-bottom:7px;

  font-size:1.28rem;
  line-height:1.25;
}

.experience-location{
  margin-bottom:11px;

  color:var(--teal);

  font-size:.78rem;
  font-weight:700;
}

.experience-summary{
  min-height:82px;

  margin-bottom:16px;

  color:var(--gray);

  font-size:.88rem;
  line-height:1.58;
}


/* TAGS */

.experience-tags{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-bottom:17px;
}

.experience-tags span{
  padding:5px 8px;

  border-radius:4px;

  background:var(--cream);

  color:var(--gray);

  font-size:.67rem;
  font-weight:600;
}


/* =========================================================
   INLINE DETAILS
   ========================================================= */

.experience-card-more{
  border-top:
    1px solid
    rgba(32,37,34,.08);
}

.experience-card-more summary{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:10px;

  padding-top:14px;

  color:var(--green-dark);

  font-size:.82rem;
  font-weight:700;

  cursor:pointer;

  list-style:none;
}

.experience-card-more summary::-webkit-details-marker{
  display:none;
}

.experience-card-more summary span{
  transition:transform .2s ease;
}

.experience-card-more[open]
summary span{
  transform:rotate(45deg);
}

.experience-card-more > div{
  padding-top:13px;
}

.experience-card-more > div p{
  margin-bottom:10px;

  color:var(--gray);

  font-size:.8rem;
  line-height:1.58;
}

.experience-card-more strong{
  color:var(--charcoal);
}


/* =========================================================
   FUTURE COMMERCIAL ELEMENTS

   CSS exists now.
   HTML is commented out until data is verified.
   ========================================================= */

.experience-commerce{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:14px;

  margin-top:16px;
  padding-top:15px;

  border-top:
    1px solid
    rgba(32,37,34,.08);
}

.experience-price small,
.experience-price span{
  display:block;

  color:var(--gray);

  font-size:.68rem;
}

.experience-price strong{
  display:block;

  color:var(--green-dark);

  font-size:1.2rem;
}

.experience-rating{
  text-align:right;

  color:var(--green-dark);

  font-size:.84rem;
  font-weight:700;
}

.experience-rating small{
  display:block;

  color:var(--gray);

  font-size:.65rem;
  font-weight:500;
}

.experience-book-btn{
  width:100%;

  justify-content:center;

  margin-top:13px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.experience-empty{
  max-width:600px;

  margin:45px auto 0;

  padding:45px 25px;

  border:
    1px solid
    rgba(32,37,34,.08);

  border-radius:12px;

  background:var(--off-white);

  text-align:center;
}

.experience-empty h3{
  margin-bottom:9px;

  font-size:1.5rem;
}

.experience-empty p{
  margin-bottom:20px;

  color:var(--gray);
}


/* =========================================================
   FUTURE ADS
   ========================================================= */

.experience-ad-slot{
  min-height:180px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:50px;

  border:
    1px dashed
    rgba(32,37,34,.18);

  border-radius:8px;

  background:rgba(255,255,255,.55);

  color:var(--gray);

  font-size:.68rem;

  text-transform:uppercase;
  letter-spacing:.1em;
}


/* =========================================================
   THEMES
   ========================================================= */

.experience-themes{
  padding:95px 0;
}

.experience-section-head--simple{
  justify-content:flex-start;
}

.experience-theme-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  border-top:
    1px solid
    rgba(32,37,34,.10);

  border-left:
    1px solid
    rgba(32,37,34,.10);
}

.experience-theme-grid article{
  position:relative;

  min-height:250px;

  padding:34px;

  border-right:
    1px solid
    rgba(32,37,34,.10);

  border-bottom:
    1px solid
    rgba(32,37,34,.10);
}

.experience-theme-grid article > span{
  display:block;

  margin-bottom:34px;

  color:var(--gold);

  font-family:var(--font-display);
  font-size:1.25rem;
}

.experience-theme-grid h3{
  margin-bottom:12px;

  font-size:1.35rem;
}

.experience-theme-grid p{
  max-width:52ch;

  color:var(--gray);

  font-size:.9rem;
}


/* =========================================================
   BEFORE YOU GO
   ========================================================= */

.experience-before-you-go{
  padding:85px 0;

  background:var(--green-dark);

  color:var(--off-white);
}

.experience-before-layout{
  display:grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap:80px;
}

.experience-before-you-go .eyebrow{
  color:var(--gold);
}

.experience-before-you-go
.eyebrow::before{
  background:var(--gold);
}

.experience-before-you-go h2{
  max-width:10ch;

  color:var(--off-white);

  font-size:
    clamp(2rem,3vw,2.7rem);
}

.experience-before-list{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:26px 32px;
}

.experience-before-list > div{
  padding-top:17px;

  border-top:
    1px solid
    rgba(255,255,255,.17);
}

.experience-before-list strong{
  display:block;

  margin-bottom:7px;

  color:var(--gold);

  font-size:.9rem;
}

.experience-before-list p{
  color:
    rgba(255,253,249,.72);

  font-size:.84rem;
}


/* =========================================================
   PLACES / STAYS PATHWAYS
   ========================================================= */

.experience-pathway{
  padding:70px 0;

  border-bottom:
    1px solid
    rgba(32,37,34,.08);

  background:var(--cream);
}

.experience-pathway--stay{
  background:var(--sand);
}

.experience-pathway-inner{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:50px;
}

.experience-pathway-inner > div{
  max-width:680px;
}

.experience-pathway h2{
  margin-bottom:9px;

  font-size:
    clamp(1.8rem,3vw,2.45rem);
}

.experience-pathway p:not(.eyebrow){
  color:var(--gray);
}

.experience-pathway-link{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;

  gap:15px;

  padding:
    15px 0 8px;

  border-bottom:
    1px solid
    var(--green-dark);

  color:var(--green-dark);

  font-weight:700;

  transition:
    gap .2s ease,
    color .2s ease;
}

.experience-pathway-link:hover{
  gap:21px;

  color:var(--terracotta);
}


/* =========================================================
   TRAVEL GUIDE CTA
   ========================================================= */

.experience-guide-cta{
  padding:90px 0;

  text-align:center;
}

.experience-guide-cta .container{
  max-width:760px;
}

.experience-guide-cta .eyebrow{
  justify-content:center;
}

.experience-guide-cta h2{
  margin-bottom:14px;

  font-size:
    clamp(2rem,3.2vw,2.7rem);
}

.experience-guide-cta p:not(.eyebrow){
  max-width:58ch;

  margin:
    0 auto 22px;

  color:var(--gray);
}


/* =========================================================
   FAQ
   ========================================================= */

.experience-faq{
  padding:95px 0;

  background:var(--cream);
}

.experience-faq-layout{
  display:grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap:80px;

  align-items:start;
}

.experience-faq-intro{
  position:sticky;

  top:105px;
}

.experience-faq-intro h2{
  margin-bottom:14px;

  font-size:
    clamp(2rem,3vw,2.7rem);
}

.experience-faq-intro p:not(.eyebrow){
  max-width:42ch;

  color:var(--gray);
}

.experience-faq-list{
  border-top:
    1px solid
    rgba(32,37,34,.12);
}

.experience-faq-list details{
  border-bottom:
    1px solid
    rgba(32,37,34,.12);
}

.experience-faq-list summary{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:21px 0;

  color:var(--green-dark);

  font-family:var(--font-display);
  font-size:1.08rem;
  font-weight:600;

  cursor:pointer;
  list-style:none;
}

.experience-faq-list
summary::-webkit-details-marker{
  display:none;
}

.experience-faq-list summary span{
  flex:0 0 auto;

  color:var(--terracotta);

  font-family:var(--font-body);

  transition:transform .2s ease;
}

.experience-faq-list
details[open] summary span{
  transform:rotate(45deg);
}

.experience-faq-list details > div{
  padding:
    0 0 22px;
}

.experience-faq-list details p{
  max-width:68ch;

  color:var(--gray);

  font-size:.91rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .experience-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .experience-filter-bar{
    align-items:flex-start;

    flex-direction:column;
  }

}


@media(max-width:900px){

  .experience-intro-layout,
  .experience-before-layout,
  .experience-faq-layout{
    grid-template-columns:1fr;

    gap:38px;
  }

  .experience-intro h2,
  .experience-before-you-go h2{
    max-width:none;
  }

  .experience-faq-intro{
    position:static;
  }

  .experience-pathway-inner{
    align-items:flex-start;

    flex-direction:column;

    gap:25px;
  }

}


@media(max-width:700px){

  .experience-hero{
    min-height:580px;
  }

  .experience-hero-content{
    padding-top:70px;
    padding-bottom:54px;
  }

  .experience-hero h1{
    font-size:
      clamp(2rem,7vw,3rem);
  }
  .experience-intro h2 {
    font-size: clamp(1.4rem, 3vw, 2.7rem);
  }


    .experience-section-head h2 {
      font-size: clamp(1.4rem, 3vw, 2.7rem);
    }

  .experience-hero-lede{
    font-size:.94rem;
  }

  .experience-hero-actions{
    flex-direction:column;

    align-items:stretch;
  }

  .experience-hero-actions .btn{
    justify-content:center;
  }

  .experience-intro,
  .experience-directory,
  .experience-themes,
  .experience-faq{
    padding-top:68px;
    padding-bottom:68px;
  }

  .experience-section-head{
    align-items:flex-start;

    flex-direction:column;

    gap:12px;
  }

  .experience-category-filters{
    flex-wrap:nowrap;

    width:100%;

    overflow-x:auto;

    padding-bottom:4px;

    scrollbar-width:none;
  }

  .experience-category-filters::-webkit-scrollbar{
    display:none;
  }

  .experience-location-filter{
    width:100%;

    justify-content:space-between;
  }

  .experience-location-filter select{
    flex:1;

    min-width:0;
  }


  /* =====================================================
     MOBILE EXPERIENCE GRID
     KEEP 2 CARDS
     ===================================================== */

  .experience-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:12px;
  }

  .experience-card-body{
    padding:13px;
  }

  .experience-card-image{
    aspect-ratio:4/3;
  }

  .experience-status{
    top:8px;
    left:8px;

    padding:4px 7px;

    font-size:.56rem;
  }

  .experience-card h3{
    font-size:.96rem;
  }

  .experience-category{
    font-size:.58rem;
  }

  .experience-location{
    font-size:.66rem;
  }

  .experience-summary{
    min-height:0;

    font-size:.72rem;
    line-height:1.48;
  }

  .experience-tags{
    gap:4px;
  }

  .experience-tags span{
    padding:4px 6px;

    font-size:.56rem;
  }

  .experience-tags span:nth-child(3){
    display:none;
  }

  .experience-card-more summary{
    font-size:.7rem;
  }

  .experience-card-more > div p{
    font-size:.68rem;
  }

  .experience-theme-grid{
    grid-template-columns:1fr;
  }

  .experience-before-list{
    grid-template-columns:1fr;
  }

}


@media(max-width:390px){

  .experience-grid{
    gap:9px;
  }

  .experience-card-body{
    padding:11px;
  }

  .experience-card h3{
    font-size:.88rem;
  }

  .experience-summary{
    font-size:.68rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .experience-card,
  .experience-card-image img,
  .experience-card-more summary span,
  .experience-faq-list summary span{
    transition:none !important;
  }

}


/* =========================================================
   EXPERIENCES v1.1 — COMPACT DISCOVERY EXPERIENCE
   ========================================================= */

:root{
  --experience-sticky-offset:78px;
}

.experience-hero{
  min-height:clamp(450px,55vh,500px);
}

.experience-hero-content{
  padding-top:62px;
  padding-bottom:54px;
}

.experience-hero-meta button{
  min-height:34px;
  padding:6px 11px;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:30px;

  background:
    rgba(255,255,255,.08);

  color:
    rgba(255,253,249,.88);

  font:inherit;
  font-size:.72rem;
  font-weight:650;

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.experience-hero-meta button:hover,
.experience-hero-meta button.is-active{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.2);
  transform:translateY(-1px);
}

.experience-hero-meta button:focus-visible,
.experience-filter-bar button:focus-visible,
.experience-filter-bar input:focus-visible,
.experience-filter-bar select:focus-visible,
.experience-card button:focus-visible,
.experience-quick-view button:focus-visible,
.experience-before-disclosure summary:focus-visible,
.experience-trip-card:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.experience-directory{
  padding:72px 0 78px;
}

.experience-intro{
  padding:68px 0;
  border-bottom:1px solid rgba(32,37,34,.08);
}

.experience-intro-layout{
  gap:58px;
}


/* =========================================================
   STICKY SEARCH AND FILTER TOOLS
   ========================================================= */

.experience-filter-bar{
  position:sticky;
  top:var(--experience-sticky-offset);
  z-index:40;

  display:block;

  margin-bottom:30px;
  padding:14px;

  border:1px solid rgba(32,37,34,.11);
  border-radius:14px;

  background:rgba(255,253,249,.96);
  box-shadow:0 10px 34px rgba(22,51,39,.12);

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.experience-filter-primary{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(220px,.52fr) auto;
  align-items:center;
  gap:10px;
}

.experience-search-control{
  position:relative;
  min-width:0;
}

.experience-search-control input{
  width:100%;
  min-height:44px;
  padding:10px 44px 10px 39px;

  border:1px solid rgba(32,37,34,.16);
  border-radius:9px;

  background:var(--white);
  color:var(--charcoal);
  font:inherit;
  font-size:.86rem;
}

.experience-search-control input::placeholder{
  color:#77827c;
}

.experience-search-icon{
  position:absolute;
  top:50%;
  left:13px;
  z-index:1;

  color:var(--green-dark);
  font-size:1.15rem;
  transform:translateY(-52%);
  pointer-events:none;
}

.experience-search-control button{
  position:absolute;
  top:50%;
  right:5px;

  width:34px;
  min-height:34px;
  padding:0;

  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--gray);
  font-size:1.15rem;
  cursor:pointer;
  transform:translateY(-50%);
}

.experience-search-control button:hover{
  background:var(--cream);
  color:var(--green-dark);
}

.experience-location-filter{
  min-width:0;
}

.experience-location-filter select{
  min-height:44px;
}

.experience-filter-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.experience-tool-button{
  min-height:44px;
  padding:9px 12px;

  border:1px solid rgba(32,37,34,.14);
  border-radius:9px;

  background:var(--white);
  color:var(--green-dark);

  font:inherit;
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;

  cursor:pointer;
}

.experience-tool-button:hover,
.experience-tool-button.is-active{
  border-color:var(--green);
  background:var(--green);
  color:var(--off-white);
}

.experience-tool-button strong{
  display:inline-grid;
  place-items:center;

  min-width:20px;
  min-height:20px;
  margin-left:3px;
  padding:0 5px;

  border-radius:20px;
  background:var(--cream);
  color:var(--green-dark);
  font-size:.68rem;
}

.experience-category-filters{
  flex-wrap:nowrap;
  gap:7px;

  width:100%;
  margin-top:10px;
  padding:1px 1px 3px;

  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}

.experience-filter-pill{
  flex:0 0 auto;
  min-height:38px;
}


/* =========================================================
   COMPACT CARDS AND ACTIONS
   ========================================================= */

.experience-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.experience-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
}

.experience-summary{
  display:-webkit-box;
  min-height:0;
  margin-bottom:14px;
  overflow:hidden;

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

.experience-tags{
  margin-bottom:15px;
}

.experience-tags span:nth-child(n+4){
  display:none;
}

.experience-card-more{
  display:none;
}

.experience-save-button{
  position:absolute;
  top:11px;
  right:11px;
  z-index:2;

  display:grid;
  place-items:center;

  width:40px;
  min-height:40px;
  padding:0;

  border:1px solid rgba(255,255,255,.56);
  border-radius:50%;

  background:rgba(255,253,249,.94);
  box-shadow:0 5px 18px rgba(0,0,0,.15);
  color:var(--green-dark);

  font:inherit;
  font-size:1.28rem;
  line-height:1;

  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}

.experience-save-button:hover{
  transform:scale(1.05);
}

.experience-save-button.is-saved{
  background:var(--terracotta);
  color:#fff;
}

.experience-card-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;

  margin-top:auto;
  padding-top:14px;

  border-top:1px solid rgba(32,37,34,.08);
}

.experience-quick-view-button,
.experience-share-button{
  min-height:44px;
  padding:9px 13px;

  border:1px solid var(--green);
  border-radius:8px;

  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}

.experience-quick-view-button{
  background:var(--green);
  color:#fff;
}

.experience-share-button{
  background:transparent;
  color:var(--green-dark);
}

.experience-quick-view-button:hover{
  background:var(--green-dark);
}

.experience-share-button:hover{
  background:var(--cream);
}


/* =========================================================
   LOAD MORE AND PROGRESS
   ========================================================= */

.experience-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  margin-top:34px;
  padding:17px 18px;

  border:1px solid rgba(32,37,34,.1);
  border-radius:12px;
  background:rgba(255,253,249,.72);
}

.experience-progress{
  margin:0;
  color:var(--gray);
  font-size:.84rem;
}

.experience-progress strong{
  color:var(--green-dark);
}

.experience-pagination-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.experience-pagination .btn{
  min-height:46px;
  justify-content:center;
}

.experience-back-button{
  min-height:44px;
  padding:8px 5px;

  border:0;
  border-bottom:1px solid var(--green-dark);
  background:transparent;
  color:var(--green-dark);

  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}


/* =========================================================
   QUICK VIEW — MODAL ON DESKTOP, BOTTOM SHEET ON MOBILE
   ========================================================= */

html.experience-quick-view-open,
html.experience-quick-view-open body{
  overflow:hidden;
}

dialog.experience-quick-view{
  position:fixed;
  inset:0;

  width:min(980px,calc(100vw - 32px));
  max-width:none;
  max-height:min(86vh,760px);
  max-height:min(86dvh,760px);
  margin:auto;
  padding:0;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;

  background:var(--off-white);
  color:var(--charcoal);
  box-shadow:0 30px 100px rgba(6,22,16,.48);
}

dialog.experience-quick-view[open]{
  display:block;
}

dialog.experience-quick-view::backdrop{
  background:rgba(6,20,15,.76);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

.experience-quick-view-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  max-height:inherit;
}

.experience-quick-view-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;

  display:grid;
  place-items:center;

  width:42px;
  min-height:42px;
  padding:0;

  border:1px solid rgba(32,37,34,.12);
  border-radius:50%;
  background:rgba(255,253,249,.94);
  box-shadow:0 5px 18px rgba(0,0,0,.12);
  color:var(--green-dark);

  font:inherit;
  font-size:1.45rem;
  cursor:pointer;
}

.experience-quick-view-media{
  min-height:540px;
  background:#d7d0c4;
}

.experience-quick-view-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.experience-quick-view-content{
  max-height:min(86vh,760px);
  max-height:min(86dvh,760px);
  padding:42px 42px 34px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.experience-quick-view-content h2{
  margin:0 48px 8px 0;
  color:var(--green-dark);
  font-size:clamp(1.8rem,3vw,2.45rem);
}

.experience-quick-view-summary{
  margin:16px 0;
  color:var(--gray);
  font-size:.96rem;
  line-height:1.65;
}

.experience-quick-view-details{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(32,37,34,.11);
}

.experience-quick-view-details h3{
  margin-bottom:11px;
  color:var(--green-dark);
  font-size:1.13rem;
}

.experience-quick-view-details p{
  margin:0 0 11px;
  color:var(--gray);
  font-size:.88rem;
  line-height:1.62;
}

.experience-quick-view-details strong{
  color:var(--charcoal);
}

.experience-quick-view-commerce{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid rgba(32,37,34,.11);
}

.experience-quick-view-commerce .experience-commerce{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.experience-quick-view-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:22px;
  padding-top:18px;

  border-top:1px solid rgba(32,37,34,.11);
}

.experience-modal-action{
  min-height:44px;
  padding:9px 15px;

  border:1px solid rgba(32,37,34,.14);
  border-radius:8px;
  background:var(--white);
  color:var(--green-dark);

  font:inherit;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
}

.experience-modal-action:hover,
.experience-modal-action.is-saved{
  border-color:var(--green);
  background:var(--green);
  color:#fff;
}

.experience-toast{
  position:fixed;
  left:50%;
  bottom:max(22px,env(safe-area-inset-bottom));
  z-index:120;

  max-width:min(420px,calc(100vw - 28px));
  padding:12px 17px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:30px;
  background:var(--green-dark);
  box-shadow:0 12px 38px rgba(0,0,0,.26);
  color:#fff;

  font-size:.82rem;
  font-weight:650;
  text-align:center;

  transform:translateX(-50%);
}


/* =========================================================
   COMPACT EDITORIAL SECTIONS
   ========================================================= */

.experience-themes{
  padding:72px 0;
}

.experience-theme-grid article{
  min-height:210px;
  padding:28px;
}

.experience-theme-grid article > span{
  margin-bottom:23px;
}

.experience-before-you-go{
  padding:28px 0;
}

.experience-before-disclosure{
  border:1px solid rgba(255,255,255,.17);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}

.experience-before-disclosure > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  min-height:112px;
  padding:22px 25px;

  cursor:pointer;
  list-style:none;
}

.experience-before-disclosure > summary::-webkit-details-marker{
  display:none;
}

.experience-before-heading{
  display:grid;
  gap:4px;
}

.experience-before-heading .eyebrow{
  color:var(--gold);
}

.experience-before-heading > strong{
  color:var(--off-white);
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.4vw,2rem);
}

.experience-before-heading > span:last-child{
  color:rgba(255,253,249,.72);
  font-size:.84rem;
}

.experience-before-toggle{
  flex:0 0 auto;
  display:grid;
  place-items:center;

  width:44px;
  height:44px;

  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:var(--gold);
  font-size:1.45rem;

  transition:transform .2s ease,background .2s ease;
}

.experience-before-disclosure[open] .experience-before-toggle{
  background:rgba(255,255,255,.08);
  transform:rotate(45deg);
}

.experience-before-disclosure .experience-before-list{
  padding:2px 25px 25px;
}

.experience-trip-links{
  padding:72px 0;
  background:var(--cream);
}

.experience-trip-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.experience-trip-card{
  display:flex;
  flex-direction:column;
  min-height:240px;
  padding:26px;

  border:1px solid rgba(32,37,34,.09);
  border-radius:14px;
  background:var(--off-white);
  box-shadow:var(--shadow-sm);

  transition:transform .2s ease,box-shadow .2s ease;
}

.experience-trip-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.experience-trip-card > span{
  margin-bottom:24px;
  color:var(--gold);
  font-family:var(--font-display);
  font-size:1.1rem;
}

.experience-trip-card h3{
  margin-bottom:10px;
  color:var(--green-dark);
  font-size:1.35rem;
}

.experience-trip-card p{
  margin-bottom:22px;
  color:var(--gray);
  font-size:.86rem;
}

.experience-trip-card > strong{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  color:var(--green-dark);
  font-size:.82rem;
}

.experience-faq{
  padding:76px 0;
}


/* =========================================================
   v1.1 RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .experience-filter-primary{
    grid-template-columns:minmax(220px,1fr) minmax(210px,.7fr);
  }

  .experience-filter-actions{
    grid-column:1 / -1;
  }

  .experience-quick-view-media{
    min-height:500px;
  }

}


@media(max-width:760px){

  :root{
    --experience-sticky-offset:68px;
  }

  .experience-hero{
    min-height:470px;
  }

  .experience-hero-content{
    padding-top:48px;
    padding-bottom:44px;
  }

  .experience-hero-lede{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
  }

  .experience-hero-actions{
    flex-direction:row;
  }

  .experience-hero-actions .btn{
    flex:1;
    min-width:0;
    padding-inline:10px;
    font-size:.78rem;
  }

  .experience-directory{
    padding:56px 0 62px;
  }

  .experience-intro{
    padding:56px 0;
  }

  .experience-filter-bar{
    top:var(--experience-sticky-offset);
    margin-inline:-4px;
    margin-bottom:22px;
    padding:10px;
    border-radius:12px;
  }

  .experience-filter-primary{
    grid-template-columns:minmax(0,1fr) minmax(122px,.55fr);
    gap:8px;
  }

  .experience-location-filter > span{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .experience-location-filter select{
    width:100%;
    min-width:0;
    padding-left:9px;
    font-size:.74rem;
  }

  .experience-filter-actions{
    grid-column:1 / -1;
    overflow-x:auto;
    padding-bottom:1px;
    scrollbar-width:none;
  }

  .experience-filter-actions::-webkit-scrollbar{
    display:none;
  }

  .experience-tool-button{
    flex:0 0 auto;
    min-height:38px;
    padding:7px 10px;
    font-size:.7rem;
  }

  .experience-category-filters{
    margin-top:8px;
  }

  .experience-filter-pill{
    min-height:34px;
    padding:6px 12px;
    font-size:.7rem;
  }

  .experience-summary{
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  .experience-tags span:nth-child(n+3){
    display:none;
  }

  .experience-save-button{
    top:7px;
    right:7px;
    width:36px;
    min-height:36px;
    font-size:1.08rem;
  }

  .experience-card-actions{
    gap:5px;
    padding-top:10px;
  }

  .experience-quick-view-button,
  .experience-share-button{
    min-height:40px;
    padding:7px 8px;
    font-size:.68rem;
  }

  .experience-pagination{
    align-items:stretch;
    flex-direction:column;
    margin-top:24px;
    padding:14px;
  }

  .experience-progress{
    text-align:center;
  }

  .experience-pagination-actions{
    justify-content:center;
  }

  .experience-pagination .btn{
    width:100%;
  }

  dialog.experience-quick-view{
    inset:auto 0 0;
    width:100%;
    max-height:92vh;
    max-height:92dvh;
    margin:auto 0 0;
    border-width:1px 0 0;
    border-radius:24px 24px 0 0;
  }

  .experience-quick-view-shell{
    display:block;
    max-height:92vh;
    max-height:92dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .experience-quick-view-media{
    min-height:0;
    aspect-ratio:16/9;
  }

  .experience-quick-view-content{
    max-height:none;
    padding:25px 18px max(24px,env(safe-area-inset-bottom));
    overflow:visible;
  }

  .experience-quick-view-content h2{
    margin-right:48px;
    font-size:1.7rem;
  }

  .experience-quick-view-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    margin-inline:-18px;
    margin-bottom:calc(-1 * max(24px,env(safe-area-inset-bottom)));
    padding:13px 18px max(13px,env(safe-area-inset-bottom));
    background:rgba(255,253,249,.97);
    box-shadow:0 -8px 22px rgba(18,44,33,.07);
  }

  .experience-modal-action{
    flex:1;
    min-width:78px;
  }

  .experience-theme-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(255px,84%);
    grid-template-columns:none;

    margin-inline:-14px;
    padding:1px 14px 12px;

    overflow-x:auto;
    scroll-snap-type:x mandatory;

    border:0;
    scrollbar-width:none;
  }

  .experience-theme-grid::-webkit-scrollbar{
    display:none;
  }

  .experience-theme-grid article{
    min-height:225px;
    border:1px solid rgba(32,37,34,.1);
    border-radius:12px;
    scroll-snap-align:start;
  }

  .experience-before-disclosure > summary{
    min-height:100px;
    padding:18px;
  }

  .experience-before-heading > span:last-child{
    display:none;
  }

  .experience-before-disclosure .experience-before-list{
    grid-template-columns:1fr;
    gap:17px;
    padding:0 18px 20px;
  }

  .experience-trip-links{
    padding:58px 0;
  }

  .experience-trip-grid{
    grid-auto-flow:column;
    grid-auto-columns:minmax(252px,84%);
    grid-template-columns:none;

    margin-inline:-14px;
    padding:1px 14px 12px;

    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .experience-trip-grid::-webkit-scrollbar{
    display:none;
  }

  .experience-trip-card{
    min-height:220px;
    scroll-snap-align:start;
  }

  .experience-faq{
    padding:60px 0;
  }

}


@media(max-width:390px){

  .experience-search-control input{
    padding-left:34px;
    font-size:.73rem;
  }

  .experience-search-icon{
    left:10px;
  }

  .experience-card-actions{
    grid-template-columns:1fr;
  }

  .experience-share-button{
    min-height:36px;
  }

}


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

  .experience-hero-meta button,
  .experience-save-button,
  .experience-before-toggle,
  .experience-trip-card{
    transition:none !important;
  }

}
