/* ==========================================================================
 * Homepage Pulse Feed
 * Bento grid + hero ticker. Lives just under the hero on the homepage.
 * ========================================================================== */

.pulse {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 28px 0 32px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #041E42 0%, #052348 100%);
    border-top: 1px solid rgba(71, 199, 252, 0.10);
    border-bottom: 1px solid rgba(71, 199, 252, 0.10);
}

/* Inherit .container width from the site stylesheet (1184px max
 * with up to 2rem padding each side) so the Pulse content area
 * matches every other section on the page. */

/* 3-column grid: arrows-left (empty for balance) | title centered | arrows-right.
 * The empty left column matches the right column width so the title is
 * truly centered, not visually pushed left by the arrows. */
.pulse__header {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    align-items: baseline;
    gap: 6px 24px;
    margin-bottom: 16px;
    text-align: center;
}

.pulse__header > div:first-child {
    grid-column: 2;
    text-align: center;
}

.pulse__nav {
    grid-column: 3;
    justify-self: end;
}

.pulse__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
}

.pulse__subtitle {
    color: #AAB7CC;
    font-size: 0.95rem;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* --- Horizontal scroller layout --- *
 * 4 equal cards per page on desktop, scroll-snap to advance to the
 * next 4. Arrows in the header scroll by one page. Mobile collapses
 * to 1.3 cards visible so the next one peeks. */

.pulse__viewport {
    position: relative;
    overflow: hidden;
    /* Fade cards at the horizontal edges so they appear to scroll off
     * into the section background, while the section's top/bottom
     * borders continue uninterrupted to the viewport edge. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.pulse__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 14px) / 4);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.pulse__cards::-webkit-scrollbar { display: none; }

.pulse__cards > .pulse-card {
    scroll-snap-align: start;
}

/* --- Card base --- */

.pulse-card {
    display: flex;
    flex-direction: column;
    background: #0A2A55;
    border: 1px solid rgba(71, 199, 252, 0.15);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    min-height: 100%;
}

.pulse-card:hover,
.pulse-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(71, 199, 252, 0.55);
    box-shadow: 0 8px 24px rgba(4, 30, 66, 0.50), 0 0 0 1px rgba(71, 199, 252, 0.25);
    outline: none;
    text-decoration: none;
}

.pulse-card__media {
    position: relative;
    background: #041E42;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.pulse-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.pulse-card:hover .pulse-card__media img {
    transform: scale(1.04);
}

.pulse-card__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 128, 0, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    text-indent: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.pulse-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
}

.pulse-card__badge {
    align-self: flex-start;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(71, 199, 252, 0.12);
    color: #47C7FC;
    border: 1px solid rgba(71, 199, 252, 0.30);
    font-weight: 600;
}

.pulse-card__title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pulse-card__excerpt {
    color: #C8D2E4;
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pulse-card__pos {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #FF8000;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
}

.pulse-card__body { position: relative; }

.pulse-card__meta {
    color: #8FA0BD;
    font-size: 0.80rem;
    font-family: 'Inter', sans-serif;
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.pulse-card__driver { color: #47C7FC; font-weight: 600; }
.pulse-card__dot { color: #4A6088; }

/* --- Source colour cues on badges --- */

.pulse-card--src-race-report .pulse-card__badge        { background: rgba(255, 128, 0, 0.12); color: #FF8000; border-color: rgba(255, 128, 0, 0.30); }
.pulse-card--src-youtube-rush .pulse-card__badge,
.pulse-card--src-youtube-gridlife .pulse-card__badge   { background: rgba(255, 0, 0, 0.15);  color: #FF6B6B; border-color: rgba(255, 0, 0, 0.30); }
.pulse-card--src-instagram-rush .pulse-card__badge,
.pulse-card--src-instagram-driver .pulse-card__badge   { background: rgba(228, 64, 95, 0.15); color: #FF8FA8; border-color: rgba(228, 64, 95, 0.35); }
.pulse-card--src-facebook-rush .pulse-card__badge,
.pulse-card--src-facebook-group .pulse-card__badge     { background: rgba(24, 119, 242, 0.15); color: #6FA8FF; border-color: rgba(24, 119, 242, 0.35); }
.pulse-card--src-gridlife .pulse-card__badge           { background: rgba(71, 199, 252, 0.12); color: #47C7FC; border-color: rgba(71, 199, 252, 0.30); }

/* --- Navigation arrows --- */

.pulse__nav {
    display: flex;
    gap: 8px;
}

.pulse__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(71, 199, 252, 0.10);
    color: #47C7FC;
    border: 1px solid rgba(71, 199, 252, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.pulse__nav-btn svg {
    display: block;
}

.pulse__nav-btn:hover {
    background: rgba(71, 199, 252, 0.25);
    color: #fff;
}
.pulse__nav-btn:active { transform: scale(0.94); }
.pulse__nav-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* --- Card-count breakpoints --- *
 * Desktop >= 1200px: 4 per page (default rule above)
 * Medium 900–1199px:  3 per page
 * Tablet 600–899px:   2 per page
 * Mobile < 600px:    1.3 per page (next card peeks)
 */

@media (max-width: 1199px) {
    .pulse__cards {
        grid-auto-columns: calc((100% - 2 * 14px) / 3);
    }
}

@media (max-width: 899px) {
    .pulse__cards {
        grid-auto-columns: calc((100% - 14px) / 2);
    }
}

@media (max-width: 599px) {
    .pulse { padding: 24px 16px; }
    .pulse__cards {
        grid-auto-columns: 78%;
        gap: 10px;
    }
    .pulse__title { font-size: 1.75rem; }
    .pulse-card__body { padding: 12px 14px 14px; }
}

/* ==========================================================================
 * Hero ticker (renders inside the existing hero)
 * ========================================================================== */

.pulse-ticker {
    position: relative;
    background: rgba(4, 30, 66, 0.72);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(71, 199, 252, 0.20);
    border-bottom: 1px solid rgba(71, 199, 252, 0.20);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #DDE6F5;
    font-size: 0.86rem;
    box-sizing: border-box;
    /* Breakout for borders + background; inner content uses the site
       .container rule (same width as every other section). */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    padding: 8px 0;
}

.pulse-ticker__inner-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pulse-ticker__label {
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    color: #FF8000;
    padding: 2px 10px;
    background: rgba(255, 128, 0, 0.12);
    border-radius: 3px;
    border: 1px solid rgba(255, 128, 0, 0.35);
    font-weight: 700;
}

.pulse-ticker__track {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 48px), transparent 100%);
}

.pulse-ticker__inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    padding-left: 16px;
    animation: pulse-ticker-scroll 50s linear infinite;
}

.pulse-ticker:hover .pulse-ticker__inner,
.pulse-ticker:focus-within .pulse-ticker__inner {
    animation-play-state: paused;
}

.pulse-ticker__item {
    display: inline-block;
    color: #DDE6F5;
    text-decoration: none;
}
a.pulse-ticker__item:hover {
    color: #47C7FC;
    text-decoration: underline;
}

@keyframes pulse-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-ticker__inner { animation: none; }
}

.pulse-ticker__sep {
    color: #47C7FC;
    opacity: 0.55;
    font-size: 0.6rem;
}