/* ==========================================================================
   home-allwork-tabs · frame.css — THE GOOGLE ADS HERO FRAME + THE BAND ON IT
   LIVE on index.html since 2026-09-22 (built and approved as the preview /doctor/home-hero-tabs-p3r.html). Loaded after band.css by /doctor/index.html.

   band.css gives the All Work band the Google Ads "Our Clients" UI (the
   approved v4n preview, unchanged). This file does the rest of what the
   Google Ads page does with that sheet:

   1 · THE FRAME. The homepage corridor (gradient frames on main.hero) goes;
       the Google Ads frame takes its place, value for value
       (gads-hero-rail/hero-rail.css, "sh.css"): a #C6D9F4 ground and, 16px
       inside it (8px on phones), a white panel whose edge steps #DDE9F9 →
       #EEF4FC in two 12px bands (5px on phones) with white seams. It starts
       under the section row and wraps the hero on all sides.

   2 · THE SHEET ON THE FRAME'S EDGE. The frame and its ground stop at --cut,
       which frame.js sets the way the Google Ads rail.js does: in the middle
       of the gap between the first two rows of cards. So the sheet's top part
       (the tabs and the first row) is inside the hero frame and the rest
       stands on the white page. The sheet is placed where Our Clients is:
       max(side + 32px, (100% − 1326px) / 2) from each edge — 75px at 1440 —
       and flush with the frame's panel on phones (21px).
   ========================================================================== */

/* ---- 0 · the Google Ads frame's numbers ------------------------------------ */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --hf-o:16px;                                   /* ground → panel            */
  --hf-st:12px;                                  /* each step                 */
  --hf-side:calc(var(--hf-o) + 2 * var(--hf-st) + 3px);          /* 43px     */
  position:relative !important;
  isolation:isolate;
  background:#FFFFFF !important;
}
@media (max-width:760px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane){ --hf-o:8px; --hf-st:5px; }   /* side 21px */
}

/* ---- 1 · the frame, drawn once for the hero and the sheet's top ------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::before,
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::after{
  content:"" !important; display:block !important;
  position:absolute !important; z-index:0 !important; pointer-events:none;
  border:0 !important; border-radius:0 !important; opacity:1 !important; transform:none !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::before{
  top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
  width:auto !important; height:var(--cut, 78%) !important;
  background:#C6D9F4 !important; box-shadow:none !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane)::after{
  top:var(--hf-o) !important; left:var(--hf-o) !important; right:var(--hf-o) !important; bottom:auto !important;
  width:auto !important; height:calc(var(--cut, 78%) - 2 * var(--hf-o)) !important;
  background:#FFFFFF !important;
  box-shadow:inset 0 0 0 1px #FFFFFF,
             inset 0 0 0 calc(var(--hf-st) + 1px) #DDE9F9,
             inset 0 0 0 calc(var(--hf-st) + 2px) #FFFFFF,
             inset 0 0 0 calc(2 * var(--hf-st) + 2px) #EEF4FC,
             inset 0 0 0 calc(2 * var(--hf-st) + 3px) #FFFFFF !important;
}

/* ---- 2 · the hero: the corridor goes, the copy stays ------------------------
   Centred inside the new panel: the top padding is the frame's own depth. */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > main.hero{
  position:relative !important; z-index:1 !important;
  background:none !important; background-color:transparent !important; background-image:none !important;
  box-shadow:none !important;
  padding-top:var(--hf-side) !important;
}

/* ---- 3 · the sheet where Our Clients stands -------------------------------
   band.css paints the band's ground white and puts the sheet on the header
   lane; here the ground is clear (the frame shows beside the sheet's top part,
   white page below the cut) and the sheet takes the client sheet's inset. */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --bw-ground:transparent;
  --bw-lane:max(calc(var(--hf-side) + 32px), calc((100% - 1326px) / 2));
  position:relative !important; z-index:1 !important;
}
@media (max-width:760px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
    --bw-lane:var(--hf-side);                    /* flush with the frame's panel */
  }
}