/*! Built: 2026-01-03 07:54:36 | Source: C:\laragon\www\camunite\css\v5/src/pages/gender.css */
/**
 * CSS-V5 GENDER PAGES
 * Page-only imports (core excluded).
 */
/* === Inlined from: ../../../03-components/hero.css === */
/**
 * HERO SECTION
 * 
 * Hero section with H1, stats, actions - Extracted from assets/css/index-hero.css
 * Used on: index, filter pages, country pages, tags pages
 */

/* ===== INDEX HERO SECTION ===== */
  
  /* Index page background */
  body.index-page {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  [data-theme="dark"] body.index-page {
    background: var(--dark-bg-primary);
    color: var(--text-primary);
  }

  body.index-page a {
    color: var(--index-accent);
  }

  body.index-page a:hover,
  body.index-page a:focus {
    color: var(--index-accent-strong);
  }

  /* Hero Section - Compact vertical spacing */
  .page-hero {
    padding: 0.25rem 0 0.35rem; /* Reduced */
    background: transparent;
    color: var(--text-primary);
  }

  [data-theme="dark"] .page-hero {
    color: rgba(242, 243, 248, 0.95);
  }

  .page-hero__inner {
    margin: 0 auto;
    max-width: var(--max-width-container);
    padding: 0 16px;
    display: grid;
    gap: clamp(0.3rem, 0.6vw, 0.5rem); /* Reduced gap */
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  @media (min-width: 992px) {
    .page-hero__inner {
      grid-template-columns: 1fr auto; /* Content left, stats/meta right */
      grid-template-rows: auto auto;   /* Row 1: header+stats, Row 2: intro full width */
      align-items: start;
      column-gap: clamp(0.65rem, 1.25vw, 1rem);
      row-gap: 0.2rem;
    }

    /* Use display:contents so children become direct grid items */
    .page-hero__copy {
      display: contents;
    }

    /* H1 in row 1, column 1 */
    .page-hero__heading-primary,
    .page-hero__heading-secondary {
      grid-column: 1;
      grid-row: 1;
    }

    /* Intro in row 2, column 1 only - avoid overlap with actions in column 2 */
    .page-hero__intro {
      grid-column: 1;
      grid-row: 2;
      min-width: 0; /* Allow text to wrap, don't overflow into actions */
    }

    /* Stats aligned right in row 1 */
    .page-hero__stats {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: start;
      margin: 0;
    }

    /* Meta (page count, etc.) aligned right in row 1 */
    .page-hero__meta {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: start;
    }

    .page-hero__actions {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
      align-self: end; /* Align to bottom of row - flush with intro text baseline */
      margin-top: 0;
    }

    .page-hero__stat:last-child {
      padding-bottom: 0;
    }
  }

  /* Hero Headings - Compact */
  .page-hero__heading-primary,
  .page-hero__heading-secondary {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.35rem; /* Reduced from 1rem */
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .page-hero__heading-secondary {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
  }

  .page-hero__page-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--index-accent) 15%, transparent);
    color: var(--index-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  /* Hero Intro Text - Compact */
  .page-hero__intro {
    margin: 0; /* No bottom margin - gap handles spacing */
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
  }

  [data-theme="dark"] .page-hero__intro {
    color: #e1e5f0;
  }

  .page-hero__intro p {
    margin: 0 0 1rem;
  }

  .page-hero__intro p:last-child {
    margin-bottom: 0;
  }

  /* Hero Actions (Buttons) */
  .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .page-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: none;
  }

  .page-hero__button::after {
    content: "\203A";
    font-size: 1.05rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .page-hero__button:hover::after,
  .page-hero__button:focus::after {
    transform: translateX(4px);
  }

  .page-hero__button--primary,
  .page-hero__button--ghost {
    border: none;
    background: transparent;
    color: var(--index-accent);
  }

  .page-hero__button--primary:hover,
  .page-hero__button--primary:focus,
  .page-hero__button--ghost:hover,
  .page-hero__button--ghost:focus {
    color: var(--index-accent-strong);
  }

  /* Hero Stats - Compact */
  .page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem; /* Tighter gaps */
    justify-content: flex-end;
  }

  .page-hero__stat {
    padding: 0.1rem 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  @media (min-width: 992px) {
    .page-hero__stat {
      position: relative;
      padding-left: 0.75rem;
    }
    .page-hero__stat::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 1px;
      background: rgba(255, 255, 255, 0.12);
    }
    .page-hero__stat:first-child::before {
      display: none;
    }
  }

  .page-hero__stat-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.15rem;
    color: var(--text-tertiary);
  }

  [data-theme="dark"] .page-hero__stat-label {
    color: rgba(225, 229, 240, 0.75);
  }

  .page-hero__stat-value {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-weight: var(--font-weight-bold);
    color: var(--index-accent-strong);
  }

  /* Hero Meta (Summary text) - Compact, right-aligned */
  .page-hero__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline; /* Align all children on same baseline */
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: right;
    justify-content: flex-end;
  }

  /* When inside meta, reset summary to simple inline */
  .page-hero__meta .results-head__summary {
    display: inline;
    border: none;
    padding: 0;
    font-size: inherit;
  }

  .page-hero__meta .results-head__summary strong {
    font-size: 1rem;
  }

  .page-hero__meta .results-head__summary-page {
    font-size: 0.8rem;
    opacity: 0.7;
  }

  @media (min-width: 992px) {
    .page-hero__meta {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      margin-top: 0;
    }
  }

  /* Inline search on filter pages */
  .page-hero__search {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
  }

  .page-hero__search input[type="search"] {
    flex: 1 1 320px;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  .page-hero__search input[type="search"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--index-accent) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--index-accent) 18%, transparent);
  }

  /* Mobile Responsive */
  @media (max-width: 767px) {
    .page-hero {
      padding: 0.5rem 0 0.6rem;
    }

    .page-hero__actions {
      flex-direction: row; /* Keep buttons side by side on mobile */
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .page-hero__button {
      flex: 1 1 auto; /* Allow buttons to share space */
      min-width: 0; /* Allow shrinking */
      font-size: 0.8rem;
      padding: 0.5rem 0.75rem;
      white-space: nowrap;
      justify-content: center;
    }
    
  }

  /* Hide stats when layout switches from 2-col to stacked - no intermediate state */
  @media (max-width: 991px) {
    .page-hero__stats {
      display: none !important;
    }
  }

  @media (max-width: 575px) {
    .page-hero__inner {
      padding: 0 0.75rem;
    }

    .page-hero__stat {
      padding: 0.25rem 0;
    }
  }

  /* ===== STATIC PAGES HERO (Centered, no stats) ===== */
  body.static-page .page-hero,
  body.affiliates-page .page-hero,
  body.policy-page .page-hero,
  body.dmca-page .page-hero,
  body.faq-page .page-hero {
    padding: var(--spacing-xl) 0;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-default);
  }

  body.static-page .page-hero__inner,
  body.affiliates-page .page-hero__inner,
  body.policy-page .page-hero__inner,
  body.dmca-page .page-hero__inner,
  body.faq-page .page-hero__inner {
    display: block;
    max-width: var(--max-width-narrow);
    text-align: center;
  }

  body.static-page .page-hero__copy,
  body.affiliates-page .page-hero__copy,
  body.policy-page .page-hero__copy,
  body.dmca-page .page-hero__copy,
  body.faq-page .page-hero__copy {
    text-align: center;
  }

  body.static-page .page-hero h1,
  body.affiliates-page .page-hero h1,
  body.policy-page .page-hero h1,
  body.dmca-page .page-hero h1,
  body.faq-page .page-hero h1 {
    margin: 0 0 var(--spacing-sm);
  }

  body.static-page .page-hero__subtitle,
  body.affiliates-page .page-hero__subtitle,
  body.policy-page .page-hero__subtitle,
  body.dmca-page .page-hero__subtitle,
  body.faq-page .page-hero__subtitle {
    max-width: 600px;
    margin: 0 auto;
  }

  /* ===== RESULTS HEAD (Summary Banner) ===== */
  
  .results-head {
    margin: 0.5rem 0 0.75rem; /* Reduced for tighter layout */
  }

  .results-head__inner {
    margin: 0 auto;
    max-width: var(--max-width-content);
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  @media (min-width: 768px) {
    .results-head__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
  }

  .results-head__summary {
    display: inline-flex;
    align-items: baseline; /* All children align on text baseline */
    flex-wrap: wrap;
    gap: 0.25rem;
    border-left: 3px solid var(--index-accent);
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.4;
  }

  [data-theme="dark"] .results-head__summary {
    color: var(--text-primary);
  }

  .results-head__summary strong {
    color: var(--index-accent-strong);
    font-weight: 700;
    font-size: 1rem;
  }

  .results-head__summary-page {
    display: inline;
    margin-left: 0.25rem;
    padding: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.85rem; /* Slightly larger to match better */
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.75;
  }

  /* ===== BREADCRUMBS ===== */
  
  .index-breadcrumbs {
    display: block;
  }

  .index-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  [data-theme="dark"] .index-breadcrumbs {
    color: rgba(231, 233, 242, 0.75);
  }

  .index-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .index-breadcrumbs li + li::before {
    content: '›';
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  [data-theme="dark"] .index-breadcrumbs li + li::before {
    color: rgba(231, 233, 242, 0.45);
  }

  .index-breadcrumbs a {
    color: var(--index-accent);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .index-breadcrumbs a:hover,
  .index-breadcrumbs a:focus {
    color: var(--index-accent-strong);
  }

  /* ===== TIMESTAMP (below SEO text, above footer) ===== */
  
  .results__timestamp {
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    text-align: left;
    margin: var(--section-gap) 0;
    padding: 0;
  }
  
  .results__timestamp strong,
  .results__timestamp b {
    font-weight: 400; /* Prevent bold */
  }

  [data-theme="dark"] .results__timestamp {
    color: rgba(231, 233, 242, 0.65);
  }

  /* ===== CONTAINER ===== */
  
  .page-container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 16px;
  }

/* ===== RESULTS SECTIONS (Featured models, etc.) ===== */
/* 
 * Spacing Philosophy:
 * - All sections use parent's --section-gap for uniform spacing
 * - Header "belongs" to content below → minimal internal gap
 */

.results-section {
  display: flex;
  flex-direction: column;
  gap: var(--results-header-gap, 0.1rem); /* Minimal gap: header belongs to content below (~1.6px) */
  /* No margin-top - parent's gap handles spacing between sections */
}

/* Section Header Box (Featured Females, etc.) - Compact height */
.results-banner,
.results-section__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  height: 33px;
  padding: clamp(0.1rem, 0.4vw, 0.25rem) clamp(0.84rem, 1.44vw, 1.02rem);
  padding-left: clamp(0.9rem, 1.56vw, 1.26rem);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--section-gap);
  
  /* Volumetric gradient effect - subtle 3D depth */
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 30%),
    linear-gradient(to top, rgba(0, 0, 0, 0.06) 0%, transparent 30%);
}

/* Accent bar on the left - PIXEL PERFECT (covers original border) */
.results-banner::before,
.results-section__header::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 5px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--accent-primary);
  z-index: 1;
}

/* Dark mode - uses token system automatically */
[data-mode="dark"] .results-banner,
[data-mode="dark"] .results-section__header,
[data-theme="dark"] .results-banner,
[data-theme="dark"] .results-section__header {
  background: var(--surface-secondary);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  
  /* Volumetric gradient - white glow on top, dark on bottom */
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 30%),
    linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, transparent 30%);
}

/* H2 / Title inside header - both class and element selector for consistency */
.results-section__header h2,
.results-section__header .results-section__title {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--text-heading);
  line-height: var(--line-height-snug);
  align-self: center; /* Vertical center in flex container */
}

/* Link inside header (e.g., "BROWSE FEMALES") */
.results-section__link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  align-self: center;
}

.results-section__link:hover,
.results-section__link:focus {
  color: var(--text-on-accent);
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Subtitle inside header (right-aligned, single line with ellipsis) */
.results-section__subtitle {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-normal);
  font-style: italic;
  line-height: var(--line-height-snug);
  margin-left: auto; /* Push to right */
  text-align: right;
  max-width: 45%;
  align-self: center;
  /* Single line with ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive: Compact on mobile */
@media (max-width: 768px) {
  .results-section__header {
    flex-direction: row; /* Keep horizontal on mobile */
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    position: relative; /* For stretched link */
  }
  
  .results-section__header h2 {
    font-size: 0.9rem;
  }
  
  .results-section__subtitle {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
    font-size: 0.75rem;
  }
  
  /* Stretch link over entire header on mobile - makes whole header clickable */
  .results-section__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0;
    color: transparent;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 2;
  }
  
  /* Add arrow indicator to H2 on mobile when link exists */
  .results-section__header:has(.results-section__link) h2::after {
    content: " ›";
    font-weight: normal;
    opacity: 0.7;
  }
}


/* === Inlined from: ../../../03-components/spotlight.css === */
/**
 * TOP PERFORMERS SPOTLIGHT - V2.1 (Refined)
 * 
 * Uses IDENTICAL model cards as the main grid.
 * Adds decorative borders with stars for podium effect.
 * 
 * IMPORTANT: This component is COMPLETELY INDEPENDENT of grid-density.
 * All inner elements have forced styles to prevent grid-density interference.
 * 
 * Structure:
 * - .spotlight-podium-section: Main container
 * - .spotlight-podium-grid: Fixed 3-column grid
 * - .spotlight-podium-item: Wrapper with decorative border
 * - .spotlight-podium-card: Contains the standard model card (SMALLER SIZE)
 */

/* ============================================================
   SPOTLIGHT SECTION - Uses same header style as results
   ============================================================ */
.spotlight-podium-section {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.spotlight-podium-section .results-section__header {
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem); /* Tighter spacing to grid */
}

.spotlight-podium-section .results-section__subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* ============================================================
   SPOTLIGHT GRID - Responsive & Centered
   ============================================================ */
.spotlight-podium-grid {
    display: grid;
    /* Auto-fit: fills available space, min 200px per card, max 300px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(0.6rem, 1.5vw, 1rem);
    max-width: 960px; /* Limit max width */
    margin: 0 auto; /* CENTER the grid */
    width: 100%;
}

/* ============================================================
   SPOTLIGHT PODIUM ITEM - Wrapper with decorative border
   ============================================================ */
.spotlight-podium-item {
    position: relative;
    border-radius: var(--radius-lg, 12px);
    padding: 4px;
    background: linear-gradient(135deg, rgba(128,128,128,0.3), rgba(128,128,128,0.1));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spotlight-podium-item:hover {
    transform: translateY(-3px);
}

/* Gold - 1st Place */
.spotlight-podium--gold {
    padding: 5px;
    background: linear-gradient(145deg, #ffd700, #f5b800, #ffc800, #ffdb4d, #ffd700);
    background-size: 200% 200%;
    animation: goldShimmer 3s ease infinite;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        0 3px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 2px rgba(255, 255, 255, 0.4);
}

@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.spotlight-podium--gold:hover {
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.7),
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Silver - 2nd Place */
.spotlight-podium--silver {
    background: linear-gradient(145deg, #e8e8e8, #c0c0c0, #d4d4d4, #b8b8b8, #e0e0e0);
    box-shadow: 
        0 0 15px rgba(192, 192, 192, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.25),
        inset 0 0 2px rgba(255, 255, 255, 0.3);
}

.spotlight-podium--silver:hover {
    box-shadow: 
        0 0 25px rgba(200, 200, 200, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Bronze - 3rd Place */
.spotlight-podium--bronze {
    background: linear-gradient(145deg, #cd7f32, #b87333, #c9822a, #a0522d, #cd7f32);
    box-shadow: 
        0 0 15px rgba(205, 127, 50, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.25),
        inset 0 0 2px rgba(255, 200, 150, 0.3);
}

.spotlight-podium--bronze:hover {
    box-shadow: 
        0 0 25px rgba(205, 127, 50, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 3px rgba(255, 200, 150, 0.4);
}

/* ============================================================
   SPOTLIGHT BADGE - Stars only (LARGER), no text labels
   ============================================================ */
.spotlight-podium-badge {
    position: absolute;
    top: 12px; /* Inside image, not cut off */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.spotlight-podium-stars {
    font-size: 1.4rem; /* LARGER stars */
    line-height: 1;
    letter-spacing: -2px; /* Tighter spacing between stars */
}

.spotlight-podium--gold .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(40, 30, 0, 0.95), rgba(60, 45, 0, 0.95));
    border: 2px solid rgba(255, 215, 0, 0.6);
}

.spotlight-podium--gold .spotlight-podium-stars {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

.spotlight-podium--silver .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(60, 60, 60, 0.95));
    border: 2px solid rgba(192, 192, 192, 0.5);
}

.spotlight-podium--silver .spotlight-podium-stars {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.spotlight-podium--bronze .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(50, 30, 15, 0.95), rgba(70, 40, 20, 0.95));
    border: 2px solid rgba(205, 127, 50, 0.6);
}

.spotlight-podium--bronze .spotlight-podium-stars {
    filter: drop-shadow(0 0 4px rgba(255, 180, 100, 0.6));
}

/* ============================================================
   SPOTLIGHT CARD CONTAINER - SMALLER SIZE
   ============================================================ */
.spotlight-podium-card {
    border-radius: calc(var(--radius-lg, 12px) - 3px);
    overflow: hidden;
    background: var(--card-bg, #1a1a2e);
}

/* Force smaller card size and consistent display */
.spotlight-podium-card > .item {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.spotlight-podium-card .glam {
    border-radius: calc(var(--radius-lg, 12px) - 3px);
    overflow: hidden;
}

/* FORCE uniform card heights in spotlight - using CSS Grid alignment */
.spotlight-podium-grid {
    align-items: stretch !important;
    /* Force equal width columns - prevent content from expanding */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Force all spotlight cards to have same structure */
.spotlight-podium-item {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important; /* Allow flex items to shrink below content size */
    max-width: 100% !important;
    overflow: hidden !important;
}

.spotlight-podium-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.spotlight-podium-card > .item,
.spotlight-podium-card .item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.spotlight-podium-card .glam {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* CRITICAL FIX: Override native aspect-ratio and force fixed height */
/* Ultra-specific selectors to ensure override */
/* Reduced from 4:3 (75%) to ~5:3.5 (70%) for more compact display */
.spotlight-podium-section .spotlight-podium-card .item .glam .image-container,
.spotlight-podium-section .spotlight-podium-card .item .glam .image-container.overflow,
.spotlight-podium-card .item .glam .image-container,
.spotlight-podium-card .item .glam .image-container.overflow {
    aspect-ratio: unset !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 70% !important; /* Slightly shorter than 4:3 */
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.spotlight-podium-section .spotlight-podium-card .image-container > a,
.spotlight-podium-card .item .glam .image-container > a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.spotlight-podium-section .spotlight-podium-card .image-container img,
.spotlight-podium-card .item .glam .image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    max-width: none !important;
    max-height: none !important;
}

/* Card info wrapper - COMPACT for spotlight */
.spotlight-podium-card .card-wrapper {
    flex: 0 0 auto !important; /* Don't grow, stay compact */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0.3rem 0.6rem !important; /* Slightly smaller padding */
    gap: 0.1rem !important;
    min-height: auto !important;
}

/* Compact model info lines */
.spotlight-podium-card .model-info-line {
    gap: 0.3rem !important;
}

.spotlight-podium-card .model-info-line--primary {
    margin-bottom: 0.1rem !important;
}

.spotlight-podium-card .model-info-line--secondary {
    gap: 0.25rem !important;
}

/* ============================================================
   FORCE CONSISTENT DISPLAY - IGNORE GRID-DENSITY
   These rules ensure spotlight cards are NOT affected by 
   the 2/4/6 grid density selector in sidebar
   ============================================================ */
.spotlight-podium-card .card__footer,
.spotlight-podium-card .model-info,
.spotlight-podium-card .glam__info {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Always show country flag in spotlight */
.spotlight-podium-card .country-flag,
.spotlight-podium-card .flag-icon,
.spotlight-podium-card [class*="flag"],
.spotlight-podium-card .model-country img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-height: 14px !important;
}

/* Force country text to always show */
.spotlight-podium-card .country-name,
.spotlight-podium-card .model-country a,
.spotlight-podium-card .glam__country {
    display: inline !important;
    visibility: visible !important;
}

/* Smaller info text for compact display */
.spotlight-podium-card .glam__info {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8rem !important;
}

.spotlight-podium-card .glam__row {
    font-size: 0.75rem !important;
}

.spotlight-podium-card .glam__name {
    font-size: 0.85rem !important;
}

/* Fix for long model names - FORCE truncate with ellipsis */
.spotlight-podium-card .model-info-line--primary {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.spotlight-podium-card .model-info-line--primary .name {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 65% !important; /* Hard limit - reserve space for age */
    overflow: hidden !important;
}

.spotlight-podium-card .model-info-line--primary .name a {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Ensure age stays on same line */
.spotlight-podium-card .model-info-line--primary .model-age,
.spotlight-podium-card .model-info-line--primary .model-gender {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ============================================================
   RESPONSIVE: LARGE SCREENS (> 960px)
   Force exactly 3 columns, centered
   ============================================================ */
@media (min-width: 961px) {
    .spotlight-podium-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 900px;
        margin: 0 auto;
    }
}

/* ============================================================
   RESPONSIVE: MEDIUM SCREENS (601px - 960px)
   3 columns but smaller, still centered
   ============================================================ */
@media (min-width: 601px) and (max-width: 960px) {
    .spotlight-podium-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 0.5rem;
    }
    
    .spotlight-podium-item {
        padding: 3px;
    }
    
    .spotlight-podium--gold {
        padding: 4px;
    }
    
    .spotlight-podium-badge {
        padding: 4px 10px;
    }
    
    .spotlight-podium-stars {
        font-size: 1.2rem;
    }
}

/* ============================================================
   RESPONSIVE: SMALL SCREENS (451px - 600px)
   2 columns stacked, centered
   ============================================================ */
@media (min-width: 451px) and (max-width: 600px) {
    .spotlight-podium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Hide 3rd place on 2-column layout */
    .spotlight-podium-item:nth-child(3) {
        display: none;
    }
    
    .spotlight-podium-item {
        padding: 3px;
    }
    
    .spotlight-podium--gold {
        padding: 4px;
    }
    
    .spotlight-podium-badge {
        padding: 4px 8px;
    }
    
    .spotlight-podium-stars {
        font-size: 1.1rem;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE (< 550px)
   Single column, centered, stacked vertically
   ============================================================ */
@media (max-width: 549px) {
    .spotlight-podium-section {
        margin-bottom: 1.25rem;
    }
    
    /* Force single column layout */
    .spotlight-podium-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    .spotlight-podium-item {
        padding: 3px;
    }
    
    .spotlight-podium--gold {
        padding: 4px;
    }
    
    .spotlight-podium-badge {
        padding: 4px 10px;
        top: 10px; /* Inside image on mobile */
    }
    
    .spotlight-podium-stars {
        font-size: 1.1rem;
    }
    
    .spotlight-podium-card .glam .model-image {
        max-height: 130px !important;
    }
}

/* ============================================================
   RESPONSIVE: VERY SMALL MOBILE (< 350px)
   Even more compact
   ============================================================ */
@media (max-width: 349px) {
    .spotlight-podium-grid {
        max-width: 240px;
    }
    
    .spotlight-podium-stars {
        font-size: 1rem;
    }
    
    .spotlight-podium-badge {
        padding: 3px 6px;
    }
}

/* ============================================================
   ACCESSIBILITY: Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .spotlight-podium-item:hover {
        transform: none;
    }
    
    .spotlight-podium--gold {
        animation: none;
    }
}

/* ============================================================
   LIGHT MODE ADJUSTMENTS
   ============================================================ */
[data-mode="light"] .spotlight-podium-badge,
:root:not([data-mode="dark"]) .spotlight-podium-badge {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

[data-mode="light"] .spotlight-podium--gold .spotlight-podium-badge,
:root:not([data-mode="dark"]) .spotlight-podium--gold .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(255, 250, 230, 0.98), rgba(255, 245, 210, 0.98));
    border-color: rgba(200, 160, 0, 0.6);
}

[data-mode="light"] .spotlight-podium--gold .spotlight-podium-stars,
:root:not([data-mode="dark"]) .spotlight-podium--gold .spotlight-podium-stars {
    filter: none;
}

[data-mode="light"] .spotlight-podium--silver .spotlight-podium-badge,
:root:not([data-mode="dark"]) .spotlight-podium--silver .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(250, 250, 250, 0.98), rgba(240, 240, 240, 0.98));
    border-color: rgba(150, 150, 150, 0.5);
}

[data-mode="light"] .spotlight-podium--silver .spotlight-podium-stars,
:root:not([data-mode="dark"]) .spotlight-podium--silver .spotlight-podium-stars {
    filter: none;
}

[data-mode="light"] .spotlight-podium--bronze .spotlight-podium-badge,
:root:not([data-mode="dark"]) .spotlight-podium--bronze .spotlight-podium-badge {
    background: linear-gradient(135deg, rgba(255, 245, 235, 0.98), rgba(255, 240, 225, 0.98));
    border-color: rgba(180, 100, 40, 0.6);
}

[data-mode="light"] .spotlight-podium--bronze .spotlight-podium-stars,
:root:not([data-mode="dark"]) .spotlight-podium--bronze .spotlight-podium-stars {
    filter: none;
}

[data-mode="light"] .spotlight-podium-card,
:root:not([data-mode="dark"]) .spotlight-podium-card {
    background: #fff;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .spotlight-podium-section {
        page-break-inside: avoid;
    }
    
    .spotlight-podium-item {
        box-shadow: none;
        border: 2px solid #ccc;
    }
}


/* === Inlined from: ../../../03-components/grid-density.css === */
/**
 * GRID DENSITY CONTROLLER
 * 
 * Allows users to control the number of model cards per row.
 * Persists preference in localStorage.
 * 
 * Options:
 *   - compact (2 cards) - Large thumbnails, fewer per row
 *   - default (4 cards) - Balanced view
 *   - comfortable (6 cards) - More models visible
 * 
 * Usage:
 *   <html data-grid-density="default|compact|comfortable">
 */

/* ===== GRID DENSITY CSS VARIABLES ===== */

:root {
  /* Default grid settings */
  --grid-min-card-width: 240px;
  --grid-gap-x: clamp(0.4rem, 1vw, 0.7rem);
  --grid-gap-y: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* ===== DENSITY: COMPACT (2 per row on desktop) ===== */

[data-grid-density="compact"] {
  --grid-min-card-width: 400px;
}

@media (min-width: 1024px) {
  [data-grid-density="compact"] .results-list,
  [data-grid-density="compact"] .index-results-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  [data-grid-density="compact"] .results-list,
  [data-grid-density="compact"] .index-results-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== DENSITY: DEFAULT (4 per row on desktop) ===== */
/* Content area = viewport - sidebar(~320px) - gaps/padding(~40px) */

[data-grid-density="default"],
:root:not([data-grid-density]) {
  --grid-min-card-width: 220px;
}

/* 1400px+ viewport: ~1040px+ content area → 4 columns */
@media (min-width: 1400px) {
  [data-grid-density="default"] .results-list,
  [data-grid-density="default"] .index-results-list,
  :root:not([data-grid-density]) .results-list,
  :root:not([data-grid-density]) .index-results-list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 1024-1399px viewport: ~680-1040px content area → 3 columns */
@media (min-width: 1024px) and (max-width: 1399px) {
  [data-grid-density="default"] .results-list,
  [data-grid-density="default"] .index-results-list,
  :root:not([data-grid-density]) .results-list,
  :root:not([data-grid-density]) .index-results-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 768-1023px viewport: No sidebar, full width → 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-grid-density="default"] .results-list,
  [data-grid-density="default"] .index-results-list,
  :root:not([data-grid-density]) .results-list,
  :root:not([data-grid-density]) .index-results-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== DENSITY: COMFORTABLE (6 per row on desktop) ===== */
/* NOTE: Account for sidebar width (280-340px) when calculating columns */
/* Content area = viewport - sidebar(~320px) - gaps/padding(~40px) */

[data-grid-density="comfortable"] {
  --grid-min-card-width: 160px;
}

/* 1800px+ viewport: ~1440px content area → 6 columns comfortably */
@media (min-width: 1800px) {
  [data-grid-density="comfortable"] .results-list,
  [data-grid-density="comfortable"] .index-results-list {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* 1500-1799px viewport: ~1140-1440px content area → 5 columns */
@media (min-width: 1500px) and (max-width: 1799px) {
  [data-grid-density="comfortable"] .results-list,
  [data-grid-density="comfortable"] .index-results-list {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* 1280-1499px viewport: ~920-1140px content area → 4 columns */
@media (min-width: 1280px) and (max-width: 1499px) {
  [data-grid-density="comfortable"] .results-list,
  [data-grid-density="comfortable"] .index-results-list {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 1024-1279px viewport: ~680-920px content area → 3 columns */
@media (min-width: 1024px) and (max-width: 1279px) {
  [data-grid-density="comfortable"] .results-list,
  [data-grid-density="comfortable"] .index-results-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 768-1023px viewport: No sidebar, full width → 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-grid-density="comfortable"] .results-list,
  [data-grid-density="comfortable"] .index-results-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== GRID TRANSITION FOR SMOOTH RESIZE ===== */
/* Prevents jarring layout shifts during window resize */

[data-grid-density] .results-list,
[data-grid-density] .index-results-list {
  /* Ensure grid doesn't overflow its container */
  max-width: 100%;
  overflow: hidden;
}

/* ===== MOBILE: Always responsive (ignore density setting) ===== */

@media (max-width: 767px) {
  [data-grid-density] .results-list,
  [data-grid-density] .index-results-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  [data-grid-density] .results-list,
  [data-grid-density] .index-results-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== MOBILE/TABLET: HIDE ICONS (cards are small) ===== */
/* Apply same icon-hiding rules as comfortable (6 columns) on small screens */

@media (max-width: 1023px) {
  /* Hide ALL flag images */
  .results-list .model-location img,
  .results-list .model-country img,
  .results-list .flag-small,
  .results-list img.flag-small,
  .results-list img[src*="flags"],
  .results-list .card-wrapper img[src*="flags"],
  .results-list .model-info-line img,
  .results-list .model-info-line--secondary img {
    display: none !important;
  }

  /* Hide site sprite icon */
  .results-list .site-icon-sprite {
    display: none !important;
  }

  /* Hide site badge on image */
  .results-list .result-site-badge {
    display: none !important;
  }

  /* Hide status badge */
  .results-list .features {
    display: none !important;
  }

  /* Hide gender icons */
  .results-list .model-gender i,
  .results-list .model-gender--secondary i,
  .results-list .model-info-line i.fa,
  .results-list .model-info-line i.fa-solid,
  .results-list .model-info-line i[class*="fa-"] {
    display: none !important;
  }

  /* Reduce font size on mobile */
  .results-list .model-info-line--secondary {
    font-size: 0.72rem;
  }

  .results-list .model-info-line--primary .name a {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  }

  .results-list .model-info-line--primary .model-age {
    font-size: 0.75rem;
  }
}

/* ===== MOBILE/SMALL SCREENS: HIDE ICONS (same as comfortable density) ===== */
/* Cards are small on mobile, hide icons regardless of density setting */

@media (max-width: 991px) {
  /* Hide ALL flag images */
  .results-list .model-location img,
  .results-list .model-country img,
  .results-list .flag-small,
  .results-list img.flag-small,
  .results-list img[src*="flags"],
  .results-list .card-wrapper img[src*="flags"],
  .results-list .model-info-line img,
  .results-list .model-info-line--secondary img {
    display: none !important;
  }

  /* Hide site sprite icon */
  .results-list .site-icon-sprite {
    display: none !important;
  }

  /* Hide site badge on image */
  .results-list .result-site-badge {
    display: none !important;
  }

  /* Hide status badge */
  .results-list .features {
    display: none !important;
  }

  /* Hide gender icons */
  .results-list .model-gender i,
  .results-list .model-gender--secondary i,
  .results-list .model-info-line i.fa,
  .results-list .model-info-line i.fa-solid,
  .results-list .model-info-line i[class*="fa-"] {
    display: none !important;
  }

  /* Smaller text for mobile */
  .results-list .model-info-line--secondary {
    font-size: 0.72rem;
  }
  
  .results-list .model-info-line--primary .name a {
    font-size: clamp(0.75rem, 2.5vw, 0.88rem);
  }
  
  .results-list .model-info-line--primary .model-age {
    font-size: 0.75rem;
  }
}

/* ===== UNIFORM CARD HEIGHTS FOR ALL DENSITIES ===== */
/* Ensures all cards have consistent height regardless of image source size */

/* Force all grid items to same size within each row */
[data-grid-density] .results-list,
[data-grid-density] .index-results-list {
  align-items: stretch; /* Make all items same height per row */
}

/* Grid items need to be uniform */
[data-grid-density] .results-list .item,
[data-grid-density] .index-results-list .item {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Allow shrinking */
}

/* Ensure .glam card fills the item */
[data-grid-density] .results-list .glam,
[data-grid-density] .index-results-list .glam {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Force uniform image container dimensions with FIXED aspect ratio */
/* Modern approach: CSS aspect-ratio (95%+ browser support) */
/* Fallback: HTML width/height attributes on <img> provide intrinsic ratio */
[data-grid-density] .results-list .glam .image-container,
[data-grid-density] .index-results-list .glam .image-container {
  width: 100% !important;
  aspect-ratio: 4 / 3; /* Modern CSS - eliminates padding-bottom hack */
  position: relative !important;
  flex-shrink: 0;
  overflow: hidden;
}

/* Fallback for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
  [data-grid-density] .results-list .glam .image-container,
  [data-grid-density] .index-results-list .glam .image-container {
    height: 0 !important;
    padding-bottom: 75% !important; /* 4:3 = 75% */
  }
}

/* Position image to fill the aspect-ratio container */
[data-grid-density] .results-list .glam .image-container img,
[data-grid-density] .index-results-list .glam .image-container img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top; /* Focus on face/upper body */
}

/* Card wrapper takes remaining space with consistent height */
[data-grid-density] .results-list .card-wrapper,
[data-grid-density] .index-results-list .card-wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 60px; /* Minimum height for text content */
}

/* Compact text for smaller cards in comfortable mode */
[data-grid-density="comfortable"] .results-list .model-info-line--primary .name a {
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
}

[data-grid-density="comfortable"] .results-list .model-info-line--primary .model-age {
  font-size: 0.75rem;
}

[data-grid-density="comfortable"] .results-list .model-info-line--secondary {
  font-size: 0.72rem;
}

/* ===== COMFORTABLE (6 columns): HIDE ICONS TO PREVENT CROWDING ===== */
/* When cards are small, remove icons and keep only text links */
/* IMPORTANT: Scoped to .results-list only to avoid hiding icons elsewhere (e.g., country grid) */

/* Hide flag images ONLY inside model cards */
[data-grid-density="comfortable"] .results-list .model-location img,
[data-grid-density="comfortable"] .results-list .model-country img,
[data-grid-density="comfortable"] .results-list .flag-small,
[data-grid-density="comfortable"] .results-list img.flag-small,
[data-grid-density="comfortable"] .results-list img[src*="flags"],
[data-grid-density="comfortable"] .results-list .card-wrapper img[src*="flags"],
[data-grid-density="comfortable"] .results-list .model-info-line img,
[data-grid-density="comfortable"] .results-list .model-info-line--secondary img {
  display: none !important;
}

/* Hide site sprite icon - only in model cards */
[data-grid-density="comfortable"] .results-list .site-icon-sprite {
  display: none !important;
}

/* Hide site badge on image (old structure) - only in model cards */
[data-grid-density="comfortable"] .results-list .result-site-badge {
  display: none !important;
}

/* Hide status badge (old structure) - only in model cards */
[data-grid-density="comfortable"] .results-list .features {
  display: none !important;
}

/* Hide gender icons (fa-venus, fa-mars, etc.) - only in model cards */
[data-grid-density="comfortable"] .results-list .model-gender i,
[data-grid-density="comfortable"] .results-list .model-gender--secondary i,
[data-grid-density="comfortable"] .results-list .model-info-line i.fa,
[data-grid-density="comfortable"] .results-list .model-info-line i.fa-solid,
[data-grid-density="comfortable"] .results-list .model-info-line i[class*="fa-"] {
  display: none !important;
}

/* Ensure site badge positioning works with absolute image */
[data-grid-density] .results-list .result-site-badge,
[data-grid-density] .index-results-list .result-site-badge {
  z-index: 2;
}

/* ===== GRID DENSITY CONTROLLER UI ===== */

.grid-density-control {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

.grid-density-control__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.grid-density-control__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.grid-density-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--border-default);
  background: var(--chip-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.grid-density-btn:hover {
  background: var(--overlay-medium);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.grid-density-btn.is-active {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
  color: var(--accent-primary);
}

.grid-density-btn svg {
  width: 14px;
  height: 14px;
}

/* Grid icon patterns */
.grid-density-btn__icon {
  display: grid;
  gap: 1px;
  width: 14px;
  height: 10px;
}

.grid-density-btn__icon span {
  background: currentColor;
  border-radius: 1px;
}

/* 2-column icon */
.grid-density-btn[data-density="compact"] .grid-density-btn__icon {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 4-column icon */
.grid-density-btn[data-density="default"] .grid-density-btn__icon {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 6-column icon */
.grid-density-btn[data-density="comfortable"] .grid-density-btn__icon {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* ===== SIDEBAR INTEGRATION ===== */

.sidebar__section--grid-density {
  padding-bottom: var(--spacing-sm);
}

.sidebar__section--grid-density .sidebar__heading {
  margin-bottom: var(--spacing-sm);
}

/* Grid density buttons inside sidebar - single row with 3 buttons */
.sidebar__section--grid-density .grid-density-control__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.sidebar__section--grid-density .grid-density-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: var(--radius-full);
  background: var(--chip-bg);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="dark"] .sidebar__section--grid-density .grid-density-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(242, 243, 248, 0.78);
}

.sidebar__section--grid-density .grid-density-btn.is-active,
.sidebar__section--grid-density .grid-density-btn:hover,
.sidebar__section--grid-density .grid-density-btn:focus {
  background: color-mix(in srgb, var(--index-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--index-accent) 65%, transparent);
  color: var(--index-accent);
}

/* ===== HIDE GRID DENSITY IN MOBILE BOTTOM SHEET ===== */
/* Grid density doesn't make sense on mobile - always responsive */
.bottom-sheet .sidebar__section--grid-density {
  display: none !important;
}

/* ===== TOOLTIP ON HOVER ===== */

.grid-density-btn[data-density]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  pointer-events: none;
  z-index: 10;
}

.grid-density-btn[data-density]:hover::after {
  opacity: 1;
  visibility: visible;
}