/* ---------- EXPERIENCE DETAIL PAGES ---------- */

.breadcrumb{
  padding:150px 0 0;
}
.breadcrumb .wrap{padding-bottom:18px;}
.breadcrumb a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:600; color:var(--navy);
}
.breadcrumb a svg{width:16px; height:16px;}
.breadcrumb a:hover{color:var(--terracotta);}

.exp-hero{
  position:relative;
  margin:18px 32px 0;
  border-radius:10px;
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
}
.exp-hero::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,20,38,0.15) 0%, rgba(2,20,38,0.78) 100%);
}
.exp-hero-inner{
  position:relative; z-index:1;
  padding:44px;
  color:var(--white);
}
.exp-tag{
  display:inline-block; font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  padding:6px 14px; border:1px solid rgba(255,255,255,0.5); border-radius:20px; margin-bottom:18px;
}
.exp-hero h1{
  font-size:clamp(2.2rem, 4.4vw, 3.4rem); color:var(--white); max-width:16ch;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.exp-hero .exp-sub{
  margin-top:14px; max-width:52ch; font-size:1.05rem; color:#eef2f5;
}

.exp-body{
  padding:70px 0 90px;
}
.exp-body-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:start;
}
.exp-desc h2{
  font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--navy); margin-bottom:18px;
}
.exp-desc p{
  color:#3b4e5e; margin-bottom:18px; font-size:1.02rem;
}
.exp-desc p:last-child{margin-bottom:0;}

.exp-info-card{
  background:var(--foam-dim); border:1px solid var(--line); border-radius:14px; padding:32px;
}
.exp-info-card h3{
  font-size:1.05rem; color:var(--navy); margin-bottom:20px;
}
.exp-info-list{display:flex; flex-direction:column; gap:16px; margin-bottom:26px;}
.exp-info-item{display:flex; gap:12px; align-items:flex-start;}
.exp-info-item svg{flex:0 0 auto; width:20px; height:20px; margin-top:2px;}
.exp-info-item div strong{display:block; font-size:0.82rem; color:var(--navy); font-weight:600;}
.exp-info-item div span{font-size:0.86rem; color:#4a5c6c;}
.exp-info-card .btn{width:100%;}

.exp-gallery{
  padding:0 0 90px;
}
.exp-gallery-head{margin-bottom:32px;}
.exp-gallery-head h2{font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--navy);}
.exp-gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px;
}
.exp-gallery-grid.count-1{grid-template-columns:1fr;}
.exp-gallery-tile{
  border-radius:8px; min-height:320px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.exp-gallery-tile.tall{grid-row:span 2; min-height:100%;}
.exp-gallery-tile svg{width:38%; max-width:100px; opacity:0.9;}
.exp-gallery-tile img, .exp-gallery-tile video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.exp-gallery-grid.count-1 .exp-gallery-tile{min-height:520px;}
.exp-gallery-tile video{background:#000;}
.exp-gallery-grid.video-portrait{display:flex; justify-content:center;}
.exp-gallery-grid.video-portrait .exp-gallery-tile{
  width:100%; max-width:400px; aspect-ratio:9/16; min-height:unset;
}

.exp-other{
  padding:0 0 90px;
}
.exp-other-head{margin-bottom:32px;}
.exp-other-head h2{font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--navy);}
.exp-other-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;
}
.exp-other-card{
  border-radius:10px; overflow:hidden; position:relative; min-height:170px;
  display:flex; align-items:flex-end; padding:20px; color:var(--white);
  background-size:cover; background-position:center;
  transition:transform .25s ease;
}
.exp-other-card::before{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,20,38,0.1), rgba(2,20,38,0.75));
}
.exp-other-card:hover{transform:translateY(-4px);}
.exp-other-card span{position:relative; z-index:1; font-family:'Cinzel', serif; font-weight:700; font-size:1.05rem;}

@media (max-width:900px){
  .exp-body-grid{grid-template-columns:1fr;}
  .exp-gallery-grid{grid-template-columns:1fr 1fr;}
  .exp-gallery-tile.tall{grid-row:span 1; min-height:220px;}
}
@media (max-width:600px){
  .exp-hero{margin:14px 16px 0; min-height:340px;}
  .exp-hero-inner{padding:28px;}
  .exp-gallery-grid{grid-template-columns:1fr;}
  .exp-gallery-tile.tall{grid-row:span 1;}
}