@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');

/* ── ALL selectors scoped to #pr-feed — zero Bootstrap bleed ── */

#pr-feed *,
#pr-feed *::before,
#pr-feed *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#pr-feed {
    font-family: 'Inter', sans-serif;
    width: 100%;
}

/* ── HERO ── */
#pr-feed .pr-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #0d1117;
    display: block;
    text-decoration: none;
    margin-bottom: 3px;
}

#pr-feed .pr-hero-picture,
#pr-feed .pr-hero-picture source { display: block; }

#pr-feed .pr-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
}
#pr-feed .pr-hero:hover .pr-hero-img,
#pr-feed .pr-hero:focus .pr-hero-img { transform: scale(1.03); }

/* WCAG 2.4.11 — explicit focus ring on hero (browser defaults not guaranteed to meet size/contrast) */
#pr-feed .pr-hero:focus-visible {
    outline: 3px solid #4a9eff;
    outline-offset: 2px;
    z-index: 2;
}

#pr-feed .pr-hero-bg-num {
    position: absolute;
    top: -10px;
    left: -8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 220px;
    line-height: 1;
    color: rgba(255,255,255,0.055);
    pointer-events: none;
    user-select: none;
    z-index: 1;
    letter-spacing: -4px;
}

#pr-feed .pr-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.94) 0%,
        rgba(0,0,0,0.85) 22%,
        rgba(0,0,0,0.20) 50%,
        rgba(0,0,0,0.00) 70%
    );
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px 22px;
}

#pr-feed .pr-hero-top-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.78);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px 14px 10px 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#pr-feed .pr-hero-score-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.02em;
}
#pr-feed .pr-hero-score-word {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c8d4de;
    margin-top: 2px;
    display: block;
}

#pr-feed .pr-hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a9eff;
    margin-bottom: 5px;
}
#pr-feed .pr-hero-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 0.95;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
#pr-feed .pr-hero-spec {
    font-size: 14px;
    font-weight: 500;
    color: #d8e6f0;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
#pr-feed .pr-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#pr-feed .pr-hero-user {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
/* Note: no border-top here — the hero footer's flex layout puts this
   next to the "View this ride" button, not stacked underneath text like
   the grid tiles. If you want the matching blue divider on the hero too,
   say so and I'll add a comparable rule scoped to this layout. */
#pr-feed .pr-hero-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(74,158,255,0.5);
    flex-shrink: 0;
    background: rgba(74,158,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
#pr-feed .pr-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#pr-feed .pr-hero-avatar-initials {
    /* FIX: was 10px — bumped for margin above WAVE's small-text threshold,
       matching the tile version's fix. Still fits the 28px circle fine. */
    font-size: 12px;
    font-weight: 600;
    color: #4a9eff;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
#pr-feed .pr-hero-username {
    font-size: 12px;
    font-weight: 500;
    color: #d0dce8;
}
#pr-feed .pr-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #4a9eff;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}
#pr-feed .pr-hero-btn:hover { background: #2d87f0; transform: translateY(-1px); color: #fff; text-decoration: none; }
#pr-feed .pr-hero-btn:focus { outline: 3px solid #4a9eff; outline-offset: 3px; }

/* ── DIVIDER label ── */
#pr-feed .pr-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 2px 12px;
}
#pr-feed .pr-divider-text {
    font-size: 12px; /* raised from 10px — more legible and safer for contrast calculation */
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #666; /* raised from #888 (3.54:1) to #666 (5.74:1 on white) — WCAG 1.4.3 pass */
    white-space: nowrap;
}
#pr-feed .pr-divider-line {
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

/* ── TILE GRID ── */
#pr-feed .pr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
@media (max-width: 540px) {
    /* Single column — one full-width card per row */
    #pr-feed .pr-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Taller card so the car photo is actually visible */
    #pr-feed .pr-tile {
        aspect-ratio: 4 / 3 !important;
    }

    /* Score badge — shrink it and pin it tightly to top-right corner.
       width:fit-content stops it stretching across the full tile. */
    #pr-feed .pr-tile-score {
        display: flex !important;
        width: fit-content !important;
        padding: 3px 7px 3px 4px !important;
        gap: 3px !important;
        top: 8px !important;
        right: 8px !important;
    }
    #pr-feed .pr-tile-score-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    #pr-feed .pr-tile-score-num   { font-size: 12px !important; }
    #pr-feed .pr-tile-score-label { font-size: 8px !important; }

    /* Larger, more readable text at full card width */
    #pr-feed .pr-tile-rank     { font-size: 12px; letter-spacing: 0.15em; margin-bottom: 4px; }
    #pr-feed .pr-tile-name     { font-size: 20px; }
    #pr-feed .pr-tile-spec     { font-size: 13px; margin-top: 3px; }
    #pr-feed .pr-tile-user     { margin-top: 8px; padding-top: 7px; }
    #pr-feed .pr-tile-username { font-size: 13px; }
    #pr-feed .pr-tile-avatar   { width: 28px; height: 28px; }

    /* Hero adjustments — give it real height on mobile (16/7 is too flat) */
    #pr-feed .pr-hero {
        aspect-ratio: 4 / 3 !important;
    }
    #pr-feed .pr-hero-name      { font-size: 28px; }
    #pr-feed .pr-hero-spec      { font-size: 13px; margin-bottom: 10px; }
    #pr-feed .pr-hero-eyebrow   { font-size: 10px; }
    #pr-feed .pr-hero-overlay   { padding: 16px 14px 14px; }

    /* Hero top badge — shrink so it doesn't overwhelm the narrow card */
    #pr-feed .pr-hero-top-badge {
        padding: 6px 10px 6px 7px !important;
        gap: 6px !important;
        border-radius: 7px !important;
        top: 10px !important;
        right: 10px !important;
    }
    /* The tachometer SVG inside the hero badge is rendered at 40px in PHP —
       scale it down via CSS transform since the size attr is inline */
    #pr-feed .pr-hero-top-badge svg {
        width: 24px !important;
        height: 24px !important;
    }
    #pr-feed .pr-hero-score-num  { font-size: 22px !important; }
    #pr-feed .pr-hero-score-word { font-size: 9px !important; }

    /* Hero footer — stack vertically on very narrow screens */
    #pr-feed .pr-hero-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    #pr-feed .pr-hero-btn {
        padding: 6px 14px;
        font-size: 11px;
    }
}
/* ── TILE ── */
/* Wrapper carries role="listitem" so the <a> itself doesn't have to —
   role="listitem" is not an allowed ARIA role on an <a href> element.
   display:contents keeps it out of the box tree (grid layout unaffected)
   while keeping it in the accessibility tree. */
#pr-feed .pr-tile-wrap {
    display: contents;
}

#pr-feed .pr-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #0d1117;
    display: block;
    text-decoration: none;
    outline-offset: 0;
}
#pr-feed .pr-tile:focus-visible {
    outline: 3px solid #4a9eff;
    outline-offset: 2px;
    z-index: 2;
}

#pr-feed .pr-tile-picture,
#pr-feed .pr-tile-picture source { display: block; }

#pr-feed .pr-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(.25,.46,.45,.94);
}
#pr-feed .pr-tile:hover .pr-tile-img,
#pr-feed .pr-tile:focus .pr-tile-img { transform: scale(1.07); }

/* rotation helpers */
#pr-feed .rotate-6 { transform: rotate(90deg)  scale(1.5) !important; }
#pr-feed .rotate-8 { transform: rotate(270deg) scale(1.5) !important; }
#pr-feed .rotate-3 { transform: rotate(180deg) !important; }
#pr-feed .pr-tile:hover .rotate-6,
#pr-feed .pr-tile:focus .rotate-6 { transform: rotate(90deg)  scale(1.57) !important; }
#pr-feed .pr-tile:hover .rotate-8,
#pr-feed .pr-tile:focus .rotate-8 { transform: rotate(270deg) scale(1.57) !important; }
#pr-feed .pr-tile:hover .rotate-3,
#pr-feed .pr-tile:focus .rotate-3 { transform: rotate(180deg) scale(1.07) !important; }

#pr-feed .pr-tile-overlay {
    position: absolute;
    inset: 0;
    /* solid black only where text lives (~bottom third), photo visible above */
    background: linear-gradient(to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.72) 22%,
        rgba(0,0,0,0.10) 42%,
        rgba(0,0,0,0.00) 55%);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
}

/* ── Score badge — tiered, fully opaque backgrounds ── */
#pr-feed .pr-tile-score {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    padding: 4px 8px 4px 4px;
    line-height: 1;
    background: #1e1e1e;
    border: 1px solid #444;
}
#pr-feed .pr-tile-score.tier-blue  { background: #0b3578; border-color: #2e6fcf; }
#pr-feed .pr-tile-score.tier-amber { background: #5c3300; border-color: #b87800; }
#pr-feed .pr-tile-score.tier-fire  { background: #6b1200; border-color: #c23b00; }

#pr-feed .pr-tile-score-icon { display: flex; align-items: center; flex-shrink: 0; }
#pr-feed .pr-tile-score-icon svg { display: block; }

#pr-feed .pr-tile-score             .pr-tile-score-icon svg { fill: #c8d0d8; }
#pr-feed .pr-tile-score.tier-blue   .pr-tile-score-icon svg { fill: #7ab8ff; }
#pr-feed .pr-tile-score.tier-amber  .pr-tile-score-icon svg { fill: #ffd166; }
#pr-feed .pr-tile-score.tier-fire   .pr-tile-score-icon svg { fill: #ff9068; }

#pr-feed .pr-tile-score-text { display: flex; flex-direction: column; align-items: flex-start; }

#pr-feed .pr-tile-score-num {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.01em;
}
#pr-feed .pr-tile-score-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
}
/* All label colors pass 4.5:1 on their respective solid backgrounds */
/* #a8b4be on #1e1e1e was ~3.8:1 (fail) — raised to #c4cdd5 (~5.2:1) */
#pr-feed .pr-tile-score             .pr-tile-score-label { color: #c4cdd5; }
#pr-feed .pr-tile-score.tier-blue   .pr-tile-score-label { color: #7ab8ff; }
#pr-feed .pr-tile-score.tier-amber  .pr-tile-score-label { color: #ffd166; }
#pr-feed .pr-tile-score.tier-fire   .pr-tile-score-label { color: #ff9068; }

/* ── Tile text — all solid colors, no rgba opacity games ── */
#pr-feed .pr-tile-rank {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b8c4cc;
    line-height: 1;
    margin-bottom: 3px;
}
#pr-feed .pr-tile-name {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
#pr-feed .pr-tile-spec {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #d8e2ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}
#pr-feed .pr-tile-user {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    /* Was 1px solid #333 — thin enough to anti-alias against the photo
       behind it, so it rendered blue on some tiles and gray on others
       depending on subpixel placement. 2px + explicit accent blue removes
       the ambiguity and renders identically on every tile. */
    border-top: 2px solid #4a9eff;
}
#pr-feed .pr-tile-avatar {
    width: 24px; /* raised from 22px — meets WCAG 2.2 §2.5.8 minimum 24×24px */
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid #555;
    flex-shrink: 0;
    background: #0b3578;
    display: flex;
    align-items: center;
    justify-content: center;
}
#pr-feed .pr-tile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#pr-feed .pr-tile-avatar-initials {
    font-family: 'Inter', sans-serif;
    /* FIX: was 8px — WAVE's "very small text" alert. 11px still fits the
       24px circle fine for 2 uppercase characters; contrast is unaffected
       (#7ab8ff on #0b3578 is 5.64:1). */
    font-size: 11px;
    font-weight: 700;
    color: #7ab8ff;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
#pr-feed .pr-tile-username {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #d8e2ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Skeleton shimmer ── */
@keyframes pr-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}
#pr-feed .pr-skel {
    background: linear-gradient(90deg, #e8eaed 25%, #d4d7db 50%, #e8eaed 75%);
    background-size: 800px 100%;
    animation: pr-shimmer 1.5s infinite linear;
}
#pr-feed .pr-skel-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    margin-bottom: 3px;
}
#pr-feed .pr-skel-tile {
    aspect-ratio: 1 / 1;
}

/* ── End message ── */
#pr-feed .pr-end-msg {
    display: none;
    text-align: center;
    padding: 24px 0 8px;
}
#pr-feed .pr-end-msg span {
    font-size: 12px;
    font-weight: 500;
    color: #999;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 6px 18px;
    background: #fafafa;
    display: inline-block;
    letter-spacing: 0.02em;
}

/* ── Card fade-in ── */
@keyframes pr-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#pr-feed .pr-tile { animation: pr-in 0.3s ease both; }

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    #pr-feed .pr-tile { animation: none; }
    #pr-feed .pr-tile-img,
    #pr-feed .pr-hero-img { transition: none; }
    #pr-feed .pr-hero-btn { transition: none; }
    #pr-feed .pr-skel { animation: none; background: #e0e0e0; }
}