/* =========================================================================
   Expertise (/expertise/, page-id-14) - desktop retrofit against the Agentis design
   export. Measured 2026-08-06 with staging and
   .../designs/v1-original/expertise/index.html both at innerWidth 1512.

   Per the standing ruling (Christine 2026-08-05, "please follow font sizing
   of Agentis design", widened by Matt to all typography and geometry) the export
   wins wherever it disagrees with the superseded @1440 Figma frames.

   BugZap #123 / #124.

   BEFORE  rows 922 / 922 / 860   (export 668 / 668 / 616)
   AFTER   rows 666 / 666 / 626

   SPECIFICITY / SOURCE-ORDER NOTE - read before editing.
   This file is enqueued with the rest of the figma layer, i.e. BEFORE the
   block stylesheets, so a rule here at equal specificity LOSES on source
   order to blocks/content-list/content-list.css. Three separate rules below
   were measured failing silently until `!important` was added. Two traps in
   particular:

     1. The "TYPE SYSTEM v2" block in figma-mobile-v4.css:1405 ends with
        `section h2:not(.h2-deck):not(.content-list__deck)`, which is (0,2,2)
        and `!important`. Heading overrides therefore carry a third class.
     2. content-list.css:663/680 deliberately reverts --chapter's absolute
        image fill back to `position: static` for any row carrying a
        `content-list--media-*` crop variant. The /expertise/ rows carry both
        `--chapter` AND `--media-600 --media-sq`, so they were pinned to the
        1/1 crop and the 600x600 media - not the text column - was setting
        the row height. That single rule was 254px of the overrun.
   ========================================================================= */
@media (min-width: 992px) {

  /* ---- #123 -------------------------------------------------------------
     "these should be H3 i believe". All three row headings render with the
     H2 Section role (52/62); the export emits <h3 class="content-list__sub-
     heading"> at the H3 Card role (32/40). Same divergence as /services/
     (#121).

     NOTE: this changes the rendered SIZE, not the tag. The rows are still
     <h2> in blocks/content-list/content-list.php - promoting them needs an
     editor-side className or a new block modifier, which is a markup
     decision. See the hand-off note.
     ---------------------------------------------------------------------- */
  .page-id-14 .content-list .content-list__heading {
    font-size: var(--h3-card-size) !important;   /* 32px */
    line-height: var(--h3-card-lh) !important;   /* 40px */
  }

  /* ---- #124 ------------------------------------------------------------
     "adjust vertical spacing to match Agentis design".

     Body copy: ours ran the intro at 19/1.58 and the callout paragraphs at
     16-18/1.5. The export runs every one of them at 17/1.6/300 - the same
     Body-L step already adopted for /services/ (#118, #120). */
  .page-id-14 .content-list .content-list__intro,
  .page-id-14 .content-list .content-list__intro p,
  .page-id-14 .content-list .content-list__conclusion,
  .page-id-14 .content-list .content-list__conclusion p {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.6 !important;     /* 27.2px */
  }

  /* The conclusion callout box: ours pads 24px on all four sides, the export
     pads 16px (measured inner width 552 vs the export's 568). The callout is
     an unclassed group <div> emitted by the editor, hence the child selector. */
  .page-id-14 .content-list .content-list__conclusion > div {
    padding: 1rem !important;
  }
  .page-id-14 .content-list .content-list__conclusion > *:first-child {
    margin-top: 0 !important;
  }

  /* Column rhythm: ours 40px between every content child, the export 9.6px
     (0.6rem). At 4 children that alone was ~120px of the overrun. */
  .page-id-14 .content-list .content-list__content {
    gap: 0.6rem;
    --stack-gap: 0.6rem; /* audit A6: mobile-v4's eyebrow-gap margins are
       calc(24px - --stack-gap); without the custom prop they add a full 24 */
  }

  /* The rows emit an empty <ul class="content-list__list">. It has no <li>
     but it DOES contain whitespace, so `:empty` does not match it - it was
     still consuming a 4th flex gap. `:not(:has(li))` is the reliable test. */
  .page-id-14 .content-list .content-list__list:not(:has(li)) {
    display: none;
  }

  /* Media column: restore --chapter's "image fills, text sets the height"
     behaviour, which content-list.css:663/680 turns off for --media-* rows.
     `!important` is required - the reverting rule is (0,3,0) and lives in a
     stylesheet loaded after this one, so equal specificity is not enough.
     Export renders 600x444; ours rendered 600x600 off the 1/1 crop. */
  .page-id-14 .content-list--chapter .content-list__media {
    position: relative !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }
  .page-id-14 .content-list--chapter .content-list__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}