/* ============================================================
   MODELS.COM — COLLABORATIONS  ·  BESPOKE STYLES ONLY
   ------------------------------------------------------------
   Defines NOTHING the two production stylesheets already provide:
     6f871781…css → @font-face (SuisseIntl / PPEiko), :root tokens
                    (--color-functional-*, --radius-*, --spacing-*,
                    --text-*), .mdc-grid, .mdc-container,
                    .mdc-font-primary--* / .mdc-font-accent--*
     a8dae40f…css → .sb-* helpers (.sb-section, .sb-section__title,
                    .sb-card, .sb-card__text, .sb-title, .sb-image__img,
                    .sb-link)
   No @font-face, no token definitions, no font-family rules, and no
   section-title or card-shell styling — the section reuses the
   homepage's own classes for all of that.

   Every var() carries a literal fallback so this sheet also renders
   correctly in the standalone handoff/preview pages, where the
   production sheets are not present. On production the tokens win.

   What this file owns — only what has no homepage equivalent:
   the avatar pair, the 1-hero + 2-thumb works grid, the monogram
   portrait fallback, the feed tab pills, the PRO flag, and slick
   slide spacing.
   There is no bespoke palette; the section is white-on-white with
   hairlines, per the design system.
   ============================================================ */

.mdc-collab{
  --collab-ink:var(--color-functional-gray-black,#111);
  --collab-muted:var(--color-functional-gray-600,#767676);   /* swap for the real grey token once confirmed */
  --collab-line:var(--color-functional-gray-200,#e5e5e5);
  --collab-gap:var(--spacing-150,24px);
  color:var(--collab-ink);
}
/* Width comes entirely from .mdc-container (production: 48px inline padding,
   no max-width) so the section fills whatever wrapper it is dropped into.
   Nothing is capped here — a narrower section than its neighbours means the
   include sits inside a narrower wrapper on the page, not a CSS problem.
   Vertical rhythm comes from .sb-section. */

/* ---------- Header: PRO flag beside the shared section title ---------- */
.mdc-collab__titlerow{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
/* Same pill as .mdc-pronews__flag, white ink instead of cream (white section) */
.mdc-collab__flag{
  font-size:var(--text-062-and-half,10px); letter-spacing:.16em; line-height:1;
  padding:4px 8px; border-radius:var(--radius-xs,4px); text-transform:uppercase;
  background:var(--collab-ink); color:#fff;
}

.mdc-collab__desc{
  font-size:var(--text-087-and-half,14px); color:var(--collab-muted);
  max-width:52ch; margin-bottom:var(--spacing-100,16px);
}

/* ---------- Feed tabs (one pairing on screen at a time) ---------- */
.mdc-collab__tabs{
  display:flex; gap:8px; align-items:center;
  margin-bottom:var(--spacing-200,32px);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:2px;
}
.mdc-collab__tabs::-webkit-scrollbar{ display:none; }
.mdc-collab__tab{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  font-size:var(--text-068-and-three-quatars,11px); letter-spacing:.08em; text-transform:uppercase;
  line-height:1; padding:9px 14px; border-radius:999px;
  border:1px solid var(--collab-line); background:#fff; color:var(--collab-muted);
  transition:border-color .2s ease, color .2s ease;
}
.mdc-collab__tab:hover{ border-color:var(--collab-ink); color:var(--collab-ink); }
.mdc-collab__tab:focus:not(:focus-visible){ outline:none; }
.mdc-collab__tab[aria-selected="true"]{
  background:var(--collab-ink); border-color:var(--collab-ink); color:#fff;
}

/* ---------- Strip (slick — mobile-scrollable, same handler as Pro News) ---------- */
.mdc-collab__feed[hidden]{ display:none; }
.mdc-collabsliderContainer{ position:relative; }
.mdc-collab__slider:not(.slick-initialized){ display:flex; gap:var(--collab-gap); }
.mdc-collab__slider:not(.slick-initialized) > *{ flex:1 1 0; min-width:0; }
.mdc-collab__slider:not(.slick-initialized) > *:nth-child(n+5){ display:none; }
.mdc-collab__slider.slick-initialized{ margin-inline:calc(var(--collab-gap) / -2); }
/* Equal-height cards: stretch the whole chain, or slick leaves each card at
   its own content height and the tops stop aligning. */
.mdc-collab__slider .slick-track{ display:flex; align-items:stretch; }
.mdc-collab__slider .slick-slide{ height:auto; display:flex; padding-inline:calc(var(--collab-gap) / 2); }
.mdc-collab__slider .slick-slide > div{ display:flex; width:100%; }
.mdc-collab__slide{ display:flex; width:100%; }
.mdc-collab__slide > .mdc-collab__card{ flex:1 1 auto; }

/* ---------- Tile: .sb-card supplies the rounded shell; this adds the stack ---------- */
.mdc-collab .mdc-collab__card{
  display:flex; flex-direction:column; gap:var(--spacing-075,12px);
  height:100%; padding:18px; background:#fff;
  border:1px solid var(--collab-line); border-radius:var(--radius-md,8px);
  text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .2s ease;
}
.mdc-collab .mdc-collab__card:hover{ border-color:var(--collab-ink); }

/* Portrait pair — overlapped, circular, 44px */
.mdc-collab__pair{ display:flex; align-items:center; }
.mdc-collab__av{
  position:relative; z-index:2;
  width:44px; height:44px; border-radius:999px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 0 0 3px #fff; background:#f7f7f7;
  display:flex; align-items:center; justify-content:center;
}
/* First avatar paints on top; the second is overlapped on its LEFT, so a
   monogram there gets padded clear of the overlap or the initials read wrong
   ("DC" as "D("). */
.mdc-collab__av + .mdc-collab__av{ margin-left:-14px; z-index:1; }
.mdc-collab__av + .mdc-collab__av.mdc-collab__av--mono{ padding-left:12px; }
.mdc-collab__av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No portrait on file (picmediaid = 0) → initials monogram, never the np160 gif */
.mdc-collab__av--mono{
  background:#fff; box-shadow:0 0 0 3px #fff, inset 0 0 0 1px var(--collab-line);
  font-size:var(--text-075,12px); letter-spacing:.06em; color:var(--collab-muted);
}

/* Names — the only text that can wrap, so the box is always exactly two
   lines tall (clamped at two, reserved at two). Cards therefore match
   whether a pair fits on one line or not. */
.mdc-collab .mdc-collab__names{ padding:0; }
.mdc-collab .mdc-collab__names .sb-title{
  margin:0; font-size:var(--text-100,16px); line-height:1.25; letter-spacing:-0.005em;
  color:var(--collab-ink); text-transform:none; text-wrap:pretty;
  min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.mdc-collab__plus{ color:var(--collab-muted); font-weight:400; }

/* Works: work1 hero + work2/work3 stacked thumbs.
   The HERO is the only cell with an aspect ratio — it spans both rows, so its
   height sets the two thumb rows. Thumb images are absolutely positioned so
   they contribute no intrinsic height; otherwise the portrait/landscape mix
   in the real feed drives the rows and every card ends up a different size. */
.mdc-collab__works{
  display:grid; grid-template-columns:1.45fr 1fr; grid-template-rows:1fr 1fr;
  gap:6px; margin-top:2px;
}
.mdc-collab__work{
  position:relative; display:block; min-height:0; overflow:hidden;
  border-radius:var(--radius-xs,4px); background:#f7f7f7;
}
.mdc-collab__work img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transition:opacity .2s ease;
}
.mdc-collab__card:hover .mdc-collab__work img{ opacity:.85; }
.mdc-collab__work--hero{ grid-row:span 2; aspect-ratio:4/5; }

/* Footer — shared credits as a footnote figure */
.mdc-collab__foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  margin-top:auto; padding-top:10px; border-top:1px solid var(--collab-line);
}
.mdc-collab__credits{ font-size:var(--text-075,12px); color:var(--collab-muted); }
.mdc-collab__credits b{ font-weight:inherit; color:var(--collab-ink); font-feature-settings:"tnum"; }
.mdc-collab .mdc-collab__view{
  font-size:var(--text-068-and-three-quatars,11px); letter-spacing:.03em;
  text-transform:none; color:var(--collab-muted);
  text-decoration:underline; text-underline-offset:3px;
}