/* HERO */
.hero-wrap {
  position: relative;
  min-height: 40vh;
  overflow: hidden;
 /* background: url("/images/sampledata/cassiopeia/many-MINI.jpg") left bottom / cover no-repeat;*/
}

.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));}

.hero-content{
  font-family:'Abril Fatface', cursive;
  font-size:clamp(32px,8vw,72px);
  text-align: left;
  color:#fff;           /* base color */
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto;
  padding:clamp(64px,6vw,120px) 24px;
  display:flex; flex-direction:column; gap:20px;
}

/* Ensure headings are white even if template sets h1 color */
.hero-content h1,
.hero-wrap .page-title,
.hero-wrap h1 { color:#fff !important; }

.hero-badge{width:clamp(120px,18vw,240px); height:auto;}
.hero-cta{align-self:flex-start; font-weight:600; text-transform:uppercase;}

/*---------------------------------Membership Plans---------------------------------*/
/* === Overall Wrapper ===
   This limits how wide the section can be
   and centers it on the page. Adjust max-width
   to make everything narrower or wider. */

.membership-intro-common {
  background: linear-gradient(135deg, #0056b3, #3e6fde);
  color: #fff;
  border-radius: 14px;
  padding: 32px 16px;
  text-align: center;
  margin-bottom: 24px;
  max-width: 1100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Desktop only (add margin offset) */
@media (min-width: 992px) {
  .membership-intro-common {
    margin-left: -250px;
  }
}

/* Mobile + tablet tweak */
@media (max-width: 991px) {
  .membership-intro-common {
    margin-left: 0;              /* reset the offset */
    max-width: 500px;
    padding: 24px 14px;
    border-radius: 14px;
  }
}

.membership-intro-common h1{
  font:800 clamp(24px,4vw,40px)/1.2 system-ui, sans-serif;
  margin:0 0 10px;
}
.membership-intro-common p{
  font:400 clamp(14px,1.2vw,16px)/1.5 system-ui, sans-serif;
  color:rgba(255,255,255,0.92);
  margin:0 auto;
  max-width:650px;
}

.cmc-wrap-common {
  max-width: 1100px;      /* maximum total width */
  margin: 24px auto;      /* space above/below and center horizontally */
  padding: 0 12px;        /* space inside left/right edges */
}

/* === Grid Layout (for large screens) ===
   This arranges the cards in 4 equal columns.
   The negative margins pull the grid outward to align wider on big screens. */
.cmc-grid-common {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;              /* space between cards */
  margin-left: -250px;    /* only applied on big screens (removed below for smaller) */
  /*margin-right: -250px;*/
}

/* === Tablet Screens (width ≤ 1000px) ===
   Show 2 cards per row and remove large-screen margins. */
@media (max-width: 1000px) {
  .cmc-grid-common {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;       /* reset margins for smaller screens */
    margin-right: 0;
  }
}

/* === Mobile Screens (width ≤ 560px) ===
   Show 1 card per row and no extra margins. */
@media (max-width: 560px) {
  .cmc-grid-common {
    grid-template-columns: 1fr;
    margin-left: 0;       /* still no extra margins */
    margin-right: 0;
  }
}

/* === Card Box ===
   Each membership plan box style. */
.cmc-card-common {
  border: 1px solid #d4d7dc;                /* light border around the card */
  border-radius: 14px;                      /* round corners */
  background: #f7f7f7;                         /* grey background */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);/* soft shadow */
  padding: 18px 16px;                       /* inner spacing */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover animation */
  width: 230px;
}

/* === Hover Effect ===
   Slightly lifts the card when hovered. */
.cmc-card-common:hover {
  transform: translateY(-4px); 
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border-color:#0056b3
}

/* === Title (Membership Name) === */
.cmc-title-common {
  margin: 0 0 4px;
  font: 700 1.1rem/1.2 system-ui, sans-serif;
  color: #0056b3;
}

/* === Price Styling === */
.cmc-price-common {
  margin: 2px 0 8px;
  font: 700 1.25rem/1.2 system-ui;
  color: #0056b3; /* Charleston Mini Club blue */
}

/* === Muted Text === */
.cmc-muted-common {
  color: #6b7280;
  font: 400 0.9rem/1.4 system-ui;
}

/* === Feature List === */
.cmc-list-common {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font: 0.95rem/1.5 system-ui;
  color: #111;
}

/* === Each List Item === */
.cmc-list-common li {
  padding: 6px 0;
  border-top: 1px dashed #e8e9eb;
}

/* === Button (Choose this Plan) === */
.cmc-btn-common {
  display: inline-block;
  margin-left: 23px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid #000;
  border-radius: 10px;
  background: #f7f7f7;  
  color:#111;
  text-decoration: none;
  font: 600 0.95rem system-ui;
  transition: 0.3s;
}

/* === Button Hover === */
.cmc-btn-common:hover {
  color: #fff;
  background: #003f87;   /* darker blue when hovered */
}

/* === Highlighted Card ===
   Add 'featured' class to any card you want to stand out. */
.featured {
  border-color: #ffd84d;
  box-shadow: 0 4px 12px rgba(255, 216, 77, 0.25);
}

/* =============== Style For Individual Membership Page Starts Here =============== */
/* === Membership Intro Banner === */
.membership-intro{
  background: linear-gradient(135deg, #0056b3, #3e6fde);
  color:#fff;
  border-radius:14px;
  padding:32px 16px;
  text-align:center;
  margin:0 auto 24px;
  max-width:1100px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.membership-intro h1, .title{
  font:800 clamp(24px,4vw,40px)/1.2 system-ui, sans-serif;
  margin:0 0 10px;
  text-align:center;
}
.membership-intro p{
  font:400 clamp(14px,1.2vw,16px)/1.5 system-ui, sans-serif;
  color:rgba(255,255,255,0.92);
  margin:0 auto;
  max-width:650px;
}

/* === Layout wrapper (used on all pages) === */
.cmc-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  max-width:900px;
  margin:24px auto;
  padding:0 12px;
}

/* === Card === */
.cmc-card{
  width:100%;
  background:#fff;
  border:1px solid #d6d8de;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
  padding:18px 16px;
  transition:transform .3s ease, box-shadow .3s ease;
  position: relative;   /* create stacking context */
  z-index: 0;           /* send behind elements with higher z-index */
}
.cmc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  border-color:#0056b3;
}

/* === Typo === */
.cmc-title{ margin:0 0 6px; font:700 1.2rem/1.3 system-ui, sans-serif; color:#111; text-align:center;  border:1px solid #d6d8de; border-radius:14px 14px 0px 0px; }
.cmc-price{ margin:2px 0 8px; font:700 1.3rem/1.3 system-ui; color:#0056b3; text-align:center; }
.cmc-muted{ color:#6b7280; font:400 .95rem/1.5 system-ui; text-align:center; }

/* === Lists & Buttons === */
.cmc-list{ list-style:none; margin:12px 0 0; padding:0; font:.95rem/1.6 system-ui; color:#111; }
.cmc-list li{ padding:6px 0; border-top:1px dashed #e8e9eb; }
.cmc-btn{
  display:inline-block; margin-top:12px; padding:8px 16px;
  border-radius:10px; background: #f7f7f7;; color:#000 !important; text-decoration:none;
  font:600 .95rem system-ui; border:1px solid #000; transition:.3s;
}
.cmc-btn:hover{ background:#003f87; color: #fff !important; }

/* Optional highlight you can apply to a card if desired */
.featured{ border-color:#ffd84d; box-shadow:0 4px 12px rgba(255,216,77,.25); }