/* =====================================================================
   GVIKA PERFORMANCE FIXES
   Goes to: assets/frontend/css/gvika-performance.css   (NEW file)

   Add this line to header.blade.php AFTER your gvika-combined.css:
   <link rel="stylesheet" href="{{ asset('assets/frontend/css/gvika-performance.css') }}">

   These fixes target the exact issues shown in your Chrome DevTools:
   - LCP 6.64s  → caused by images with no reserved space (browser
                   doesn't know how big they'll be until they download)
   - CLS 1.0000 → section.project-area causes full-page layout shift
                   because images have no height until they load

   Zero design changes — only layout stability improvements.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL IMAGE STABILITY
   Prevents browser from collapsing image containers to 0px while
   the image is loading, then jumping the layout when it arrives.
   ───────────────────────────────────────────────────────────────────── */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   PROJECT AREA — CLS Score was 1.0000 (worst possible)
   Fix: reserve aspect-ratio space before image loads
   ───────────────────────────────────────────────────────────────────── */

.project-area .single-project-thumb,
.project-area .project-catalogue-thumb,
.preview-area .single-project-thumb,
.preview-area .project-catalogue-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #112240;
    width: 100%;
    display: block;
}
.project-area .single-project-thumb img,
.project-area .project-catalogue-thumb img,
.preview-area .single-project-thumb img,
.preview-area .project-catalogue-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO BANNER — LCP element is an img (your hero portrait)
   Fix: give it explicit dimensions so browser can size it immediately
   ───────────────────────────────────────────────────────────────────── */

.banner-wrapper-thumb {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(201,168,76,0.08);
    flex-shrink: 0;
    display: block;
}
.banner-wrapper-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   TALENT CARDS — avatar images
   ───────────────────────────────────────────────────────────────────── */

.single-freelancer-author-thumb {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    display: block;
}
.single-freelancer-author-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────
   CATEGORY ICONS — fixed size prevents shift
   ───────────────────────────────────────────────────────────────────── */

.single-category-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-category-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────
   BLOG THUMBNAILS
   ───────────────────────────────────────────────────────────────────── */

.single-blog-thumb,
.blog-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #112240;
    width: 100%;
    display: block;
}
.single-blog-thumb img,
.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   NAVBAR CATEGORY SUB-LIST
   CLS score 0.0010 — the sub-nav strip causes a tiny shift on load
   Fix: reserve its height from the start
   ───────────────────────────────────────────────────────────────────── */

.categorySub-area {
    min-height: 46px;
}
.categorySub-list-slide {
    min-height: 0;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   SLICK SLIDER — stops content jumping before JS initializes
   Without this, the page renders all slides stacked vertically,
   then JS collapses them into a slider — causing a big CLS hit
   ───────────────────────────────────────────────────────────────────── */

.global-slick-init:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
    gap: 16px;
}
.global-slick-init:not(.slick-initialized) > div,
.global-slick-init:not(.slick-initialized) > .category-slider-item {
    min-width: 180px;
    flex-shrink: 0;
}