/* =========================================================================
   Conference Insights Tiles
   -------------------------------------------------------------------------
   BEM-first, no Bootstrap. CSS Grid layout.
   Mobile-first: single column. Desktop (≥768px): 3 columns with the
   --featured tile spanning all 3 and flipping to horizontal layout.

   Markup mirrors the live featured-conferences insight cards.
   Hover effects, typography, and colors ported from
   .rbccm-featured-conferences__insight* for visual parity:
     - No border, no border-radius, no box-shadow (flat card)
     - Background #FFFDFD, body text #000
     - Hover (gated by `@media (hover: hover)`):
         · image scales to 1.08
         · divider widens 30.9px → 56px
         · meta gets a bottom border
     - :focus-visible mirrors hover for keyboard users

   Block: rbccm-conference-insights-tiles
   ========================================================================= */

/* ---------- Block ----------
   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-cit-pt-m   mobile padding-top     (default 40px)
     --rbccm-cit-pb-m   mobile padding-bottom  (default 40px)
     --rbccm-cit-pt-d   desktop padding-top    (default 64px, in the 992px block below)
     --rbccm-cit-pb-d   desktop padding-bottom (default 64px, in the 992px block below) */
.rbccm-conference-insights-tiles {
  padding: var(--rbccm-cit-pt-m, 40px) 16px var(--rbccm-cit-pb-m, 40px);
  background: #ffffff;
}

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


/* ---------- Row / grid ----------
   Semantic <ul> so screen readers announce "list of N". List styling
   (bullets, padding) reset to match the previous <div> visual.

   Mirrors the legacy responsive cadence:
     - Mobile (<768px):  1 column
     - Tablet (≥768px):  2 columns
     - Desktop (≥992px): 3 columns
   Row-gap 32px (between rows), column-gap 30px (between columns).
   Featured card always spans the full row at every breakpoint via
   grid-column: 1 / -1. */
.rbccm-conference-insights-tiles__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  /* Fade the real tile row in once the Filter By component has finished
     initializing (see [data-filter-ready] below). Prevents the "all
     tiles flash → some hide → visible tiles reveal" jump on page load. */
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* Once the filter JS attaches `data-filter-ready="true"` to the tiles
   container, cross-fade the real row in and unmount the skeleton. */
.rbccm-conference-insights-tiles[data-filter-ready="true"] .rbccm-conference-insights-tiles__row {
  opacity: 1;
}

.rbccm-conference-insights-tiles[data-filter-ready="true"] .rbccm-conference-insights-tiles__skeleton {
  display: none;
}


/* ---------- Skeleton ----------
   Facebook-style tile placeholders shown before the filter JS finishes
   initializing. Same layout as the real tile row (1 featured card on
   top, then 3-up at desktop) so nothing shifts when real content lands.
   The shimmer is a moving diagonal gradient overlaid on each card via
   ::before pseudo. */

.rbccm-conference-insights-tiles__skeleton {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 0 0 32px 0;
}

.rbccm-conference-insights-tiles__skeleton-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 768px) {
  .rbccm-conference-insights-tiles__skeleton-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Each skeleton card is a stack of gray blocks representing an image,
   a title, and two description bars. Shimmer sweeps across via an
   inner ::before pseudo. */
.rbccm-conference-insights-tiles__skeleton-card {
  /* Darker base so the shimmer sweep reads clearly on top. */
  background: #e0e0e0;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}

/* Featured card: horizontal layout (image left, text right) at desktop. */
.rbccm-conference-insights-tiles__skeleton-card--featured {
  min-height: 280px;
}

@media (min-width: 992px) {
  .rbccm-conference-insights-tiles__skeleton-card--featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Image placeholder */
.rbccm-conference-insights-tiles__skeleton-image {
  background: #cfcfcf;
  height: 240px;
  width: 100%;
}

.rbccm-conference-insights-tiles__skeleton-card--featured .rbccm-conference-insights-tiles__skeleton-image {
  height: 100%;
  min-height: 240px;
}

/* Text area with faux title + description bars */
.rbccm-conference-insights-tiles__skeleton-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rbccm-conference-insights-tiles__skeleton-title {
  background: #c0c0c0;
  border-radius: 4px;
  height: 20px;
  width: 75%;
  margin-top: 12px;
}

.rbccm-conference-insights-tiles__skeleton-desc {
  background: #cfcfcf;
  border-radius: 4px;
  height: 10px;
  width: 100%;
}

.rbccm-conference-insights-tiles__skeleton-desc--short {
  width: 60%;
}

.rbccm-conference-insights-tiles__skeleton-meta {
  background: #cfcfcf;
  border-radius: 4px;
  height: 10px;
  width: 30%;
  margin-top: 12px;
}

/* Shimmer sweep — bright band sweeps left-to-right across the whole
   card. Continuous linear motion (not ease-in-out) so it never
   "pauses" at the edges — feels alive the whole loop. */
.rbccm-conference-insights-tiles__skeleton-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0)    100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: rbccm-tiles-skeleton-shimmer 1.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes rbccm-tiles-skeleton-shimmer {
  0%   { background-position: 100% 0; }   /* band starts off-screen left */
  100% { background-position: -100% 0; }  /* band ends off-screen right */
}

/* Reduced motion — kill the shimmer and just show static gray cards. */
@media (prefers-reduced-motion: reduce) {
  .rbccm-conference-insights-tiles__skeleton-card::before {
    display: none;
  }
  .rbccm-conference-insights-tiles__row {
    transition: none;
  }
}

/* Each <li> is a transparent wrapper — display: contents removes the li box
   from the visual layout so the <a> card inside remains the direct CSS Grid
   child and every existing card style (featured span, hover, focus) keeps
   working unchanged. The list semantics stay in the accessibility tree. */
.rbccm-conference-insights-tiles__item {
  display: contents;
}

/* When the filter JS hides this <li>, the display: contents rule above
   would beat the browser's default [hidden] { display: none }, so we need
   an explicit high-specificity override for the filter-hidden state. */
.rbccm-conference-insights-tiles__item[hidden] {
  display: none !important;
}

@media (min-width: 768px) {
  .rbccm-conference-insights-tiles__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 30px; /* row-gap column-gap */
  }
  /* NOTE: at tablet the featured card flows in the 2-col grid like any
     other card — no full-row span, no horizontal layout. Full-width
     featured treatment kicks in at desktop (≥992px) below. */
}

@media (min-width: 992px) {
  .rbccm-conference-insights-tiles__row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Featured card spans the full row above the standard 3-up. */
  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured {
    grid-column: 1 / -1;
  }
}


/* ---------- Card ----------
   1px gray border + pure white background so the cards read clearly on the
   white page background (the featured-conferences cards live in a tinted
   panel, so they get away without a border — these don't).
   Roboto declared at the card level so label, title, desc, and meta all
   inherit it without each declaring font-family individually.
   min-height: 555px (media 240 + body 315) — gives the card a fixed visual
   minimum so the meta has room to push to the bottom even when the
   description is short. */
.rbccm-conference-insights-tiles__insight {
  align-items: flex-start;
  background: #FFF;
  border: 1px solid #A8A8A8;
  color: #000;
  display: flex;
  flex-direction: column;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  height: 100%;
  min-height: 555px;
  text-decoration: none !important;
  transition: border-color 0.15s ease;
  width: 100%;
  outline-offset: 0px !important;
}

.rbccm-conference-insights-tiles__insight:hover,
.rbccm-conference-insights-tiles__insight:focus-visible {
  color: #000;
  text-decoration: none;
}

/* Hidden by load-more — kept out of layout. */
.rbccm-conference-insights-tiles__insight[hidden] {
  display: none !important;
}


/* ---------- Media ----------
   240px tall, full card width. Hover scales 1.08; the wrapper clips
   overflow so the layout doesn't shift. */
.rbccm-conference-insights-tiles__insight-media {
  align-self: stretch;
  flex-shrink: 0;
  height: 240px;
  overflow: hidden;
}

.rbccm-conference-insights-tiles__insight-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}


/* ---------- Body ----------
   Holds label / divider / title / desc / meta. Meta pins to the bottom
   via margin-top: auto.
   min-height: 315px ensures the body has enough vertical room for the
   meta's auto-margin to actually create the visible gap between desc and
   meta. Without this, short descriptions would collapse the gap. */
.rbccm-conference-insights-tiles__insight-body {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 315px;
  padding: 20px;
}


/* ---------- Label (eyebrow) ----------
   Matches live-site rbccm.com insights tiles: Roboto Light / 14px /
   140% line-height / 2px letter-spacing / uppercase / #006AC3. */
.rbccm-conference-insights-tiles__insight-label {
  color: #006AC3;
  font-family: "Roboto Light", Roboto, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 140%;
  margin: 0 0 5px 0;
  text-transform: uppercase;
}


/* ---------- Divider (yellow line) ----------
   Width animates from 30.9px → 56px on hover. */
.rbccm-conference-insights-tiles__insight-divider {
  background: #FFC72C;
  flex-shrink: 0;
  height: 2px;
  margin: 0;
  transition: width 0.3s ease;
  width: 30.9px;
}


/* ---------- Title ----------
   Matches live-site rbccm.com insights tiles: Roboto Medium (as its own
   loaded font-family, weight 400) / 20px / 125% line-height / normal
   letter-spacing / #000. Serves as the H2 anchor for each card. */
.rbccm-conference-insights-tiles__insight-title {
  color: #000;
  font-family: "Roboto Medium", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 125%;
  letter-spacing: normal;
  margin: 10px 0 10px 0;
}


/* ---------- Description ----------
   The meta uses margin-top: auto to pin itself to the bottom of the body;
   when the description is short, that auto absorbs the leftover space.
   When the description grows long enough to consume all of that space,
   the 16px bottom margin here guarantees a minimum breathing gap so the
   text doesn't collide with the "X min read" anchor line. */
.rbccm-conference-insights-tiles__insight-desc {
  color: #555;
  font-family: "Roboto Light", Roboto, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0.5px;
  margin: 0 0 20px 0;
}


/* ---------- Meta (read time + arrow) ----------
   `display: inline-flex` + `width: fit-content` shrinks the meta to wrap
   its content, so the hover border-bottom only runs the length of the text
   + arrow rather than the full card width. 7px gap between text and arrow. */
.rbccm-conference-insights-tiles__insight-meta {
  align-items: center;
  border-bottom: 1px solid transparent;
  color: #006AC3;
  display: inline-flex;
  font-family: Roboto, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  gap: 7px;
  letter-spacing: normal;
  line-height: 20px;
  margin: auto 0 0 0;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
  width: fit-content;
}


/* ---------- Bottom row ----------
   Wrapper that pins the meta ("14 min listen ›") to the bottom-left and
   the abbreviated month + year ("Jul 2026") to the bottom-right. Baseline-
   aligned so the two sit on the same reading line. Only appears when the
   feed produced a dateLabel; tiles without a date render the meta bare and
   this wrapper isn't emitted. */
.rbccm-conference-insights-tiles__insight-bottom {
  /* `last baseline` aligns the LAST text baseline of each flex child.
     For the meta (single line) that's its own baseline; for the
     taxonomy stack (two lines) that's the "region · date" line. Result:
     "14 min listen" sits on the exact same reading line as "US · Jun
     2026". Falls back to flex-end in older engines — visually near-
     identical, off by ~3px because of the meta's padding-bottom + hover
     underline reservation. */
  align-items: flex-end;
  align-items: last baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: auto 0 0 0;
  width: 100%;
}

/* Reset the meta's own auto margin when it's inside the bottom-row
   wrapper — the wrapper now handles the "push to bottom" behavior. */
.rbccm-conference-insights-tiles__insight-bottom .rbccm-conference-insights-tiles__insight-meta {
  margin: 0;
}


/* ---------- Taxonomy stack ----------
   Right side of the bottom row: primary topic ("Healthcare") on top,
   region + date ("US · Jul 2026") muted below. Right-aligned so the
   text edge lines up with the card's right padding. Small line-height
   so the two lines feel like one unit, not two paragraphs. */
.rbccm-conference-insights-tiles__insight-taxonomy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
  text-align: right;
}

/* Topic — same tone as the region · date line so the taxonomy stack
   reads as a single muted block. #353535 at 70% opacity resolves to
   ~#717171 against white; matches the muted body copy elsewhere on
   the page and keeps enough contrast for WCAG AA at 13px. */
.rbccm-conference-insights-tiles__insight-topic {
  color: rgba(53, 53, 53, 0.7);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}

/* Region — same treatment as topic. Carries its " · " separator inline
   so hiding the whole span removes the orphan dot for free. */
.rbccm-conference-insights-tiles__insight-region {
  color: rgba(53, 53, 53, 0.7);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}

/* Date — the piece we're keeping visible for now; region and topic are
   suppressed via the temporary hide rule below. */
.rbccm-conference-insights-tiles__insight-date {
  color: rgba(53, 53, 53, 0.7);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}


/* ---------- TEMPORARY: hide topic + region ----------
   Markup for topic and region ships as its own spans so we can bring
   them back with a one-line change if stakeholders approve. Until then,
   both are hidden and only the date renders in the bottom-right slot.
   To restore: delete this entire block. */
.rbccm-conference-insights-tiles__insight-topic,
.rbccm-conference-insights-tiles__insight-region {
  display: none;
}


/* ---------- Arrow ----------
   Render at the SVG's intrinsic 4x10 dimensions (set inline on the
   element). Only fill and flex-shrink applied here. */
.rbccm-conference-insights-tiles__insight-arrow {
  fill: var(--Blue-Bright-Blue, #0051A5);
  flex-shrink: 0;
}


/* ---------- Hover / focus effects ----------
   Gated by `@media (hover: hover)` so touch-only devices skip the image
   scale and divider stretch (where hover state doesn't make sense).
   `:focus-visible` mirrors hover for keyboard users. */
@media (hover: hover) {
  .rbccm-conference-insights-tiles__insight:hover {
    /* border-color: var(--Blue-Bright-Blue, #0051A5); */
    outline: none;
  }
  .rbccm-conference-insights-tiles__insight:hover .rbccm-conference-insights-tiles__insight-media img,
  .rbccm-conference-insights-tiles__insight:focus-visible .rbccm-conference-insights-tiles__insight-media img {
    transform: scale(1.08);
  }
  .rbccm-conference-insights-tiles__insight:hover .rbccm-conference-insights-tiles__insight-divider,
  .rbccm-conference-insights-tiles__insight:focus-visible .rbccm-conference-insights-tiles__insight-divider {
    width: 56px;
  }
  .rbccm-conference-insights-tiles__insight:hover .rbccm-conference-insights-tiles__insight-meta,
  .rbccm-conference-insights-tiles__insight:focus-visible .rbccm-conference-insights-tiles__insight-meta {
    border-bottom-color: currentColor;
  }
}


/* ---------- Keyboard focus indicator (a11y) ----------
   Suppress the default :focus outline (which fires on mouse clicks too)
   and swap the card's existing 1px gray border to brand blue on
   :focus-visible (keyboard / programmatic focus only). Sits outside
   @media (hover: hover) so it applies to touch devices too. Using
   border-color instead of outline keeps the visual to a single 1px line
   — no stacked outline + border doubling effect, no offset to fiddle with. */
.rbccm-conference-insights-tiles__insight:focus {
  /* outline: none; */
  outline-color: rgb(0, 106, 195);
  outline-offset: -2px;
  outline-width: 3px;
}

.rbccm-conference-insights-tiles__insight:focus-visible {
  /* border-color: var(--Blue-Bright-Blue, #0051A5); */
  /* outline: none; */
  outline-color: rgb(0, 106, 195);
  outline-width: 3px;
  outline-offset: -2px;
}


/* ---------- Reduced-motion (a11y) ----------
   Respect the OS `prefers-reduced-motion` setting: skip the image scale,
   divider width animation, and border-color transition so motion-sensitive
   users get an instantaneous state change instead of an animation. */
@media (prefers-reduced-motion: reduce) {
  .rbccm-conference-insights-tiles__insight,
  .rbccm-conference-insights-tiles__insight-media img,
  .rbccm-conference-insights-tiles__insight-divider,
  .rbccm-conference-insights-tiles__insight-meta {
    transition: none !important;
  }
  .rbccm-conference-insights-tiles__insight:hover .rbccm-conference-insights-tiles__insight-media img,
  .rbccm-conference-insights-tiles__insight:focus-visible .rbccm-conference-insights-tiles__insight-media img {
    transform: none !important;
  }
}


/* ---------- Featured card layout (≥992px only: image left, text right) ----------
   At mobile and tablet the featured card behaves like any other card in the
   grid. Only at desktop, when it has the full row to itself, does it flip
   to the horizontal half-and-half layout.

   Featured spacing per Figma:
     - Body padding: 30px all around
     - Content vertically centered in the body
     - Label/divider → title: 26px
     - Title → description: 12px
     - Description → meta: 26px
   Meta's `margin: auto 0 0 0` is overridden here so the meta flows in line
   with the centered group (no auto-push to bottom). */
@media (min-width: 992px) {
  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured {
    flex-direction: row;
    align-items: stretch;
    min-height: 0; /* drop the 555px floor; horizontal featured sizes to content */
    max-height: 280px;
  }

  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured .rbccm-conference-insights-tiles__insight-media {
    flex: 0 0 50%;
    height: auto;
    min-height: 240px;
  }

  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured .rbccm-conference-insights-tiles__insight-body {
    flex: 1 1 50%;
    justify-content: center;
    min-height: 0; /* let featured body size to its centered content */
    padding: 30px;
  }

  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured .rbccm-conference-insights-tiles__insight-title {
    font-size: 24px;
    line-height: 30px;
    margin: 26px 0 12px 0;
  }

  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured .rbccm-conference-insights-tiles__insight-desc {
    margin: 0 0 26px 0;
  }

  .rbccm-conference-insights-tiles:not(.is-filtered):not(.is-past-first-page) .rbccm-conference-insights-tiles__insight--featured .rbccm-conference-insights-tiles__insight-meta {
    margin: 0;
  }
}


/* ---------- Controls row (See More + View All) ---------- */
.rbccm-conference-insights-tiles__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .rbccm-conference-insights-tiles__controls {
    flex-direction: row;
    justify-content: center;
  }
}

.rbccm-conference-insights-tiles__see-more,
.rbccm-conference-insights-tiles__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 28px;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* See More: outline / secondary */
.rbccm-conference-insights-tiles__see-more {
  background: transparent;
  color: var(--Blue-Dark-Blue, #003168);
  border: 1px solid var(--Blue-Dark-Blue, #003168);
}

.rbccm-conference-insights-tiles__see-more:hover,
.rbccm-conference-insights-tiles__see-more:focus {
  background: var(--Blue-Dark-Blue, #003168);
  color: #ffffff;
  outline: none;
}

/* View All: primary — Blue-Bright-Blue token with dark-blue hover state */
.rbccm-conference-insights-tiles__view-all {
  background: var(--Blue-Bright-Blue, #0051A5);
  color: #ffffff;
  border: 1px solid var(--Blue-Bright-Blue, #0051A5);
}

.rbccm-conference-insights-tiles__view-all:hover,
.rbccm-conference-insights-tiles__view-all:focus {
  background: var(--Blue-Dark-Blue, #003168);
  border-color: var(--Blue-Dark-Blue, #003168);
  color: #ffffff;
  outline: none;
}


/* ---------- Desktop padding bump ---------- */
@media (min-width: 992px) {
  .rbccm-conference-insights-tiles {
    padding: var(--rbccm-cit-pt-d, 64px) 16px var(--rbccm-cit-pb-d, 64px);
  }
}