/* DNEG AI Roadmap: css/views/division.css
   The By division and audience lens (.lens-division): audience cards (in a folded block), the typical-roles row and the
   "If you only read one thing" box (a folded block). The brief, the folds and the other shared kit styles (lk-*) live in
   site.css and department.css. Tokens only. */

/* the head's tools row: Filter this page and Show everything */
/* a name as a fact's value (see nameValue in division.js): smaller than the numbers, so a long capability name takes two short lines at most */
/* breathing room between the note under the brief and the first fold */
.lens-division .lk-note, .lens-division > .note { margin-bottom: 1.2rem; }

.lens-division .lk-audgrid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); margin-top: 1.4rem; }
.lens-division .lk-mbody > .lk-audgrid { margin-top: 0; }
.lens-division .lk-audcard { display: flex; flex-direction: column; gap: .55rem; }
.lens-division .lk-audcard p { font-size: .88rem; }
.lens-division .lk-audcard.quiet h3, .lens-division .lk-audcard.quiet p { opacity: .72; }
.lens-division .lk-start { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9rem; }
.lens-division .lk-start a { color: var(--fg); font-weight: 500; text-decoration: none; }
.lens-division .lk-start a:hover { color: var(--accent2); text-decoration: underline; }
.lens-division .lk-rolesrow { margin-top: .9rem; }

.lens-division .lk-pick { padding: 18px 22px 20px; border-left: 3px solid var(--accent); }
.lens-division .lk-pick .eyebrow { margin-bottom: .3rem; }
/* inside its fold the summary already says "If you only read one thing" */
.lens-division .lk-mbody > .lk-pick > .eyebrow { display: none; }
.lens-division .lk-picklede { color: var(--muted); font-size: .92rem; }
.lens-division .lk-picklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.lens-division .lk-picklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: start; }
.lens-division .lk-pickn { font-family: var(--mono); font-size: 1.5rem; line-height: 1.1; color: var(--accent2); }
.lens-division .lk-picktop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lens-division .lk-picktop a { color: var(--fg); font-weight: 600; text-decoration: none; }
.lens-division .lk-picktop a:hover { color: var(--accent2); text-decoration: underline; }
.lens-division .lk-pickbody p { margin-top: .35rem; color: var(--muted); font-size: .9rem; }

@media (max-width: 1100px) { .lens-division .lk-picklist { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .lens-division .lk-audcard, .lens-division .lk-pick { break-inside: avoid; }
}