/* ============================================================
   MODELS.COM — PRO NEWS  (homepage segment)  ·  BESPOKE STYLES ONLY
   ------------------------------------------------------------
   This file deliberately defines NOTHING that the production
   stylesheets already provide. Loaded site-wide and relied on here:

     6f871781…css  →  @font-face (SuisseIntl / PPEiko),
                      :root tokens  --color-functional-*,
                      --radius-*, --spacing-*, --text-*,
                      .mdc-grid / .mdc-grid--5, .mdc-container,
                      .mdc-font-primary--* / .mdc-font-accent--*
     a8dae40f…css  →  .sb-* helpers

   So NO @font-face, NO color/space/text tokens, NO grid, NO
   font-family rules live here — those are applied in the markup
   via .mdc-font-* classes and referenced via var(--…).

   This section reuses the homepage design system like Trending and
   Collaborations: the heading is .sb-title, the link is .sb-link (inside
   an .sb-container__header, so it matches Trending's "See All"), the
   container is .sb-container, the 42px section rhythm is the shared
   --section-bottom-spacing, and the strip arrows are the shared hp.css
   .slickPrev/.slickNext (only their position is overridden). White
   background, no header divider — same as Trending / "Worked with".
   The ONLY bespoke pieces are the ones the system has no primitive for —
   the PRO flag (.mdc-pronews__flag), the subtitle (.mdc-pronews__desc)
   and the title/actions row layout — exactly the bespoke set
   Collaborations' header keeps around its .sb-title. The few hard-coded
   neutrals (#666 subtitle, #999/#e5e5e5 mobile scrollbar) match the
   system greys.
   ============================================================ */

.mdc-pronews{
  background:#fff;                                      /* match other homepage segments (was cream) */
  /* Same 42px inter-section rhythm as Trending (.trending-section) and "Worked
     with" (.sb-section), both of which carry padding-bottom:var(--section-bottom-
     spacing). 42px below → the gap down to the next module matches Trending->Worked
     with; 42px above because the cover has no bottom spacing of its own. */
  padding:var(--section-bottom-spacing, 42px) 0;
}
/* Width + gutters come from .sb-container (the markup wrapper), same as
   Trending and Collaborations — no bespoke width rule here. */

/* ---------- Header ---------- */
/* Block wrapper holding the title/actions line + the subtitle, then space down to
   the cards. No divider — Trending and "Worked with" have none under their headers. */
.mdc-pronews__head{ margin-bottom:var(--spacing-200); }
/* The title/actions line IS an .sb-container__header (see the markup) so the
   "All Pro News" .sb-link inherits the homepage's .sb-container__header .sb-link
   rule and renders exactly like Trending's "See All". On top of that: let the
   title group absorb the slack so the actions sit right, and trim the header's
   bottom padding since the subtitle follows immediately. */
.mdc-pronews__titlebar{ gap:var(--spacing-150); flex-wrap:wrap; padding-bottom:var(--spacing-050); }
.mdc-pronews__titlebar > .mdc-pronews__titlerow{ margin-right:auto; }
.mdc-pronews__titlerow{ display:flex; align-items:center; gap:var(--spacing-075); }

.mdc-pronews__flag{
  font-size:var(--text-062-and-half); letter-spacing:.16em; line-height:1;
  padding:4px 8px; border-radius:var(--radius-xs);
  background:var(--color-functional-gray-black); color:#fff;
}
/* The heading itself is .sb-title (design system) — no size/weight/highlight
   rules here; it renders at the same 24/30 semibold as Trending / "Worked with". */
.mdc-pronews__desc{
  font-size:var(--text-087-and-half); color:#666; max-width:480px;
}

a.mdc-pronews__unlock{
  font-size:var(--text-075); letter-spacing:.04em; line-height:1; cursor:pointer;
  padding:10px 14px; border:0; border-radius:var(--radius-md);
  background:var(--color-functional-gray-black); color:#fff;
  transition:opacity .2s ease;
}
a.mdc-pronews__unlock:hover{ opacity:.85; }
/* "All Pro News" is .sb-link.mdc-text-upper (design system), identical to
   Trending's "See All" — no bespoke link rule needed. */

/* ---------- Card slider (slick — mobile-scrollable) ----------
   Mirrors the Fashion Week strip: jQuery + slick (loaded site-wide)
   turn the row into a swipeable strip on mobile. This block only
   handles spacing + a graceful pre-init state; slick owns the rest. */
.pronewssliderContainer{ position:relative; }

/* ---------- Slick arrows (tablet/desktop) ----------
   Reuse the shared site arrows (hp.css .slickPrev/.slickNext — black pill, white
   fa icon, opacity .75, and .slick-disabled{visibility:hidden}) EXACTLY as
   Trending and Collaborations do; the only thing overridden here is POSITION, to
   straddle the strip edges and sit vertically centred — identical to the
   #TrendingRow / .mdc-collabsliderContainer position overrides. Hidden on the
   <768px native-scroll strip (slick is unslicked there, so there is nothing to
   page), matching the Trending/Collaborations mobile strips. */
.pronewssliderContainer .slickPrev{ left:-1.75rem; }
.pronewssliderContainer .slickNext{ right:-1.75rem; }
.pronewssliderContainer .slickPrev,
.pronewssliderContainer .slickNext{ top:50%; transform:translateY(-50%); }
@media (max-width:768px){
  .pronewssliderContainer .slickPrev,
  .pronewssliderContainer .slickNext{ display:none; }
}

/* Before slick initializes (or if JS is unavailable): a plain flex row,
   so the section never renders as a vertical stack. */
.mdc-pronews__slider:not(.slick-initialized){
  display:flex; gap:var(--spacing-150);
}
.mdc-pronews__slider:not(.slick-initialized) > *{ flex:1 1 0; min-width:0; }
/* Pre-init on desktop: show only the first 4 cards so the row never flashes
   a 15-card squeeze before slick takes over. Scoped to >=768px because below
   that slick is unslicked and EVERY card must show in the native strip. */
@media (min-width:768px){
  .mdc-pronews__slider:not(.slick-initialized) > *:nth-child(n+5){ display:none; }
}

/* ---------- Mobile (<768px): native scroll strip ----------
   Below tablet, slick is `unslick`ed (see the init in pro-news.cfm) and
   we fall back to this DOM. Turn it into a horizontal scroll strip so
   there is (1) a peek of the next card — so it clearly looks scrollable,
   and (2) a real, visible scrollbar underneath (neutral gray to match). */
@media (max-width:768px){
  .mdc-pronews__slider:not(.slick-initialized){
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    padding-bottom:var(--spacing-100);
    /* Firefox scrollbar */
    scrollbar-width:thin;
    scrollbar-color:#999 #e5e5e5;
  }
  .mdc-pronews__slider:not(.slick-initialized) > *{
    flex:0 0 82%;            /* one landscape card ~full-width → next card peeks in */
    max-width:82%;
    scroll-snap-align:start;
  }
  /* WebKit/Blink scrollbar */
  .mdc-pronews__slider:not(.slick-initialized)::-webkit-scrollbar{ height:6px; }
  .mdc-pronews__slider:not(.slick-initialized)::-webkit-scrollbar-track{
    background:#e5e5e5; border-radius:3px;
  }
  .mdc-pronews__slider:not(.slick-initialized)::-webkit-scrollbar-thumb{
    background:#999; border-radius:3px;
  }
}

/* After slick takes over: recreate the 24px inter-card gap via per-slide
   padding + a negative track margin (slick lays cards out in .slick-track). */
.mdc-pronews__slider.slick-initialized{ margin-inline:calc(var(--spacing-150) / -2); }
.mdc-pronews__slider .slick-track{ display:flex; }
.mdc-pronews__slider .slick-slide{
  height:auto; padding-inline:calc(var(--spacing-150) / 2);
}
.mdc-pronews__slider .slick-slide > div{ height:100%; }

/* ---------- Cards (editorial = SHARP corners) ---------- */
.mdc-pronews__card{ display:flex; flex-direction:column; gap:var(--spacing-075); text-decoration:none; cursor:pointer; }
.mdc-pronews__card-img{
  aspect-ratio:6/5; background-size:cover; background-position:top;
  position:relative; border-radius:0; transition:opacity .2s ease;
}
.mdc-pronews__card:hover .mdc-pronews__card-img{ opacity:.85; }
.mdc-pronews__card-badge{ position:absolute; top:10px; left:10px; }

.mdc-pronews__kicker{
  font-size:var(--text-068-and-three-quatars); letter-spacing:.02em;
  text-transform:uppercase; color:#999;
}
.mdc-pronews__card-title{
  font-size:var(--text-100); line-height:1.3; letter-spacing:-0.005em;
  color:var(--color-functional-gray-black);
}
.mdc-pronews__meta{
  font-size:var(--text-068-and-three-quatars); letter-spacing:.02em; color:#999;
}

/* Per-card Pro badge (non-subscriber view) */
.mdc-pronews__pro-badge{
  display:inline-flex; align-items:center; line-height:1;
  font-size:var(--text-062-and-half); letter-spacing:.12em; text-transform:uppercase;
  padding:3px 7px 2px; border-radius:var(--radius-xs);
  background:var(--color-functional-gray-black); color:#fff;
}

/* ============================================================
   PRO NEWS INDEX PAGE  ·  shared masthead + tabbed sub-nav + grid
   ------------------------------------------------------------
   Used by the /pro/ index (docs/pro/index.html) AND the Talent
   Watch report index (docs/reports/talentWatchReportListPublic.cfm)
   via the shared include /includes/proNewsIndexHeader.cfm. These
   `.pn-*` rules replace the per-page inline styles that used to live
   in those templates (fonts + neutral tokens come from the site-wide
   stylesheets loaded by /h/sb_mdchead.cfm). Values taken from the
   design handoff (design_handoff_pro_news_index). Gold #b8945a and its
   warm text tints are the deliberate bespoke literals, as elsewhere.
   ============================================================ */

/* Page wrapper + local resets (were inline on /pro/). */
.pn-section{ background:#ffffff; color:#111; font-family:'Suisse Intl',sans-serif; }
.pn-section *{ box-sizing:border-box; }
.pn-section img{ display:block; max-width:100%; }
.pn-section a{ text-decoration:none; color:inherit; }

/* ---------- Shared content container ----------
   Mirrors <mdc-page contentwidth="wide"> EXACTLY so the masthead, sub-nav and
   the /pro/ grid line up with the Talent Watch grid (which renders inside
   mdc-page): content-box + 1440px content cap + the same responsive page
   gutters. Applied to all three inner wrappers below. */
.pn-masthead__inner,
.pn-subnav__inner,
.pn-grid-wrap{
  box-sizing:content-box;                 /* match mdc-page: max-width caps CONTENT */
  max-width:1440px;                        /* == --container-max-width default */
  margin-left:auto; margin-right:auto;
  padding-left:var(--spacing-page-gutter-sm, 1rem);
  padding-right:var(--spacing-page-gutter-sm, 1rem);
}
@media (min-width:768px){
  .pn-masthead__inner,
  .pn-subnav__inner,
  .pn-grid-wrap{
    padding-left:var(--spacing-page-gutter-md, 1.5rem);
    padding-right:var(--spacing-page-gutter-md, 1.5rem);
  }
}
@media (min-width:1280px){
  .pn-masthead__inner,
  .pn-subnav__inner,
  .pn-grid-wrap{
    padding-left:var(--spacing-page-gutter-lg, 2.5rem);
    padding-right:var(--spacing-page-gutter-lg, 2.5rem);
  }
}

/* ---------- Masthead (white identity band) ---------- */
.pn-masthead{ background:#ffffff; padding:28px 0 24px; }
.pn-masthead__inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.pn-kicker-row{ display:flex; align-items:center; gap:12px; }
.pn-kicker-eyebrow{
  font-family:'Suisse Intl',sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#999;
}
.pn-pro-badge{
  display:inline-flex; align-items:center; line-height:1;
  font-family:'Suisse Intl',sans-serif; font-size:9px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:4px 8px 3px; border-radius:3px; background:#1a1410; color:#e9dcc4;
}
.pn-title{
  margin:12px 0 0; font-family:'PP Eiko',serif; font-style:italic; font-weight:400;
  font-size:40px; line-height:1; letter-spacing:-0.015em; color:#111;
}
.pn-dek{
  margin:0; max-width:420px; flex:0 1 420px;
  font-family:'Suisse Intl',sans-serif; font-size:14px; line-height:1.5; color:#999;
}

/* ---------- Sticky category sub-nav ----------
   top is driven by --pn-subnav-top, which /js/pro-news.js keeps equal to the
   live fixed-nav height (grows when the notification banner shows). z-index is
   below the site top-nav's 20 so it can never cover it. */
.pn-subnav{
  position:sticky; top:var(--pn-subnav-top, 67px); z-index:10;
  background:#ffffff; border-bottom:1px solid #e5e5e5;
}
.pn-subnav__inner{
  min-height:52px; display:flex; align-items:center; justify-content:center; gap:28px;
}
/* Scroll-revealed "Pro News" label (badge left of the words). Hidden until the
   masthead scrolls behind the fixed top nav, when /js/pro-news.js adds .is-stuck.
   As a flex sibling of .pn-cats, the label + tabs stay centered as a group. */
/* padding-bottom:4px mirrors .pn-cat so the label text sits on the same line as
   the category tabs (whose padding-bottom leaves room for the active underline). */
.pn-subnav__label{ display:none; align-items:center; gap:9px; flex:0 0 auto; padding-bottom:4px; }
.pn-subnav.is-stuck .pn-subnav__label{ display:flex; }
.pn-subnav__label-text{
  font-family:'PP Eiko',serif; font-style:italic; font-weight:400; font-size:17px;
  letter-spacing:-0.01em; color:#111;
}
.pn-cats{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.pn-cat{
  position:relative; display:block; padding-bottom:4px;
  font-family:'PP Eiko',serif; font-size:15px; line-height:1.2;
  color:#111; white-space:nowrap; text-decoration:none;
}
.pn-cat:hover{ text-decoration:none; }
.pn-cat-on{ font-style:italic; }
/* Selected underline as a pseudo-element (NOT border-bottom — a border would
   change the box height and shove the selected word out of line). */
.pn-cat-on::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#b8945a;
}

/* ---------- "Latest" grid header ---------- */
.pn-grid-wrap{ padding-top:36px; padding-bottom:72px; }
.pn-latest-row{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px;
}
.pn-latest{
  margin:0; font-family:'PP Eiko',serif; font-style:italic; font-weight:400;
  font-size:32px; letter-spacing:-0.01em; color:#111;
}
.pn-count{
  font-family:'Suisse Intl',sans-serif; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#999;
}

/* ---------- Card grid ---------- */
.pn-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:24px; row-gap:44px; }

.pn-tile{ display:flex; flex-direction:column; cursor:pointer; }
.pn-tile a{ text-decoration:none; color:inherit; }
.pn-tile a:hover{ text-decoration:none; }
.pn-tile__rule{ height:1px; background:#e5e5e5; margin-bottom:14px; }
.pn-tile__media{
  position:relative; overflow:hidden; aspect-ratio:6 / 5; width:100%; margin-bottom:14px;
  background:#ddd; border-radius:0;   /* square corners (editorial) */
}
/* <img> (not a CSS background) so no per-card inline style is needed. */
.pn-tile__img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:opacity .2s cubic-bezier(.2,0,.2,1);
}
.pn-tile:hover .pn-tile__img{ opacity:.85; }
.pn-tile__badge{
  position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; line-height:1;
  font-family:'Suisse Intl',sans-serif; font-size:8px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 7px 2px; border-radius:3px; background:#b8945a; color:#1a1410;
}
.pn-tile__kicker{
  font-family:'Suisse Intl',sans-serif; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:7px; color:#999; font-weight:400;
}
.pn-tile__kicker--tw{ color:#8a6a2e; font-weight:600; }
.pn-tile__title{
  font-family:'Suisse Intl',sans-serif; font-weight:600; font-size:18px; line-height:1.26;
  letter-spacing:-0.01em; color:#111; margin-bottom:6px;
}
.pn-tile__byline{
  font-family:'Suisse Intl',sans-serif; font-size:12px; letter-spacing:.01em;
  color:#666; margin-bottom:8px;
}
/* Fixed 56px / 3-line box keeps grid rows even — never sizes to content. */
.pn-tile__excerpt{
  font-family:'Suisse Intl',sans-serif; font-size:13px; line-height:1.45; color:#333;
  margin-bottom:10px; height:56px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
.pn-tile__date{
  font-family:'Suisse Intl',sans-serif; font-size:11px; letter-spacing:.02em; color:#999;
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .pn-dek{ display:none; }
  .pn-subnav__inner{ justify-content:flex-start; }
  /* The scroll label would crowd the scrollable tab strip on mobile. */
  .pn-subnav.is-stuck .pn-subnav__label{ display:none; }
  .pn-cats{
    gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; padding-bottom:6px;
  }
  .pn-cat{ font-size:14px; }
  .pn-grid{ grid-template-columns:repeat(2,1fr); column-gap:16px; row-gap:32px; }
}
@media (max-width:520px){
  .pn-grid{ grid-template-columns:1fr; }
}