/* ============================================================
   LE HAUS — EXPERIENCES (page-only styles)
   ------------------------------------------------------------
   Loaded after common.css. Only what's genuinely unique to this
   page: the hero height/photo, the 5-up pillars row, the
   experience-category card grid, the calendar table, and this
   page's closing banner photo. Everything else reuses .story /
   .media-quote / .features-strip / .media-banner as-is. See
   STYLE-GUIDE.md.
   ============================================================ */

/* ----- Hero: this page's own photo + a mid-height treatment
   (shorter than the homepage's full-height hero, taller than the
   32vh default used by simple inner pages). ----- */
.hero{
  min-height:var(--hero-height,80vh);
  background:#0b1420 url('/img/db/slideshow/experiences-hero.jpg') center/cover no-repeat;
}
/* Push the pull-quote below the nav row — at this hero height the
   shared common.css top:44px offset sits under the nav CTA button. */
.hero .media-quote{top:100px;}
@media (max-width:1100px){
  .hero .media-quote{top:88px;}
}
.hero-actions .btn-play{display:inline-flex;align-items:center;gap:10px;}
.hero-actions .play-btn-hero{width:24px;height:24px;flex-shrink:0;}

/* ----- Pillars: reuse .features-strip / .features-grid but at
   5 columns instead of the default 4. ----- */
.exp-pillars .features-grid{grid-template-columns:repeat(5,1fr);}
.exp-pillars .feature-item svg{width:47.5px;height:47.5px;}

/* ----- Section head: eyebrow + heading on the left, a supporting
   paragraph on the right. Reused by both the Categories and
   Calendar sections below. ----- */
.cat-head{--sh-gap:60px;}
.cat-head-left{max-width:420px;flex-shrink:0;}
.cat-head-left h2{line-height:1.25;margin-top:10px;}
.cat-head-copy{
  font-size:16px;
  color:var(--muted);
  line-height:1.7;
  max-width:380px;
}

/* ----- Experience category cards: image, serif title + arrow,
   supporting copy. New component — unique to this page for now. ----- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px 24px;
}
.cat-card{cursor:pointer;}
.cat-card-img{
  aspect-ratio:4/3;
  border-radius:2px;
  background-size:cover;
  background-position:center;
  margin-bottom:16px;
  transition:opacity .25s ease;
}
.cat-card:hover .cat-card-img{opacity:.85;}
.cat-card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.cat-card-title h3{
  font-family:'Playfair Display',serif;
  font-size:16px;
  font-weight:500;
  line-height:1.3;
}
.cat-card-title svg{flex-shrink:0;transition:transform .2s ease;}
.cat-card:hover .cat-card-title svg{transform:translateX(3px);}
.cat-card p{font-size:15px;color:var(--muted);line-height:1.6;}

/* ----- Calendar: header + supporting copy (via .cat-head above),
   then a simple row table with a thumbnail, four text columns and
   a CTA button. New component — unique to this page for now. ----- */
.cal-section{background:var(--cream-2);}
.cal-table{width:100%;}
.cal-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 2.1fr 1.1fr 1.5fr;
  align-items:center;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.cal-row-head{
  padding-bottom:14px;
  border-bottom:1px solid var(--ink);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.cal-col-date{
  display:flex;
  align-items:center;
  font-size:14px;
}
.cal-thumb{
  width:70px;
  aspect-ratio:2.5/1;
  height:auto;
  border-radius:2px;
  object-fit:cover;
  margin-right:14px;
  flex-shrink:0;
}
.cal-col-dest,.cal-col-exp,.cal-col-cat{font-size:14px;}

/* Month filter + month headings, added by /scr/event-calendar.js (feedback 5-10 #18). */
.cal-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.cal-chip{
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cal-chip:hover{border-color:var(--gold);}
.cal-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.cal-month{
  padding:28px 0 10px;
  font-family:'Playfair Display',serif;
  font-size:22px;
  color:var(--color-heading);
  border-bottom:1px solid var(--line);
}
.cal-row[hidden],.cal-month[hidden]{display:none;}
.cal-col-cta{text-align:right;}
.btn-sm{padding:11px 20px;font-size:10px;}
.btn-sm svg{width:13px;height:9px;}

/* ----- Closing CTA: reuses .cta-panel from common.css, styled to
   match membership-v2's .mem-closing (position + type treatment). ----- */
.exp-closing{
  min-height:auto;
  align-items:flex-start;
  padding:var(--section-space-sm,70px) 90px;
}
.exp-closing h3{font-weight:400;font-size:clamp(30px,3.2vw,39px);}
/* common.css's `.cta-panel > *{position:relative}` (later in the
   cascade, same specificity as `.media-quote{position:absolute}`)
   wins the tie and drops the quote into normal flow, wrapping it
   under the heading. Re-assert absolute positioning here. */
.exp-closing .media-quote{position:absolute;}
.exp-closing-sub{
  font-size:17px;
  line-height:1.6;
  color:#e6e1d4;
  max-width:400px;
  margin-bottom:30px;
}
.exp-closing .hero-actions{margin-top:0;}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .exp-pillars .features-grid{grid-template-columns:repeat(2,1fr);row-gap:30px;}
  .exp-pillars .feature-item:nth-child(3){border-left:none;}
  .cat-head{gap:16px;margin-bottom:36px;}
  .cat-head-left,.cat-head-copy{max-width:100%;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cal-row{grid-template-columns:1fr;gap:6px;padding:20px 0;}
  .cal-row-head{display:none;}
  .cal-col-dest::before{content:"Destination: ";color:var(--muted);}
  .cal-col-exp::before{content:"Experience: ";color:var(--muted);}
  .cal-col-cat::before{content:"Category: ";color:var(--muted);}
  .cal-col-cta{text-align:left;margin-top:10px;}
}

@media (max-width:640px){
  .exp-closing{padding:56px 32px;}
}

@media (max-width:500px){
  .cat-grid{grid-template-columns:1fr;}
  .exp-closing .hero-actions .btn{display:block;width:260px;}
  .exp-closing .hero-actions .btn:first-child{margin-bottom:14px;}
}