/* ============================================================
   MODELS.COM — PRO NEWS  (cream pull-out)  ·  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(--…).

   The ONLY thing this file owns is the cream + gold treatment,
   which is intentionally not part of the design system (the Pro
   News pull-out carries its own warm editorial voice). Those two
   literals — cream #f3ede0 and gold #b8945a (+ warm text tints) —
   are the sole hard-coded values, by design.
   ============================================================ */

.mdc-pronews{
  position:relative;
  background:#f3ede0;                                   /* bespoke: cream */
  padding:var(--spacing-350) 0 var(--spacing-400);
  margin:var(--spacing-300) 0 var(--spacing-150);
}
.mdc-pronews__inner{ max-width:1232px; margin-inline:auto; }

/* Gold hairlines, top & bottom */
.mdc-pronews__rule{ position:absolute; left:0; right:0; height:1px; background:#b8945a; }
.mdc-pronews__rule--top{ top:0; }
.mdc-pronews__rule--bottom{ bottom:0; }

/* ---------- Header ---------- */
.mdc-pronews__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--spacing-150); flex-wrap:wrap; margin-bottom:var(--spacing-200);
}
.mdc-pronews__titlewrap{ display:flex; flex-direction:column; gap:var(--spacing-012-and-half); }
.mdc-pronews__issuerow{ display:flex; align-items:center; gap:var(--spacing-050); }

.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:#e9dcc4;   /* warm cream ink */
}
.mdc-pronews__issue{
  font-size:var(--text-068-and-three-quatars); letter-spacing:.03em;
  text-transform:uppercase; color:#6b5a3a;
}
.mdc-pronews__title{
  margin:0; font-size:var(--text-300); line-height:1.05; letter-spacing:-0.01em;
  color:var(--color-functional-gray-black);
}
.mdc-pronews__desc{
  font-size:var(--text-087-and-half); color:#6b5a3a; max-width:480px;
}

.mdc-pronews__actions{ display:flex; align-items:center; gap:var(--spacing-150); }
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:#e9dcc4;
  transition:opacity .2s ease;
}
a.mdc-pronews__unlock:hover{ opacity:.85; }
.mdc-pronews__all{
  font-size:var(--text-068-and-three-quatars); letter-spacing:.03em; white-space:nowrap;
  color:var(--color-functional-gray-black);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:#b8945a;
  transition:text-decoration-color .2s ease;
}
.mdc-pronews__all:hover{ text-decoration-color:currentColor; }

/* ---------- 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) ----------
   Emitted by pro-news.cfm and wired to slick's prevArrow/nextArrow. Gold,
   circular, vertically centered on the card row. Slick auto-adds
   .slick-disabled when there's nothing to page (e.g. all 5 fit on desktop),
   which we fade out. Hidden entirely on the phone native-scroll view. */
.mdc-pronews .slickNav{
  position:absolute; top:calc(50% - 22px); transform:translateY(-50%);
  z-index:2; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:#b8945a; border:1.5px solid #b8945a; color:#fff;
  box-shadow:0 1px 4px rgba(107,90,58,.12);
  opacity:1;                       /* override hp.css .slickPrev/.slickNext { opacity:.75 } */
  transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.mdc-pronews .slickNav:hover{ opacity:.7; }
.mdc-pronews .slickPrev{ left:-8px; }
.mdc-pronews .slickNext{ right:-8px; }
.mdc-pronews .slickNav.slick-disabled{ opacity:0; pointer-events:none; }
@media (max-width:768px){ .mdc-pronews .slickNav{ display:none; } }

/* Before slick initializes (or if JS is unavailable): a plain 5-up 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; }

/* ---------- 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 (styled gold 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:#b8945a rgba(184,148,90,.22);
  }
  .mdc-pronews__slider:not(.slick-initialized) > *{
    flex:0 0 40%;            /* ~2.5 cards visible → next card peeks in */
    max-width:40%;
    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:rgba(184,148,90,.22); border-radius:3px;
  }
  .mdc-pronews__slider:not(.slick-initialized)::-webkit-scrollbar-thumb{
    background:#b8945a; 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-rule{ height:1px; background:rgba(184,148,90,.4); }
.mdc-pronews__card-img{
  aspect-ratio:4/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:#9a7f4a;
}
.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:#9a7f4a;
}

/* 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:#e9dcc4;
}

/* ============================================================
   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; }
}