/* ==========================================================================
   FixHire Components
   Layout helpers for the reusable Batch 3 marketing component blueprints
   (heroes, strips, editorial intros, card grids, CTA bands, FAQ, chips).
   Depends on fixhire-design-system.css for tokens + base utilities.
   All classes are theme-neutral, fh- prefixed, Elementor Free-compatible.
   ========================================================================== */

/* Package / Stage Cards widgets (Batch 14C-1). Scoped to the widget wrappers so
   existing blueprint .fh-package-card / .fh-stage-card usage is unaffected. Adds a
   subtle accent top edge and consistent CTA spacing; cards stretch to equal height. */
.fh-package-cards .fh-package-card,
.fh-stage-cards .fh-stage-card {
  border-top: 3px solid var(--fh-accent);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fh-package-cards .fh-card-cta,
.fh-stage-cards .fh-card-cta { margin-top: auto; align-self: flex-start; }
.fh-package-cards .fh-list-checks,
.fh-stage-cards .fh-list-checks { margin: 12px 0; }

/* Container-aware wrapping so cards reduce columns by available width (not just the
   viewport) and never get clipped. auto-fit + minmax lets 4->3->2->1 happen naturally
   inside narrow Elementor columns; the per-count min track keeps the chosen layout's
   intent. min-width:0 stops long content from forcing overflow. Scoped to these widgets
   only, so blueprint .fh-grid usage is unaffected. */
.fh-package-cards .fh-grid,
.fh-stage-cards .fh-grid { overflow: visible; }
.fh-package-cards .fh-grid-2,
.fh-stage-cards .fh-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fh-package-cards .fh-grid-3,
.fh-stage-cards .fh-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fh-package-cards .fh-grid-4,
.fh-stage-cards .fh-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fh-package-cards .fh-grid-1,
.fh-stage-cards .fh-grid-1 { grid-template-columns: 1fr; }
.fh-package-cards .fh-package-card,
.fh-stage-cards .fh-stage-card { min-width: 0; max-width: 100%; }
.fh-package-cards .fh-package-card *,
.fh-stage-cards .fh-stage-card * { min-width: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.fh-hero { /* place .fh-split inside for the 2-column layout */ }
.fh-hero__text { max-width: 560px; }
.fh-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--fh-muted);
}
.fh-hero__note .fh-icon { color: var(--fh-accent); }

/* Button / action rows (used by heroes and CTAs) */
.fh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Value strip / meta strip / location strip
   -------------------------------------------------------------------------- */
.fh-value-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  box-shadow: var(--fh-shadow-card);
}
.fh-value-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fh-value-item__label { font-size: 14px; font-weight: 600; color: var(--fh-ink); }
.fh-value-item__sub { font-size: 13px; color: var(--fh-muted); }

.fh-meta-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fh-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--fh-bg-soft);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--fh-ink);
}
.fh-meta-item .fh-icon { color: var(--fh-accent); }

/* Large visual CTA band (C15-C): bigger padding on desktop, eased on small screens
   so it never crowds at 480px. Replaces former inline padding. */
.fh-cta-card--xl { padding: 48px; }
@media (max-width: 767px) { .fh-cta-card--xl { padding: 28px; } }

/* Small presentational utilities (replace former inline styles; keeps blueprints
   clean and rebuildable as native Elementor widgets). */
.fh-center { display: flex; align-items: center; justify-content: center; }
.fh-text-center { text-align: center; }
.fh-mt-12 { margin-top: 12px; }
.fh-mb-16 { margin-bottom: 16px; }
.fh-meta-strip--center { justify-content: center; }
.fh-logo-img { width: auto; height: 24px; border-radius: 0; }      /* partner logo */
.fh-logo-img--lg { width: auto; height: auto; max-height: 80px; }  /* case-study logo */

.fh-location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.fh-location-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
}
.fh-location-card .fh-icon-holder { margin-bottom: 0; }
.fh-location-card__city { font-weight: 700; color: var(--fh-ink); margin: 0 0 4px; }
.fh-location-card__meta { font-size: 14px; color: var(--fh-muted); margin: 0; }

/* Overlapping hero value cards (Pre-Validate; blueprint provided for reuse) */
.fh-hero-overlap { position: relative; }
.fh-hero-overlap__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Editorial intro (left copy + cards)
   -------------------------------------------------------------------------- */
.fh-editorial { display: grid; grid-template-columns: 34% 1fr; gap: 48px; align-items: start; }
.fh-editorial__copy { max-width: 420px; }

/* --------------------------------------------------------------------------
   Dual CTA card grid
   -------------------------------------------------------------------------- */
.fh-cta-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* --------------------------------------------------------------------------
   Product Studio system (Batch 4A)
   -------------------------------------------------------------------------- */

/* Phase flow / phase summary card (C06-A, C10-C): 4 phases with connectors */
.fh-phase-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.fh-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-md);
}
.fh-phase__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--fh-radius-sm);
  background: var(--fh-accent-bg); color: var(--fh-accent); margin-bottom: 4px;
}
.fh-phase__name { font-weight: 700; color: var(--fh-ink); }
.fh-phase__sub { font-size: 13px; color: var(--fh-muted); }
/* Connector arrow between phases (hidden on the last; hidden when stacked) */
.fh-phase:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -12px; width: 12px; height: 2px;
  background: var(--fh-border);
}

/* Package card grid (C07-A): 4 product packages, accent per card */
.fh-package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fh-package-card__meta { font-size: 13px; font-weight: 600; color: var(--fh-accent); margin: 0 0 8px; }
.fh-package-card__price { margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--fh-ink); }
.fh-package-card__price small { display: block; font-weight: 500; font-size: 12px; color: var(--fh-muted); }
.fh-package-card .fh-card-cta { margin-top: 16px; }

/* Work module grid (C08): 6 or 8 compact cards */
.fh-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fh-module-grid--8 { grid-template-columns: repeat(4, 1fr); }
.fh-module-card { display: flex; gap: 12px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-sm); }
.fh-module-card .fh-icon { color: var(--fh-accent); margin-top: 2px; }

/* Deliverables / process panels (C11): 2 or 3 panels */
.fh-deliverables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fh-deliverables-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Pricing card (C23-A) */
.fh-pricing-card { background: var(--fh-accent-bg); border: 1px solid var(--fh-border); border-radius: var(--fh-radius-lg); padding: 28px; }
.fh-pricing-card__value { font-size: clamp(28px, 3vw, 36px); font-weight: 700; color: var(--fh-accent); margin: 8px 0; }
.fh-pricing-card__note { font-size: 13px; color: var(--fh-muted); }

/* --------------------------------------------------------------------------
   Venture Studio system (Batch 5)
   -------------------------------------------------------------------------- */

/* Stage card grid (C07-B): 4 stage cards; CTA is solid stage colour (fh-btn-stage) */
.fh-stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fh-stage-card__meta { font-size: 13px; font-weight: 600; color: var(--fh-accent); margin: 0 0 8px; }
.fh-stage-card__equity { margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--fh-ink); }
.fh-stage-card .fh-card-cta { margin-top: 16px; }

/* Equity structure panel (C23-B) and equity range card (C23-C) */
.fh-equity-card {
  background: var(--fh-accent-bg);
  border: 1px solid color-mix(in srgb, var(--fh-accent) 30%, var(--fh-border));
  border-radius: var(--fh-radius-lg);
  padding: 32px;
  box-shadow: var(--fh-shadow-soft);
}
.fh-equity-card__value { font-size: clamp(36px, 5vw, 56px); font-weight: 700; color: var(--fh-accent); line-height: 1.05; margin: 4px 0; }
.fh-equity-card__label { font-size: 14px; font-weight: 600; color: var(--fh-muted); }
.fh-equity-card__divider { height: 1px; background: var(--fh-border); margin: 20px 0; border: 0; }

/* External Ventures strip (Pre-Scale only) */
.fh-external-ventures {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  background: var(--fh-bg-soft);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
}
.fh-external-ventures__logos { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.fh-external-ventures__logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 96px; height: 44px; padding: 0 16px;
  background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-sm);
  font-size: 13px; font-weight: 600; color: var(--fh-muted);
}

/* Card Grid widget per-device columns (Batch 14B-2).
   Attribute selectors (higher specificity than the .fh-grid-N collapse rules) let the
   widget honour the chosen tablet/mobile column counts. Only the Card Grid widget emits
   these data attributes, so existing blueprint pages are unaffected. */
@media (max-width: 1024px) {
  .fh-grid[data-fh-cols-tablet="1"] { grid-template-columns: 1fr; }
  .fh-grid[data-fh-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
  .fh-grid[data-fh-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .fh-grid[data-fh-cols-mobile="1"] { grid-template-columns: 1fr; }
  .fh-grid[data-fh-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Currency selector + price (Batch 14B-Currency-4)
   Small, scoped control that can sit beside a language selector.
   -------------------------------------------------------------------------- */

/* Wrapper so a site can place [En] [$] together (the language switcher is NOT built
   by this plugin; this is only a layout wrapper). */
.fh-locale-tools { display: inline-flex; align-items: center; gap: 8px; }
.fh-locale-tool { display: inline-flex; align-items: center; }

.fh-currency-switcher { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--fh-font); }
.fh-currency-switcher__label { font-size: 12px; font-weight: 600; color: var(--fh-muted); }

.fh-currency-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 10px;
  background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-sm);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--fh-ink);
  cursor: pointer; line-height: 1;
}
.fh-currency-trigger:hover { border-color: color-mix(in srgb, var(--fh-blue) 35%, transparent); }
.fh-currency-trigger__code { color: var(--fh-muted); font-weight: 500; }
.fh-currency-trigger__caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--fh-muted);
}

.fh-currency-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-sm);
  box-shadow: var(--fh-shadow-soft);
}
.fh-currency-menu[hidden] { display: none; }

.fh-currency-option {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: var(--fh-radius-xs);
  font-size: 14px; color: var(--fh-ink); cursor: pointer;
}
.fh-currency-option:hover,
.fh-currency-option:focus { background: var(--fh-bg-soft); outline: none; }
.fh-currency-option:focus-visible { box-shadow: var(--fh-focus); }
.fh-currency-option__symbol { min-width: 24px; font-weight: 700; }
.fh-currency-option__code { font-weight: 600; }
.fh-currency-option__name { color: var(--fh-muted); font-size: 13px; }
.fh-currency-option-active { background: var(--fh-icon-bg); }
.fh-currency-option-active .fh-currency-option__code { color: var(--fh-blue); }

/* Price + separate muted note (note is no longer inline next to the price). */
.fh-price { white-space: nowrap; }
.fh-price__prefix { font-weight: 400; }
.fh-price-note { display: block; margin-top: 6px; color: var(--fh-muted); white-space: normal; }

/* --------------------------------------------------------------------------
   Legal / Trust / Governance system (Batch 6A)
   -------------------------------------------------------------------------- */

/* Legal index grid (C13-A): numbered link cards, up to 5 across */
.fh-legal-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fh-legal-index-card {
  display: flex; gap: 10px; align-items: baseline;
  padding: 14px 16px; text-decoration: none;
  background: #fff; border: 1px solid var(--fh-border); border-radius: var(--fh-radius-sm);
  transition: border-color .18s ease, background-color .18s ease;
}
.fh-legal-index-card:hover { border-color: color-mix(in srgb, var(--fh-blue) 35%, transparent); background: var(--fh-bg-soft); }
.fh-legal-index-card__num { font-weight: 700; color: var(--fh-blue); font-size: 13px; }
.fh-legal-index-card__title { font-size: 14px; font-weight: 600; color: var(--fh-ink); }

/* Detail matrix (C13-B/C/D): dense documentation panels, up to 4 across */
.fh-legal-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.fh-legal-matrix--4 { grid-template-columns: repeat(4, 1fr); }
.fh-legal-panel__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px; margin-bottom: 10px;
  background: var(--fh-icon-bg); color: var(--fh-blue);
  border-radius: var(--fh-radius-sm); font-size: 13px; font-weight: 700;
}
.fh-legal-panel__heading { font-size: 16px; font-weight: 700; color: var(--fh-ink); margin: 0 0 8px; }
.fh-legal-panel ul { margin: 8px 0 0; padding-left: 18px; }
.fh-legal-panel li { font-size: 14px; color: var(--fh-text); line-height: 1.6; }
.fh-legal-subcard { margin-top: 12px; padding: 12px; background: var(--fh-bg-soft); border: 1px solid var(--fh-border-soft); border-radius: var(--fh-radius-xs); }

/* Permitted / not-permitted rows (governance) — never colour alone: icon + text */
.fh-legal-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.fh-legal-rule--yes { color: var(--fh-success); }
.fh-legal-rule--no { color: var(--fh-danger); }

/* Information layer cards (C13-E): 4 cards */
.fh-info-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fh-value-strip { grid-template-columns: repeat(3, 1fr); }
  .fh-legal-index { grid-template-columns: repeat(3, 1fr); }
  .fh-legal-matrix, .fh-legal-matrix--4 { grid-template-columns: repeat(2, 1fr); }
  .fh-info-layers { grid-template-columns: repeat(2, 1fr); }
  .fh-editorial { grid-template-columns: 1fr; gap: 28px; }
  .fh-hero-overlap__cards { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
  .fh-phase-flow { grid-template-columns: repeat(2, 1fr); }
  .fh-phase:not(:last-child)::after { display: none; }
  .fh-package-grid { grid-template-columns: repeat(2, 1fr); }
  .fh-module-grid, .fh-module-grid--8 { grid-template-columns: repeat(2, 1fr); }
  .fh-deliverables-grid, .fh-deliverables-grid--3 { grid-template-columns: 1fr; }
  .fh-stage-grid { grid-template-columns: repeat(2, 1fr); }
  .fh-external-ventures { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .fh-value-strip { grid-template-columns: 1fr 1fr; padding: 20px; }
  .fh-meta-strip { gap: 8px; }
  .fh-location-grid { grid-template-columns: 1fr; }
  .fh-cta-card-grid { grid-template-columns: 1fr; }
  .fh-hero-overlap__cards { grid-template-columns: 1fr; }
  .fh-actions { flex-direction: column; }
  .fh-actions .fh-btn { width: 100%; }
  .fh-phase-flow { grid-template-columns: 1fr; }
  .fh-package-grid { grid-template-columns: 1fr; }
  .fh-module-grid, .fh-module-grid--8 { grid-template-columns: 1fr; }
  .fh-stage-grid { grid-template-columns: 1fr; }
  .fh-legal-index { grid-template-columns: 1fr; }
  .fh-legal-matrix, .fh-legal-matrix--4 { grid-template-columns: 1fr; }
  .fh-info-layers { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .fh-value-strip { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Specialised widgets (Batch 14C-2): Phase Flow, Contact Chips, Information Layers.
   All rules are scoped to each widget wrapper and reuse existing fh- tokens. The widget
   roots are emitted with `fh-scope`, so `.fh-scope.fh-phase-flow` (higher specificity)
   neutralises the existing blueprint `.fh-phase-flow` grid without touching blueprints.
   -------------------------------------------------------------------------- */

/* Phase Flow widget */
.fh-scope.fh-phase-flow { display: block; }
.fh-phase-flow__item {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; background: #fff;
  border: 1px solid var(--fh-border); border-top: 3px solid var(--fh-accent);
  border-radius: var(--fh-radius-md);
  min-width: 0; max-width: 100%;
}
.fh-phase-flow__item * { min-width: 0; }
.fh-phase-flow__label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  background: var(--fh-accent-bg); color: var(--fh-accent);
  border-radius: var(--fh-radius-sm); font-weight: 700; font-size: 14px;
}
.fh-phase-flow__cta { margin-top: 12px; align-self: flex-start; }
.fh-phase-flow--compact .fh-phase-flow__item { padding: 14px 16px; }
/* Connectors only on desktop horizontal; hidden when wrapped/stacked/compact. */
.fh-phase-flow__connector { display: none; }
@media (min-width: 1025px) {
  .fh-phase-flow--horizontal.fh-phase-flow--conn-line .fh-phase-flow__connector,
  .fh-phase-flow--horizontal.fh-phase-flow--conn-arrow .fh-phase-flow__connector {
    display: block; position: absolute; top: 28px; right: -12px;
    width: 12px; height: 2px; background: var(--fh-border);
  }
  .fh-phase-flow--horizontal.fh-phase-flow--conn-arrow .fh-phase-flow__connector::after {
    content: ""; position: absolute; right: -2px; top: -3px;
    border-left: 6px solid var(--fh-border);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  }
}

/* Contact Chips widget */
.fh-contact-chips__list { display: flex; flex-wrap: wrap; gap: 12px; }
.fh-contact-chips__list--stacked { flex-direction: column; }
.fh-contact-chips__list--grid .fh-contact-chip,
.fh-contact-chips__list--stacked .fh-contact-chip { display: flex; width: 100%; }
.fh-contact-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #fff;
  border: 1px solid var(--fh-border); border-left: 3px solid var(--fh-accent);
  border-radius: var(--fh-radius-sm); min-width: 0; max-width: 100%;
}
.fh-contact-chip__icon { display: inline-flex; flex: 0 0 auto; color: var(--fh-accent); }
.fh-contact-chip__body { display: flex; flex-direction: column; min-width: 0; }
.fh-contact-chip__label { font-size: 12px; font-weight: 600; color: var(--fh-muted); }
.fh-contact-chip__value { font-size: 14px; font-weight: 600; color: var(--fh-ink); text-decoration: none; word-break: break-word; }
a.fh-contact-chip__value:hover { color: var(--fh-blue); text-decoration: underline; }
.fh-contact-chip--brand,
.fh-contact-chip--blue { --fh-accent: var(--fh-blue); }
.fh-contact-chip--red { --fh-accent: var(--fh-red); }
.fh-contact-chip--neutral { --fh-accent: var(--fh-border); }

/* Information Layers widget */
.fh-information-layers__list { display: flex; flex-direction: column; gap: 16px; }
.fh-information-layer {
  padding: 20px 24px; background: #fff;
  border: 1px solid var(--fh-border); border-left: 4px solid var(--fh-accent);
  border-radius: var(--fh-radius-md); min-width: 0; max-width: 100%;
}
.fh-information-layer__eyebrow {
  display: block; font-size: 12px; font-weight: 600; color: var(--fh-accent);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.fh-information-layer__title { margin: 0 0 8px; }
.fh-information-layer__note { color: var(--fh-muted); margin-top: 8px; }
.fh-information-layer__cta { display: inline-flex; margin-top: 12px; }
.fh-information-layers--split .fh-information-layers__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fh-information-layers--cards .fh-information-layers__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width: 767px) {
  .fh-information-layers--split .fh-information-layers__list { grid-template-columns: 1fr; }
}

/* Legal Matrix widget (Batch 14C-3). The widget root carries `fh-scope`, so
   `.fh-scope.fh-legal-matrix` (higher specificity) neutralises the existing blueprint
   `.fh-legal-matrix` grid; the widget grid lives on `.fh-legal-matrix__grid` (reusing
   `.fh-grid` + the data-attr responsive rules). Scoped to the widget; blueprints unaffected. */
.fh-scope.fh-legal-matrix { display: block; }
.fh-legal-matrix__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; background: #fff;
  border: 1px solid var(--fh-border); border-top: 3px solid var(--fh-accent);
  border-radius: var(--fh-radius-md);
  min-width: 0; max-width: 100%;
}
.fh-legal-matrix__item * { min-width: 0; }
.fh-legal-matrix__item--red { --fh-accent: var(--fh-red); }
.fh-legal-matrix__item--neutral { --fh-accent: var(--fh-border); }
.fh-legal-matrix__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--fh-radius-sm);
  background: var(--fh-accent-bg); color: var(--fh-accent);
}
.fh-legal-matrix__category {
  font-size: 12px; font-weight: 600; color: var(--fh-accent);
  text-transform: uppercase; letter-spacing: .04em;
}
.fh-legal-matrix__label { margin: 0; }
.fh-legal-matrix__detail { color: var(--fh-muted); }
.fh-legal-matrix__status { font-size: 13px; font-weight: 600; color: var(--fh-ink); margin-top: 2px; }
.fh-legal-matrix__cta { display: inline-flex; margin-top: 10px; align-self: flex-start; }
/* ---- Layout differentiation (Batch 14C-3.1), scoped to .fh-legal-matrix ---- */

/* Matrix: structured governance-register feel — flatter surface, tighter spacing,
   stronger alignment, status as an emphasis strip. */
.fh-legal-matrix--matrix .fh-legal-matrix__grid { gap: 12px; }
.fh-legal-matrix--matrix .fh-legal-matrix__item {
  gap: 6px; padding: 16px 18px;
  background: var(--fh-bg-soft);
  border: 1px solid var(--fh-border-soft);
  border-top: 2px solid var(--fh-accent);
  border-radius: var(--fh-radius-sm);
  box-shadow: none;
}
.fh-legal-matrix--matrix .fh-legal-matrix__icon {
  width: 32px; height: 32px; border-radius: var(--fh-radius-xs);
}
.fh-legal-matrix--matrix .fh-legal-matrix__category {
  letter-spacing: .08em; font-size: 11px;
}
.fh-legal-matrix--matrix .fh-legal-matrix__label { font-size: 16px; }
.fh-legal-matrix--matrix .fh-legal-matrix__status {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--fh-border);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fh-accent);
}

/* Cards: softer, editorial/marketing feel — more space, larger radius, lifted card,
   prominent icon, relaxed category/status. */
.fh-legal-matrix--cards .fh-legal-matrix__grid { gap: 24px; }
.fh-legal-matrix--cards .fh-legal-matrix__item {
  gap: 12px; padding: 32px;
  border: 1px solid var(--fh-border);
  border-top: 3px solid var(--fh-accent);
  border-radius: var(--fh-radius-lg);
  box-shadow: var(--fh-shadow-card);
  transition: box-shadow .18s ease, transform .18s ease;
}
.fh-legal-matrix--cards .fh-legal-matrix__item:hover {
  box-shadow: var(--fh-shadow-soft); transform: translateY(-2px);
}
.fh-legal-matrix--cards .fh-legal-matrix__icon {
  width: 56px; height: 56px; border-radius: var(--fh-radius-md); margin-bottom: 4px;
}
.fh-legal-matrix--cards .fh-legal-matrix__category {
  color: var(--fh-muted); letter-spacing: .02em;
}
.fh-legal-matrix--cards .fh-legal-matrix__status {
  font-weight: 600; color: var(--fh-muted);
}

/* Compact: dense scan layout — tighter padding, detail hidden, reduced spacing. */
.fh-legal-matrix--compact .fh-legal-matrix__grid { gap: 10px; }
.fh-legal-matrix--compact .fh-legal-matrix__item { gap: 4px; padding: 14px 16px; box-shadow: none; }
.fh-legal-matrix--compact .fh-legal-matrix__detail { display: none; }

/* Card Grid widget icon size (Batch 14D Card-Grid icon-size). 28px default baseline for
   both Elementor native icons (i / svg via Icons_Manager) and legacy FixHire SVGs, scoped
   to the Card Grid icon wrapper so no other widget is affected. The Style-tab "Icon size"
   slider overrides this via higher-specificity {{WRAPPER}} selectors. */
.fh-card-grid__icon { font-size: 28px; line-height: 1; }
.fh-card-grid__icon i { font-size: 28px; line-height: 1; }
.fh-card-grid__icon svg { width: 28px; height: 28px; }

/* Card Grid icon position (Batch 14D widget UX). "top" is the default block flow; "left"
   places the icon beside the text block. Scoped to the Card Grid card; the text is wrapped
   in .fh-card__content so the two become flex items without breaking title/description/CTA
   or responsive wrapping. */
.fh-card--icon-left { display: flex; align-items: flex-start; gap: 14px; }
.fh-card--icon-left > .fh-card-grid__icon { flex: 0 0 auto; margin-bottom: 0; }
.fh-card--icon-left > .fh-card__content { flex: 1 1 auto; min-width: 0; }

/* Button icon (Batch 14D widget UX): Hero CTA + CTA Band primary/secondary. Scoped to a new
   span class so existing .fh-btn styles are untouched. Icon scales with the button text. */
.fh-btn__icon { display: inline-flex; align-items: center; vertical-align: middle; }
.fh-btn__icon svg { width: 1em; height: 1em; }
.fh-btn__icon i { font-size: 1em; line-height: 1; }
.fh-btn__icon--left { margin-right: 6px; }
.fh-btn__icon--right { margin-left: 6px; }

/* Section header alignment + intro width (Batch 14D). Scoped to the section header. The
   alignment modifier (render-driven) controls text-align AND the constrained intro's
   horizontal margins, so a narrowed intro sits correctly under each alignment. The doubled
   class guarantees it overrides the default .fh-section-header--center regardless of load
   order. Width is applied per-instance by the widget's "Intro max width" selector. */
.fh-section-header--center .fh-body { margin-left: auto; margin-right: auto; }
.fh-section-header.fh-section-header--align-left   { text-align: left; }
.fh-section-header.fh-section-header--align-center { text-align: center; }
.fh-section-header.fh-section-header--align-right  { text-align: right; }
.fh-section-header--align-left   .fh-body { margin-left: 0; margin-right: auto; }
.fh-section-header--align-center .fh-body { margin-left: auto; margin-right: auto; }
.fh-section-header--align-right  .fh-body { margin-left: auto; margin-right: 0; }