/* ==========================================================================
   ReadyForRole — Resource Hub
   Loaded only by /blog/index.html. Extends main.css + premium.css +
   rfr-additions.css; defines no new brand colours, only the hub's layout,
   category navigation, featured card and section motifs.
   Brand tokens reused: --brand-1 #16356F, --brand-2 #2380B9, --brand-3 #25B786
   ========================================================================== */

.rfr-hub {
  --hub-line: rgba(22, 53, 111, .10);
  --hub-ink: var(--brand-1, #16356F);
  --hub-accent: var(--brand-2, #2380B9);
}

/* --------------------------------------------------------------------------
   1. CATEGORY NAVIGATION
   Sticky under the fixed header; horizontally scrollable on small screens.
   -------------------------------------------------------------------------- */

.rfr-hub-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hub-line);
}

.rfr-hub-nav-inner {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  padding: 12px 0;
  margin: 0;
  list-style: none;
}

.rfr-hub-nav-inner::-webkit-scrollbar { display: none; }

@media (min-width: 992px) {
  .rfr-hub-nav-inner { justify-content: center; overflow-x: visible; flex-wrap: wrap; }
}

.rfr-hub-nav-inner > li { flex: 0 0 auto; scroll-snap-align: center; }

.rfr-hub-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #4a5b78;
  text-decoration: none;
  position: relative;
  transition: color .22s ease-out, background-color .22s ease-out,
              border-color .22s ease-out, transform .22s ease-out;
}

.rfr-hub-nav a i { font-size: .95rem; opacity: .75; }

.rfr-hub-nav a:hover,
.rfr-hub-nav a:focus-visible {
  color: var(--hub-ink);
  background: rgba(35, 128, 185, .07);
  border-color: rgba(35, 128, 185, .18);
}

.rfr-hub-nav a[aria-current] {
  color: var(--hub-ink);
  background: linear-gradient(180deg, rgba(35, 128, 185, .10) 0%, rgba(37, 183, 134, .10) 100%);
  border-color: rgba(35, 128, 185, .28);
}

.rfr-hub-nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -13px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-2, #2380B9), var(--brand-3, #25B786));
}

/* --------------------------------------------------------------------------
   2. SECTION SHELL + HEADER
   -------------------------------------------------------------------------- */

.rfr-hub-section { padding: 26px 0; position: relative; scroll-margin-top: 130px; }

@media (max-width: 767.98px) { .rfr-hub-section { padding: 16px 0; } }

.rfr-hub-head { max-width: 760px; margin-bottom: 34px; }

.rfr-hub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hub-accent);
  margin-bottom: 12px;
}

.rfr-hub-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-2, #2380B9), var(--brand-3, #25B786));
}

.rfr-hub-head h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.15rem); font-weight: 800; line-height: 1.18; margin-bottom: 10px; }
.rfr-hub-head p   { font-size: 1.02rem; line-height: 1.65; color: #5a6b85; margin-bottom: 0; }

.rfr-hub-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--hub-line);
  background: #fff;
  font-size: .72rem;
  font-weight: 700;
  color: #6b7a93;
  vertical-align: middle;
}

/* Section motif: a restrained geometric wash, unique per theme, behind the header. */
.rfr-hub-panel > *:not(.rfr-hub-motif) { position: relative; z-index: 1; }

.rfr-hub-motif {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 272px;
  height: 190px;
  pointer-events: none;
  opacity: .34;
  z-index: 0;
}

@media (max-width: 991.98px) { .rfr-hub-motif { display: none; } }
@media (prefers-reduced-motion: no-preference) { .rfr-hub-motif { transition: opacity .4s ease-out; } }


/* --------------------------------------------------------------------------
   2b. SECTION PANEL
   Each pillar is a single card that holds its own articles. The panel is the
   tinted surface; the article cards inside stay white so they read as nested.
   -------------------------------------------------------------------------- */

.rfr-hub-panel {
  position: relative;
  overflow: hidden;
  padding: 30px 22px 34px;
  border-radius: 24px;
  border: 1px solid rgba(22, 53, 111, .10);
  background: linear-gradient(180deg, #fbfdff 0%, #f4f9fe 100%);
  box-shadow: 0 8px 30px rgba(22, 53, 111, .06);
}

@media (min-width: 768px)  { .rfr-hub-panel { padding: 40px 36px 44px; } }
@media (min-width: 1200px) { .rfr-hub-panel { padding: 46px 44px 50px; } }

/* thin brand rule across the top of every panel */
.rfr-hub-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-1, #16356F), var(--brand-2, #2380B9) 45%, var(--brand-3, #25B786));
  opacity: .85;
}

/* per-pillar tint — same palette, different weighting, so the five panels
   are distinguishable without leaving the brand */
.rfr-hub-panel--gcc      { background: linear-gradient(180deg, #fbfdff 0%, #f2f8fd 100%); }
.rfr-hub-panel--ai       { background: linear-gradient(180deg, #fbfeff 0%, #f1f9fb 100%); }
.rfr-hub-panel--services { background: linear-gradient(180deg, #fcfdff 0%, #f3f7fd 100%); }
.rfr-hub-panel--career   { background: linear-gradient(180deg, #fbfefd 0%, #f2fbf7 100%); }
.rfr-hub-panel--brand    { background: linear-gradient(180deg, #fafcff 0%, #eff5fc 100%); }

.rfr-hub-panel--ai::before       { background: linear-gradient(90deg, var(--brand-2, #2380B9), #3aa7d8 55%, var(--brand-3, #25B786)); }
.rfr-hub-panel--career::before   { background: linear-gradient(90deg, var(--brand-3, #25B786), var(--brand-2, #2380B9)); }
.rfr-hub-panel--brand::before    { background: linear-gradient(90deg, var(--brand-1, #16356F), var(--brand-2, #2380B9)); }

/* --------------------------------------------------------------------------
   3. DIVIDERS
   -------------------------------------------------------------------------- */

.rfr-hub-divider { display: none; }

/* --------------------------------------------------------------------------
   4. CARDS
   Inherits the existing .rfr-res-card language (white, thin border, radius,
   soft shadow). Only the grid, the featured variant and hover are new.
   -------------------------------------------------------------------------- */

.rfr-hub-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }

@media (min-width: 576px) { .rfr-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .rfr-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a section with one or two supporting cards uses wider columns rather than
   leaving an empty third slot */
@media (min-width: 992px) { .rfr-hub-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rfr-hub-grid > * { min-width: 0; }

/* Featured article */
.rfr-hub-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  padding: 30px;
  margin-bottom: 22px;
  border-radius: 20px;
  border: 1px solid rgba(35, 128, 185, .22);
  background: #fff;
  box-shadow: 0 10px 30px rgba(22, 53, 111, .07);
  text-decoration: none;
  overflow: hidden;
  transition: transform .24s ease-out, box-shadow .24s ease-out, border-color .24s ease-out;
}

@media (min-width: 768px) { .rfr-hub-featured { padding: 38px 40px; } }

.rfr-hub-featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-2, #2380B9), var(--brand-3, #25B786));
}

.rfr-hub-featured:hover,
.rfr-hub-featured:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(35, 128, 185, .4);
  box-shadow: 0 18px 44px rgba(22, 53, 111, .12);
}

.rfr-hub-feat-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }

.rfr-hub-feat-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--brand-1, #16356F), var(--brand-2, #2380B9));
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rfr-hub-featured h3 {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.72rem);
  font-weight: 800;
  line-height: 1.24;
  color: var(--hub-ink);
  margin-bottom: 12px;
  text-wrap: balance;
}

.rfr-hub-featured p { font-size: 1rem; line-height: 1.68; color: #55657e; margin-bottom: 20px; max-width: 68ch; }

.rfr-hub-feat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--hub-line);
  font-size: .86rem;
  color: #6b7a93;
}

.rfr-hub-feat-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hub-accent); }
.rfr-hub-feat-go i { transition: transform .24s ease-out; }
.rfr-hub-featured:hover .rfr-hub-feat-go i { transform: translateX(5px); }

/* Standard card hover — sharpen the existing card without redefining it */
.rfr-hub-grid .rfr-res-card { height: 100%; background: #fff; transition: transform .24s ease-out, box-shadow .24s ease-out, border-color .24s ease-out; }
.rfr-hub-grid .rfr-res-card:hover,
.rfr-hub-grid .rfr-res-card:focus-visible { transform: translateY(-4px); border-color: rgba(35, 128, 185, .38); box-shadow: 0 16px 36px rgba(22, 53, 111, .11); }
.rfr-hub-grid .rfr-res-card .rfr-res-go i { transition: transform .24s ease-out; }

/* keep "Read ->" on one line at the right, however long the audience string */
.rfr-hub-grid .rfr-res-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.rfr-hub-grid .rfr-res-meta > span:first-child { flex: 1 1 auto; min-width: 0; }
.rfr-hub-grid .rfr-res-go { flex: 0 0 auto; white-space: nowrap; }
.rfr-hub-feat-meta > span:first-child { flex: 1 1 auto; min-width: 0; }
.rfr-hub-feat-go { flex: 0 0 auto; white-space: nowrap; }
.rfr-hub-grid .rfr-res-card:hover .rfr-res-go i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. EMPTY STATE
   -------------------------------------------------------------------------- */

.rfr-hub-empty {
  padding: 40px 28px;
  border-radius: 18px;
  border: 1px dashed rgba(35, 128, 185, .3);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  text-align: center;
}

.rfr-hub-empty i { font-size: 1.5rem; color: var(--hub-accent); opacity: .7; }
.rfr-hub-empty p { margin: 12px 0 0; font-weight: 700; color: var(--hub-ink); }
.rfr-hub-empty span { display: block; margin-top: 4px; font-size: .9rem; color: #6b7a93; font-weight: 400; }

/* --------------------------------------------------------------------------
   6. FOCUS + MOTION
   -------------------------------------------------------------------------- */

.rfr-hub a:focus-visible,
.rfr-hub-nav a:focus-visible {
  outline: 3px solid rgba(35, 128, 185, .5);
  outline-offset: 3px;
  border-radius: 12px;
}

.rfr-hub-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.rfr-hub-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 10px 16px;
  background: #fff;
  border: 2px solid var(--hub-accent);
  border-radius: 10px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .rfr-hub-featured,
  .rfr-hub-grid .rfr-res-card,
  .rfr-hub-nav a,
  .rfr-hub-feat-go i,
  .rfr-hub-grid .rfr-res-card .rfr-res-go i { transition: none !important; }
  .rfr-hub-featured:hover,
  .rfr-hub-grid .rfr-res-card:hover { transform: none !important; }
}

@media print {
  .rfr-hub-nav, .rfr-hub-motif { display: none !important; }
  .rfr-hub-panel { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .rfr-hub-featured, .rfr-hub-grid .rfr-res-card { box-shadow: none; break-inside: avoid; }
}


/* ==========================================================================
   LANDING — FIVE CATEGORY CARDS
   The /blog/ landing shows only these; articles live on the category pages.
   ========================================================================== */

.rfr-cat-section { padding: 56px 0 72px; }
@media (max-width: 767.98px) { .rfr-cat-section { padding: 36px 0 48px; } }

.rfr-cat-head { text-align: center; max-width: 680px; margin: 0 auto 38px; }
.rfr-cat-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; color: var(--brand-1, #16356F); margin-bottom: 8px; }
.rfr-cat-head p  { color: #5a6b85; margin: 0; }

.rfr-cat-col { min-width: 0; }

/* the grid is Bootstrap's row-cols-lg-3; a trailing row of two is centred by
   offsetting the first of the pair by half a column */
@media (min-width: 992px) {
  .rfr-cat-grid > .rfr-cat-col--offset { margin-left: 16.6667%; }
}

/* The landing cards reuse .rfr-svc-mini / .rfr-svc-mini-inner / .rfr-icon-bubble
   from premium.css so they are the same component as the home page services
   grid. Only the anchor wrapper and its hover pass-through are added here. */

a.rfr-svc-mini.rfr-cat-link { display: block; text-decoration: none; color: inherit; }

/* the inner CTA + pill are spans, so mirror their hover off the card */
/* the landing uses <h2> for SEO hierarchy; premium.css scopes this to h3 */
a.rfr-cat-link:hover .rfr-svc-mini-inner h2 { color: var(--brand-2) !important; }
.rfr-cat-link .rfr-svc-mini-inner h2 { transition: color .3s ease; }

a.rfr-cat-link:hover .rfr-svc-mini-link { color: var(--brand-3-deep); gap: 10px; }
a.rfr-cat-link:hover .rfr-svc-mini-link i { transform: translateX(3px); }
a.rfr-cat-link:hover .rfr-svc-mini-cta {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(37, 183, 134, .6);
}
a.rfr-cat-link:focus-visible { outline: 3px solid rgba(35, 128, 185, .5); outline-offset: 4px; border-radius: 18px; }

/* ==========================================================================
   CATEGORY PAGE — hero + "other categories" strip
   ========================================================================== */

.rfr-cat-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #8fd3f4; margin: 0 0 10px;
}
.rfr-blog-hero .rfr-cat-hero-count {
  display: inline-block; margin: 16px 0 0; padding: 5px 13px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: .8rem; font-weight: 700;
}

.rfr-cat-other { padding: 8px 0 64px; }
.rfr-cat-other h2 { font-size: 1.1rem; font-weight: 800; color: var(--brand-1, #16356F); margin-bottom: 16px; }
.rfr-cat-mini-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .rfr-cat-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .rfr-cat-mini-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rfr-cat-mini {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(22, 53, 111, .11); background: #fff;
  text-decoration: none; color: var(--brand-1, #16356F);
  transition: transform .22s ease-out, border-color .22s ease-out, box-shadow .22s ease-out;
}
.rfr-cat-mini:hover, .rfr-cat-mini:focus-visible {
  transform: translateY(-3px); border-color: rgba(35, 128, 185, .38);
  box-shadow: 0 12px 26px rgba(22, 53, 111, .1);
}
.rfr-cat-mini-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(35, 128, 185, .1); color: var(--brand-2, #2380B9); font-size: .95rem; }
.rfr-cat-mini-t { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.rfr-cat-mini-n { flex: 0 0 auto; font-size: .75rem; color: #7b8aa2; white-space: nowrap; }
.rfr-cat-mini > .bi-arrow-right { flex: 0 0 auto; color: var(--brand-2, #2380B9); transition: transform .22s ease-out; }
.rfr-cat-mini:hover > .bi-arrow-right { transform: translateX(4px); }

/* the category page's article area needs no panel chrome — the page IS the category */
.rfr-cat-hero + .rfr-hub-nav { top: 0; }
.rfr-hub .rfr-hub-section:first-child { padding-top: 46px; }

@media (prefers-reduced-motion: reduce) {
  .rfr-cat-card, .rfr-cat-mini, .rfr-cat-go i, .rfr-cat-pill, .rfr-cat-mini > .bi-arrow-right { transition: none !important; }
  .rfr-cat-card:hover, .rfr-cat-mini:hover, .rfr-cat-card:hover .rfr-cat-pill { transform: none !important; }
}