/* ============================================================
   Free reports page (/free)
   Scoped to `.free-page`. Uses design tokens — no hardcoded
   colors, radii or shadows. Brand-tinted backgrounds derive
   from token colors via color-mix() so the brand palette is
   the single source of truth.
   ============================================================ */

.free-page {
  /* Page-local derived tints (single source per tint). */
  --free-tint-coral:    color-mix(in srgb, var(--coral)   8%, transparent);
  --free-tint-fuchsia:  color-mix(in srgb, var(--fuchsia) 10%, transparent);
  --free-tint-border:   color-mix(in srgb, var(--fuchsia) 20%, transparent);
  --free-tint-teal:     color-mix(in srgb, var(--teal)    10%, transparent);
  --free-tint-sage:     color-mix(in srgb, var(--sage)    10%, transparent);
  --free-tint-teal-bd:  color-mix(in srgb, var(--teal)    22%, transparent);
  --free-tint-amber:    color-mix(in srgb, var(--amber)   14%, transparent);
  --free-tint-amber-bd: color-mix(in srgb, var(--amber)   30%, transparent);

  /* Soft hairline color — visible at 0.75px against white but lighter
     than --gray-mid. Used by the section top, row dividers, and preview
     pane bottom border. */
  --free-hairline: color-mix(in srgb, var(--gray-mid) 40%, transparent);

  /* Sticky offsets — search bar pins below the navbar; the
     list/preview columns pin below the search bar. */
  --free-sticky-search: calc(var(--navbar-height) - 15px);
  /* Tabs row (gray bar) pins directly below the search pill so list rows
     scroll under it, not under the search bar. ~75px ≈ search pill 68px
     + breathing room. */
  --free-sticky-tabs:   calc(var(--free-sticky-search) + 75px);
  --free-sticky-cols:   calc(var(--navbar-height) + 110px);
  --free-cols-max-h:    calc(100vh - var(--navbar-height) - 130px);
}

/* Solid white page surface outside the gradient hero. */
body:has(.mw-page.free-page) { background: var(--white) !important; }

/* ---------- Hero panel ---------------------------------------- */
.free-page .landing-hero--no-image .landing-hero-panel {
  height: 270px;
  min-height: 270px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.free-page .landing-hero--no-image .landing-hero-content { width: 100%; }

/* Full-bleed gradient hero (used on the simpler /free hero variant). */
.free-page .free-hero {
  background: var(--gradient);
  padding: calc(var(--topbar-height) + var(--space-6)) var(--space-4) var(--space-8);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  position: relative;
  overflow: visible;
}
.free-page .free-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
}
.free-page .free-hero-title {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: var(--font-bold, 700);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.05;
}
.free-page .free-hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgb(255 255 255 / 0.92);
  margin: 0 0 var(--space-5);
}
.free-page .free-hero-search { margin: 0 0 var(--space-5); }

/* ---------- Sticky search bar (pinned below navbar) ----------- */
.free-page .page-search-bar {
  margin-top: 15px;
  position: sticky;
  top: var(--free-sticky-search);
  z-index: 6;
  background: var(--white);
}
/* Opaque white cap that extends the search-bar surface UP to the top
   of the viewport, covering the transparent strip behind the floating
   navbar so list rows can't bleed through as they scroll past. The
   navbar pill (z-index 1000) sits above this cap. */
.free-page .page-search-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--navbar-height) + 15px);
  background: var(--white);
  pointer-events: none;
}
.free-page .page-search-bar-inner { max-width: 1342px; }
.free-page .free-search-pill {
  width: 90% !important;
  max-width: 1342px !important;
  border-radius: var(--radius-full) !important;
}

/* ---------- Search pill (filters · separator · search) -------- */
.free-page .free-search-pill {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  margin: 0 auto;
  min-height: 68px;
}
.free-page .free-search-filters {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.free-page .free-filter { display: inline-flex; }
.free-page .free-filter-sep,
.free-page .free-search-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-primary);
  margin: 0 var(--space-1);
  flex: 0 0 auto;
}
.free-page .free-search-input {
  flex: 1 1 auto;
  border: none; outline: none; background: transparent;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  min-width: 0;
}
.free-page .free-search-input::placeholder {
  color: var(--gray-placeholder);
  font-weight: 400;
}

.free-page .free-search-clear {
  flex: 0 0 auto;
  appearance: none;
  background: var(--bg-hover);
  border: none;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  margin-right: var(--space-1);
  transition: background 0.15s ease, color 0.15s ease;
}
.free-page .free-search-clear:hover {
  background: var(--border-primary);
  color: var(--text-primary);
}

/* ---------- Tabs row (category labels + region/lang filters) -- */
.free-page .free-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-5) 0 var(--space-1);
  background: var(--white);
  position: sticky;
  top: var(--free-sticky-tabs);
  z-index: 60;
}
.free-page .free-tabs-row .free-tabs {
  margin: 0;
  border-bottom: none;
  flex: 1 1 auto;
  min-width: 0;
}
.free-page .free-tabs-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding-bottom: 6px;
}
.free-page .free-filter-pop {
  position: relative;
  display: inline-block;
}
.free-page .free-filter-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.free-page .free-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.free-page .free-filter-btn:hover {
  background: var(--bg-hover);
}
.free-page .free-filter-pop.open .free-filter-btn,
.free-page .free-filter-btn:focus-visible {
  border-color: var(--text-primary);
  outline: none;
}
.free-page .free-filter-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.free-page .free-filter-pop .mw-menu-dropdown {
  right: auto;
  left: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  /* Sit above the sticky tabs row (z:5) and the preview pane on the
     right so Region/Language popovers never tuck behind either. */
  z-index: 50;
}
.free-page .free-filter-pop { position: relative; z-index: 50; }
.free-page .free-tabs {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: var(--space-5) 0 var(--space-1);
  border-bottom: 1px solid var(--border-primary);
}
.free-page .free-tab {
  appearance: none;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 10px 0;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.free-page .free-tab { display: inline-flex; align-items: center; gap: 12px; }
.free-page .free-tab .free-tab-icon {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.free-page .free-tab.is-active .free-tab-icon { fill: currentColor; }
.free-page .free-tab:hover { color: var(--text-primary); }
.free-page .free-tab.is-active {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--text-primary);
}
.free-page .free-tab-fav { display: inline-flex; align-items: center; }
.free-page .free-fav-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: var(--radius-full);
}
.free-page .free-tab-fav.is-active .free-fav-count {
  color: var(--white);
  background: var(--text-primary);
}
.free-page .free-fav-empty {
  padding: 28px var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.free-page .free-fav-empty .free-fav-empty-icon {
  display: block; margin: 0 auto var(--space-2); opacity: 0.5;
}

/* Search results meta inline in the tabs row. */
.free-page .free-tabs-results {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-left: var(--space-2);
  align-self: center;
  padding: 10px 0;
  white-space: nowrap;
  line-height: 1.5;
}
.free-page .free-tabs-results .free-results-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: -1px;
}
.free-page .free-tabs-results .free-results-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- Sticky list + preview columns --------------------- */
.free-page .home-cards-container {
  border-top: none;
  padding-top: 0 !important;
}
/* Left list scrolls naturally with the page; the sticky search bar +
   tabs row above it (opaque white background, z-index 6/60) clip its
   content visually so rows never bleed under the navbar. */
.free-page .home-list-col {
  position: static !important;
  align-self: start;
  max-height: none !important;
  overflow: visible !important;
}
/* Preview pane pins directly below the sticky search-bar + tabs stack
   so it stays in view while the left list scrolls. The pane scrolls
   internally if its own content exceeds the viewport height. */
.free-page .home-right-col {
  background: var(--off-white);
  min-height: 500px;
  border-top: 0.75px solid var(--border-primary);
  position: sticky !important;
  top: var(--free-sticky-cols);
  align-self: start;
  max-height: var(--free-cols-max-h) !important;
  overflow-y: auto !important;
  z-index: 4;
}
/* /explore reuses the .free-page styles but wants the preview pane to
   fit its own content height — no fixed cap, no internal scroll. The
   pane is still sticky so it stays in view as the left list scrolls. */
.free-page#explorePage .home-right-col {
  min-height: 0;
  max-height: none !important;
  height: auto !important;
  overflow-y: visible !important;
}
.free-page#explorePage .home-right-col .activity-preview-panel,
.free-page#explorePage.mw-page .home-right-col .activity-preview-panel {
  min-height: 0 !important;
  height: auto !important;
}
/* Preview pane on /explore is always the canonical off-white surface
   (#FAFAFA via --off-white) — no hover/idle/empty state may flip it. */
.free-page#explorePage .home-right-col,
.free-page#explorePage .home-right-col .activity-preview-panel,
.free-page#explorePage .home-right-col .activity-preview-section {
  background: var(--off-white) !important;
}
/* Force-display preview content slots so no inherited rule can hide them. */
.free-page #explorePreviewCards #ep-snippets:not(.hidden),
.free-page #explorePreviewCards #ep-bottom-stats:not(.hidden),
.free-page #explorePreviewCards #ep-credits:not(.hidden),
.free-page #explorePreviewCards #ep-ad:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Kill the shared hover/active gray tint — on /free the preview pane
   stays white regardless of which list row is hovered or selected. */
.free-page .home-cards-container:has(.home-popular-list .activity-item:hover) .home-right-col,
.free-page .home-cards-container:has(.home-popular-list .activity-item.hover-active) .home-right-col,
.free-page .home-cards-container:has(.home-popular-list .activity-item:hover) .home-right-col .activity-preview-panel,
.free-page .home-cards-container:has(.home-popular-list .activity-item.hover-active) .home-right-col .activity-preview-panel {
  background: var(--off-white);
}
.free-page.mw-page .home-right-col .activity-preview-panel,
.free-page .activity-preview-panel {
  background: var(--off-white);
  height: auto;
  min-height: 500px;
  max-height: none;
  overflow: visible;
  position: relative;
}
.free-page .activity-preview-panel {
  border-bottom: 0.75px solid var(--free-hairline);
}
.free-page .home-activity-page .activity-preview-section {
  height: auto;
  overflow: visible !important;
  border-top: none !important;
}
/* /free preview pane has no hover state — suppress the gray tint
   that work.css applies to .activity-preview-section:hover. */
.free-page .activity-preview-section:hover,
.free-page .home-right-col .activity-preview-section:hover,
.free-page .activity-preview-panel:hover {
  background: var(--off-white) !important;
}

/* /explore subcategory headings (mirror navbar mega-menu groupings).
   Reuses .home-mega-group-heading typography; this rule only handles
   placement inside the vertical list flow (top spacing + horizontal
   padding to align with the row text, no hairline ::after divider). */
.free-page .home-list-col .explore-section-heading {
  padding: var(--space-5) 10px var(--space-2);
  margin-top: 100px;
  color: var(--pink);
}
.free-page .home-list-col .explore-section-heading:first-child {
  padding-top: var(--space-2);
  margin-top: 0;
}
.free-page .home-list-col .explore-section-heading::before,
.free-page .home-list-col .explore-section-heading::after {
  content: none !important;
}

/* Top hairline — spans the list + preview columns only (not the
   full-bleed section). Sits at the top edge of the cards container,
   visually directly under the sticky tabs row. */
.free-page .home-cards-container {
  border-top: 0.75px solid var(--free-hairline);
}

/* Rows: 100px tall, no perimeter borders, single visible bottom hairline.
   We override the canonical .mw-page ::before hairline (which uses the
   too-pale --gray-light token) by drawing our own border-bottom in the
   darker --gray-mid so 0.75px actually reads against the white surface. */
.free-page .home-list-col .activity-item,
.free-page .home-list-col .activity-item.mw-frow,
.free-page .home-list-col .activity-item.explore-item,
.free-page .home-list-col .free-list-break,
.free-page .home-list-col .free-list-break .flb-card {
  border: none !important;
  border-bottom: 0.75px solid var(--free-hairline) !important;
  box-shadow: none !important;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  position: relative;
}
/* Suppress the canonical ::before / first-row ::after pseudo hairlines
   from work.css so we only ever render the one border-bottom above. */
.free-page .home-list-col .activity-item::before,
.free-page .home-list-col .activity-item:first-child::after {
  content: none !important;
  display: none !important;
}

/* Drop the heavy pink left border from anything inside the preview pane
   (the preview replicates row markup, so the country-intelligence rule
   would otherwise apply there too). */
.free-page .home-right-col [data-report-type="country-intelligence"],
.free-page .activity-preview-panel [data-report-type="country-intelligence"],
.free-page .activity-preview-panel .activity-item {
  border-left: none !important;
  padding-left: 0 !important;
}

.free-page .activity-preview-combined { border-top: none !important; }
.free-page .activity-preview-combined::before {
  content: none !important;
  border: none !important;
}

/* Ren ad inside the preview pane — pinned to 100px tall. */
.free-page #explorePreviewCards #ep-ad,
.free-page #explorePreviewCards .ep-ad,
.free-page #explorePreviewCards #ep-ad img,
.free-page #explorePreviewCards .ep-ad img { height: 100px !important; }

/* On /free the preview is shorter than on /work: restore stat
   cards / pricing / ad to normal flow (explore-work.css absolutely
   positions them at the bottom of the combined preview). */
.free-page #explorePreviewCards .ep-bottom-stats,
.free-page #explorePreviewCards .ep-credits,
.free-page #explorePreviewCards #ep-credits,
.free-page #explorePreviewCards .ep-ad,
.free-page #explorePreviewCards #ep-ad {
  position: static !important;
  inset: auto !important;
  height: auto !important;
}
.free-page #explorePreviewCards .ep-credits,
.free-page #explorePreviewCards #ep-credits { margin-top: 0 !important; }
/* Pricing columns: shrink each column to its content rather than a 3-up
   even split, so labels like "1 credit" / "25 credits" don't sit in a wide
   gap. */
.free-page #explorePreviewCards .ep-credits-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-6);
  grid-template-columns: none !important;
}
.free-page #explorePreviewCards .ep-credits-grid .ep-credit-col {
  flex: 0 0 auto;
  width: max-content;
}
.free-page #explorePreviewCards .ep-credits-grid .ep-credit-col:nth-child(2),
.free-page #explorePreviewCards .ep-credits-grid .ep-credit-col:nth-child(3) {
  padding-left: 20px;
}
.free-page #explorePreviewCards .ep-ad,
.free-page #explorePreviewCards #ep-ad { margin-top: var(--space-3) !important; }

/* ---------- Promo break (sales note + Ask-Ren CTA) ------------ */
.free-page .free-list-break { margin: 0; padding: 0; position: relative; }
/* Bottom hairline that matches the .activity-item row separator (which lives
   on a ::before, so it isn't inherited by .free-list-break). Mirrors the
   row separator's left:20px → right:0 span. */
.free-page .home-list-col .free-list-break::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 0.75px;
  background: var(--gray-light);
  pointer-events: none;
}
.free-page .flb-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  height: 100px;
  background: linear-gradient(135deg, var(--free-tint-coral) 0%, var(--free-tint-fuchsia) 100%);
  border: 1px solid var(--free-tint-border);
  border-radius: var(--radius-lg);
}
.free-page .flb-card--kpi {
  background: linear-gradient(135deg, var(--free-tint-teal) 0%, var(--free-tint-sage) 100%);
  border-color: var(--free-tint-teal-bd);
}
.free-page .flb-card--kpi .flb-icon { color: var(--teal); }
.free-page .flb-card--no {
  background: linear-gradient(135deg, var(--free-tint-amber) 0%, var(--free-tint-coral) 100%);
  border-color: var(--free-tint-amber-bd);
}
.free-page .flb-card--no .flb-icon { color: var(--coral); }
.free-page .flb-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--fuchsia);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.free-page .flb-text { flex: 1 1 auto; min-width: 0; }
.free-page .flb-headline {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.free-page .flb-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.free-page .flb-cta {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: var(--text-primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 10px var(--space-4);
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.free-page .flb-cta:hover {
  background: var(--black);
  transform: translateY(-1px);
}

/* Preview-pane card stack (replaces inline flex/gap styles). */
.free-page #explorePreviewCards {
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- Infinite-scroll sentinel + status ----------------- */
.free-sentinel { height: 1px; }
.free-list-status {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.free-list-status.is-loading::after { content: 'Loading more…'; }
.free-list-status.is-end::after     { content: ''; }

/* Visually hidden (a11y). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Misc page-meta line in the title row. */
.mw-page-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-left: 0.75rem;
}

/* ---------- Responsive --------------------------------------- */
@media (max-width: 720px) {
  .free-page .flb-card { flex-wrap: wrap; padding: 14px; }
  .free-page .flb-cta  { width: 100%; justify-content: center; margin-top: var(--space-1); }
}

@media (max-width: 640px) {
  .free-page .free-search-pill {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: var(--space-2) 10px;
  }
  .free-page .free-search-sep { display: none; }
  .free-page .free-search-input {
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid var(--border-primary);
    margin-top: var(--space-1);
  }
  .free-page .free-tabs-filters .filter-select { flex: 1 1 0; }
}