/* ============================================================
   /our-promotions page-specific styles — our-promotions.html only.

   Removed as dead code (verified zero matching markup anywhere on
   the page before deleting): .promo-grid/.promo-card*/.filter-bar/
   .filter-btn and the .flagship-card__eyebrow pill (was repeated on
   all 9 flagship cards — the same eyebrow-scaffolding problem fixed
   elsewhere on the site, just packaged as a pill instead of a plain
   label). The orphaned filterPromos() JS function was removed too.

   Added: .flagship-card--secondary — of the 9 promo cards, only 3
   are the actual named "Summer Flagship" campaign (Heart/Women's/
   Sports, confirmed by their own red corner ribbon + the hero copy's
   "Three flagship screening packages"). The other 6 were getting the
   exact same dramatic navy-gradient treatment as those 3, which
   flattened real hierarchy into 9x repetition. --secondary keeps the
   same card structure/copy, just demotes it to a lighter, calmer
   treatment so the 3 true flagships actually read as flagship.
   ============================================================ */

/* ── Urgency bar ────────────────────────────────────────────
   Force readable contrast — some children previously inherited dark
   text from main.v3.css and became unreadable on the dark gradient. */
.urgency-bar{background:linear-gradient(135deg,#0d7a6e,#0b6860)!important;color:#fff!important;border-radius:12px;padding:1.35rem 1.6rem;display:flex;align-items:center;gap:1.1rem;margin-bottom:1.8rem;box-shadow:0 6px 24px rgba(13,122,110,.18)}
.urgency-bar *{color:#fff!important}
.urgency-bar svg{stroke:#fff!important;flex-shrink:0;width:1.6rem;height:1.6rem;opacity:.95}
.urgency-bar strong{font-size:1.02rem;font-weight:700;display:block;margin-bottom:.18rem;letter-spacing:.01em}
.urgency-bar p{font-size:.9rem;opacity:.9;margin:0;line-height:1.55}

.newsletter-bar{background:var(--teal);color:#fff;border-radius:10px;padding:1.5rem 2rem;text-align:center;margin-top:2.5rem}
.newsletter-bar h3{font-size:1.1rem;margin-bottom:.4rem;color:#fff}
.newsletter-bar p{font-size:.875rem;opacity:.85;margin-bottom:1rem;color:#fff}
.newsletter-bar a{background:#fff;color:var(--teal);padding:.6rem 1.5rem;border-radius:6px;font-weight:700;font-size:.875rem;text-decoration:none;display:inline-block}

/* ── Page hero — ensure white text shows regardless of main.v3.css ── */
.page-hero{color:#fff}
.page-hero h1,.page-hero p{color:#fff!important}
.page-hero h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;margin:.4rem 0 1rem}
.page-hero p{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;opacity:.88;max-width:760px;margin:0 auto}

/* ── Flagship card — the true Summer Flagship treatment (3 cards) ── */
.flagship-card{background:linear-gradient(135deg,#0a1628 0%,#12213d 65%,#1a3a4a 100%);color:#fff;border-radius:16px;padding:2.2rem 2.2rem 1.8rem;margin-bottom:1.5rem;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(10,22,40,.25)}
.flagship-card *:not(svg){color:#fff}
.flagship-card svg{stroke:currentColor}
.flagship-card__corner{position:absolute;top:0;right:0;color:#fff;padding:.45rem 1.2rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:0 0 0 12px}
.flagship-card__corner--red{background:#dc2626}
.flagship-card__corner--teal{background:var(--teal)}
.flagship-card__grid{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center}
.flagship-card__title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.55rem,2.4vw,2.05rem);margin:0 0 .55rem;line-height:1.16;color:#fff!important}
.flagship-card__body{color:rgba(255,255,255,.82)!important;font-size:.98rem;margin:0 0 1.1rem;line-height:1.6}
.flagship-card__body strong{color:#fff!important;font-weight:700}
.flagship-card__pricerow{display:flex;align-items:baseline;gap:.85rem;margin:.4rem 0 1.25rem;flex-wrap:wrap}
.flagship-card__was{font-size:1.1rem;color:rgba(255,255,255,.55)!important;text-decoration:line-through}
.flagship-card__now{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.4rem,3.6vw,2.8rem);font-weight:700;color:#d4b47c!important;line-height:1}
.flagship-card__save{background:#16a34a;color:#fff!important;font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:20px;letter-spacing:.04em}
.flagship-card__ctas{display:flex;gap:.6rem;flex-wrap:wrap}
.flagship-card__included{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1.15rem 1.4rem;font-size:.88rem;line-height:1.65}
.flagship-card__included-title{font-weight:700;color:#fff!important;margin-bottom:.55rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.flagship-card__row{display:flex;align-items:flex-start;gap:.6rem;margin:.5rem 0;color:rgba(255,255,255,.88)!important;line-height:1.55}
.flagship-card__row strong{color:#fff!important;font-weight:700}
.flagship-card__row::before{content:'';display:inline-block;flex-shrink:0;width:18px;height:18px;margin-top:.15rem;border-radius:50%;background:#16a34a no-repeat center / 11px 11px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.flagship-card__row > span{flex:1;min-width:0}
@media(min-width:768px){.flagship-card__grid{grid-template-columns:1fr 320px}}

/* ── Secondary treatment — the 6 non-flagship promo cards.
   Same structure/classes, lighter surface, gives the 3 true
   flagships their hierarchy back. ─────────────────────────── */
.flagship-card--secondary{
  background:#fff;box-shadow:var(--shadow);border:1.5px solid var(--border-mid)
}
.flagship-card--secondary *:not(svg){color:var(--navy)}
.flagship-card--secondary .flagship-card__body{color:var(--muted)!important}
.flagship-card--secondary .flagship-card__body strong{color:var(--navy)!important}
.flagship-card--secondary .flagship-card__was{color:var(--muted)!important}
.flagship-card--secondary .flagship-card__now{color:var(--teal)!important}
.flagship-card--secondary .flagship-card__included{background:var(--cream);border-color:var(--border)}
.flagship-card--secondary .flagship-card__included-title{color:var(--navy)!important}
.flagship-card--secondary .flagship-card__row{color:var(--navy)!important}
.flagship-card--secondary .flagship-card__row strong{color:var(--navy)!important}
/* .btn--outline-white (translucent white border, meant for a dark card)
   is invisible on this card's white background — restore a real button
   affordance without touching the shared button system. */
.flagship-card--secondary .btn--outline-white{border-color:var(--border-mid)!important;color:var(--navy)!important}
.flagship-card--secondary .btn--outline-white:hover{border-color:var(--teal)!important;background:var(--teal-pale)!important}

/* ── Responsive fixes ─────────────────────────────────────────────
   1. Hero has 9 promo buttons with long nowrap labels (e.g. "Summer
      Screening Bloods → £40 (was £165)") — at 320px a single button's
      text is wider than the viewport. Stack + allow wrapping below 480.
   2. Enquiry-modal form field pair collapses to 1 column on phones.
   3. Flagship cards: tighten padding/radius to the house mobile scale,
      stack their 3-button CTA row full-width like the rest of the site,
      and stop the absolute-positioned corner ribbon clipping/overflowing
      its long labels ("New pricing · ~£110 less in month 1"). */
@media(max-width:480px){
  .promo-hero-ctas{flex-direction:column;align-items:stretch}
  .promo-hero-ctas .btn{white-space:normal;width:100%;text-align:center}
}
@media(max-width:540px){
  .frm-pair{grid-template-columns:1fr}
}
@media(max-width:640px){
  .flagship-card{padding:1.5rem 1.4rem 1.4rem;border-radius:14px}
  .flagship-card__ctas{flex-direction:column;align-items:stretch}
  .flagship-card__ctas .btn{width:100%;text-align:center}
}
@media(max-width:480px){
  .flagship-card{padding:1.25rem 1.1rem 1.2rem}
  .flagship-card__corner{max-width:64%;font-size:.62rem;line-height:1.3;padding:.4rem .65rem;white-space:normal;text-align:right}
}