/* ============================================================
   Avenux Techspire — Home page styles / fixes.

   The home template (templates/page-home.php) still carries a large
   inline <style> block. These rules live in a real stylesheet and use
   PARENT-SCOPED selectors (.hero ..., .psl__viewport ...) so they
   out-specify the template's inline rules WITHOUT !important — the
   project's "class-based, parent-div override" rule. As the home
   template is de-inlined, its CSS should migrate here.
   ============================================================ */

/* ============================================================
   LCP stability (PageSpeed) — fixes "NO_LCP"
   Above the fold there was no element Chrome would accept as the LCP:
   the headline is gradient-clipped (color:transparent) text, and the hero
   photo is an absolutely-positioned tile the JS crossfades/swaps every few
   seconds (opacity transitions) — both get disqualified, so PageSpeed
   reports NO_LCP and can't score Performance.

   Fix: make the hero PHOTO a clean, stable LCP element —
     1. opaque + settled from first paint (no entrance fade), and
     2. no crossfade transition (those leave opacity<1 frames Chrome skips).
   On phones the photo is also moved above the fold (order:-1) so it sits in
   the initial viewport. The preloaded, fetchpriority=high IMG_3511 then
   becomes the measured LCP on both mobile and desktop.
   ============================================================ */
.hero .rise,
.hero .htri,
.hero .htri__img.is-on {
  opacity: 1;
  transform: none;
  animation: none;
}
.hero .htri__img { transition: none; }

/* ---- Hero badges: never wrap to multiple lines ---- */
.hero .s3d-badge { white-space: nowrap; }

/* ============================================================
   Partnerships carousel ("Companies we build with")
   Show exactly THREE cards per view, flush — no 4th-card peek.
   Card width = (track width - 2 gaps) / 3 so three cards + two gaps
   fill the viewport exactly. The carousel JS reads .pcard offsetWidth
   at runtime, so step/scroll math adapts to these widths automatically.
   ============================================================ */
.psl__viewport .pcard { flex: 0 0 calc((100% - 2 * var(--s6, 24px)) / 3); }

@media (max-width: 980px) {
  .psl__viewport .pcard { flex: 0 0 calc((100% - var(--s6, 24px)) / 2); } /* two up */
}
@media (max-width: 600px) {
  .psl__viewport .pcard { flex: 0 0 100%; } /* one up */
}

/* ============================================================
   Mobile hero (<= 768px)
   The desktop photo "triptych" is an absolute-positioned orbit tuned
   for a wide column; squeezed onto a phone it collapses to a sliver
   (which also crushes the badges onto 3 lines) and the photos never
   read. On mobile we show a SINGLE full-width photo instead, ABOVE the
   copy (so it's the above-the-fold LCP element), and let the existing
   orbit JS crossfade its image. Clean, robust, always renders.
   ============================================================ */
@media (max-width: 768px) {
  .hero .hero__in { grid-template-columns: 1fr; }

  .hero .htri {
    order: -1;                 /* photo above the headline = in first viewport */
    position: relative;
    height: auto;
    max-width: 100%;
    margin: 0 0 var(--s6, 24px);
    aspect-ratio: 4 / 3;
  }

  /* Show only the first photo tile, filling the box. (.htri's first child
     is the backdrop, so the first tile is :nth-child(2).) The other two
     orbiting tiles are hidden on mobile. */
  .hero .htri__tile { display: none; }
  .hero .htri__tile:nth-child(2) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: var(--r-lg, 20px);
  }

  /* Badges: single line, anchored to the image corners. */
  .hero .s3d-badge { font-size: 11px; padding: 8px 12px; }
  .hero .s3d-badge--top { top: 12px; right: 12px; }
  .hero .s3d-badge--bot { bottom: 12px; left: 12px; }
}