/* ==========================================================================
   home-allwork-05 (LIVE, copied from hero-aw05) · compose.css — the SIX approved-05 tabs composed into the live
   hero's work region, to the finish of All Work + Google Ads (never touched).
   What those two do, and what every tab here now does too:
     · one fixed-height band under the category line (the card never balloons)
     · items are FILLED PLATES (--card #F1F5FC, 10px, no border; an edge on hover)
     · the row runs out of the card's right edge; round ‹ › (the hero's own
       38px buttons) sit on the band's middle — one direction of travel
     · name 15/700 ink, category 13 mute — the hero's own type
   Each category keeps its own item shape (shelf / quotes / wall / screens /
   browsers / campaigns). Nothing is added: same content, same lightbox.
   Weight: "#hx .aw5-host …" (1,2+,0) outranks the bundle's "#hx .s05 …".
   ========================================================================== */
#hx .aw5-host { --bh: 180px; --ink: #0E1E35; --mute: #5A6678; --plate: var(--card, #F1F5FC); position: relative; }
#hx .aw5-host .aw5-panel { position: relative; }

/* ---- the band: every category's list becomes ONE horizontal row ---------- */
#hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps) {
  display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-template-rows: var(--bh);
  gap: 12px; columns: auto !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 !important;
}
#hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps)::-webkit-scrollbar { display: none; }
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg, .s05-camp) {
  scroll-snap-align: start; height: var(--bh); margin: 0 !important; min-width: 0;
  background: var(--plate) !important; border: 1px solid transparent; border-radius: 10px !important; box-shadow: none !important;
  transition: border-color .3s ease, background-color .3s ease; overflow: hidden;
}
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg):hover, #hx .aw5-host .s05-cr:hover { border-color: #A9C5EA; }
#hx .aw5-host :is(.s05-g, .s05-rc, .s05-lt, .s05-pg).is-last { border-color: var(--brand, #0760C6); background: #fff !important; }
/* the hero's own type for every name + category line */
#hx .aw5-host :is(.s05-g, .s05-pg) b, #hx .aw5-host .s05-camp header b { font-size: 15px !important; font-weight: 700; color: var(--ink); line-height: 1.25 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; -webkit-line-clamp: unset !important; padding: 0 !important; }
#hx .aw5-host :is(.s05-g, .s05-pg) > span:last-child, #hx .aw5-host .s05-camp header span { font-size: 13px !important; color: var(--mute) !important; line-height: 1.3 !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding: 0 !important; }

/* ---- Google Ads Audits · a video shelf: 16:9 frame, name + category ------ */
#hx .aw5-host .s05-thumbs { grid-auto-columns: 228px; }
#hx .aw5-host .s05-g { display: flex !important; flex-direction: column; gap: 0 !important; padding: 8px 8px 0 !important; text-align: left; }
#hx .aw5-host .s05-g .lab-thumb { flex: none; border-radius: 7px !important; margin: 0 0 9px !important; }
#hx .aw5-host .s05-g b, #hx .aw5-host .s05-g > span:last-child { padding: 0 4px !important; }

/* ---- Client Reviews · equal quote plates, each in the format it arrived -- */
#hx .aw5-host .s05-wall { grid-auto-columns: 312px; }
#hx .aw5-host .s05-rc { position: relative; }
#hx .aw5-host .s05-rc .lab-rv { height: 100%; background: transparent !important; box-shadow: none !important; padding: 14px 16px !important; border-radius: 0 !important; overflow: hidden; }
#hx .aw5-host .s05-rc .lab-rv .tx { font-size: 14px !important; line-height: 1.45; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#hx .aw5-host .s05-rc .lab-rv .hd { gap: 10px; }
#hx .aw5-host .s05-rc .lab-rv .hd .mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* video review: the frame shrinks to a strip so the plate keeps its height */
#hx .aw5-host .s05-rc .lab-rv.vd { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; }
#hx .aw5-host .s05-rc .lab-rv.vd .vid { grid-row: 1 / span 2; aspect-ratio: auto !important; height: 100%; border-radius: 8px; }
#hx .aw5-host .s05-rc .lab-rv.vd .vid .pb { transform: scale(.62); }
#hx .aw5-host .s05-rc .lab-rv.vd .tx { -webkit-line-clamp: 4; margin-top: 6px; }
/* WhatsApp: the chat ground stays, inside the plate's own corners */
#hx .aw5-host .s05-rc .lab-rv.wa { padding: 12px 14px !important; }
#hx .aw5-host .s05-rc .lab-rv.wa .bub { margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#hx .aw5-host .s05-rc .lab-rv.em .eh { font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#hx .aw5-host .s05-rc .lab-rv.em .tx + .tx { display: none; }

/* ---- Client Wall · one continuous brand wall: three rows of client plates, no A–Z grouping ---- */
#hx .aw5-host .aw5-wall {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-columns: 232px;
  height: var(--bh); gap: 10px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
#hx .aw5-host .aw5-wall::-webkit-scrollbar { display: none; }
#hx .aw5-host .aw5-cl {
  scroll-snap-align: start; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 11px; align-content: center; padding: 0 12px; background: var(--plate); border-radius: 10px;
}
#hx .aw5-host .aw5-cl .lab-mono { grid-row: 1 / span 2; align-self: center; width: 30px; height: 30px; border-radius: 7px; font-size: 11px; }
#hx .aw5-host .aw5-cl b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hx .aw5-host .aw5-cl small { font-size: 12px; color: var(--mute); line-height: 1.25; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Landing Pages · page screens: tall portrait tiles, the label on the screen's foot */
#hx .aw5-host .s05-pages:not(.s05-sites) { grid-auto-columns: max(136px, calc((100% - 7 * 12px) / 8)); }   /* 8 screens fill the lane: never a hole */
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-pg { position: relative; display: block !important; padding: 6px !important; }
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-art { display: block; width: 100%; height: 100%; aspect-ratio: auto !important; margin: 0 !important; border-radius: 7px !important; }
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-art svg { display: block; width: 100%; height: 100%; }
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-pg :is(b, span:last-child) { position: absolute; left: 12px; right: 12px; background: #fff; padding: 0 8px !important; }
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-pg b { bottom: 30px; padding-top: 7px !important; border-radius: 6px 6px 0 0; font-size: 13.5px !important; }
#hx .aw5-host .s05-pages:not(.s05-sites) .s05-pg > span:last-child { bottom: 12px; height: 18px; margin: 0; padding-bottom: 5px !important; border-radius: 0 0 6px 6px; font-size: 12px !important; line-height: 1.1 !important; }

/* ---- Websites · browser tiles: a slim window bar over a wide frame ------- */
#hx .aw5-host .s05-sites { grid-auto-columns: 280px; }
#hx .aw5-host .s05-sites .s05-pg { display: flex !important; flex-direction: column; padding: 8px 8px 10px !important; gap: 0 !important; }
#hx .aw5-host .s05-sites .s05-art { position: relative; flex: 1; min-height: 0; aspect-ratio: auto !important; margin: 0 0 9px !important; border-radius: 7px !important; padding-top: 16px; background: #fff; }
#hx .aw5-host .s05-sites .s05-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: #fff;
  background-image: radial-gradient(circle, #CFDBEB 2.5px, transparent 3px), radial-gradient(circle, #CFDBEB 2.5px, transparent 3px), radial-gradient(circle, #CFDBEB 2.5px, transparent 3px);
  background-size: 9px 16px; background-position: 6px 0, 15px 0, 24px 0; background-repeat: no-repeat; }
#hx .aw5-host .s05-sites .s05-art svg { display: block; width: 100%; height: 100%; }
#hx .aw5-host .s05-sites .s05-pg b, #hx .aw5-host .s05-sites .s05-pg > span:last-child { padding: 0 4px !important; }

/* ---- Meta Ads · campaign plates: the client, then its three creatives ----- */
#hx .aw5-host .s05-camps { grid-auto-columns: 356px; }
#hx .aw5-host .s05-camp { display: flex; flex-direction: column; padding: 10px 10px 10px !important; }
#hx .aw5-host .s05-camp header { display: block !important; padding: 2px 4px 9px !important; }
#hx .aw5-host .s05-crs { flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
#hx .aw5-host .s05-cr { position: relative; aspect-ratio: auto !important; height: 100%; border-radius: 7px !important; border: 1px solid transparent; transition: border-color .3s ease; }
#hx .aw5-host .s05-cr svg { display: block; width: 100%; height: 100%; }
#hx .aw5-host .s05-cf { font-size: 10px !important; padding: 3px 5px !important; left: 5px !important; top: 5px !important; }
#hx .aw5-host .s05-camp:has(.s05-cr.is-last) { background: #fff !important; }
#hx .aw5-host .s05-cr.is-last { border-color: var(--brand, #0760C6); }

/* ---- ‹ › — the hero's own round buttons, on the band's middle ------------- */
#hx .aw5-host .aw5-nav { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 3; display: flex; justify-content: space-between; pointer-events: none; }
#hx .aw5-host .aw5-nav button {
  pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  transform: translate(-8px, -50%); border: 1px solid #C4D6EE; background: #fff; color: var(--brand, #0760C6); transition: opacity .35s ease;
}
#hx .aw5-host .aw5-nav button + button { transform: translate(8px, -50%); }
#hx .aw5-host .aw5-nav svg { width: 16px; height: 16px; }
#hx .aw5-host .aw5-nav button:disabled { opacity: 0; pointer-events: none; }

/* ---- phone: the same band, one item + a peek of the next, no arrows ------- */
@media (max-width: 760px) {
  #hx .aw5-host { --bh: 172px; }
  #hx .aw5-host .aw5-nav { display: none; }
  #hx .aw5-host :is(.s05-thumbs, .s05-wall, .s05-letters, .s05-pages, .s05-camps) { gap: 10px; padding-right: 14px; scroll-padding-left: 0; }
  #hx .aw5-host .s05-thumbs { grid-auto-columns: 204px; }
  #hx .aw5-host .s05-wall { grid-auto-columns: min(300px, 80cqw); --bh: 184px; grid-template-rows: 184px; }
  #hx .aw5-host .s05-wall .s05-rc { height: 184px; }
  #hx .aw5-host .aw5-wall { grid-auto-columns: min(220px, 64cqw); gap: 8px 10px; padding-right: 14px; }
  #hx .aw5-host .s05-pages:not(.s05-sites) { grid-auto-columns: 128px; }
  #hx .aw5-host .s05-sites { grid-auto-columns: min(280px, 76cqw); }
  #hx .aw5-host .s05-camps { grid-auto-columns: min(320px, 84cqw); }
}
@media (prefers-reduced-motion: reduce) { #hx .aw5-host * { transition: none !important; } }