/*
CHANGE LOG
File: /static/css/prohrhq_home.css
Purpose: Homepage-only styles. The _v1 suffixed classes are a clean
         rewrite of the v5.1 plate/feature/pitch layout that was
         right-shifting content and producing horizontal overflow on
         the live site. All layout uses fixed max-widths in px (no vw
         units), explicit box-sizing, and figure-margin reset to
         eliminate the overflow class of bug.
Templates: index.html
Loaded via: {% block extra_head %} in templates/index.html only —
         other pages do not load this file.
Version History:
  2026-05-24 v1.0 - Initial. _v1 class set: ph-plate_v1,
                    ph-plate--hero_v1, ph-plate-img_v1,
                    ph-hero-pitch_v1, ph-hero-pitch-lede_v1,
                    ph-cta-row_v1, ph-cta-secondary_v1,
                    ph-ats-features_v1, ph-ats-features-grid_v1,
                    ph-ats-feature_v1, ph-services_v1,
                    ph-service-row_v1, ph-service-prose_v1.
*/

/* =========================================================
   HOMEPAGE LAYOUT — _v1
   The .container wrapper in base_public.html provides the
   outer centering; these rules style what's INSIDE it without
   adding any horizontal escapes.
   ========================================================= */

/* Universal safety: every direct child of .container on the
   homepage uses border-box so padding doesn't inflate width. */
.ph-plate_v1,
.ph-hero-pitch_v1,
.ph-ats-features_v1,
.ph-services_v1,
.ph-service-row_v1 {
  box-sizing: border-box;
  max-width: 100%;
}

/* ---- Plate (the dark wrapper around a service photograph) ---- */
.ph-plate_v1 {
  display: block;
  margin: 2rem 0 1rem;           /* horizontal margin: 0, no escape */
  padding: 0;
  background: #0a1628;
  border-radius: 6px;
  overflow: hidden;
}
.ph-plate--hero_v1 { margin: 0.5rem 0 1.5rem; }

/* The image inside a plate. width:100% of the plate, height auto.
   max-width:100% is the belt; width:100% is the suspenders. */
.ph-plate-img_v1 {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---- Hero pitch (H1 + lede + CTAs under the hero photo) ---- */
.ph-hero-pitch_v1 {
  margin: 2rem 0 2.5rem;
  max-width: 760px;             /* prose width — caps long text */
}
.ph-hero-pitch_v1 h1 {
  margin: 0 0 0.75rem;
  font-size: 2.5rem;
  line-height: 1.1;
}
.ph-hero-pitch-lede_v1 {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.ph-cta-row_v1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.ph-cta-secondary_v1 {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.ph-cta-secondary_v1:hover { background: #0d6efd; color: #fff; }

/* ---- ATS features strip (the "what's in the free ATS" card) ---- */
.ph-ats-features_v1 {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: #f5f8ff;
  border-radius: 6px;
  border-left: 4px solid #0d6efd;
}
.ph-ats-features_v1 h2 { margin: 0 0 1.25rem; }
.ph-ats-features-grid_v1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}
.ph-ats-feature_v1 h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #0a1628;
}
.ph-ats-feature_v1 p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---- Service rows (the vertical stack of 7 service blocks) ---- */
.ph-services_v1 { margin: 2.5rem 0 3rem; }
.ph-service-row_v1 { margin: 0 0 3rem; }
.ph-service-row_v1 .ph-plate_v1 { margin: 0 0 1rem; }
.ph-service-prose_v1 h3 {
  margin: 0.5rem 0;
  font-size: 1.5rem;
  line-height: 1.2;
}
.ph-service-prose_v1 p {
  margin: 0 0 0.75rem;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .ph-hero-pitch_v1 h1 { font-size: 1.85rem; }
  .ph-hero-pitch-lede_v1 { font-size: 1.05rem; }
  .ph-cta-row_v1 { flex-direction: column; align-items: stretch; }
  .ph-cta-secondary_v1 { text-align: center; }
  .ph-ats-features_v1 { padding: 1.25rem 1rem 1.5rem; }
  .ph-ats-features-grid_v1 { gap: 0.75rem 1rem; }
  .ph-service-row_v1 { margin: 0 0 2.25rem; }
  .ph-service-prose_v1 h3 { font-size: 1.3rem; }
}