/* ====================================================================
   Site Home — W1 fixes (FULL_BUILD_PLAN.md §4 fixes 2, 3, 5)
   Loaded AFTER assets/css/style.css (glob-enqueued, see inc/enqueue.php),
   so equal-specificity rules here win the cascade without editing the
   shared stylesheet. Ponytail: only what the fixes actually need — numbers
   reuses the existing `.numbers-grid` invariant untouched (5-item shape now
   matches it exactly), final-cta uses inline styles already in its pattern.
   ==================================================================== */

/* ---- Fix 5: Partners — 6 logos (Clay removed). 3-col >=720px / 2-col
   below both divide 6 evenly, so the old 4-col + last-child-span rule
   (tuned for 7 items) is cancelled rather than left to fire wrongly. ---- */
.site-partners-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .site-partners-grid { grid-template-columns: repeat(3, 1fr); }
  .site-partners-grid .partner-cell:last-child { grid-column: auto; aspect-ratio: 2 / 1; }
}
@media (max-width: 719px) {
  .site-partners-grid .partner-cell:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: 2 / 1; }
}

/* ---- Fix 3: Map section — centered head (was an inline-style hack),
   real image, description block below the image (not centered, matching
   the live site's separate DOM node). ---- */
.site-map .section-head {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.site-map .section-head .lead { margin-inline: auto; }
.site-map-photo { margin-top: 40px; }
.site-map-desc {
  margin-top: 28px;
  max-width: 640px;
  color: var(--text-dim);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
}
body.lang-ar .site-map-desc { line-height: 1.8; }

/* ---- Fix 2: Blog — 4 cards, own grid so the count always divides evenly
   (1-col / 2-col >=640px / 4-col >=1080px). Card box reuses .problem-card;
   only the image treatment on top is new. ---- */
.site-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 640px)  { .site-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .site-blog-grid { grid-template-columns: repeat(4, 1fr); } }
.site-blog-card { display: flex; flex-direction: column; }
.site-blog-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
/* :not(.site-blog-card-title) guards against colliding with blog.css's
   .site-blog-card-title (the /blog/ index card heading) -- both files load
   globally on every page (inc/enqueue.php glob-enqueues assets/css/pages/*.css
   site-wide, not per-template), and a bare `.site-blog-card h3` tag selector
   would otherwise outrank blog.css's single class on specificity and silently
   shrink the /blog/ index cards. This rule is only for the home-page teaser's
   bare (classless) <h3> -- see patterns/site-blog.php. */
.site-blog-card h3:not(.site-blog-card-title) { font-size: 17px; line-height: 1.4; }

/* ====================================================================
   Hero — mobile presentation (Fix 2).

   Root cause of the reported "green squiggle": .hero-orb in style.css is a
   720px circle with a HARD gradient stop (transparent at 60%) pushed
   through filter:blur(40px), plus a 14s translate+scale keyframe. Verified
   with a real device profile (Playwright "iPhone 13", 3x DPR, isMobile) --
   not just a wide desktop viewport scaled down -- and at that pixel density
   the blur rasterizes the hard stop into a visible banded ring that drifts
   with the animation and sits right behind the heading. Fix drops the blur
   filter for mobile entirely (fades via extra gradient stops instead --
   same soft-glow look, no banding, cheaper to paint) and turns the drift
   animation off so it reads as one calm, contained accent instead of a
   moving blob. Both files load after style.css (see this file's header),
   so redeclaring .hero-orb here at equal specificity wins the cascade
   without touching the shared stylesheet.
   ==================================================================== */
@media (max-width: 640px) {
  .hero { padding-block: 128px 64px; }
  .hero-inner { gap: 22px; }
  .hero-meta { gap: 10px; }

  .hero-orb {
    width: 340px;
    height: 340px;
    top: -60px;
    background: radial-gradient(circle, var(--accent-glow) 0%, var(--accent-soft) 45%, transparent 75%);
    filter: none;
    animation: none;
  }
  .hero-grid-bg { opacity: 0.32; }

  /* CTA reads as the one obvious next action on a phone -- full width,
     centered label, scarcity note (offer-hero only) stacked below it
     instead of squeezed onto the same row. */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-cta-row .btn-primary { width: 100%; justify-content: center; }
}