/* ==========================================================================
   fix-bugs.css — targeted bug fixes for the Aizen Labs company site.
   Cascade order: site.css -> fix-bugs.css -> fix-consistency.css
                  -> fix-design.css -> fix-icons.css
   Do NOT edit site.css; every rule below intentionally overrides it.
   Brand DNA kept: purple #560591, Space Grotesk + Inter, no gradients.
   ========================================================================== */

/* --- Bug 1: "Goes well with" rows (services/graphic-design.html) ---------
   Diagnosis: the desktop rule in site.css (§"Numbered editorial service
   rows") sets .svc-row to
     grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr) auto
   which expects a leading .n number column. These rows have only three
   children (h3, p, .go), so the browser auto-placed <h3> into the narrow
   4.5rem number track and <p> into the title track — the service title
   wrapped into a 4.5rem column and visually collided with (layered over)
   the description paragraph.
   Fix: for the rows-3 variant (3-column rows with no .n — used only on
   graphic-design.html and business-intelligence.html, verified no .n
   co-occurs with rows-3 anywhere), give the grid the 3 columns the
   markup actually has. Below 860px site.css already stacks rows into a
   single column, so nothing changes there.
   At 1440px each track is ~550px+: "Website Development" / "Mobile App
   Development" fit on one line (no wrap, no overlap). At 390px the rows
   stack vertically — h3, p, arrow each on their own line, full-row link
   keeps the >=44px touch target. ------------------------------------------ */
@media(min-width:860px){
  .svc-rows.rows-3 .svc-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    align-items:center;
  }
}

/* --- Bug 2: mega menu panel too translucent (§20 in site.css) ------------
   Diagnosis: .mega-panel used rgba(255,255,255,.86), so hero text ghosted
   through behind the menu links when the panel opened over the homepage
   hero, hurting readability.
   Fix: a more solid light brand-tinted background (96% alpha #faf6fd)
   while keeping -webkit-backdrop-filter + backdrop-filter
   blur(16px) saturate(150%) and the @supports-not fallback pattern from
   site.css. Readability: --ink (#16121d, ~15:1) and --muted (#5b5367,
   ~7:1) on the near-opaque tint stay far above 4.5:1 over both light
   heroes and dark sections. The fallback for no backdrop-filter is now
   fully opaque. ----------------------------------------------------------- */
@media(min-width:861px){
  .mega-panel{
    background:rgba(250,246,253,.96);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    backdrop-filter:blur(16px) saturate(150%);
  }
  @supports not (backdrop-filter:blur(1px)){
    .mega-panel{background:#faf6fd}
  }
}

/* --- Bug 3: footer sub-item marker renders like a stray 'L' glyph -------
   Diagnosis: .site-footer .fsub-item::before drew an L-shaped corner
   (border-left + border-bottom) that read as a broken character before
   the 'Custom Retail Software' / 'Android Game Development' links.
   Fix: remove the marker entirely; keep the 1.05rem text indent so the
   sub-item hierarchy under each bucket still reads cleanly. ------------- */
.site-footer .fsub-item{padding-left:1.05rem}
.site-footer .fsub-item::before{content:none}

/* --- Bug 4: process-step connector line overshoots the last pill --------
   Diagnosis: site.css sets .steps to grid-template-columns:repeat(6,1fr)
   — built for a six-step timeline — but this page (and the other service
   pages) renders exactly four .step children. The timeline's connector
   line is each step's border-top, so the row kept 2/6 of empty column
   tracks and the line trailed past the "04" pill into empty space.
   Fix: when a .steps row has exactly four .step children, lay them out
   in four equal columns, so the steps fill the row and the connector
   line terminates at the right edge of the last step. :has() degrades
   gracefully in older browsers (they simply keep the old 6-column
   behavior). Mobile (<900px) is untouched: the vertical left-border
   timeline there is intentional. ------------------------------------------ */
@media(min-width:900px){
  .steps:has(> .step:nth-child(4):last-child){
    grid-template-columns:repeat(4,1fr);
  }
}