/* =========================================================================
   SECTIONS.CSS — Section-specific design systems

   style.css holds the shared brand foundation (tokens, header, footer,
   buttons, typography) used everywhere. This file holds everything that
   makes each MAIN MENU SECTION visually distinct, per the redesign brief:

     .svc-*   Services      — icon-forward, benefit/feature focused
     .cond-*  Conditions    — patient education, symptom/diagnosis focused,
                              softer clinical tone with alert-style callouts
     .proc-*  Procedures    — clinical/technical, dark navy, step timelines
     .doc-*   Doctors       — people-focused directory + profile layout
     .about-* About Us      — storytelling, editorial, warm imagery
     .home-*  Home          — brand + conversion focused (mostly reuses
                              style.css's existing hero/card system, plus
                              a few home-only refinements below)

   Pages within the same section share the same classes here — only their
   data (text, icons, images) differs. Different sections intentionally do
   NOT share these classes, so Services never visually looks like
   Conditions, which never looks like Procedures, etc.
   ========================================================================= */


/* -------------------------------------------------------------------------
   SHARED SECTION PRIMITIVES (used by 2+ sections, kept here rather than
   duplicated — but the way they're *composed* still differs per section)
   ------------------------------------------------------------------------- */
.quick-fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: #fff;
  border: 1px solid var(--gb-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.quick-fact-strip .fact {
  flex: 1 1 0;
  min-width: 140px;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--gb-border);
}
.quick-fact-strip .fact:last-child { border-right: none; }
.quick-fact-strip .fact .label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gb-text-muted); margin-bottom: 0.3rem;
}
.quick-fact-strip .fact .value {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--gb-primary-darker);
}

.step-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.step-chip {
  background: var(--gb-accent); color: var(--gb-secondary-dark);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-size: 0.85rem; font-weight: 600;
}

/* Prominent "seek care" / warning callout — visually distinct from the
   neutral .callout-box used elsewhere; used sparingly for genuine flags */
.alert-callout {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #FEF6E8; border: 1px solid #F3DDA8;
  border-left: 5px solid var(--gb-warning);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.5rem;
  margin: 1.75rem 0;
}
.alert-callout i.bi { font-size: 1.4rem; color: var(--gb-warning); flex: none; margin-top: 2px; }
.alert-callout strong { color: #8A5E05; }
.alert-callout p { margin: 0; color: #6B4E10; }


/* =========================================================================
   HOME — refinements only (base hero/card system lives in style.css)
   ========================================================================= */
.home-hero-illustration {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: block;
}
.home-split-media {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  display: block;
}


/* =========================================================================
   SERVICES — icon-forward, benefit/feature focused
   ========================================================================= */
.svc-hero {
  position: relative;
  background: var(--gb-bg);
  padding-block: clamp(48px, 6vw, 76px);
  overflow: hidden;
}
.svc-hero-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; display: block; }

.svc-benefit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--gb-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.svc-benefit-row .benefit { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.9rem; color: var(--gb-text); }
.svc-benefit-row .benefit i { color: var(--gb-secondary); font-size: 1.3rem; }

.svc-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.svc-section-title .num {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gb-gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; flex: none;
}

/* "What's Included" horizontal process steps (distinct from procedure's
   vertical timeline below) */
.svc-process { display: flex; flex-wrap: wrap; gap: 0; counter-reset: svcstep; }
.svc-process .svc-step {
  flex: 1 1 220px;
  position: relative;
  padding: 1.5rem 1.25rem;
  background: #fff;
  border: 1px solid var(--gb-border);
  border-radius: var(--radius-md);
  margin: 0 8px 16px 0;
}
.svc-process .svc-step::before {
  counter-increment: svcstep;
  content: counter(svcstep);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gb-accent); color: var(--gb-secondary-dark);
  font-family: var(--font-display); font-weight: 700; margin-bottom: 0.85rem;
}
.svc-process .svc-step h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.svc-process .svc-step p { font-size: 0.875rem; margin: 0; }

.svc-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.svc-benefit-card {
  background: var(--gb-accent);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.svc-benefit-card i { color: var(--gb-secondary-dark); font-size: 1.5rem; flex: none; margin-top: 2px; }
.svc-benefit-card p { margin: 0; font-size: 0.9rem; color: var(--gb-text); font-weight: 500; }

.svc-doctor-spotlight {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--gb-gradient-brand);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  color: #fff;
}
.svc-doctor-spotlight img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.4); flex: none; }
.svc-doctor-spotlight .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-bottom: 2px; }
.svc-doctor-spotlight strong { display: block; font-family: var(--font-display); }

.svc-related-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.svc-related-scroll a {
  flex: none; background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-md);
  padding: 0.9rem 1.25rem; font-weight: 600; font-size: 0.875rem; color: var(--gb-text); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.svc-related-scroll a:hover { border-color: var(--gb-secondary); color: var(--gb-primary); transform: translateY(-2px); }


/* =========================================================================
   CONDITIONS — patient education, symptom/diagnosis focused
   ========================================================================= */
.cond-hero {
  background: var(--gb-bg);
  padding-block: clamp(48px, 6vw, 76px);
}
.cond-hero-media { border-radius: var(--radius-lg); border: 1px solid var(--gb-border); width: 100%; display: block; }
.cond-hero .eyebrow-edu {
  background: var(--gb-accent); color: var(--gb-secondary-dark);
}

.cond-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.cond-panel {
  background: #fff;
  border: 1px solid var(--gb-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
}
.cond-panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 1.1rem; }
.cond-panel.symptoms h3 i { color: var(--gb-warning); }
.cond-panel.causes h3 i { color: var(--gb-primary); }
.cond-panel ul { list-style: none; padding: 0; margin: 0; }
.cond-panel li { display: flex; gap: 10px; padding: 0.55rem 0; border-bottom: 1px dashed var(--gb-border); font-size: 0.9rem; color: var(--gb-text); }
.cond-panel li:last-child { border-bottom: none; }
.cond-panel.symptoms li::before { content: "\2022"; color: var(--gb-warning); font-weight: 700; }
.cond-panel.causes li::before { content: "\2022"; color: var(--gb-primary); font-weight: 700; }

.cond-risk-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cond-risk-tags span {
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.85rem; font-weight: 600; color: var(--gb-text);
}

.cond-process-strip {
  display: flex; align-items: stretch; gap: 0;
  background: var(--gb-accent); border-radius: var(--radius-md); overflow: hidden;
}
.cond-process-strip .cp-step { flex: 1; padding: 1.5rem; position: relative; }
.cond-process-strip .cp-step:not(:last-child)::after {
  content: "\F135"; font-family: "bootstrap-icons"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  color: var(--gb-secondary); font-size: 1.2rem; z-index: 2;
}
.cond-process-strip .cp-step .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--gb-secondary-dark); margin-bottom: 0.4rem; }
.cond-process-strip .cp-step p { margin: 0; font-size: 0.875rem; }

.cond-prevention-card {
  background: var(--gb-primary-light);
  border-radius: var(--radius-md);
  padding: 1.75rem;
}

.cond-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; }


/* =========================================================================
   PROCEDURES — clinical/technical, dark, process/timeline focused
   ========================================================================= */
.proc-hero {
  position: relative;
  background: var(--gb-primary-darker);
  background-image: radial-gradient(120% 160% at 100% 0%, rgba(22,179,163,0.28) 0%, rgba(13,74,133,0) 55%), linear-gradient(120deg, var(--gb-primary-darker), var(--gb-primary));
  color: #fff;
  padding-block: clamp(48px, 6vw, 76px);
  overflow: hidden;
}
.proc-hero h1, .proc-hero .lead-muted { color: #fff; }
.proc-hero .lead-muted { color: rgba(255,255,255,0.8); }
.proc-hero-media { border-radius: var(--radius-lg); width: 100%; display: block; }

.proc-quick-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 1.5rem;
}
.proc-quick-facts .pf {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  padding: 1rem 1.1rem;
}
.proc-quick-facts .pf .label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
.proc-quick-facts .pf .value { display: block; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.95rem; }

/* vertical connected timeline — "What Happens During" */
.proc-timeline { position: relative; padding-left: 2.5rem; }
.proc-timeline::before {
  content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px;
  background: var(--gb-border);
}
.proc-timeline .pt-item { position: relative; margin-bottom: 1.75rem; }
.proc-timeline .pt-item:last-child { margin-bottom: 0; }
.proc-timeline .pt-item::before {
  content: ""; position: absolute; left: -2.5rem; top: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gb-gradient-brand);
  box-shadow: 0 0 0 4px var(--gb-bg);
}
.proc-timeline .pt-item h4 { font-size: 1rem; margin-bottom: 0.35rem; }
.proc-timeline .pt-item p { margin: 0; font-size: 0.9rem; }

/* horizontal recovery stepper */
.proc-recovery-stepper { display: flex; flex-wrap: wrap; gap: 0; }
.proc-recovery-stepper .rs-step {
  flex: 1 1 160px; text-align: center; padding: 1.25rem 1rem;
  border-right: 1px dashed var(--gb-border);
}
.proc-recovery-stepper .rs-step:last-child { border-right: none; }
.proc-recovery-stepper .rs-step .icon-circle { width: 52px; height: 52px; margin: 0 auto 0.75rem; }
.proc-recovery-stepper .rs-step .when { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--gb-primary-darker); display: block; margin-bottom: 0.25rem; }
.proc-recovery-stepper .rs-step p { margin: 0; font-size: 0.82rem; }

.proc-risk-list { list-style: none; padding: 0; margin: 0; }
.proc-risk-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gb-border);
  border-left: 4px solid var(--gb-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.proc-risk-list li i { color: var(--gb-primary); margin-top: 2px; }


/* =========================================================================
   DOCTORS — directory + profile, people-focused
   ========================================================================= */
.doc-hub-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 3rem;
}
.doc-hub-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.doc-hub-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,58,107,0.88), rgba(13,94,166,0.75)); z-index: 0; }
.doc-hub-hero .content { position: relative; z-index: 1; max-width: 640px; }
.doc-hub-hero h1, .doc-hub-hero p { color: #fff; }

.doc-directory-card {
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-lg);
  overflow: hidden; transition: all var(--dur-med) var(--ease-out); height: 100%;
}
.doc-directory-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.doc-directory-card .photo { aspect-ratio: 1/1; overflow: hidden; }
.doc-directory-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-directory-card .body { padding: 1.5rem; text-align: center; }
.doc-directory-card .specialty-tag {
  display: inline-block; background: var(--gb-accent); color: var(--gb-secondary-dark);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 0.6rem;
}

.doc-profile-header {
  display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: center;
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-lg);
  padding: 2rem; margin-bottom: 2.5rem;
}
.doc-profile-header .photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; }
.doc-profile-header .photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-credential-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.doc-credential-badges span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gb-accent); color: var(--gb-secondary-dark);
  font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill);
}

.doc-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem; margin: 2rem 0; }
.doc-info-block h4 {
  display: flex; align-items: center; gap: 8px; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem;
  color: var(--gb-secondary-dark);
}
.doc-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--gb-border); }
.doc-timeline li { position: relative; padding: 0 0 1rem 1.25rem; font-size: 0.9rem; }
.doc-timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gb-secondary); }
.doc-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-tag-cloud span { background: var(--gb-accent); color: var(--gb-secondary-dark); font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-sm); }


/* =========================================================================
   ABOUT US — storytelling, editorial, warm
   ========================================================================= */
.about-hero {
  position: relative;
  color: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 110px);
}
.about-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(17,145,134,0.87), rgba(13,94,166,0.78)); z-index: 0; }
.about-hero .content { position: relative; z-index: 1; max-width: 700px; }
.about-hero h1, .about-hero p { color: #fff; }
.about-pullquote {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--gb-primary-darker); line-height: 1.5;
  border-left: 4px solid var(--gb-secondary);
  padding-left: 1.5rem; margin: 2rem 0;
}
.about-value-card {
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-md);
  padding: 1.75rem; height: 100%;
}
.about-value-card .icon-circle { margin-bottom: 1rem; }
.about-timeline-marker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gb-accent); color: var(--gb-secondary-dark);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 0.8rem; font-weight: 700;
}


/* =========================================================================
   BLOG — editorial (mostly reuses style.css's blog-card; a few additions)
   ========================================================================= */
.blog-featured-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.blog-featured-card .img-side { position: relative; }
.blog-featured-card .img-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-card .text-side { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.blog-category-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-category-filter button {
  border: 1px solid var(--gb-border); background: #fff; color: var(--gb-text);
  border-radius: var(--radius-pill); padding: 8px 18px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.blog-category-filter button.active,
.blog-category-filter button:hover { background: var(--gb-gradient-brand); color: #fff; border-color: transparent; }