/*
  ETECHTICS SOFTWARE SOLUTIONS — Additive page-family stylesheet
  ---------------------------------------------------------------------
  PAGE-SCOPED, ADDITIVE stylesheet. Originally written for the 12 pages
  completed in the Visual Completion Phase (Technology Specializations,
  Service Capabilities, People/Engagement, Business Discovery), and now
  also loaded by /services/ as of the Content + SEO Expansion Phase,
  which is explicitly permitted to extend that page's content within
  the approved design system. Still never loaded by Home, About,
  Contact, ASP.NET Zero, or any other locked page.

  This file does NOT redeclare or override any rule inside
  css/services-v2.css. It only adds new, uniquely-named classes
  (prefixed "pf-") plus a small number of narrow compound-selector
  modifiers on top of existing sv2- classes (e.g.
  .sv2-hero__visual.pf-hero-visual--lg), which is safe because a rule
  scoped to a compound selector only ever affects elements that carry
  BOTH classes — a page that never adds the "pf-" class (e.g.
  /services/asp-net-zero/'s hero, which never gets pf-hero-visual--lg) is
  unaffected even though it loads this file.

  Pages that load this file can freely reuse sv2-section / sv2-hero /
  sv2-intro / sv2-discipline-row / sv2-why / sv2-cta / sv2-steps /
  sv2-feature-grid / sv2-related-grid / sv2-info-list / sv2-chip /
  sv2-mock-* — the "primary design reference" — while each family gets
  its own additional components below so no two families (or pages
  within a family) are mechanical copies of each other.

  Depends on css/tokens.css, css/base.css and css/services-v2.css
  being loaded first.
*/

/* =================================================================
   Shared modifiers on top of sv2- primitives
================================================================= */
.sv2-hero__visual.pf-hero-visual--lg svg {
  max-width: 500px;
}
@media (max-width: 1023px) {
  .sv2-hero__visual.pf-hero-visual--lg svg { max-width: 360px; }
}

/* Fix: services-v2.css's ".sv2-hero__visual svg" rule (width:100%;
   max-width:440px; overflow:visible) is a descendant selector, so it was
   never meant to reach anything but the single outer mockup <svg> in a
   hero visual — but the Industries hero mosaic nests a small 28x28 icon
   <svg> inside each of its 8 tiles, and those nested svgs match the same
   selector too, blowing each icon up to ~440px with visible overflow.
   This higher-specificity, additive rule (services-v2.css itself is never
   edited) restores the nested tile icons to their intended size without
   touching the single-svg heroes every other page uses. */
.sv2-hero__visual svg svg {
  width: 28px;
  height: 28px;
  max-width: 28px;
  overflow: hidden;
}

.sv2-related-grid.pf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sv2-related-grid.pf-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .sv2-related-grid.pf-cols-3,
  .sv2-related-grid.pf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .sv2-related-grid.pf-cols-3,
  .sv2-related-grid.pf-cols-4 { grid-template-columns: 1fr; }
}

.sv2-steps.pf-steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .sv2-steps.pf-steps-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .sv2-steps.pf-steps-4 { grid-template-columns: 1fr; }
}

.sv2-feature-grid.pf-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .sv2-feature-grid.pf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .sv2-feature-grid.pf-cols-4 { grid-template-columns: 1fr; }
}

/* =================================================================
   FAMILY B — Service Capabilities: two-level capability groups
   (a short group intro + a row of compact sub-item cards). Used by
   AI & Data Innovation and Engineering, whose approved content is
   grouped capabilities with several named sub-items each — a
   different shape from Cloud/Quality's one-capability-per-row list,
   which reuses sv2-discipline-row directly instead.
================================================================= */
.pf-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.pf-group {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
}
.pf-group__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pf-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  color: #ffffff;
  margin-bottom: var(--space-3);
}
.pf-group__icon svg { width: 28px; height: 28px; }
.pf-group:nth-of-type(5n+1) .pf-group__icon { background: linear-gradient(135deg, var(--accent-1) 0%, var(--color-navy-600) 100%); }
.pf-group:nth-of-type(5n+2) .pf-group__icon { background: linear-gradient(135deg, var(--accent-2) 0%, var(--color-navy-600) 100%); }
.pf-group:nth-of-type(5n+3) .pf-group__icon { background: linear-gradient(135deg, var(--accent-3) 0%, var(--color-navy-600) 100%); }
.pf-group:nth-of-type(5n+4) .pf-group__icon { background: linear-gradient(135deg, var(--accent-4) 0%, var(--color-navy-600) 100%); }
.pf-group:nth-of-type(5n+5) .pf-group__icon { background: linear-gradient(135deg, var(--accent-5) 0%, var(--color-navy-600) 100%); }
.pf-group__intro h3 {
  font-size: var(--font-size-lg);
  margin-bottom: 0.4rem;
}
.pf-group__intro p {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}
.pf-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.pf-group-item {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.pf-group:nth-of-type(5n+1) .pf-group-item { border-top-color: var(--accent-1); }
.pf-group:nth-of-type(5n+2) .pf-group-item { border-top-color: var(--accent-2); }
.pf-group:nth-of-type(5n+3) .pf-group-item { border-top-color: var(--accent-3); }
.pf-group:nth-of-type(5n+4) .pf-group-item { border-top-color: var(--accent-4); }
.pf-group:nth-of-type(5n+5) .pf-group-item { border-top-color: var(--accent-5); }
.pf-group-item:hover,
.pf-group-item:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pf-group-item h4 {
  font-size: var(--font-size-base);
  margin-bottom: 0.3rem;
}
.pf-group-item p {
  color: var(--color-body-text);
  font-size: var(--font-size-sm);
  margin: 0 0 0.5rem;
}
.pf-group-item .outcome {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
}

@media (max-width: 1023px) {
  .pf-group { grid-template-columns: 1fr; }
  /* Fix: .pf-group__intro holds three siblings — the icon, an <h3>, and
     an intro <p> — not just an icon+heading pair. Switching it to
     flex-direction:row here used to lay all three out on one line,
     which overflowed horizontally once the paragraph text had no room
     left to wrap (found via a 320px-width check on /services/, which
     uses this same component and was tested at 320px for the first
     time in the Content Expansion Phase — the row conversion had the
     same latent bug on the AI & Data Innovation and Engineering pages,
     just never caught at the widths tested there). The intro's default
     column stacking (icon above heading above paragraph) already reads
     fine at full width once .pf-group itself is single-column, so no
     replacement layout is needed — just removing the row conversion. */
}

/* Two-panel engagement-shape comparison (Dedicated Team page) — reuses
   sv2-tech-split/sv2-tech-panel's layout with its own accent pair so it
   never needs the --zero/--abp modifiers services-v2.css defines. */
.sv2-tech-panel.pf-panel--a { border-top: 4px solid var(--accent-2); }
.sv2-tech-panel.pf-panel--a .sv2-tech-panel__mark { background: linear-gradient(135deg, var(--accent-2) 0%, var(--color-navy-600) 100%); }
.sv2-tech-panel.pf-panel--b { border-top: 4px solid var(--color-orange); }
.sv2-tech-panel.pf-panel--b .sv2-tech-panel__mark { background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-navy-600) 100%); }
.sv2-tech-panel__mark svg { width: 26px; height: 26px; }

/* =================================================================
   FAMILY C — People / Engagement: team-integration visuals + a
   compact role list for Staff Augmentation's landing rows
================================================================= */
.pf-role-list {
  display: flex;
  flex-direction: column;
}
.pf-role-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
}
.pf-role-row:nth-of-type(even) { background: var(--color-surface-alt); }
.pf-role-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #ffffff;
}
.pf-role-row__icon svg { width: 26px; height: 26px; }
.pf-role-row:nth-of-type(6n+1) .pf-role-row__icon { background: linear-gradient(135deg, var(--accent-1) 0%, var(--color-navy-600) 100%); }
.pf-role-row:nth-of-type(6n+2) .pf-role-row__icon { background: linear-gradient(135deg, var(--accent-2) 0%, var(--color-navy-600) 100%); }
.pf-role-row:nth-of-type(6n+3) .pf-role-row__icon { background: linear-gradient(135deg, var(--accent-3) 0%, var(--color-navy-600) 100%); }
.pf-role-row:nth-of-type(6n+4) .pf-role-row__icon { background: linear-gradient(135deg, var(--accent-4) 0%, var(--color-navy-600) 100%); }
.pf-role-row:nth-of-type(6n+5) .pf-role-row__icon { background: linear-gradient(135deg, var(--accent-5) 0%, var(--color-navy-600) 100%); }
.pf-role-row:nth-of-type(6n+6) .pf-role-row__icon { background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-navy-600) 100%); }
.pf-role-row__body h3 { font-size: var(--font-size-lg); margin-bottom: 0.3rem; }
.pf-role-row__body p { color: var(--color-muted); margin: 0; max-width: 62ch; }
.pf-role-row__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-blue-600);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .pf-role-row { grid-template-columns: 48px 1fr; }
  .pf-role-row__link { grid-column: 2; }
}

/* Reason grid for "Why hire from us" rows on hiring pages (4 items) */
.pf-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.pf-reason {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pf-reason__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-navy) 100%);
  color: #ffffff;
}
.pf-reason__icon svg { width: 22px; height: 22px; }
.pf-reason h3 { font-size: var(--font-size-base); margin-bottom: 0.3rem; }
.pf-reason p { color: var(--color-muted); font-size: var(--font-size-sm); margin: 0; }
@media (max-width: 767px) {
  .pf-reason-grid { grid-template-columns: 1fr; }
}

/* Team-mockup illustration primitives (people/engagement hero visuals) */
.pf-mock-avatar { fill: #ffffff; }
.pf-mock-avatar-ring { fill: none; stroke-width: 2; }

/* =================================================================
   FAMILY D — Business Discovery: industry cards + engagement-model
   comparison rows. Deliberately not a Services-style capability grid.
================================================================= */
.pf-industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.pf-industry-card {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.pf-industry-card:hover,
.pf-industry-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.pf-industry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  color: #ffffff;
  margin-bottom: var(--space-3);
}
.pf-industry-card__icon svg { width: 24px; height: 24px; }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+1) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-1) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+2) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-2) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+3) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-3) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+4) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-4) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+5) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-5) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+6) .pf-industry-card__icon { background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+7) .pf-industry-card__icon { background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-navy-600) 100%); }
.pf-industry-grid .pf-industry-card:nth-of-type(8n+8) .pf-industry-card__icon { background: linear-gradient(135deg, var(--accent-1) 0%, var(--color-blue-600) 100%); }
.pf-industry-card h3 { font-size: var(--font-size-lg); margin-bottom: 0.4rem; }
.pf-industry-card p { color: var(--color-body-text); font-size: var(--font-size-sm); margin: 0 0 0.5rem; }
.pf-industry-card p.pf-industry-card__challenges { color: var(--color-muted); }
.pf-industry-card p.pf-industry-card__help a { font-weight: var(--font-weight-semibold); }
.pf-industry-card .outcome {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-style: italic;
}
@media (max-width: 1023px) {
  .pf-industry-grid { grid-template-columns: 1fr; }
}

/* Collaborative-models comparison rows */
.pf-model-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pf-model-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pf-model-row__intro {
  display: flex;
  flex-direction: column;
}
.pf-model-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #ffffff;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}
.pf-model-list .pf-model-row:nth-of-type(5n+1) .pf-model-row__num { background: var(--accent-1); }
.pf-model-list .pf-model-row:nth-of-type(5n+2) .pf-model-row__num { background: var(--accent-2); }
.pf-model-list .pf-model-row:nth-of-type(5n+3) .pf-model-row__num { background: var(--accent-3); }
.pf-model-list .pf-model-row:nth-of-type(5n+4) .pf-model-row__num { background: var(--accent-4); }
.pf-model-list .pf-model-row:nth-of-type(5n+5) .pf-model-row__num { background: var(--accent-5); }
.pf-model-row__intro h3 { font-size: var(--font-size-lg); margin-bottom: 0.3rem; }
.pf-model-row__intro p { color: var(--color-muted); font-size: var(--font-size-sm); margin: 0; }
.pf-model-row__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
}
.pf-model-row__field dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-orange);
  margin-bottom: 0.2rem;
}
.pf-model-row__field dd {
  margin: 0;
  color: var(--color-body-text);
  font-size: var(--font-size-sm);
}
@media (max-width: 1023px) {
  .pf-model-row { grid-template-columns: 1fr; }
  .pf-model-row__grid { grid-template-columns: 1fr; }
}

/* Compact helper CTA (Collaborative Models' "Not Sure Which Fits?" —
   deliberately NOT styled as a 6th model row) */
.pf-helper-note {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}
.pf-helper-note h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.pf-helper-note p { color: var(--color-muted); margin: 0; }

/* =================================================================
   FAMILY E — Services overview page (Content + SEO Expansion Phase).
   Additive components for /services/ only: a 6-stage delivery
   process, a secondary link under each technology panel, a centered
   "see all" link, a service-selection guidance list, and a small FAQ.
   None of these redeclare a services-v2.css rule.
================================================================= */

/* Six-stage "Idea to Long-Term Support" process — same sv2-steps /
   sv2-step markup the 4-step hire-page tracks already use, just a
   wider grid. Used inside a .sv2-section--dark band, so the existing
   ".sv2-section--dark .sv2-step__num" rule already renders uniform
   white circles regardless of step count — no color-cycling collision
   to work around, unlike a 6-item set would have on a light section. */
.sv2-steps.pf-steps-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 767px) {
  .sv2-steps.pf-steps-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .sv2-steps.pf-steps-6 { grid-template-columns: 1fr; }
}

/* Secondary link stacked under a tech panel's primary "Explore" link
   (e.g. "Hire ASP.NET Zero Developers" under "Explore ASP.NET Zero") */
.pf-panel-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.sv2-tech-panel__link.pf-link--secondary {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.sv2-tech-panel__link.pf-link--secondary:hover { color: var(--color-blue-600); }

/* Centered "see all" link under a list-style section (e.g. the
   engagement-model summary linking through to /collaborative-models/) */
.pf-center-link {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Service Selection Guidance — natural-language "if you need X, see Y"
   rows. Deliberately not FAQ-style question/answer pairs. */
.pf-guidance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 860px;
  margin-inline: auto;
}
.pf-guidance-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pf-guidance-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-orange);
}
.pf-guidance-item__icon svg { width: 18px; height: 18px; }
.pf-guidance-item p { margin: 0; color: var(--color-body-text); }
.pf-guidance-item p a { font-weight: var(--font-weight-semibold); }

/* Small Services FAQ — plain question/answer rows, no accordion JS */
.pf-faq-list {
  max-width: 820px;
  margin-inline: auto;
}
.pf-faq-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.pf-faq-item:last-child { border-bottom: none; }
.pf-faq-item h3 { font-size: var(--font-size-base); margin-bottom: 0.4rem; }
.pf-faq-item p { color: var(--color-muted); margin: 0; }

/* Shared scope/limitation disclaimer note — centered, muted, max-width —
   used under a capability grid or offer section wherever a claim needs an
   explicit boundary. Centralized here so no page repeats it as an inline
   style; see the Design Normalization audit. */
.pf-disclaimer-note {
  max-width: 780px;
  margin: var(--space-5) auto 0;
  color: var(--color-muted);
  text-align: center;
}