/* ==========================================================================
   Medical Assistant (MA) – Services page (services.html)
   --------------------------------------------------------------------------
   Load AFTER style.css. Brand colours, fonts, radius and shadows come from
   the :root variables in style.css. The overview grid reuses the homepage
   .service-card; the ambulance banner and steps reuse homepage components.

   1. Page tokens
   2. Overview grid
   3. Service detail rows
   4. Responsive
   ========================================================================== */

/* 1. Page tokens ----------------------------------------------------------- */
:root{
  --sv-img-height:420px;
  --sv-radius:var(--ma-radius-lg);
  --sv-row-gap:100px;
}

/* Service accent colours (used by cards and detail rows) */
.sv-teal{--c:var(--ma-secondary);--cb:var(--ma-secondary-soft)}
.sv-coral{--c:var(--ma-emergency);--cb:#FDECEA}
.sv-purple{--c:var(--ma-purple);--cb:#EFEBFE}
.sv-pink{--c:var(--ma-pink);--cb:#FCE8EC}
.sv-navy{--c:var(--ma-primary);--cb:#E6EEF6}
.sv-blue{--c:var(--ma-blue);--cb:#E6F0FD}
.sv-teal-dark{--c:var(--ma-secondary-dark);--cb:var(--ma-secondary-soft)}
.sv-orange{--c:var(--ma-orange);--cb:#FFF3E2}

/* 2. Overview grid --------------------------------------------------------- */
.sv-overview .service-card .btn-book{display:inline-flex;align-items:center;gap:6px}
.sv-overview .service-card .btn-arrow{display:inline-flex;align-items:center;justify-content:center}

/* 3. Service detail rows --------------------------------------------------- */
.sv-details{background:linear-gradient(180deg,#fff 0%,var(--ma-bg-soft) 100%)}
.sv-row + .sv-row{margin-top:var(--sv-row-gap)}
.sv-row{scroll-margin-top:110px}
.sv-media{position:relative}
.sv-media img{width:100%;height:var(--sv-img-height);object-fit:cover;border-radius:var(--sv-radius);border:8px solid #fff;box-shadow:var(--ma-shadow-lg)}
.sv-media::before{content:"";position:absolute;inset:28px -18px -18px 28px;border-radius:var(--sv-radius);background:var(--cb);z-index:-1}
.sv-row.sv-reverse .sv-media::before{inset:28px 28px -18px -18px}
.sv-media .sv-icon{position:absolute;left:28px;bottom:-22px;width:64px;height:64px;border-radius:18px;background:var(--c);color:#fff;font-size:1.7rem;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.sv-media .float-chip{right:-12px;top:28px}

.sv-tag{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--c);background:var(--cb);padding:7px 15px;border-radius:50px}
.sv-content h2{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;line-height:1.2;margin:16px 0 14px}
.sv-content > p{font-size:1rem;line-height:1.8}

.sv-features li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;font-weight:500;color:var(--ma-primary);line-height:1.5}
.sv-features li i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--cb);color:var(--c);font-size:.8rem;margin-top:1px}

.sv-chips span{font-size:.8rem;font-weight:500;color:var(--ma-primary);background:#fff;border:1px solid var(--ma-border);border-radius:50px;padding:6px 14px}

.sv-ambulance{scroll-margin-top:110px}

/* 4. Responsive ------------------------------------------------------------ */
@media (max-width:991.98px){
  :root{--sv-img-height:340px;--sv-row-gap:70px}
  .sv-media{margin-bottom:20px}
}
@media (max-width:575.98px){
  :root{--sv-img-height:260px}
  .sv-media::before{inset:18px -8px -10px 18px}
  .sv-row.sv-reverse .sv-media::before{inset:18px 18px -10px -8px}
  .sv-media .float-chip{display:none}
}

/* Ambulance banner secondary button (class based, no inline style) */
.btn-ma-glass{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ma-glass:hover{background:#fff;color:var(--ma-emergency-dark)}

/* Ambulance banner on this page uses an h2 (correct heading order for SEO) */
.ambulance-banner h2{color:#fff;font-size:1.9rem;font-weight:700;margin-bottom:6px}
.sv-ambulance{background:linear-gradient(180deg,var(--ma-bg-soft) 50%,#fff 50%)}