/* =========================================================
   ForGrowth Academy — layout-fixes.css
   Loaded last. Two jobs only:
     1. Stop the decorative background layer overlapping readable text.
     2. Fill the Program heading's empty right side with a static graphic.
   Plus responsive hardening so neither creates overflow at any width.
   ========================================================= */


/* =========================================================
   1. DECORATIVE LAYER — stop it colliding with text
   The .bg-system SVG nodes are positioned by percentage, so on narrower
   viewports they drift directly behind the headline and paragraph. They sit
   at z-index 0 and the text at z-index 2, so it is not a stacking bug — it is
   visual noise behind words that need to stay clean.
   ========================================================= */

/* Quieter overall, so where it does sit behind text it never competes. */
.hero .bg-system svg,
.section .bg-system svg {
  opacity: 0.09;
}

/* Keep the decoration clear of the central reading column. Below this width
   there is no free margin left for it to live in, so it is removed entirely
   rather than layered under the copy. */
@media (max-width: 1180px) {
  .hero .bg-system svg { opacity: 0.06; }
}

@media (max-width: 900px) {
  .bg-system { display: none; }
}

/* The projects watermark is large and low-contrast; on smaller screens it
   lands under the cards. Already hidden under 900px in the base sheet —
   this pulls it further out of the way above that. */
@media (max-width: 1240px) {
  .brand-watermark { opacity: 0.03 !important; }
}


/* =========================================================
   2. PROGRAM HEADING — two-column layout with a static graphic
   ========================================================= */

.pg-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* The section head carries its own bottom margin in the base sheet; the row
   now owns that spacing instead. */
.pg-head-row > .section-head {
  margin-bottom: 0;
  min-width: 0;
}

.pg-aside {
  min-width: 0;
  justify-self: end;
  width: 100%;
  max-width: 380px;
}

.pg-aside svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet: the graphic loses too much detail beside the heading, so it drops
   below and centres rather than being squeezed. */
@media (max-width: 900px) {
  .pg-head-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .pg-aside {
    justify-self: start;
    max-width: 320px;
  }
}

/* Phone: the heading and the grid carry the section on their own. */
@media (max-width: 560px) {
  .pg-aside { display: none; }
  .pg-head-row { gap: 0; }
}


/* =========================================================
   3. RESPONSIVE HARDENING
   Guards against horizontal scroll at every width, without touching any
   existing layout rule.
   ========================================================= */

/* `overflow-x: hidden` on html/body makes them scroll containers, which
   silently disables `position: sticky` for every descendant — that is what
   stopped the step panels from stacking. `clip` prevents the same sideways
   scroll without creating a scroll container, so sticky keeps working.
   The hidden line stays first as a fallback for older browsers. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* Long unbroken strings (emails, URLs) are the usual cause of overflow on
   narrow screens. */
body { overflow-wrap: break-word; }

/* Media never exceeds its column. */
img, svg, video { max-width: 100%; }

/* Grid and flex children default to min-width:auto, which lets long content
   push a track wider than its container. */
.pg-grid > *,
.module-grid > *,
.art-grid > *,
.proj-grid > *,
.toolkit > *,
.batch-grid > * { min-width: 0; }

@media (max-width: 400px) {
  /* Very small phones: keep the floating stack from crowding content. */
  :root { --fab-size: 42px; }
}


/* =========================================================
   5. ENQUIRY — land the whole thing in one screen
   Clicking the floating "Enquire Now" jumped to #enquiry, but two things made
   it arrive badly:
     - .section applies 150px of top padding, so a third of the screen was
       empty space above the heading;
     - there was no scroll offset, so the 70px sticky header sat over the top
       of the section.
   The result was heading on one screen, form on the next. These rules pull it
   into a single view without changing the section's design.
   ========================================================= */

#enquiry {
  /* Clears the sticky header so the eyebrow is never hidden under it. */
  scroll-margin-top: 78px;
  padding-top: clamp(56px, 7vh, 92px);
  padding-bottom: clamp(64px, 8vh, 116px);
}

#enquiry .section-head {
  margin-bottom: clamp(22px, 3vh, 36px);
}

/* Short laptop screens: tighten again so the Continue button stays in view. */
@media (max-height: 820px) and (min-width: 900px) {
  #enquiry { padding-top: 48px; padding-bottom: 56px; }
  #enquiry .section-head { margin-bottom: 20px; }
  #enquiry .section-head h2 { font-size: clamp(26px, 3vw, 36px); }
}

@media (max-height: 700px) and (min-width: 900px) {
  #enquiry { padding-top: 32px; padding-bottom: 40px; }
  #enquiry .section-head h2 { font-size: clamp(23px, 2.6vw, 30px); }
  /* The card's own 60px padding is the last thing to give. */
  #enquiry .enquiry-form-area,
  #enquiry .enquiry-side { padding: 34px 38px; }
}

/* Every other in-page anchor deserves the same header clearance, or the
   heading of whichever section you jump to sits under the navbar. */
#about, #program, #program-modules, #build, #learning,
#toolkit, #projects, #batches, #faq, #contact {
  scroll-margin-top: 78px;
}