/*
CHANGE LOG
File: /var/www/html/prohrhq.com/static/css/prohrhq_dqvault.css
Purpose: Styles for the DQ Vault-led homepage sections (v2 rewrite,
         2026-08-05) that aren't covered by prohrhq_public.css's plate/
         service-row switchboard: icon panels (Recruiter Workspace,
         Tenstreet bridge), engagement steps, and pricing categories.
Main App: app.py
Used by:  templates/index.html
Version History:
  2026-08-05 v1.0 - Initial creation for DQ Vault homepage rebuild.
*/

.ph-dq-icon-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius);
}

.ph-dq-icon-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ph-dq-icon-item .ph-dq-icon-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-text);
}

.ph-dq-icon-item .ph-dq-icon-desc {
  font-size: 0.88rem;
  color: var(--color-text-mute);
  line-height: 1.4;
}

.ph-dq-status-note {
  font-size: 0.85rem;
  color: var(--color-text-mute);
  font-style: italic;
  margin: 0.5rem 0 0;
}

.ph-dq-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
  counter-reset: dq-step;
}

.ph-dq-step {
  position: relative;
  padding: 1rem 1rem 1rem 2.5rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
}

.ph-dq-step::before {
  counter-increment: dq-step;
  content: counter(dq-step);
  position: absolute;
  left: 0.85rem;
  top: 1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-link);
}

.ph-dq-step h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.ph-dq-step p { margin: 0; font-size: 0.9rem; color: var(--color-text-mute); }

.ph-dq-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.ph-dq-pricing-item {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.ph-dq-pricing-item strong { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; }

.ph-dq-roadmap-tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  background: var(--color-accent, #f4b942);
  color: var(--color-ink, #0a1628);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.ph-dq-final-cta {
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin: 2rem 0 1rem;
  background: var(--color-ink, #0a1628);
  border-radius: var(--radius);
}

.ph-dq-final-cta h2 { color: #fff; margin: 0 0 1rem; }
.ph-dq-final-cta .ph-cta-primary { font-size: 1.05rem; padding: 0.85rem 1.75rem; }

/* ---- Two-column hero: text left, image right (work order v2 hero spec) ---- */
.ph-hero-two-col {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: 2.5rem;
  align-items: center;
  margin: 1.5rem 0 2.5rem;
}

.ph-hero-two-col .ph-hero-pitch_v1 {
  margin: 0;
  max-width: 560px;
}

.ph-hero-two-col .ph-plate_v1,
.ph-hero-two-col .ph-plate--hero_v1 {
  margin: 0;
}

@media (max-width: 860px) {
  .ph-hero-two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .ph-hero-two-col .ph-hero-pitch_v1 { max-width: 100%; order: 1; }
  .ph-hero-two-col picture { order: 2; }
}

.ph-dq-final-cta-sub { color: rgba(255,255,255,0.75); max-width: 60ch; margin: 0 auto 1.25rem; border: none; padding: 0; }

/* ---- Six-card benefit grid (homepage, per Features/Advantages/Benefits
   review section) ---- */
.ph-dq-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.ph-dq-benefit-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.ph-dq-benefit-card h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.ph-dq-benefit-card p { margin: 0; font-size: 0.92rem; color: var(--color-text-mute); }

/* ---- Features/Advantages/Benefits table (Platform page) ---- */
.ph-fab-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; }
.ph-fab-table th { text-align: left; font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-mute); background: var(--color-bg-alt); border-bottom: 1px solid var(--color-rule); padding: 0.6rem 0.75rem; }
.ph-fab-table td { border-bottom: 1px solid var(--color-rule-soft); padding: 0.75rem; vertical-align: top; }
.ph-fab-table td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
  .ph-fab-table, .ph-fab-table thead, .ph-fab-table tbody, .ph-fab-table th, .ph-fab-table td, .ph-fab-table tr { display: block; }
  .ph-fab-table thead { display: none; }
  .ph-fab-table tr { border: 1px solid var(--color-rule); border-radius: var(--radius); margin-bottom: 1rem; padding: 0.75rem; }
  .ph-fab-table td { border: none; padding: 0.35rem 0; }
  .ph-fab-table td::before { content: attr(data-label); display: block; font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-mute); margin-bottom: 0.15rem; }
}

/* ---- DQ Vault page redesign (2026-08-06, per design review): feature
   card icons, output panel, system-choice cards, benefits strip. Reuses
   .ph-dq-benefits / .ph-dq-benefit-card / .ph-dq-steps / .ph-dq-final-cta
   from the homepage rather than inventing a parallel style. ---- */

.ph-dq-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}
.ph-dq-feature-icon svg { width: 20px; height: 20px; stroke: var(--color-link); fill: none; stroke-width: 1.8; }

.ph-dq-benefit-line {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-rule-soft);
  font-size: 0.82rem;
  color: var(--color-link);
  font-weight: 600;
}

.ph-dq-output-panel {
  background: var(--color-accent-soft);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.5rem;
  margin: 1.5rem 0;
}
.ph-dq-output-plate {
  max-width: 520px;
  margin: 1.25rem auto 1.5rem;
}
.ph-dq-output-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.ph-dq-output-item {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(31,77,138,0.12);
}
.ph-dq-compliance-box {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text-mute);
  margin-top: 1rem;
}

.ph-dq-system-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.ph-dq-system-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.ph-dq-system-card h3 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.ph-dq-system-card p { font-size: 0.95rem; color: var(--color-text-mute); }
.ph-dq-system-card .ph-dq-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-link);
  background: var(--color-accent-soft);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-top: 0.75rem;
}

.ph-dq-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.75rem;
  background: var(--color-ink, #0a1628);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}
.ph-dq-strip span { font-size: 0.95rem; font-weight: 600; padding: 0.25rem 0.75rem; }

@media (max-width: 720px) {
  .ph-dq-strip { flex-direction: column; }
}

.ph-dq-hero-markers { padding: 0.75rem 1rem; margin: 1rem 0; }