/* =========================================================
   Mission blocks — append to /css/style.css
   Used by: about.php (two-column hero with mission on right),
            index.php (home-mission-band)
   Reuses existing tokens: --teal, --white, --white-muted,
   --white-dim, --bg-primary.
   ========================================================= */


/* ---------- Indent top section to align with multi-column blocks ----------
   The block at the top of each main page should align with the
   1100px-wide multi-column grids below it, so the LEFT EDGE of
   the content is consistent across all sections — whether a
   section is left-justified or centered.

   Direct-child selector preserves resources.php's custom
   .page-top-layout (which keeps its existing 1200px design)
   and about.php's two-column .page-top-grid (handled separately
   above). Applies automatically to services, blog, faqs,
   testimonials, and any other page using
   .page-top > .page-top-content.                              */

.page-top > .page-top-content {
  max-width: 1100px;
  margin: 0 auto;
}

/* Home page hero — same 1100px centered indent so its left
   edge matches every other top section on the site.
   width: 100% is required because .hero is a flex container
   and the flex item would otherwise shrink to fit its widest
   child (.hero p at 560px max-width), making the hero appear
   ~560px wide instead of 1100px.                             */
.hero-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Opt-in escape hatch: lets a single CTA paragraph break free
   of the 720px reading constraint so a long one-line statement
   can stay on one line at desktop widths. Wraps naturally on
   smaller viewports. Used on faqs.php "Every business is
   different..." line.                                          */
.cta-inner p.cta-line-tight {
  max-width: none;
}

/* Opt-in escape hatch: lets an intro paragraph span the full
   container width (up to 1100px) and run flush-left, instead
   of the centered narrow reading constraint. Useful for longer
   intro paragraphs where the narrow centered treatment feels
   cramped. The eyebrow and h2 above it stay centered (unless
   .section-header-left is also applied).

   Works in any of the standard centered text containers on
   the site: .section-header, .cta-inner, .home-mission-band.
   Each selector explicitly listed so the specificity (0,0,3)
   reliably beats parent-level "p" rules like .cta-inner p.   */
.section-header p.intro-wide,
.cta-inner p.intro-wide,
.home-mission-band p.intro-wide {
  max-width: 1100px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Applied alongside .section-header, left-aligns the entire
   block — eyebrow, headline, and paragraph all share the same
   left edge at the container's left side (instead of being
   centered). Pair with .intro-wide on the paragraph so the
   paragraph block also sits flush left and lines up with the
   headline text above it.                                      */
.section-header.section-header-left {
  text-align: left;
}


/* ---------- Assessment hero (aspg-hero) refinements ----------
   Two changes:
   1. Widen the hero container so the long h1 can fit on
      one line at typical desktop widths.
   2. Slightly reduce the h1 font cap so the line actually
      fits without forcing white-space:nowrap (which would
      clip on narrower viewports given .aspg-hero has
      overflow:hidden).
   3. Left-justify the lead paragraph text (block stays
      visually centered; text just reads left-to-right).      */

.aspg-hero-inner {
  max-width: 1200px;
}

.aspg-hero h1 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
}

.aspg-hero p.aspg-lead {
  text-align: left;
  max-width: none;
}


/* ---------- Wider inline text blocks (site-wide default) ----------
   Bumps single-column intro/header blocks to match the
   1100px max-width used by every multi-column grid on the
   site (.cred-grid, .services-grid, .competency-grid,
   .cert-grid, .training-grid, .booking-layout,
   .testimonials-grid, .article-list).

   Applied site-wide: any page using .section-header or
   .cta-inner picks up the new width automatically. Long
   headings like "Full-service IT support for San Diego
   SMBs" now stay on one line at typical resolutions.

   The intro paragraph inside each block is still
   constrained to ~720px so body copy stays comfortably
   readable (avoids long-line eye fatigue).             */

.section-header {
  max-width: 1100px;
  text-align: left;
}

/* Home-page hero: left-align the content inside .hero-content
   so the H1, subtitle, paragraph, buttons, and stats all share
   the same left edge as the multi-column blocks below.        */
.hero-content {
  text-align: left;
}
.section-header p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.cta-inner {
  max-width: 1100px;
}
.cta-inner p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* ---------- About page: two-column hero ----------
   The .page-top wrapper now contains .page-top-grid with
   "About AI Upside Group" content on the LEFT and
   "Our Mission" content on the RIGHT.
   max-width + margin auto centers the whole two-column
   block on the page (same pattern as .cred-grid, so the
   block sits visually centered like the rest of the page,
   not pinned to the left edge).
   The h1/h2 and p in each column inherit the existing
   .page-top h1 / .page-top p styles already in style.css. */

.page-top-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

/* Keep paragraph text left-aligned within each column, even
   when .page-top-centered on the parent centers the eyebrow
   and headings. Paragraphs read better left-justified.       */
.page-top-grid p {
  text-align: left;
}

/* "Our Mission" heading — match the left column's h1 size/weight */
.page-top-right h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  color: var(--white);
}

@media (max-width: 900px) {
  .page-top-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ---------- (Future) Centered single-column page-top ----------
   Reusable utility for centering a single-column hero on
   other main pages. Add the .page-top-centered class
   alongside .page-top when ready to roll out across the site.
   Not used on about.php (about uses the two-column layout
   above instead).                                              */

.page-top-centered { text-align: center; }
.page-top-centered .page-top-content { margin: 0 auto; }
.page-top-centered .page-top-content p {
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Home page: "What We Believe" mission band ----------
   Sits between .credibility and .cta-section on index.php.
   Uses bg-primary (matches .credibility) so credibility +
   mission read as one thought, then .cta-section's
   bg-secondary creates the next visual break.
   H2 sized to match .cred-content h2.
   First p matches .cta-inner p.
   Last (small) p matches the page's smaller grey text.       */

.home-mission-band {
  padding: 6rem 3rem;
  background: var(--bg-primary);
  text-align: left;
  position: relative;
}

/* CTA section: left-align everything inside .cta-inner so the
   eyebrow, headline, paragraph, buttons, and contact items
   all share the same left edge. Overrides the default
   text-align: center inherited from .cta-section.            */
.cta-inner {
  text-align: left;
}
.home-mission-band::before,
.home-mission-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,212,212,0.18), transparent);
}
.home-mission-band::before { top: 0; }
.home-mission-band::after  { bottom: 0; }

.home-mission-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.home-mission-band .section-label {
  margin-bottom: 1rem;
}

/* Headline — matches .cred-content h2 */
.home-mission-band h2 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 1.5rem;
}

/* Body paragraphs — match .cta-inner p */
.home-mission-band p {
  font-size: 1.15rem;
  color: var(--white-muted);
  font-weight: 300;
  line-height: 1.7;
  margin: 0 auto 1.25rem;
}

/* Final supporting paragraph — smaller and dim grey
   (matches the smaller-grey pattern used elsewhere on
   the site, e.g. .cred-item-text p)                    */
.home-mission-band p:last-child {
  font-size: 0.95rem;
  color: var(--white-dim);
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .home-mission-band { padding: 4rem 1.5rem; }
}