/* Adaa — completed projects: the #projects section on the home page (between Ad-Man and Approach) and the project
   pages (project-<slug>.html). Typography and colour are inline in the HTML, as everywhere else; this file holds what
   inline styles can't: the card grid, hover and hidden states, the navy art panel with the client's logo plate, and the
   project page's layout, table of contents and closing. Script: assets/js/projects.js. */

/* ---- hidden states: no projects, no section and no header link */
[data-projects][hidden],[data-navlink][hidden]{display:none!important}
/* with the section hidden, Approach follows Ad-Man again and its top edge dissolves from navy, not light grey */
#projects[hidden] + #approach > [data-dither] > svg{fill:#00192D}
/* six header links: a little less air between them on mid-width screens */
@media (min-width:901px) and (max-width:1040px){[data-navlinks]{gap:24px!important}}
@media (min-width:761px) and (max-width:900px){[data-navlinks]{gap:18px!important}}

/* ---- the cards: two to a row; the first runs full width with the art panel beside the text */
[data-projects-list]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
[data-project]{position:relative;display:flex;flex-direction:column;min-width:0;background:#FFFFFF;border:1px solid #E2E7F2;cursor:pointer;transition:border-color 200ms ease,box-shadow 300ms ease}
[data-project]:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* a bar in the project's first service colour slides across the top on hover, as on the service cards */
[data-project]::before{content:'';position:absolute;z-index:2;left:-1px;right:-1px;top:-1px;height:3px;background:var(--svc,#4D7EFF);transform:scaleX(0);transform-origin:left;transition:transform 480ms cubic-bezier(.2,.7,.2,1)}
[data-project]:hover::before{transform:scaleX(1)}
[data-project]:hover{border-color:var(--svc-ink,#043BC1);box-shadow:0 24px 48px -30px rgba(0,25,45,0.45)}
[data-project-link]:focus-visible{outline:2px solid var(--svc-ink,#4D7EFF);outline-offset:4px}
[data-project-helped]{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 28px}

/* ---- the art panel: navy, the pixel field (drawn by projects.js) and the logo plate in the middle */
[data-project-art]{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;padding:42px 28px;overflow:hidden;background:#00192D}
[data-project]:first-child [data-project-art]{min-height:340px}
[data-project-art] > svg[data-field],[data-project-hero] > svg[data-field]{position:absolute;left:0;top:0;display:block;pointer-events:none}
/* the plate: Adaa's mark, a blue divider and the client's logo (or its anonymised name), as on our client documents.
   The logo image is drawn on #00192D, so the plate keeps exactly that navy */
[data-project-plate]{position:relative;z-index:1;display:flex;align-items:center;gap:18px;padding:18px 22px;background:#00192D;border:1px solid rgba(255,255,255,0.16);line-height:0}
[data-project-plate] > svg{display:block;width:auto;height:28px;flex:none}
[data-project-plate] > i{display:block;width:1px;height:36px;background:#4D7EFF;flex:none}
[data-project-plate] > img{display:block;width:auto;height:30px;flex:none}
[data-project-plate] > b{font-family:Syne,sans-serif;font-weight:700;font-size:20px;line-height:1.1;letter-spacing:-0.01em;color:#FFFFFF;white-space:nowrap}
[data-project-hero] [data-project-plate]{display:inline-flex;padding:16px 20px}
[data-project-hero] [data-project-plate] > img{height:34px}
/* the first card leads with the client: a larger plate where the panel has the room */
@media (min-width:881px){
  [data-project]:first-child [data-project-plate]{gap:22px;padding:24px 30px}
  [data-project]:first-child [data-project-plate] > svg{height:36px}
  [data-project]:first-child [data-project-plate] > i{height:48px}
  [data-project]:first-child [data-project-plate] > img{height:42px}
}

@media (max-width:880px){
  [data-projects-list]{grid-template-columns:minmax(0,1fr)}
  [data-project]:first-child{grid-template-columns:minmax(0,1fr)}
  [data-project]:first-child [data-project-art]{min-height:240px}
}
@media (prefers-reduced-motion:reduce){[data-project]::before{transition:none!important}[data-project-art] rect,[data-project-hero] rect{animation:none!important}}
@media print{[data-project-art] > svg[data-field],[data-project-hero] > svg[data-field]{display:none}}

/* ---- the project page (layout from the legal pages: a sticky table of contents beside a white article) */
[data-navlink]:hover{color:#FFFFFF!important}
[data-project-page] [data-legal] a{color:#043BC1;border-bottom:1px solid rgba(4,59,193,0.35);transition:color 200ms ease}
[data-project-page] [data-legal] a:hover{color:#1A52D4}
[data-toc] a:hover,[data-toc] a[aria-current="true"]{color:#043BC1!important}
[data-legal] section{scroll-margin-top:104px}
/* the hero's field fades in from the right, so the words on the left stay calm */
[data-project-hero] > svg[data-field]{-webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,0.45) 52%,#000 80%);mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,0.45) 52%,#000 80%)}
/* the data flow drawing, top to bottom: the sources, what happens to them, the dashboard; three cells between steps */
[data-flow-trail]{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0}
[data-flow-trail] i{display:block;width:10px;height:10px;flex:none;background:#043BC1}
[data-flow-trail] i:nth-child(1){opacity:0.3}
[data-flow-trail] i:nth-child(2){opacity:0.6}
[data-flow-chips]{display:flex;flex-wrap:wrap;gap:8px}
[data-flow-chips] > span{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;background:#FFFFFF;border:1px solid #E2E7F2;font-family:'Courier New',monospace;font-size:12.5px;letter-spacing:0.02em;line-height:1.3;color:#00192D}
[data-flow-chips] > span > i{display:block;width:10px;height:10px;flex:none;background:#043BC1}
@media (max-width:880px){[data-legal-cols]{grid-template-columns:1fr!important}[data-legal-aside]{position:static!important}}
@media (max-width:640px){
  /* phones: the words fill the hero's width, so the field stays out of it */
  [data-project-hero] > svg[data-field]{display:none}
  [data-project-close-cta] > a{flex:1 1 auto;text-align:center}
}
@media print{[data-header],footer,[data-toc-nav]{display:none!important}}