/* ════════════════════════════════════════════════
       PRESS LOGO BAR - scoped styles
       Structure: .press-bar-section → .press-bar-container → content
       Inherits the dark .vehicles-section design system tokens
       with a #1E1F17 background variant.
       ════════════════════════════════════════════════ */


    /* scoped reset - only inside this section */
    .press-bar-section,
    .press-bar-section *,
    .press-bar-section *::before,
    .press-bar-section *::after {
      box-sizing: border-box;
    }

    /* ── SECTION (full-width) ── */
    .press-bar-section {
      width: 100%;
      background: #1E1F17;
      color: #F3EFE3;
      border-top: 1px solid #2A2B24;
      border-bottom: 1px solid #2A2B24;
      padding: 56px 0;
      overflow: hidden;
      font-family: "Bitter", Georgia, serif;
      position: relative;
      z-index: 2;
    }

    /* ── CONTAINER ── */
    .press-bar-container {
      width: 100%;
      max-width: 1216px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* ── INNER CONTENT - centered column ── */
    .press-bar-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Eyebrow with flanking dashes ──
       vehicles-section eyebrow tokens: JetBrains Mono / 12.5px /
       letter-spacing 3.12px / #5DBA63... but the screenshot shows
       a cream/light eyebrow without green tint. Using #A8A393
       (the system's muted text color) for the dash + label. */
    .press-bar-eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-family: "JetBrains Mono", monospace;
      font-size: 12.5px;
      letter-spacing: 3.12px;
      color: #A8A393;
      text-transform: uppercase;
      margin: 0 0 64px;
      max-width: 100%;
    }
    .press-bar-eyebrow-dash {
      width: 28px;
      height: 1px;
      background: #A8A393;
      flex-shrink: 0;
    }
    .press-bar-eyebrow-text {
      white-space: nowrap;
    }

    /* ── Logo row ── */
    .press-bar-logos {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 32px;
      align-items: center;
      justify-items: center;
    }

    /* ── Uniform logo placeholder ──
       Every logo lives inside a fixed-aspect cell so swapping in real
       imagery doesn't shift the layout. Replace `src` of the inner img. */
    .press-bar-logo {
      width: 100%;
      max-width: 160px;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.85;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .press-bar-logo:hover {
      opacity: 1;
      transform: translateY(-2px);
    }

    .press-bar-logo img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }

    /* Visible placeholder fill until real logos are dropped in */
    .press-bar-logo-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #2A2B24;
      background: rgba(243,239,227,0.02);
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: 1.5px;
      color: #54524A;
      text-transform: uppercase;
      text-align: center;
      padding: 4px 8px;
    }

    /* ════════════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
       (matches vehicles-section system: 960px, 640px)
       ════════════════════════════════════════════════ */

    /* Tablet (≤960px) - 3 logos per row */
    @media (max-width: 960px) {
      .press-bar-section {
        padding: 72px 0;
      }
      .press-bar-container {
        padding: 0 24px;
      }
      .press-bar-eyebrow {
        margin-bottom: 48px;
        gap: 12px;
      }
      .press-bar-eyebrow-dash {
        width: 20px;
      }
      .press-bar-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 24px;
      }
      .press-bar-logo {
        max-width: 140px;
      }
    }

    /* Mobile (≤640px) - 2 logos per row */
    @media (max-width: 640px) {
      .press-bar-section {
        padding: 56px 0;
      }
      .press-bar-container {
        padding: 0 20px;
      }
      .press-bar-eyebrow {
        font-size: 11px;
        letter-spacing: 2.5px;
        margin-bottom: 36px;
        gap: 10px;
      }
      .press-bar-eyebrow-dash {
        width: 16px;
      }
      .press-bar-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
      }
      .press-bar-logo {
        max-width: 120px;
      }
      .press-bar-logo-placeholder {
        font-size: 9px;
        letter-spacing: 1.2px;
      }
    }