/* ===========================================================================
   skeleton.css — reusable shimmer placeholders for loading states.
   --------------------------------------------------------------------------
   How it works:
   - Templates render skeleton markup inside a wrapper that is hidden once the
     real content arrives (the page-load JS toggles a data-* attribute on the
     parent container).
   - Card-shaped skeletons mirror the real `.blog-card` shape so the layout
     doesn't reflow when content swaps in.
   ===========================================================================*/

@keyframes skeletonShimmer {
    0%   { background-position: -468px 0; }
    100% { background-position:  468px 0; }
}

.skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        #eef2f8 0px,
        var(--ems-neutral-50) 40px,
        #eef2f8 80px
    );
    background-size: 800px 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

.skeleton-line {
    height: 12px;
    width: 100%;
    border-radius: 999px;
}
.skeleton-line--lg { height: 18px; width: 92%; }
.skeleton-line--sm { width: 65%; }

.skeleton-tag {
    height: 14px;
    width: 80px;
    border-radius: 999px;
}

/* --- generic building blocks (tables, cards, avatars) --------------------
   Reuse these anywhere a spinner / "Yüklənir…" placeholder guards a
   JS-populated table or list. Example table row:
       <tr><td><span class="skeleton skeleton-line"></span></td>…</tr>
   Example block / card:
       <div class="skeleton skeleton-block" style="height:120px"></div>
*/
.skeleton-block { height: 100px; width: 100%; border-radius: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-btn { height: 34px; width: 96px; border-radius: 8px; }
/* Cədvəl xanası içində istifadə üçün — table-hüceyrəyə uyğun hündürlük. */
td > .skeleton-line, th > .skeleton-line { height: 14px; }

.skeleton-pill {
    height: 12px;
    width: 80px;
    border-radius: 999px;
}

/* --- blog card skeleton --------------------------------------------------
   By default the placeholders stay hidden — they only render while a section
   carries `data-state="loading"` (set explicitly by JS during AJAX swaps,
   pagination prefetch, etc.). Server-rendered first-paint already ships
   the real cards, so the skeleton must NOT compete for grid cells in that
   common case. Future AJAX-driven listings can opt in via:

       <section class="home-blog-grid" data-state="loading">

   to surface the shimmer placeholders.
*/
.blog-skeleton-grid {
    display: none;
}

.home-blog-grid[data-state="loading"] > .blog-skeleton-grid {
    display: contents;
}

.blog-card-skeleton {
    background: var(--ems-neutral-0);
    border: 1px solid rgba(207, 219, 236, 0.7);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.15);
}

.blog-card-skeleton__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-card-skeleton__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

/* Hide skeleton placeholders once the page is hydrated. The body class
   `is-page-loaded` is added by static/js/home_loading.js after DOMContentLoaded
   so server-rendered content fades in over the placeholder. */
.is-page-loaded .blog-skeleton-grid { display: none; }

/* --- page-transition fade ------------------------------------------------ */
/* A lightweight fade-in for landing on a page — done in CSS so it doesn't
   block painting. */
.page-fade-in {
    opacity: 0;
    transform: translateY(4px);
    animation: pageFadeIn 0.32s ease-out forwards;
}
@keyframes pageFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Top-of-page progress bar used during navigation. Driven by
   static/js/home_loading.js — toggled via .is-route-loading on <body>. */
.route-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--ems-primary-600), var(--ems-success));
    z-index: 9999;
    border-radius: 0 999px 999px 0;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
    transition: width 0.35s ease;
    pointer-events: none;
}
.is-route-loading .route-progress { width: 70%; }
.is-route-loaded   .route-progress {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.4s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    .page-fade-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .route-progress { transition: none; }
}

/* ── Skeleton ölçü utility-ləri (inline `style="width:…"` əvəzi, CSP) ── */
.skeleton-line--w40 { width: 40%; }
.skeleton-line--w55 { width: 55%; }
.skeleton-line--w65 { width: 65%; }
.skeleton-line--w70 { width: 70%; }
.skeleton-line--w80 { width: 80%; }
.skeleton-field { height: 44px; }
.skeleton-field--wide { flex: 2 1 220px; }
.skeleton-field--mid { flex: 2 1 200px; }
.skeleton-field--narrow { flex: 1 1 140px; }
.skeleton-stack { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }