/* ============================================================
   MEMBERSHIP 2.0 — page-only styles
   Links after common.css. Reuses hero/nav/footer/eyebrow/serif/
   btn/link-arrow/media-quote/features-grid/dest-grid/cta-panel
   from there — see /website/FrontEnd/STYLE-GUIDE.md.
   ============================================================ */

/* ===== EYEBROW WITH TRAILING RULE (page-only variant) ===== */
.eyebrow-line{display:inline-flex;align-items:center;gap:12px;}
.eyebrow-line::after{content:"";display:inline-block;width:22px;height:1px;background:currentColor;opacity:.5;}

/* ===== HERO ===== */
.mem-hero{
  min-height:var(--hero-height,80vh);
  background-size:cover;
  background-position:center;
}
.mem-hero h1{max-width:480px;margin-bottom:18px;}
.mem-hero-sub{max-width:460px;}
.mem-watch-btn{gap:10px;}
.mem-watch-btn svg{flex-shrink:0;}

/* ===== PILLARS (5-up) ===== */
.mem-pillars .features-grid{grid-template-columns:repeat(5,1fr);}
.mem-pillars .feature-item svg{width:47.5px;height:47.5px;margin-bottom:18px;}

/* ===== MEMBERSHIP PLANS ===== */
.mem-plans-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:40px;
}
.mem-plans-head h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:1.25;margin-top:10px;max-width:560px;}
.mem-plans-head .link-arrow{flex-shrink:0;padding-bottom:6px;}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.plan-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.plan-img{
  aspect-ratio:174/140;
  background-size:cover;
  background-position:center;
}
.plan-card h3{font-size:21px;font-weight:500;margin:20px 24px 4px;}
.plan-tag{font-size:13.5px;font-weight:600;margin:0 24px 10px;}
.plan-desc{font-size:15px;color:var(--muted);line-height:1.6;margin:0 24px 16px;}
.plan-price{font-size:19px;font-weight:600;margin:0 24px 18px;}
.plan-price span{font-size:12px;font-weight:400;color:var(--muted);}
.btn-plan{
  width:calc(100% - 48px);
  margin:0 24px 22px;
  background:var(--gold);
  color:#fff;
}
.btn-plan::after{background:var(--gold);}
.btn-plan::before{background:#20180a;}
.plan-list{
  list-style:none;
  padding:18px 24px 24px;
  margin:0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.plan-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12.5px;
  color:var(--ink);
  line-height:1.4;
}
.plan-list svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:1px;}

/* Row alignment across cards (feedback 5-10 #20): every card spans the
   same 7 grid rows (image, title, tag, description, price, button,
   list) via subgrid, so each line starts at the same height in every
   card whatever the copy length. Browsers without subgrid keep the
   flex column above. */
@supports (grid-template-rows:subgrid){
  .plan-card{
    display:grid;
    grid-row:span 7;
    grid-template-rows:subgrid;
    row-gap:0;
  }
  .plan-card > *{align-self:start;}
  .plan-card > .plan-img,
  .plan-card > .plan-list{align-self:stretch;}
}

/* ===== DISCOVERY STAY BANNER ===== */
.mem-discovery{
  position:relative;
  overflow:hidden;
  background:var(--dark) center/cover no-repeat;
  padding:var(--section-space-sm,70px) 0;
}
.mem-discovery::before{
  content:"";
  position:absolute;inset:0;
  z-index:0;
  background:rgba(6,6,5,.45);
}
.mem-discovery-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.mem-discovery h3{
  color:#fff;
  font-weight:400;
  font-size:clamp(26px,2.8vw,34px);
  line-height:1.3;
  position:relative;
  padding-bottom:22px;
}
.mem-discovery h3::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:26px;height:1px;
  background:var(--gold-light);
}
.mem-discovery-text p{
  color:#e6e1d4;
  font-size:17px;
  line-height:1.7;
  margin-bottom:18px;
}
.mem-discovery-text .link-arrow{color:#fff;}

/* ===== MEMBER BENEFITS ===== */
.mem-benefits{background:var(--cream);padding-bottom:0;}
.mem-benefits-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.mem-benefits-head h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);margin-top:10px;}
.mem-benefits-sub{font-size:15.5px;color:var(--muted);line-height:1.6;max-width:320px;}
.mem-benefits-grid{height:clamp(160px,16vw,220px);margin-bottom:70px;}
.mem-benefits-grid .dc-row{justify-content:flex-end;}

/* ===== IAC PARTNERSHIP (45% white block / 55% photo, flush) =====
   Its own <section>, not nested in Member Benefits or wrapped in
   .container, so it's full-bleed both edges and sits flush (no
   margin/padding) against the sections above and below it. The
   card's own padding-left stands in for the container gutter so
   its text still lines up with the heading/grid above it. */
.iac-section{
  display:grid;
  grid-template-columns:45% 55%;
  align-items:stretch;
}
.iac-card{
  background:#fff;
  padding:44px 44px 44px 90px;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:22px;
}
.iac-badge{
  width:40px;height:46px;
  color:var(--ink);
  flex-shrink:0;
}
.iac-badge svg{width:100%;height:100%;}
.iac-card h3{font-size:24px;font-weight:500;line-height:1.25;margin:10px 0 14px;}
.iac-card .story-sub{margin-bottom:18px;}
.iac-photo{
  position:relative;
  min-height:340px;
  background-size:cover;
  background-position:center;
}
.iac-photo .media-quote{top:36px;right:40px;}

/* ===== CLOSING CTA ===== */
.mem-closing{
  min-height:auto;
  align-items:flex-start;
  padding:var(--section-space-sm,70px) 90px;
}
.mem-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. */
.mem-closing .media-quote{position:absolute;}
.mem-closing-sub{
  font-size:17px;
  line-height:1.6;
  color:#e6e1d4;
  max-width:400px;
  margin-bottom:30px;
}
.mem-closing .hero-actions{margin-top:0;}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .mem-pillars .features-grid{grid-template-columns:repeat(3,1fr);row-gap:30px;}
  .mem-pillars .feature-item:nth-child(4){border-left:none;}
  .plan-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .mem-discovery-inner{grid-template-columns:1fr;gap:20px;}
  .mem-benefits-grid{height:auto;display:grid;grid-template-columns:repeat(3,1fr);}
  .mem-benefits-grid .dest-card{aspect-ratio:115/76;}
  .iac-section{grid-template-columns:1fr;}
  .iac-card{padding-left:32px;}
  .iac-photo{min-height:280px;}
}

@media (max-width:640px){
  .mem-pillars .features-grid{grid-template-columns:repeat(2,1fr);}
  .mem-pillars .feature-item:nth-child(3),
  .mem-pillars .feature-item:nth-child(4){border-left:none;}
  .mem-plans-head{flex-direction:column;align-items:flex-start;}
  .plan-grid{grid-template-columns:1fr;}
  .mem-benefits-head{flex-direction:column;align-items:flex-start;}
  .mem-benefits-sub{max-width:none;}
  .mem-benefits-grid{grid-template-columns:repeat(2,1fr);}
  .iac-card{flex-direction:column;}
  .mem-closing{padding:56px 32px;}
}

@media (max-width:500px){
  .mem-hero .hero-inner{padding-top:130px;}
}

@media (max-width:440px){
  /* Shared header has no gap/hide rule for the CTA below ~500px
     (common.css), so it runs into the "LE HAUS" wordmark on
     narrow phones. Hide it here; the hamburger panel and the
     hero's own CTA cover the same action. */
  .mem-hero .btn-head-access{display:none;}
}