/* ============================================================================
 * bb-home.css — KPR-F home-page body (frozen design 2026-06-25).
 * Front-page-only. Enqueued by mu-plugin mthink-home.php AFTER bb-hero.css.
 * ALL rules scoped under .bb-home so the short class names cannot collide.
 * FONT SIZES: the theme runs html{font-size:62.5%} (1rem = 10px), so every
 * font-size below is the 16px-spec value x1.6 (same calibration as bb-hero.css).
 * ========================================================================== */

:root{
  --bbh-anchor:#0b1a28; --bbh-green:#1a9e5f; --bbh-cta-orange:#E8792B; --bbh-gold:#c9a23a;
  --bbh-red:#b32945; --bbh-line:#e6edf2; --bbh-ink:#1d2a33; --bbh-mgray:#5C5C5C;
}

.bb-home{ color:var(--bbh-ink); }
.bb-home .uk-container{ max-width:1200px; }

/* trust strip integrated inside the hero box (rendered in hero-front.php; scoped under .bb-hero, covered by the bb-hero RUCSS safelist) */
/* distinct band flush at the very foot of the hero: negative side/bottom margins cancel the hero
   padding so it spans edge-to-edge to the rounded bottom (hero overflow:hidden clips the corners). */
.bb-hero__trust{ margin:20px -34px -30px; padding:13px 24px; background:rgba(0,0,0,.30); border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; justify-content:center; gap:10px 48px; font-size:1.5rem; font-weight:600; color:#cfe1ee; }
.bb-hero__trust span{ white-space:nowrap; }
.bb-hero__trust b{ color:#fff; }
/* The home hero carried padding-bottom:90px (bb-hero.css) reserved for the OLD button slider, now removed.
   That 90px was the empty dark space below the trust strip; trim it so the trust sits at the hero's foot. */
.home .bb-hero.t-center{ padding-bottom:30px; }

/* shared section heading */
.bb-home .sec-head{ text-align:center; max-width:660px; margin:0 auto 18px; }
.bb-home .sec-head h2{ font-size:2.4rem; color:#102432; margin:0 0 5px; letter-spacing:-.01em; }
.bb-home .sec-head p{ color:var(--bbh-mgray); margin:0; font-size:1.54rem; }

/* ===== trust strip (dark band under the hero) ===== */
.bb-home .trust{ background:#0c1f30; color:#cfe1ee; }
.bb-home .trust .uk-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 34px; padding:13px 24px; font-size:1.52rem; font-weight:600; }
.bb-home .trust span{ white-space:nowrap; }
.bb-home .trust b{ color:#fff; }

/* ===== 1. flagship spotlight + rotating rankings slider ===== */
.bb-home .spot{ background:#eef5fc; border-bottom:1px solid #d6e6f4; padding:34px 0; }
.bb-home .spot .uk-container{ display:grid; grid-template-columns:1.05fr 1fr; gap:32px; align-items:center; }
.bb-home .spot .k{ font-size:1.15rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#1257a0; }
.bb-home .spot h2{ margin:7px 0 7px; font-size:3.2rem; letter-spacing:-.02em; color:#102432; line-height:1.1; max-width:15ch; }
.bb-home .spot p{ margin:0 0 18px; color:#46586a; font-size:1.63rem; max-width:46ch; }
.bb-home .spot .cta{ display:inline-block; background:var(--bbh-green); color:#fff; font-weight:800; font-size:1.5rem; text-decoration:none; padding:12px 22px; border-radius:9px; }
.bb-home .spot .cta2{ display:inline-block; margin-left:8px; color:#1257a0; font-weight:700; font-size:1.5rem; text-decoration:none; padding:12px 6px; }

.bb-home .slider{ background:#fff; border:1px solid #d6e6f4; border-top:5px solid #1257a0; border-radius:16px; padding:6px 18px 14px; }
.bb-home .tabs{ display:flex; gap:4px; flex-wrap:wrap; padding:8px 0 6px; border-bottom:1px solid var(--bbh-line); margin-bottom:4px; }
.bb-home .tab{ font:inherit; font-size:1.25rem; font-weight:800; color:#5a6b78; background:transparent; border:0; border-radius:7px; padding:6px 10px; cursor:pointer; letter-spacing:.01em; }
.bb-home .tab:hover{ background:#f1f6fb; color:#1257a0; }
.bb-home .tab.on{ background:#1257a0; color:#fff; }
.bb-home .panes{ position:relative; min-height:300px; }
.bb-home .pane{ display:none; }
.bb-home .pane.on{ display:block; animation:bbh-fade .25s ease; }
@keyframes bbh-fade{ from{ opacity:0 } to{ opacity:1 } }
.bb-home .pane .cat{ font-size:1.15rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#1257a0; padding:9px 0 2px; }
.bb-home .lrow{ display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--bbh-line); text-decoration:none; color:inherit; }
.bb-home .lrow:last-child{ border-bottom:0; }
.bb-home .rk{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1.47rem; background:#e7eef5; color:#1257a0; }
.bb-home .rk.g{ background:var(--bbh-gold); color:#3a2f08; }
.bb-home .rk.x{ background:#fff; color:#6a7782; }
.bb-home .lrow .body{ display:flex; flex-direction:column; }
.bb-home .lrow .nm{ display:block; font-weight:700; font-size:1.63rem; color:#102432; }
.bb-home .lrow .mt{ display:block; font-size:1.31rem; color:#6a7782; }
.bb-home .lrow .pt{ margin-left:auto; font-size:1.36rem; font-weight:700; color:#1257a0; white-space:nowrap; }

/* ===== 2. intent lanes (no header) ===== */
.bb-home .lanes{ padding:36px 0 10px; }
.bb-home .lane-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.bb-home .lane{ border:1px solid var(--bbh-line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
.bb-home .lane__top{ background:var(--la); color:#fff; padding:16px 20px; }
.bb-home .lane__top .who{ font-size:1.18rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.bb-home .lane__top h3{ margin:5px 0 0; font-size:1.98rem; letter-spacing:-.01em; color:#fff; }
.bb-home .lane__body{ padding:6px 20px 16px; }
.bb-home .route{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid var(--bbh-line); text-decoration:none; color:inherit; }
.bb-home .route:last-of-type{ border-bottom:0; }
.bb-home .route .tag2{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:7px; background:var(--c); }
.bb-home .route .body{ display:flex; flex-direction:column; }
.bb-home .route .rt{ display:block; font-size:1.52rem; font-weight:700; color:#102432; }
.bb-home .route .rd{ display:block; font-size:1.33rem; color:#6a7782; margin-top:1px; }
.bb-home .route:hover .rt{ color:var(--c); }
.bb-home .lane__cta{ padding-top:12px; }
.bb-home .lane__cta a{ display:inline-block; background:var(--la); color:#fff; font-weight:800; font-size:1.44rem; text-decoration:none; padding:9px 16px; border-radius:8px; }

/* ===== 3. expert content panel ===== */
.bb-home .content{ background:#f4f8fb; border-top:1px solid var(--bbh-line); border-bottom:1px solid var(--bbh-line); padding:34px 0; margin-top:32px; }
.bb-home .content h2{ font-size:2.32rem; color:#102432; margin:0 0 16px; letter-spacing:-.01em; }
.bb-home .cfeat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bb-home .cfeat.cfeat--solo{ grid-template-columns:1fr; }
.bb-home .cfeat.cfeat--solo .cfcard{ max-width:640px; }
.bb-home .cfcard{ background:#fff; border:1px solid var(--bbh-line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.bb-home .cfcard:hover{ box-shadow:0 10px 26px rgba(16,36,50,.10); }
.bb-home .cfcard--feat{ border-top:4px solid #3c5577; }
.bb-home .cfcard--partner{ border-top:4px solid var(--bbh-gold); }
.bb-home .cfcard .img{ aspect-ratio:16/9; background:#e9eff4; display:block; width:100%; object-fit:cover; }
.bb-home .cfcard .in{ padding:16px 18px 18px; }
.bb-home .cfcard .k{ display:block; font-size:1.12rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c); }
.bb-home .cfcard h3{ margin:6px 0 5px; font-size:1.89rem; line-height:1.2; color:#102432; letter-spacing:-.01em; }
.bb-home .cfcard .meta{ font-size:1.3rem; color:#7a8893; }
.bb-home .clabel{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 16px; }
.bb-home .clabel h2{ margin:0; }
.bb-home .clabel .pick{ font-size:1.18rem; color:#7a8893; }
.bb-home .recent-lbl{ font-size:1.15rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9aa6ad; margin:18px 0 10px; }
.bb-home .clinks{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bb-home .clink{ background:#fff; border:1px solid var(--bbh-line); border-top:4px solid var(--c); border-radius:13px; padding:14px 15px; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.bb-home .clink:hover{ box-shadow:0 8px 20px rgba(16,36,50,.08); }
.bb-home .clink .k{ display:block; font-size:1.09rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c); }
.bb-home .clink .t{ display:block; font-size:1.54rem; font-weight:700; color:#102432; margin-top:5px; line-height:1.25; }
.bb-home .clink .m{ font-size:1.18rem; color:#8a98a5; margin-top:8px; }

/* ===== 4. directory rail ===== */
.bb-home .rail{ padding:34px 0 8px; }
.bb-home .dir{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bb-home .ditem{ display:flex; align-items:stretch; gap:0; border:1px solid var(--bbh-line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; background:#fff; }
.bb-home .ditem:hover{ box-shadow:0 8px 20px rgba(16,36,50,.08); }
.bb-home .ditem .bar{ flex:0 0 6px; background:var(--c); }
.bb-home .ditem .in{ padding:14px 16px; }
.bb-home .ditem .k{ display:block; font-size:1.12rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c); }
.bb-home .ditem .t{ display:block; font-size:1.7rem; font-weight:700; color:#102432; margin:3px 0 2px; }
.bb-home .ditem .d{ display:block; font-size:1.36rem; color:#6a7782; }

/* ===== 5. popular content ===== */
.bb-home .pop{ padding:34px 0 8px; }
.bb-home .pop .head{ text-align:center; margin:0 0 14px; }
.bb-home .pop .lbl{ font-size:1.18rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9aa6ad; margin:0; }
.bb-home .popgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bb-home .pcard{ border:1px solid var(--bbh-line); border-radius:13px; padding:15px; text-decoration:none; color:inherit; background:#fff; display:flex; flex-direction:column; gap:6px; }
.bb-home .pcard:hover{ border-color:var(--c); }
.bb-home .ptag{ align-self:flex-start; font-size:1.06rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--c); border-radius:5px; padding:3px 8px; }
.bb-home .pcard .pt{ font-size:1.54rem; font-weight:700; color:#102432; }
.bb-home .pcard .pm{ font-size:1.31rem; color:#6a7782; margin-top:6px; }

/* ===== newsletter ===== */
.bb-home .cap{ margin-top:32px; background:#0c1f30; color:#cfe1ee; padding:28px 0; }
.bb-home .cap .uk-container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.bb-home .cap h3{ margin:0 0 4px; font-size:1.89rem; color:#fff; }
.bb-home .cap p{ margin:0; font-size:1.49rem; }
.bb-home .cap .row{ display:flex; gap:8px; }
.bb-home .cap input{ border:1px solid #2c4660; background:#0b1a28; color:#fff; border-radius:8px; padding:11px 13px; font-size:1.47rem; font-family:inherit; min-width:240px; }
.bb-home .cap button{ background:var(--bbh-green); color:#fff; border:0; font-weight:800; padding:11px 18px; border-radius:8px; font-size:1.47rem; cursor:pointer; }

/* ===== responsive ===== */
@media(max-width:880px){
  .bb-home .spot .uk-container{ grid-template-columns:1fr; }
  .bb-home .lane-grid{ grid-template-columns:1fr; }
  .bb-home .dir{ grid-template-columns:1fr; }
  .bb-home .popgrid{ grid-template-columns:1fr 1fr; }
  .bb-home .cfeat{ grid-template-columns:1fr; }
  .bb-home .clinks{ grid-template-columns:1fr 1fr; }
  .bb-home .cap .uk-container{ flex-direction:column; align-items:flex-start; }
}