/* New rules for this site, in the system of the original design (same variables, spacing, grids).
   Kept separate from the ported CSS and loaded last. */

/* Uploaded images fill the placeholder box (same size as the placeholder). */
.img-placeholder.has-image::before { display: none; }
.img-placeholder .img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Demo notice above the submit button of the forms. */
.form-demo-note { font-size: 11px; line-height: 1.6; color: var(--mist); margin: 8px 0 12px; }

/* Four offices in one row (the original network grid has three columns). */
@media (min-width: 961px) {
  .network-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Lawyer cards are links (profile card of the design). */
a.profile-card { display: block; color: inherit; text-decoration: none; }

/* Practice area pages: the hero colour follows the three original service pages in turn. */
#hero.hero-forest { background: var(--forest); }
#hero.hero-mahogany { background: var(--mahogany); }
#hero.hero-mahogany .hero-headline em { color: rgba(186, 148, 141, .8); }

/* Home and firm page show both founders: second block below the first. */
.founder-layout + .founder-layout { margin-top: 56px; }

/* Author names link to the lawyer pages without changing their look. */
.author-name a, .author-bio-name a { color: inherit; text-decoration: none; }
.author-name a:hover, .author-bio-name a:hover { text-decoration: underline; }

/* Links inside the meta grid (lawyer pages). */
.jm-value a { color: inherit; text-decoration: none; }
.jm-value a:hover { text-decoration: underline; }

/* Running band: practice area names instead of client logos; width follows the text. */
.trust-logo.is-text { width: auto; padding: 0 14px; white-space: nowrap; }

/* Publications: second filter row (author, format) below search and practice pills. */
.filter-bar.is-secondary { padding: 20px 0; }
.filter-bar.is-secondary .pills[data-group="author"] { justify-content: flex-start; }


/* Publications: message when search and filters match nothing. */
.insights-empty { padding: 32px 0 8px; font-size: 14px; color: var(--slate); }

/* Profile cards (team, practice pages, careers): as many columns as there are visible cards, up to
   four; a fifth card and beyond wrap into rows of four. Empty tracks collapse (auto-fit), so two
   cards fill the width in two columns. The column minimum of 200px keeps four columns down to the
   960px breakpoint (cards are 203px wide at 961px); below it the page modules set one column.
   2px is the gap of .profile-grid. */
@media (min-width: 961px) {
  .profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 3 * 2px) / 4)), 1fr));
  }
}

/* Author avatars (article header and author block): the person icon fills the circle; the caption
   of the placeholder is not rendered (it stays available as aria-label). */
.img-placeholder.is-avatar { width: 100%; height: 100%; min-height: 0; gap: 0; background-image: none; }
.img-placeholder.is-avatar::before { display: none; }
.img-placeholder.is-avatar .img-placeholder-icon { width: 100%; height: 100%; border-width: 1px; opacity: .6; }
.img-placeholder.is-avatar .img-placeholder-icon svg { width: 52%; height: 52%; }

/* Short pages (imprint, 404 …): the page fills the viewport and its last section stretches down to
   the footer, so no blank strip shows below the footer. */
.site-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; display: flex; flex-direction: column; }
.site-main > * { flex-shrink: 0; }
.site-main > :last-child { flex-grow: 1; }

/* Article image placeholders: icon and caption are centred in the visible box. The card slots have
   a fixed height, so the placeholder fills the slot instead of being taller than it; in the article
   header the lower 80px of the hero image are overlapped (margin-bottom: -80px), so the group is
   centred in the part that stays visible. Uploaded images are not affected (they are absolutely
   positioned). */
.fh-img .img-placeholder,
.ac-img .img-placeholder,
.rc-img .img-placeholder { height: 100%; }
.article-hero-img .img-placeholder { box-sizing: border-box; padding-bottom: 80px; }

/* Section motif (src/components/Motif.astro): a large faint "§" that replaces the diamond / stripes
   of the original design. White at the opacity of the old diamond: 3 % on navy sections, 4 % on
   coloured blocks (.is-tinted: brown, forest, mahogany).
   Geometry, as proportions of the section (container units of the layer):
   - size 1.45 × section height (capped at 95 % of the width so it also fits narrow sections);
   - bottom: the ink sits so that about 29 % of it is cut off by the bottom edge (centre at
     75 % of the height for the reference size);
   - right: centre at 72 % of the width, but never closer than 4 % of the width to the right edge
     (0.40em = half the width of the rotated ink of "§" in Playfair Display);
   - -45° rotation; 0.118em compensates the glyph's ink being lower than its em box.
   The layer clips itself, sits behind the content (negative z-index inside the section's own stacking
   context) and cannot cause horizontal scroll. */
:has(> .motif) { position: relative; isolation: isolate; }
.motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  container-type: size;
  --motif-opacity: .03;
}
.motif.is-tinted { --motif-opacity: .04; }
.motif::before {
  content: '§';
  --fs: min(145cqh, 95cqw);
  position: absolute;
  left: min(72cqw, calc(96cqw - 0.4 * var(--fs)));
  top: calc(100cqh - 0.17 * var(--fs));
  transform: translate(-50%, -50%) rotate(-45deg) translateY(-0.118em);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  opacity: var(--motif-opacity);
}

/* Legal texts: line breaks inside a paragraph (address blocks) are kept. */
.rtb.is-privacy p { white-space: pre-line; }

/* E-mail addresses in the legal texts: links in the text colour; no break at the hyphen, only
   after the "@" if the address does not fit the line. */
.email-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.email-link .nowrap { white-space: nowrap; }

/* Article header meta bar: the separator belongs to the item after it and sits in the 28px gap.
   An item that starts a new line has its separator outside the bar, where it is clipped, so a
   separator never shows at the start or end of a line. Same look as the former .meta-divider. */
.article-meta-bar { overflow: hidden; }
.article-meta-bar > .meta-sep { position: relative; }
.article-meta-bar > .meta-sep::before {
  content: '';
  position: absolute;
  left: -14.5px;
  top: 50%;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background-color: #ffffff1a;
}

/* Interview questions in articles (block style "question"): semibold, same size as the text. */
.article-content p.article-question { font-weight: 600; color: var(--navy); }