/* ============================================================
   Homepage (front-page.php) — phase 3 v2 redesign.
   Consumes tokens.css + the shared cv2/usst vocabulary
   (buttons, section title, container, toplist Quiet Card).
   Page-local components use the .home- prefix. Light aesthetic,
   matching the country-hub / online-casinos family.
   ============================================================ */

/* ---------- Section rhythm ---------- */
.home-main { overflow-x: clip; }

.home-section { padding-block: clamp(2.75rem, 2rem + 3.4vw, 5rem); }
.home-section--sunken { background: var(--bji-surface-sunken); border-block: 1px solid var(--bji-border); }
.home-section--navy {
  background:
    radial-gradient(60rem 26rem at 88% -20%, rgb(6 152 255 / 0.18), transparent 60%),
    linear-gradient(165deg, var(--bji-navy-800), var(--bji-navy-950) 78%);
  color: var(--bji-text-inverse);
}

.home-section-head { max-width: 44rem; margin: 0 0 var(--bji-space-6); }
.home-section-head.is-center { margin-inline: auto; text-align: center; }
.home-section-head.is-center .cv2-section-title::after { margin-inline: auto; }
.home-section-head p { margin: 0; color: var(--bji-text-muted); font-size: var(--bji-text-lg); line-height: var(--bji-leading-snug); }
.home-section--navy .home-section-head p { color: var(--bji-text-inverse-muted); }
.home-section--navy .cv2-section-title { color: #fff; }

.home-seemore { margin-top: var(--bji-space-6); text-align: center; }

/* ============================================================
   HERO — the brand/returning-visitor router + authority frame
   ============================================================ */
.home-hero {
  position: relative;
  background:
    radial-gradient(52rem 24rem at 82% -12%, rgb(6 152 255 / 0.22), transparent 60%),
    radial-gradient(40rem 22rem at 8% 120%, rgb(31 162 84 / 0.12), transparent 60%),
    linear-gradient(158deg, var(--bji-navy-800) 0%, var(--bji-navy-950) 82%);
  color: var(--bji-text-inverse);
  border-bottom: 1px solid var(--bji-navy-700);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}
.home-hero-inner { max-width: 60rem; }

.home-hero-kicker {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bji-blue-200);
}
.home-hero-kicker::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: var(--bji-radius-pill);
  background: var(--bji-brand);
}
.home-hero h1 {
  margin: var(--bji-space-3) 0 0;
  font-size: var(--bji-text-4xl);
  line-height: 1.08; font-weight: var(--bji-weight-black);
  letter-spacing: -0.015em; color: #fff; max-width: 20ch;
}
.home-hero h1 .accent { color: var(--bji-blue-300); }
.home-hero-lede {
  margin: var(--bji-space-4) 0 0; max-width: 54ch;
  font-size: var(--bji-text-lg); line-height: var(--bji-leading-snug);
  color: var(--bji-text-inverse-muted);
}
.home-hero-lede a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.home-hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--bji-space-2) var(--bji-space-5);
  margin: var(--bji-space-5) 0 0; padding: 0; list-style: none;
  font-size: var(--bji-text-sm); color: var(--bji-text-inverse-muted);
}
.home-hero-trust li { display: flex; align-items: center; gap: 0.5em; }
.home-hero-trust svg { flex: 0 0 auto; color: var(--bji-green-500); }

/* Compact tool router: pill links directly under the H1 — one-click routing
   for returning visitors, without the visual weight of full cards (the tools
   get their own feature sections below). */
.home-hero-pills { display: flex; flex-wrap: wrap; gap: var(--bji-space-3); margin: var(--bji-space-4) 0 0; }
.home-hero-pill {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.6em 1.15em; border-radius: var(--bji-radius-pill);
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.18);
  color: var(--bji-text-inverse); font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-sm); line-height: 1;
  transition: background var(--bji-duration) var(--bji-ease),
              border-color var(--bji-duration) var(--bji-ease),
              transform var(--bji-duration) var(--bji-ease);
}
.home-hero-pill svg { width: 16px; height: 16px; color: var(--bji-blue-200); flex: 0 0 auto; }
.home-hero-pill:hover {
  background: rgb(255 255 255 / 0.12); border-color: var(--bji-blue-400);
  color: #fff; text-decoration: none; transform: translateY(-1px);
}
.home-hero-pill:hover svg { color: #fff; }

/* ============================================================
   CHOOSE YOUR PATH — route the three reader classes
   ============================================================ */
.home-paths { display: grid; gap: var(--bji-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-path {
  display: flex; flex-direction: column;
  padding: var(--bji-space-6);
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg); box-shadow: var(--bji-shadow-sm);
  transition: transform var(--bji-duration) var(--bji-ease), box-shadow var(--bji-duration) var(--bji-ease);
}
.home-path:hover { transform: translateY(-3px); box-shadow: var(--bji-shadow-md); text-decoration: none; }
.home-path-tag {
  align-self: flex-start; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.25em 0.7em; border-radius: var(--bji-radius-pill); margin-bottom: var(--bji-space-3);
}
.home-path--new .home-path-tag { background: var(--bji-blue-050); color: var(--bji-blue-700); }
.home-path--improve .home-path-tag { background: var(--bji-green-100); color: var(--bji-green-700); }
.home-path--count .home-path-tag { background: var(--bji-amber-100); color: var(--bji-amber-700); }
.home-path h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-xl); color: var(--bji-navy-900); }
.home-path p { margin: 0 0 var(--bji-space-4); color: var(--bji-text-muted); font-size: var(--bji-text-sm); }
.home-path ul { margin: 0 0 var(--bji-space-5); padding: 0; list-style: none; display: grid; gap: var(--bji-space-2); }
.home-path li { display: flex; gap: 0.55em; font-size: var(--bji-text-sm); color: var(--bji-text); }
.home-path li::before {
  content: ""; flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: 0.1em;
  background: var(--bji-brand); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/72% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/72% no-repeat;
}
.home-path--improve li::before { background: var(--bji-green-500); }
.home-path--count li::before { background: var(--bji-amber-500); }
.home-path .home-path-cta { margin-top: auto; font-weight: var(--bji-weight-semibold); color: var(--bji-link); display: inline-flex; align-items: center; gap: 0.4em; }
.home-path:hover .home-path-cta { gap: 0.7em; }

/* ============================================================
   FEATURE — the crown-jewel tools, shown not just linked
   ============================================================ */
.home-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.home-feature + .home-feature { margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.home-feature--alt .home-feature-media { order: 2; }
.home-feature-body .cv2-kicker { color: var(--bji-brand); }
.home-feature-body h2 { margin: var(--bji-space-1) 0 var(--bji-space-3); font-size: var(--bji-text-2xl); color: var(--bji-navy-900); line-height: var(--bji-leading-tight); }
.home-feature-body p { margin: 0 0 var(--bji-space-4); color: var(--bji-text-muted); }
.home-feature-actions { display: flex; flex-wrap: wrap; gap: var(--bji-space-3); align-items: center; }
.home-feature-media {
  position: relative; border-radius: var(--bji-radius-lg); overflow: hidden;
  border: 1px solid var(--bji-border); box-shadow: var(--bji-shadow-md);
  background: var(--bji-surface-sunken);
}
.home-feature-media img { display: block; width: 100%; height: auto; }
.home-feature-media--pad { padding: var(--bji-space-5); }
.home-feature-tag {
  position: absolute; top: var(--bji-space-3); left: var(--bji-space-3);
  font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold);
  background: var(--bji-navy-900); color: #fff; padding: 0.3em 0.7em; border-radius: var(--bji-radius-pill);
}

/* mini feature stat chips */
.home-feature-stats { display: flex; flex-wrap: wrap; gap: var(--bji-space-4); margin: 0 0 var(--bji-space-5); padding: 0; list-style: none; }
.home-feature-stats li { display: flex; flex-direction: column; }
.home-feature-stats b { font-size: var(--bji-text-xl); color: var(--bji-navy-900); font-weight: var(--bji-weight-black); }
.home-feature-stats span { font-size: var(--bji-text-xs); color: var(--bji-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================
   SCHOOL — reputation builder + E-E-A-T contributors
   ============================================================ */
.home-school-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.home-check { margin: var(--bji-space-4) 0 var(--bji-space-5); padding: 0; list-style: none; display: grid; gap: var(--bji-space-3); }
.home-check li { display: flex; gap: 0.6em; font-size: var(--bji-text-base); }
.home-check li::before {
  content: ""; flex: 0 0 auto; width: 1.3em; height: 1.3em; border-radius: 50%;
  background: var(--bji-green-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/72% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/%3E%3C/svg%3E") center/72% no-repeat;
}
.home-contribs { display: grid; grid-template-columns: 1fr; gap: var(--bji-space-4); }
.home-contrib {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--bji-space-4); align-items: start;
  padding: var(--bji-space-4); background: var(--bji-surface);
  border: 1px solid var(--bji-border); border-radius: var(--bji-radius-md);
  transition: border-color var(--bji-duration) var(--bji-ease), box-shadow var(--bji-duration) var(--bji-ease);
}
.home-contrib:hover { border-color: var(--bji-brand); box-shadow: var(--bji-shadow-sm); text-decoration: none; }
.home-contrib img { width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--bji-border); }
.home-contrib b { display: block; font-size: var(--bji-text-base); color: var(--bji-navy-900); }
.home-contrib-role { display: block; font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); letter-spacing: 0.03em; text-transform: uppercase; color: var(--bji-brand); margin: 1px 0 var(--bji-space-2); }
.home-contrib p { margin: 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); line-height: var(--bji-leading-snug); }

/* ============================================================
   LIBRARY — router into deep Learn / Online Blackjack content
   ============================================================ */
.home-lib { display: grid; gap: var(--bji-space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.home-lib-card {
  display: flex; align-items: flex-start; gap: var(--bji-space-3);
  padding: var(--bji-space-4) var(--bji-space-5);
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  transition: border-color var(--bji-duration) var(--bji-ease), transform var(--bji-duration) var(--bji-ease);
}
.home-lib-card:hover { border-color: var(--bji-brand); transform: translateY(-2px); text-decoration: none; }
.home-lib-ic { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: var(--bji-radius-sm); background: var(--bji-blue-050); color: var(--bji-blue-600); }
.home-lib-ic svg { width: 18px; height: 18px; }
.home-lib-card b { display: block; font-size: var(--bji-text-base); color: var(--bji-navy-900); }
.home-lib-card span { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-muted); margin-top: 1px; line-height: var(--bji-leading-snug); }

/* ============================================================
   CASINO GUIDES FOR YOUR MARKET — country-hub entry grid.
   Reinforces the localized/country structure; the commercial
   toplist was removed from the homepage (captain call 2026-08-02).
   ============================================================ */
.home-country-grid { display: grid; gap: var(--bji-space-3); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.home-cc {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.7em 0.9em; background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-medium);
  color: var(--bji-text); transition: border-color var(--bji-duration) var(--bji-ease), background var(--bji-duration) var(--bji-ease);
}
.home-cc:hover { border-color: var(--bji-brand); background: var(--bji-blue-050); text-decoration: none; }
.home-cc .flag-icon, .home-cc img { width: 1.3em; height: auto; border-radius: 2px; flex: 0 0 auto; }
.home-cc--all { justify-content: center; color: var(--bji-link); font-weight: var(--bji-weight-semibold); }

/* ============================================================
   FORUM band
   ============================================================ */
.home-forum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.home-threads-head { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bji-blue-200); }
.home-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bji-space-2); }
.home-threads li { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--bji-radius-md); }
.home-threads a { display: flex; justify-content: space-between; gap: var(--bji-space-3); align-items: center; padding: var(--bji-space-3) var(--bji-space-4); color: var(--bji-text-inverse); }
.home-threads a:hover { text-decoration: none; background: rgb(255 255 255 / 0.03); }
.home-threads .th-title { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-medium); }
.home-threads .th-meta { flex: 0 0 auto; font-size: var(--bji-text-xs); color: var(--bji-text-inverse-muted); display: flex; gap: 0.8em; }

/* ============================================================
   BLOG grid
   ============================================================ */
.home-blog-grid { display: grid; gap: var(--bji-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-blog-card { display: flex; flex-direction: column; background: var(--bji-surface); border: 1px solid var(--bji-border); border-radius: var(--bji-radius-lg); overflow: hidden; box-shadow: var(--bji-shadow-sm); transition: transform var(--bji-duration) var(--bji-ease), box-shadow var(--bji-duration) var(--bji-ease); }
.home-blog-card:hover { transform: translateY(-3px); box-shadow: var(--bji-shadow-md); }
.home-blog-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bji-surface-sunken); }
.home-blog-media img { width: 100%; height: 100%; object-fit: cover; }
.home-blog-body { padding: var(--bji-space-4) var(--bji-space-5) var(--bji-space-5); display: flex; flex-direction: column; flex: 1; }
.home-blog-body h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-lg); line-height: var(--bji-leading-snug); }
.home-blog-body h3 a { color: var(--bji-navy-900); }
.home-blog-body p { margin: 0 0 var(--bji-space-4); font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.home-blog-more { margin-top: auto; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-link); display: inline-flex; align-items: center; gap: 0.4em; }

/* ============================================================
   STORE — brand's own product (strategy cards)
   ============================================================ */
.home-store {
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg); box-shadow: var(--bji-shadow-sm);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.home-store-media { text-align: center; }
.home-store-media img { max-width: 100%; height: auto; border-radius: var(--bji-radius-md); }
.home-store-body h2 { margin: var(--bji-space-1) 0 var(--bji-space-3); font-size: var(--bji-text-2xl); color: var(--bji-navy-900); line-height: var(--bji-leading-tight); }
.home-store-body p { margin: 0 0 var(--bji-space-4); color: var(--bji-text-muted); }

/* ============================================================
   ONLINE BLACKJACK + PLAYER ADVOCACY
   ============================================================ */
.home-online-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bji-space-5); align-items: stretch; }
.home-online-card {
  display: flex; flex-direction: column;
  background: var(--bji-surface); border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg); box-shadow: var(--bji-shadow-sm);
  padding: var(--bji-space-6);
}
.home-online-card h3 { margin: 0 0 var(--bji-space-2); font-size: var(--bji-text-xl); color: var(--bji-navy-900); }
.home-online-card p { margin: 0 0 var(--bji-space-4); color: var(--bji-text-muted); font-size: var(--bji-text-sm); }
.home-online-links { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: var(--bji-space-3); }
.home-online-links a { font-weight: var(--bji-weight-semibold); color: var(--bji-link); display: inline-flex; gap: 0.4em; align-items: center; }
.home-online-links a:hover { gap: 0.6em; }
.home-online-card--advocacy {
  border-color: var(--bji-blue-200);
  background: linear-gradient(160deg, var(--bji-blue-050), var(--bji-surface) 65%);
}
.home-online-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45em;
  font-size: var(--bji-text-xs); font-weight: var(--bji-weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bji-green-700); background: var(--bji-green-100);
  padding: 0.3em 0.75em; border-radius: var(--bji-radius-pill); margin-bottom: var(--bji-space-3);
}
.home-online-card--advocacy .cv2-btn { align-self: flex-start; margin-top: auto; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .home-feature, .home-school-grid, .home-forum-grid, .home-online-grid { grid-template-columns: 1fr; }
  .home-feature--alt .home-feature-media { order: 0; }
  .home-feature-media { max-width: 34rem; }
  .home-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-store { grid-template-columns: 1fr; text-align: center; }
  .home-store-media { max-width: 22rem; margin: 0 auto; }
  .home-store-body .cv2-btn { margin-top: var(--bji-space-1); }
}
@media (max-width: 760px) {
  .home-paths { grid-template-columns: 1fr; }
  .home-blog-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: var(--bji-text-3xl); }
}