/* =============================================================================
   QuickCare Design System — COMPOSED PAGE PATTERNS   (@layer qc.components)
   -----------------------------------------------------------------------------
   Reusable section-level patterns for commercial/marketing pages (solutions,
   products, ProTrain). These sit a level above the atomic components in
   components.css and are the shared vocabulary that lets a migrated page drop its
   bespoke per-page stylesheet entirely. All token-driven, mobile-first, qc-
   namespaced (zero Bootstrap collision). Loaded globally after components.css.

   Class selectors here (specificity 0,1,0) outrank Bootstrap's unlayered bare
   element rules (h2/h3/a = 0,0,1), so headings/links inside these patterns render
   at the design-system scale without !important.
   ========================================================================== */
@layer qc.components {

  /* Section background modifier (body is muted grey; lift sections to white for
     rhythm). Pairs with layout.css's .qc-section / --muted / --inverse. */
  .qc-section--surface { background: var(--qc-surface); }

  /* In-page anchors (e.g. a hero "How it works" → #process) land clear of the
     header instead of flush to the top — replaces the old JS scroll offset. */
  .qc-section[id] { scroll-margin-top: var(--qc-space-16); }

  /* ==========================================================================
     EYEBROW — small uppercase kicker above a heading
     ========================================================================== */
  .qc-eyebrow {
    display: inline-flex; align-items: center; gap: var(--qc-space-2);
    margin: 0 0 var(--qc-space-3);
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold);
    text-transform: uppercase; letter-spacing: var(--qc-ls-wide);
    color: var(--qc-color-primary);
  }
  .qc-eyebrow .material-icons { font-size: 1.15em; }
  /* On dark surfaces the violet kicker loses contrast — switch to cyan. */
  .qc-masthead--dark .qc-eyebrow,
  .qc-section--inverse .qc-eyebrow,
  .qc-cta .qc-eyebrow { color: var(--qc-color-secondary); }

  /* ==========================================================================
     SECTION HEAD — eyebrow + title + lead intro
     ========================================================================== */
  .qc-sectionhead { margin-bottom: var(--qc-space-10); }
  .qc-sectionhead--center { max-width: 760px; margin-inline: auto; text-align: center; }
  .qc-sectionhead__title {
    margin: 0; font-size: var(--qc-fs-h2);
    line-height: var(--qc-lh-tight); letter-spacing: var(--qc-ls-tight);
  }
  .qc-sectionhead__lead { margin: var(--qc-space-3) 0 0; font-size: var(--qc-fs-lg); color: var(--qc-text-muted); }
  .qc-sectionhead--center .qc-sectionhead__lead { max-width: 64ch; margin-inline: auto; }
  .qc-section--inverse .qc-sectionhead__lead,
  .qc-cta .qc-sectionhead__lead { color: var(--qc-neutral-300); }

  /* ==========================================================================
     SPLIT — two-column content/media; stacks on phones, side-by-side ≥900px
     ========================================================================== */
  .qc-split { display: grid; gap: var(--qc-space-8); align-items: center; }
  @media (min-width: 900px) {
    .qc-split { grid-template-columns: 1fr 1fr; }
    /* --reverse puts the media first on desktop while keeping source order
       (content first) for screen readers / mobile stacking. */
    .qc-split--reverse .qc-split__media { order: -1; }
  }
  .qc-split__title { margin: 0 0 var(--qc-space-4); font-size: var(--qc-fs-h2); line-height: var(--qc-lh-tight); letter-spacing: var(--qc-ls-tight); }
  .qc-split__text { margin: 0 0 var(--qc-space-5); color: var(--qc-text-muted); }

  /* ==========================================================================
     MEDIA — responsive image with an optional overlay badge
     ========================================================================== */
  .qc-media { position: relative; }
  .qc-media__img { display: block; width: 100%; height: auto; border-radius: var(--qc-radius-lg); box-shadow: var(--qc-shadow-md); }
  .qc-media__badge {
    position: absolute; left: var(--qc-space-4); bottom: var(--qc-space-4);
    display: inline-flex; align-items: center; gap: var(--qc-space-2);
    padding: var(--qc-space-2) var(--qc-space-3);
    background: rgba(20, 31, 46, 0.82); color: #fff;
    border-radius: var(--qc-radius-pill);
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium);
  }
  .qc-media__badge .material-icons { font-size: 1.1em; color: var(--qc-color-secondary); }

  /* ==========================================================================
     ICON TILE — rounded container for a single Material icon
     ========================================================================== */
  .qc-icon-tile {
    display: inline-grid; place-items: center; flex: none;
    width: 52px; height: 52px; border-radius: var(--qc-radius-lg);
    background: color-mix(in srgb, var(--qc-color-primary) 12%, white);
    color: var(--qc-color-primary);
  }
  .qc-icon-tile .material-icons { font-size: 28px; }
  .qc-icon-tile--round { border-radius: 50%; }

  /* ==========================================================================
     CHECKLIST — list with accent check markers (use a check_circle icon per li)
     ========================================================================== */
  .qc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--qc-space-2); }
  .qc-checklist li { display: flex; align-items: flex-start; gap: var(--qc-space-2); margin: 0; }
  .qc-checklist > li > .material-icons { flex: none; margin-top: 1px; font-size: 1.25rem; color: var(--qc-color-accent); }

  /* ==========================================================================
     FEATURE ROW — icon + (title + text) media object (e.g. requirement lists)
     ========================================================================== */
  .qc-feature { display: flex; gap: var(--qc-space-4); }
  .qc-feature + .qc-feature { margin-top: var(--qc-space-5); }
  .qc-feature__icon {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--qc-radius-md);
    background: color-mix(in srgb, var(--qc-color-primary) 10%, white);
    color: var(--qc-color-primary);
  }
  .qc-feature__title { margin: 0 0 var(--qc-space-1); font-size: var(--qc-fs-lg); }
  .qc-feature__text { margin: 0; color: var(--qc-text-muted); }

  /* A list (ol/ul) used as a .qc-grid drops its list affordances. */
  ol.qc-grid, ul.qc-grid { margin: 0; padding: 0; list-style: none; }

  /* Coarser grid track — fewer, wider columns (e.g. 6 substantial cards as 3-up
     instead of the default 16rem track's 4+2). Knob: layout.css's --qc-grid-min. */
  .qc-grid--wide { --qc-grid-min: 18rem; }

  /* A standalone CTA following a checklist/feature block gets breathing room
     (keeps spacing in CSS instead of inline spacer elements). */
  .qc-checklist + .qc-btn, .qc-feature + .qc-btn { margin-top: var(--qc-space-6); }

  /* Vertical rhythm between stacked blocks inside one section — so a grid can be
     followed by a note or a split without inline margins or wrapper elements. */
  .qc-grid + .qc-note, .qc-pricing + .qc-note { margin-top: var(--qc-space-8); }
  .qc-grid + .qc-split, .qc-pricing + .qc-split,
  .qc-note + .qc-split, .qc-split + .qc-split { margin-top: var(--qc-space-10); }
  .qc-note + .qc-sectionhead { margin-top: var(--qc-space-10); }
  /* Stat row sitting under a masthead's CTA cluster. */
  .qc-masthead__actions + .qc-stats { margin-top: var(--qc-space-8); }

  /* ==========================================================================
     STEPS — numbered process cards (lay out with .qc-grid; place inside a
     flex-gap container such as .qc-card__body so margins stay collapsed)
     ========================================================================== */
  .qc-step__num {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--qc-gradient-primary); color: #fff; font-weight: var(--qc-fw-bold);
  }
  .qc-step__title { margin: 0; font-size: var(--qc-fs-xl); }
  .qc-step__text { margin: 0; color: var(--qc-text-muted); }

  /* ==========================================================================
     PRICING — tiered cards (auto-fit; one may be --featured)
     ========================================================================== */
  .qc-pricing { display: grid; gap: var(--qc-space-6); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .qc-pricing-card { display: flex; flex-direction: column; background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-lg); box-shadow: var(--qc-shadow-sm); overflow: hidden; }
  .qc-pricing-card--featured { border-color: var(--qc-color-primary); box-shadow: var(--qc-shadow-lg); }
  .qc-pricing-card__head { padding: var(--qc-space-6); text-align: center; border-bottom: 1px solid var(--qc-border); }
  .qc-pricing-card--featured .qc-pricing-card__head { background: var(--qc-gradient-primary); color: #fff; border-bottom: 0; }
  .qc-pricing-card__badge {
    display: inline-block; margin-bottom: var(--qc-space-2); padding: var(--qc-space-1) var(--qc-space-3);
    border-radius: var(--qc-radius-pill); background: rgba(255, 255, 255, 0.22);
    font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-semibold); text-transform: uppercase; letter-spacing: var(--qc-ls-wide);
  }
  .qc-pricing-card__name { margin: 0; font-size: var(--qc-fs-xl); }
  .qc-pricing-card__sub { margin: var(--qc-space-1) 0 var(--qc-space-3); font-size: var(--qc-fs-sm); color: var(--qc-text-muted); }
  .qc-pricing-card--featured .qc-pricing-card__sub { color: rgba(255, 255, 255, 0.85); }
  .qc-pricing-card__price { font-size: var(--qc-fs-4xl); font-weight: var(--qc-fw-bold); line-height: 1; }
  .qc-pricing-card__period { display: block; margin-top: var(--qc-space-1); font-size: var(--qc-fs-sm); color: var(--qc-text-muted); }
  .qc-pricing-card--featured .qc-pricing-card__period { color: rgba(255, 255, 255, 0.85); }
  .qc-pricing-card__body { display: flex; flex-direction: column; gap: var(--qc-space-4); padding: var(--qc-space-6); flex: 1; }
  .qc-pricing-card__cta { margin-top: auto; }

  /* ==========================================================================
     PRICE LABEL — an inline price inside a card (amount emphasised, period muted).
     `qc-price` is the canonical name; `home-price` is the legacy alias used by the
     homepage and solutions/industry cards. Globally available here so card prices
     render at full scale off the homepage too (rules previously lived in index.css,
     which only the homepage loads — leaving solutions prices unstyled).
     ========================================================================== */
  .qc-price, .home-price { margin: 0 0 var(--qc-space-4); }
  .qc-price__label, .home-price__label { display: block; font-size: var(--qc-fs-sm); opacity: 0.85; }
  .qc-price__amount, .home-price__amount { font-size: var(--qc-fs-4xl); font-weight: var(--qc-fw-bold); }
  .qc-price__period, .home-price__period { opacity: 0.85; }

  /* ==========================================================================
     NOTE — subtle inline callout (prep notes, fine print, cross-links)
     ========================================================================== */
  .qc-note {
    margin-top: var(--qc-space-4); padding: var(--qc-space-3) var(--qc-space-4);
    background: var(--qc-surface-muted); border-left: 3px solid var(--qc-color-primary);
    border-radius: var(--qc-radius-sm); font-size: var(--qc-fs-sm); color: var(--qc-text-muted);
  }
  .qc-note a { color: var(--qc-color-primary); }

  /* ==========================================================================
     CTA BAND — centered call-to-action on the brand gradient
     ========================================================================== */
  .qc-cta { background: var(--qc-gradient-primary); color: #fff; }
  .qc-cta__inner { max-width: 760px; margin-inline: auto; text-align: center; }
  .qc-cta__title { margin: 0 0 var(--qc-space-3); font-size: var(--qc-fs-h2); line-height: var(--qc-lh-tight); color: #fff; }
  .qc-cta__text { margin: 0 0 var(--qc-space-6); font-size: var(--qc-fs-lg); color: rgba(255, 255, 255, 0.9); }
  .qc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--qc-space-3); justify-content: center; }

  /* ==========================================================================
     HERO HIGHLIGHTS — inline icon+text row for a masthead
     ========================================================================== */
  .qc-hero-highlights { display: flex; flex-wrap: wrap; gap: var(--qc-space-3) var(--qc-space-5); margin: var(--qc-space-6) 0 0; padding: 0; list-style: none; }
  .qc-hero-highlights li { display: inline-flex; align-items: center; gap: var(--qc-space-2); margin: 0; }
  .qc-hero-highlights .material-icons { font-size: 1.2em; color: var(--qc-color-secondary); }

  /* ==========================================================================
     ARROW LINK — inline "Learn more →" call-to-action link
     ========================================================================== */
  .qc-arrowlink { display: inline-flex; align-items: center; gap: var(--qc-space-1); color: var(--qc-color-primary); font-weight: var(--qc-fw-semibold); text-decoration: none; }
  .qc-arrowlink .material-icons { font-size: 1.15em; transition: transform var(--qc-dur-fast) var(--qc-ease-standard); }
  .qc-arrowlink:hover .material-icons { transform: translateX(3px); }

  /* ==========================================================================
     STAT BLOCKS — big metric + label (often on an inverse band)
     ========================================================================== */
  .qc-stats { display: grid; gap: var(--qc-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .qc-stat { text-align: center; }
  .qc-stat__value { font-size: var(--qc-fs-4xl); font-weight: var(--qc-fw-bold); line-height: 1; color: var(--qc-color-secondary); }
  .qc-stat__label { margin: var(--qc-space-2) 0 0; }
  .qc-section--inverse .qc-stat__label { color: var(--qc-neutral-300); }

  /* ==========================================================================
     TABLE — comparison/data table (wrap in .qc-table-wrap for mobile scroll)
     ========================================================================== */
  .qc-table-wrap { overflow-x: auto; border-radius: var(--qc-radius-lg); border: 1px solid var(--qc-border); }
  .qc-table { width: 100%; border-collapse: collapse; background: var(--qc-surface); }
  .qc-table th, .qc-table td { padding: var(--qc-space-3) var(--qc-space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--qc-border); }
  .qc-table thead th { font-weight: var(--qc-fw-bold); background: var(--qc-surface-sunken); color: var(--qc-text); }
  .qc-table tbody tr:last-child td { border-bottom: 0; }
  .qc-table tbody td:first-child { font-weight: var(--qc-fw-medium); }
  .qc-table__yes { color: var(--qc-color-success); vertical-align: middle; }
  .qc-table__no { color: var(--qc-color-danger); vertical-align: middle; }

  /* ==========================================================================
     FOOTNOTES — superscript reference markers + a definitions list
     ========================================================================== */
  .qc-footnote-link { font-weight: var(--qc-fw-bold); color: inherit; text-decoration: none; }
  .qc-footnotes { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--qc-space-3); }
  .qc-footnote { margin: 0; font-size: var(--qc-fs-sm); line-height: var(--qc-lh-base); color: var(--qc-text-muted); }
  .qc-footnote__mark { font-weight: var(--qc-fw-bold); margin-right: var(--qc-space-2); color: var(--qc-color-primary); }
}