/* ============================================================================
   PAGE: OUR PROFICIENCIES (our-proficiencies.html)
   Almost every block on this page (page-banner, subnav, split, band, why,
   bento--three, hscroll, tags, closing-note) lives in the shared bundle:
   src/css/sections/inner.css. Only what no other page uses is here.
   ============================================================================ */

@layer sections {

  /* ===================== ANCHOR OFFSETS ===================== */
  /* Direct #links (page opened with a hash): the root already reserves the header
     (scroll-padding-top), so only the sticky pill bar is added here. Clicks on the
     bar itself are positioned exactly by sub-nav-scroll-spy.js. */
  #it-support,
  #it-consulting,
  #software,
  #it-solutions { scroll-margin-top: 3.75rem; }

  /* The consulting band follows the IT Support split directly —
     drop its top margin so the two don't stack a double gap */
  .split + .band { margin-top: 0; }

  /* ===================== "EXPLORE …" LINKS (one per service section) ===================== */
  /* Each service block ends with a link to its own page. Never stretched by
     the parent grid, and a little extra air above it. */
  .svc-link { justify-self: start; margin-top: 1rem; }
  .why__sticky .svc-link { margin-top: 2rem; }

  /* ===================== PHONES ===================== */
  @media (max-width: 699px) {
    /* Banner hugs its content instead of filling 68% of the screen */
    .page-banner { min-height: 0; padding-block: calc(var(--header-h) + 2.5rem) 3.5rem; }

    /* All four service pills visible: 2 × 2 grid instead of a sideways scroll row */
    .subnav__inner {
      display: grid;
      grid-template-columns: auto auto;
      inline-size: 100%;
      border-radius: 1.6rem;
      overflow: visible;
    }
    .subnav a { padding: .55rem .7rem; text-align: center; }
    /* The two-row bar is taller → direct #links need more clearance */
    #it-support,
    #it-consulting,
    #software,
    #it-solutions { scroll-margin-top: 6.5rem; }
  }
}