/* =========================================================================
   Conference Insights Hero
   -------------------------------------------------------------------------
   Mobile-first BEM. Desktop overrides at the bottom of the file.
   Block: rbccm-conference-insights-hero

   Color tokens use the var(--Blue-Dark-Blue, #003168) pattern so they pick
   up the site's design tokens when available, and fall back to the literal
   color when they're not.
   ========================================================================= */

/* ---------- Block ----------
   40px vertical (top/bottom from component), 16px horizontal (window gutters).
   Target rendered height on mobile is 198px. Because the default box-sizing
   is content-box, min-height does NOT include padding, so we subtract the
   80px of vertical padding: 198 − 80 = 118px. Content sits top-aligned by
   default block flow (no flex centering).

   Padding is authored via CSS custom properties so Teamsite authors can
   override just the top or bottom (mobile and desktop each) from the
   component Datums without editing this file:
     --rbccm-cih-pt-m   mobile padding-top     (default 40px)
     --rbccm-cih-pb-m   mobile padding-bottom  (default 40px)
     --rbccm-cih-pt-d   desktop padding-top    (default 64px, in the 992px block below)
     --rbccm-cih-pb-d   desktop padding-bottom (default 48px, in the 992px block below) */
.rbccm-conference-insights-hero {
  min-height: 118px;
  /* Top margin clears the site's absolutely-positioned nav bar so the hero
     content isn't hidden underneath it. 40px on mobile, bumped to 80px on
     desktop in the 992px block below. */
  margin-top: 40px;
  padding: var(--rbccm-cih-pt-m, 40px) 16px var(--rbccm-cih-pb-m, 40px);
  background: #ffffff;
}

.rbccm-conference-insights-hero__inner {
  max-width: 1140px;
  margin: 0 auto;
}


/* ---------- Breadcrumbs ---------- */
.rbccm-conference-insights-hero__breadcrumbs {
  margin: 0 0 40px 0;
}

.rbccm-conference-insights-hero__breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--Blue-Dark-Blue, #003168);
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;   /* mobile default */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.rbccm-conference-insights-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  /* Explicit color on the <li> — beats the site-wide `li { color: #424242; }`
     bare-tag override (BEM class specificity 0,1,0 beats tag 0,0,1). */
  color: var(--Blue-Dark-Blue, #003168);
}

.rbccm-conference-insights-hero__breadcrumb a {
  /* Also set explicitly on the <a> — some site-wide `li a` rules apply
     their own color and would still override `color: inherit`. */
  color: var(--Blue-Dark-Blue, #003168);
  text-decoration: none;
}

.rbccm-conference-insights-hero__breadcrumb a:hover,
.rbccm-conference-insights-hero__breadcrumb a:focus {
  text-decoration: underline;
}

/* Pipe separator between crumbs, suppressed after the last item.
   Pseudo-element keeps the pipe out of the accessibility tree. */
.rbccm-conference-insights-hero__breadcrumb::after {
  content: "|";
  margin: 0 8px;
  color: var(--Blue-Dark-Blue, #003168);
}

.rbccm-conference-insights-hero__breadcrumb:last-child::after {
  content: none;
}


/* ---------- Title ----------
   RBCDisplay serif / weight 500 / 1.2 line-height. Letter-spacing left
   undeclared so whatever site-wide cascade applies to H1 wins — component
   doesn't force its own tracking. Mobile keeps 24px; desktop bumps to
   29px below. */
.rbccm-conference-insights-hero__title {
  margin: 0 0 25px 0;
  color: var(--Blue-Dark-Blue, #003168);
  font-family: RBCDisplay, Georgia, Times, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

/* Collapse spacing when a content block is the last thing in the hero
   (e.g. subtitle Datum is blank so the <p> doesn't render, or breadcrumbs
   are the only content). Keeps the hero visually compact instead of
   trailing an orphan 16/40px gap before the section padding. */
.rbccm-conference-insights-hero__title:last-child,
.rbccm-conference-insights-hero__breadcrumbs:last-child {
  margin-bottom: 0;
}


/* ---------- Subtitle ----------
   Matches the live rbccm.com body-paragraph pattern: Roboto Light /
   14–15px / 140% line-height / +0.5px tracking. */
.rbccm-conference-insights-hero__subtitle {
  margin: 0;
  color: var(--Blue-Dark-Blue, #003168);
  font-family: "Roboto Light", Roboto, Arial, Verdana, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
}


/* ---------- Desktop (≥992px) ----------
   64px top, 48px bottom, 48px between breadcrumbs and H1.
   Title / subtitle typography matches the site standard (measured from
   the shared header/paragraph pattern on production pages).
   Horizontal gutters come from __inner's max-width centering at 1100px. */
@media (min-width: 992px) {
  .rbccm-conference-insights-hero {
    /* Target 258px rendered, minus 64+48 padding = 146px content min-height. */
    min-height: 146px;
    margin-top: 80px;   /* clears the taller desktop nav bar */
    padding: var(--rbccm-cih-pt-d, 64px) 16px var(--rbccm-cih-pb-d, 48px);
  }

  .rbccm-conference-insights-hero__breadcrumbs {
    margin-bottom: 48px;
  }

  .rbccm-conference-insights-hero__breadcrumb-list {
    font-size: 18px;   /* desktop bump */
  }

  /* Title — matches live rbccm.com desktop H1: 29px / 1.2 lh / +1px
     tracking / 25px margin-bottom (collapsed via :last-child when the
     subtitle is blank). */
  .rbccm-conference-insights-hero__title {
    font-size: 29px;
  }
}