/* ═══════════════════════════════════════════════
   F1 Stories — Visual Bug Fixes + Performance CSS
   
   Fixes:
   1. Blog card images cropped at fixed heights
   2. Link text underlined during/after load
   3. Layout shift (CLS) during image load
   4. Render-blocking transitions on load
   5. Paint optimization for cards & images
   ═══════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   FIX 1 · IMAGE CROPPING
   
   Problem: .blog-img-container uses height:200px
   and .article-card-img-wrap uses height:190px.
   With object-fit:cover, any image that isn't
   close to 16:9 gets aggressively cropped — faces
   cut off, text in images lost, etc.
   
   Fix: Switch to aspect-ratio so images maintain
   a consistent shape WITHOUT hard-cropping. The
   aspect-ratio property gracefully degrades in
   older browsers (falls back to the old height).
   ───────────────────────────────────────────── */

/* Homepage blog preview cards */
.blog-img-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    height: auto;            /* override the fixed 200px */
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;   /* bias toward top — better for F1 car/driver shots */
    transition: transform 0.5s ease;
}

/* Blog index page cards */
.article-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    height: auto;            /* override the fixed 190px */
}

.article-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* Article page — related article cards */
.related-article-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;            /* override the fixed 160px */
    object-fit: cover;
    object-position: center 20%;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .blog-img-container  { height: 200px; }
    .article-card-img-wrap { height: 190px; }
    .related-article-card img { height: 160px; }
}

/* Mobile: slightly taller ratio for readability */
@media (max-width: 576px) {
    .blog-img-container,
    .article-card-img-wrap {
        aspect-ratio: 3 / 2;
    }
}


/* ─────────────────────────────────────────────
   FIX 2 · TEXT UNDERLINE ON LINKS
   
   Problem: Blog cards are wrapped in <a> tags.
   Before blog-styles.css loads (or if specificity
   loses), the browser's default a { text-decoration:
   underline } shows through — titles, excerpts,
   and meta text all appear underlined.
   
   Fix: Apply text-decoration:none with higher
   specificity and on all child elements. Also
   prevent color inheritance from default <a> blue.
   ───────────────────────────────────────────── */

/* Homepage blog card links */
a.blog-card-link,
a.blog-card-link:link,
a.blog-card-link:visited,
a.blog-card-link:hover,
a.blog-card-link:active,
a.blog-card-link *,
a.blog-card-link:link *,
a.blog-card-link:visited * {
    text-decoration: none;
}

/* Blog index article card links */
a.article-card,
a.article-card:link,
a.article-card:visited,
a.article-card:hover,
a.article-card:active,
a.article-card *,
a.article-card:link *,
a.article-card:visited * {
    text-decoration: none;
}

/* Related article card links */
a.related-card-link,
a.related-card-link:link,
a.related-card-link:visited,
a.related-card-link:hover,
a.related-card-link:active,
a.related-card-link *,
a.related-card-link:link *,
a.related-card-link:visited * {
    text-decoration: none;
}

/* Inherit proper colors instead of default link blue */
a.blog-card-link       { color: inherit; }
a.article-card         { color: inherit; }
a.related-card-link    { color: inherit; }


/* ─────────────────────────────────────────────
   FIX 3 · LAYOUT SHIFT (CLS) PREVENTION
   
   Problem: Images load after text, causing cards
   to jump around. This is a Core Web Vital issue.
   
   Fix: Reserve space with aspect-ratio (already
   done above) + add a subtle placeholder bg so
   the empty space doesn't look broken.
   ───────────────────────────────────────────── */

/* Placeholder background while image loads */
.blog-img-container,
.article-card-img-wrap {
    background: var(--bs-surface, var(--bi-surface, #161618));
}

[data-theme="light"] .blog-img-container,
[data-theme="light"] .article-card-img-wrap {
    background: #f0f0f2;
}

/* Skeleton shimmer for image area */
.blog-img-container::before,
.article-card-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 40%,
        rgba(255,255,255,0.04) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: imgShimmer 1.8s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

[data-theme="light"] .blog-img-container::before,
[data-theme="light"] .article-card-img-wrap::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,0.03) 40%,
        rgba(0,0,0,0.03) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
}

/* Hide shimmer once image is loaded */
.blog-img-container:has(.blog-img[complete]),
.article-card-img-wrap:has(.article-card-img.loaded),
.article-card-img-wrap:has(.article-card-img[src]:not([data-src])) {
    &::before { opacity: 0; }
}

/* Fallback: hide shimmer after a generous timeout via JS class */
.blog-img-container.img-ready::before,
.article-card-img-wrap.img-ready::before {
    opacity: 0;
}

@keyframes imgShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}


/* ─────────────────────────────────────────────
   PERFORMANCE 1 · CONTAIN FOR PAINT OPTIMIZATION
   
   Cards are independent visual units — tell the
   browser it can optimize their layout/paint
   independently.
   ───────────────────────────────────────────── */
.blog-card,
.article-card,
.related-article-card {
    contain: layout style;
}


/* ─────────────────────────────────────────────
   PERFORMANCE 2 · WILL-CHANGE ONLY ON HOVER
   
   Problem: will-change:transform on all cards
   permanently promotes layers, wasting GPU memory.
   
   Fix: Only promote on hover/focus.
   ───────────────────────────────────────────── */
.blog-card,
.article-card,
.related-article-card {
    will-change: auto;
}

.blog-card:hover,
.article-card:hover,
.related-article-card:hover {
    will-change: transform;
}


/* ─────────────────────────────────────────────
   PERFORMANCE 3 · CONTENT-VISIBILITY FOR
   OFF-SCREEN SECTIONS
   
   Sections below the fold don't need to be
   rendered until the user scrolls near them.
   ───────────────────────────────────────────── */
#about,
#contact,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}


/* ─────────────────────────────────────────────
   PERFORMANCE 4 · REDUCE ANIMATION WORK
   
   Use transform3d to force GPU compositing on
   the specific properties that animate, instead
   of triggering layout recalcs.
   ───────────────────────────────────────────── */
.blog-card,
.article-card,
.related-article-card {
    transform: translateZ(0);    /* establish compositing layer */
    backface-visibility: hidden; /* prevent sub-pixel rendering */
}


/* ─────────────────────────────────────────────
   PERFORMANCE 5 · FONT DISPLAY SWAP
   
   Prevent invisible text while custom fonts load.
   (This supplements the Google Fonts &display=swap
   parameter — but also catches locally-declared
   @font-face rules.)
   ───────────────────────────────────────────── */
.blog-title,
.article-card-title,
.blog-page-title,
.article-title,
.related-section-title,
h1, h2, h3 {
    font-display: swap;
}


/* ─────────────────────────────────────────────
   PERFORMANCE 6 · IMAGE RENDERING HINTS
   
   Tell the browser these are photos (not icons)
   so it can use faster decode algorithms.
   ───────────────────────────────────────────── */
.blog-img,
.article-card-img,
.article-header-img,
.related-article-card img,
.team-member__avatar,
.team-guest__avatar {
    image-rendering: auto;
    /* Allow async decode so images don't block main thread */
    content-visibility: auto;
}


/* ─────────────────────────────────────────────
   PERFORMANCE 7 · SKELETON LOADING STATES
   
   Better skeleton appearance while JS fetches
   blog-data.json — smoother than a bare spinner.
   ───────────────────────────────────────────── */

/* Homepage: skeleton cards in the blog-posts container */
.blog-posts .spinner-border {
    display: none !important;    /* hide the Bootstrap spinner */
}

/* Show skeleton placeholders instead */
.blog-posts:empty::before,
.blog-posts:has(.spinner-border)::after {
    content: '';
    display: block;
    width: 100%;
    /* Visual handled by the shimmer below */
}


/* ─────────────────────────────────────────────
   PERFORMANCE 8 · PRINT STYLES
   
   Reduce ink usage and remove decorative
   elements when printing articles.
   ───────────────────────────────────────────── */
@media print {
    .blog-nav, .theme-toggle-btn, .scroll-to-top-btn,
    .social-share-bar, .tts-widget, .article-toc,
    .cookie-consent, .cookie-banner, footer,
    .blog-nav-mobile, .article-navigation,
    .related-article-card, #cookie-consent,
    .hero-overlay, .background, .streak {
        display: none !important;
    }

    .article-container {
        box-shadow: none !important;
        border: none !important;
    }

    .article-content {
        padding: 0 !important;
        font-size: 11pt;
        line-height: 1.6;
        color: #000 !important;
    }

    .article-content img {
        max-width: 100%;
        break-inside: avoid;
    }
}