/* The master brief's structure on the live design. The live stylesheets (site, dense, apple-theme, micro, premium, home,
   apple) carry the look; this file holds only what they have no rule for, written with the live tokens:
   the eight-item header and the two labelled Technology groups (MB 3, 3.2); responsive column counts for card grids whose
   length the brief sets (the live pages set these inline); text-only variants of live cards whose photographs have no
   source record (PENDING-CLIENT 19, 34); lists and labels inside live cards; the partner-logo strip (MB 5.1); the form's
   optional marker (MB 22). Every rule is listed in design/DESIGN-DEVIATIONS.md. Loaded last (src/partials/head.html). */

/* ---------- header: eight items, Contact Us last (MB 3), at the old header button's size ---------- */
.nav { gap: 0; }
.nav__item--cta { align-items: center; margin-left: 10px; }
.nav__item--cta .btn { min-height: 40px; padding: 0 16px; font-size: 0.88rem; white-space: nowrap; }
body:not(.apple) .nav__item--cta .btn { min-height: 30px; padding: 0 14px; font-size: 0.8rem; }
.nav__link { white-space: nowrap; }
body:not(.apple) .nav__link { padding-inline: 10px; }
@media (max-width: 1240px) {
  body:not(.apple) .nav__link, .nav__link { padding-inline: 8px; }
  .site-header > .container { gap: 16px; }
}

/* ---------- menus and footer ---------- */
/* Solutions: the eight categories in the live column style, without the feature panel (its image has no source record) */
.mega__inner--single { grid-template-columns: minmax(0, 1fr); }
.mega__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-right: 0; list-style: none; margin: 0; }
.mega__cols--4 a { display: inline-flex; gap: 10px; align-items: baseline; font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; }
.mega__cols--4 a:hover { color: var(--brand-300); }
/* Technology: the two labelled groups (MB 3.2), as the live mega list; labels in the live list-label style */
.mega__inner--groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; padding-block: 36px 40px; }
.mega__list--one { grid-template-columns: minmax(0, 1fr); padding: 0; }
.mega__group-title, .drawer__group { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-3); margin: 0 0 6px; }
.drawer__group { margin: 4px 0 2px; }
.footer__sub { margin: 0 0 8px; font-size: 0.76rem; font-weight: 600; color: var(--on-dark-3); }
.footer ul + .footer__sub { margin-top: 18px; }
body:not(.apple) .footer__sub { color: var(--ink-3); }
body.home-dark .footer__sub { color: #98989d; }

/* ---------- live card grids: column counts the live pages set inline, kept responsive ---------- */
body:not(.apple) .capabilities--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.apple) .capabilities--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .products--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { body:not(.apple) .capabilities--2, body:not(.apple) .capabilities--3, .products--4 { grid-template-columns: minmax(0, 1fr); } }

/* Blue-labelled cards (compact product cards, directory entries) sat on grey sections on the live site, so they were white.
   Where the brief's section order puts them on a white section, they keep that white card with the live partner-card line
   (instead of the grey card, on which the small blue label falls below 4.5:1). */
body:not(.apple) .section:not(.section--paper):not(.section--dark) .products--compact .product,
body:not(.apple) .section:not(.section--paper):not(.section--dark) .dir-item { background: #fff; box-shadow: inset 0 0 0 1px #ececf0; }
body:not(.apple) .section:not(.section--paper):not(.section--dark) .products--compact .product:hover,
body:not(.apple) .section:not(.section--paper):not(.section--dark) .dir-item:hover { background: #fff; box-shadow: inset 0 0 0 1px #ececf0, 0 4px 22px rgba(0, 0, 0, 0.08); }

/* card titles that are not headings (the rebuild's outline is kept): the live card heading styles on <strong> */
body:not(.apple) .cap > strong { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.product > strong { font-size: 1.35rem; font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.1; }
body:not(.apple) .product > strong { font-size: 1.15rem; }

/* lists and labels inside a live card (.cap): use-case items as the live .path list, package labels as the live .contacts labels */
body:not(.apple) .cap ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
body:not(.apple) .cap li { position: relative; padding-left: 16px; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
body:not(.apple) .cap li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 1px; background: var(--brand); }
body:not(.apple) .cap dl { margin: 2px 0 0; display: grid; gap: 8px; }
body:not(.apple) .cap dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
body:not(.apple) .cap dd { margin: 2px 0 0; font-size: 0.88rem; color: var(--ink-2); }
body:not(.apple) .cap .sol__row { margin: auto 0 0; padding-top: 6px; }

/* ---------- the live .sol card without its photograph (no source record), also used for capability areas A to O ---------- */
body:not(.apple) .sol.sol--text { grid-template-columns: minmax(0, 1fr); }
body:not(.apple) .sol--text .sol__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body:not(.apple) .sol--text .chips { margin: 16px 0 18px; }
body:not(.apple) .sol--text .article { margin: 8px 0 0; max-width: 72ch; font-size: 1rem; }
body:not(.apple) .sol .cap { background: #fff; margin-top: 18px; }
body:not(.apple) .sol h2 a { text-decoration: none; }
body:not(.apple) .sol h2 a:hover { color: var(--brand); }
.article h4 { margin: 1.5em 0 0.4em; font-size: 1.02rem; line-height: 1.3; }
.article h4:first-child { margin-top: 0; }
/* the live index turns into grey pills on phones, where its blue numbers fall below 4.5:1; the pills take the white card with
   the live partner-card line instead (more pills now: eleven industries, fifteen capability areas) */
@media (max-width: 980px) { body:not(.apple) .sol-index a { background: #fff; box-shadow: inset 0 0 0 1px #ececf0; } }
@media (max-width: 860px) { body:not(.apple) .sol--text .sol__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body:not(.apple) .sol--text .sol__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- technology pages: the brief's label under the name (MB 16.1, 17.1). The live hero pill sets its text in white,
   which disappears on the light OEM hero; it now carries the brief's group name, so it takes the dark text of a light hero. */
body:not(.apple) .hero--light .eyebrow { color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tech-hero__label { margin: 12px 0 0; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
body:not(.apple) .hero--light .tech-hero__label { color: var(--ink-2); }

/* ---------- partner-logo strip: last on each solution page, logos only (MB 5.1, 23.2; tools/partners.py) ----------
   The PNGs are one-colour masks; the filter draws them in one even grey, as the live partner wall. */
.partner-strip { background: #fff; border-top: 1px solid var(--line); padding-block: clamp(30px, 4vw, 46px); }
.partner-strip__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 24px clamp(28px, 4vw, 54px); }
.partner-strip__logos li { display: flex; align-items: center; justify-content: center; min-height: 36px; }
.partner-strip__logos img { display: block; max-width: none; height: auto; border-radius: 0; filter: brightness(0) invert(0.4); transition: filter .2s ease; }
.partner-strip__logos li:hover img { filter: brightness(0) invert(0.12); }
@media (max-width: 520px) { .partner-strip__logos { gap: 20px 26px; } }

/* ---------- forms: the "(optional)" marker on the brief's optional fields (MB 22) ---------- */
.field .opt { font-weight: 400; color: var(--ink-3); font-size: 0.85em; }