/* ============================================================
   AICT-IMAGE-GRID-ASPECT-RATIO-20260520
   CLS prevention: reserve space for image grids before
   JS hydration / lazy image load.
   ============================================================ */

/* ------------------------------------------------------------
   /news/  — aict-news-grid populated by news-hub.js
   Skeleton cards (6 empty divs) are removed by clearCards()
   then real cards appended. Reserving the GRID container at
   the expected hydrated height prevents the document-flow
   shift when below-the-fold content reflows.
   ------------------------------------------------------------ */
.aict-news-grid {
    contain: layout style;
}
/* Mobile single-column: 6 cards × ~460px + gaps */
@media (max-width: 600px) {
    .aict-news-grid {
        min-height: 2900px;
    }
}
/* Tablet 2-col: 3 rows × ~480px */
@media (min-width: 601px) and (max-width: 1024px) {
    .aict-news-grid {
        min-height: 1500px;
    }
}
/* Desktop 3-col: 2 rows × ~500px = ~1050px; add buffer for hero. */
@media (min-width: 1025px) {
    .aict-news-grid {
        min-height: 1180px;
    }
}

/* Skeleton placeholders: match hydrated card footprint
   so removal+append doesn't change grid height. */
.aict-news-card.aict-news-skeleton {
    min-height: 460px;
    background: linear-gradient(180deg, #f3f4f6 0%, #f3f4f6 56.25%, #ffffff 56.25%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}

/* Hydrated card image wrap: always 16:9 with neutral bg. */
.aict-news-card-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 180px;
    background: #f3f4f6;
    overflow: hidden;
    display: block;
    width: 100%;
}
.aict-news-card-img-wrap > .aict-news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder (source-logo) variant: keep wrap reserved. */
.aict-news-card-img-wrap.aict-news-placeholder-wrap {
    aspect-ratio: 16 / 9;
    min-height: 180px;
}
.aict-news-card-img-wrap .aict-news-source-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: auto;
}

/* Hero (featured) card: larger 16:9 image, eager loaded. */
.aict-news-hero .aict-news-card-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 240px;
}

/* ------------------------------------------------------------
   /tools/  — aict-bento-grid + aict-tool-card
   Cards have no images but have variable text length; mobile
   paginate=12 hides cards via JS post-init causing layout shift.
   Reserve card min-height + cap grid container.
   ------------------------------------------------------------ */
.aict-bento-grid {
    contain: layout style;
}
.aict-bento-grid > .aict-card-link-wrap {
    min-height: 180px;
}
.aict-bento-grid .aict-tool-card {
    min-height: 180px;
    box-sizing: border-box;
}
.aict-bento-grid .aict-tool-card.aict-bento-lg {
    min-height: 220px;
}
/* Mobile-only grid reservation; desktop renders all cards
   in markup so no min-height needed. */
@media (max-width: 600px) {
    .aict-bento-grid {
        min-height: 2200px; /* 12 cards × 180px + gaps */
    }
}

/* ------------------------------------------------------------
   /pricing/ — supplement existing aict-cls-reservations with
   sections that were missing min-height.
   ------------------------------------------------------------ */
.aict-pcro-calc-grid {
    min-height: 400px;
    contain: layout style;
}
@media (max-width: 768px) {
    .aict-pcro-calc-grid {
        min-height: 720px;
    }
}
.aict-cro-faq-grid {
    min-height: 480px;
    contain: layout style;
}
@media (max-width: 768px) {
    .aict-cro-faq-grid {
        min-height: 900px;
    }
}
.aict-plm-card {
    min-height: 200px;
    contain: layout style;
}
.aict-pcro-payback-grid {
    min-height: 240px;
    contain: layout style;
}

/* ------------------------------------------------------------
   /tools-ai-image-generator/  (and other image-output tools) —
   gallery cards + generated-img placeholder.
   ------------------------------------------------------------ */
.aict-gallery-grid {
    min-height: 320px;
    contain: layout style;
}
.aict-gallery-card {
    min-height: 280px;
    box-sizing: border-box;
}
.aict-gallery-card img,
.aict-gallery-card .aict-gallery-thumb {
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    min-height: 200px;
    object-fit: cover;
    display: block;
    width: 100%;
}
/* Image-output wrap: aspect 1:1, fills on result. */
.aict-image-output-wrap,
.aict-image-preview-wrap {
    aspect-ratio: 1 / 1;
    min-height: 280px;
    background: #f3f4f6;
    contain: layout style;
}
#aict-generated-img.aict-generated-img {
    aspect-ratio: 1 / 1;
    min-height: 280px;
    object-fit: contain;
    background: #f3f4f6;
}
/* Prompt library grid — variable card heights cause CLS. */
.aict-prompt-lib-grid {
    min-height: 280px;
    contain: layout style;
}
.aict-prompt-lib-item {
    min-height: 100px;
}
/* In-line modules grid (ilm) for image tools. */
.aict-ilm-grid {
    min-height: 240px;
    contain: layout style;
}

/* ------------------------------------------------------------
   /agents/ — aict-agents-grid hydrated by agent-workflows.js
   The initial render shows .aict-agents-loading (spinner only).
   When ~15 cards arrive, the grid grows ~3000px on mobile,
   shifting all content below the fold. Reserve a height on
   the grid container that holds the expected hydrated size,
   so the shift happens before viewport-tracked layout
   stabilizes. CARDS themselves don't get min-height (causes
   later reflow when SVG icons paint at variable widths).
   ------------------------------------------------------------ */
.aict-agents-grid {
    contain: layout style;
}
@media (max-width: 600px) {
    .aict-agents-grid {
        /* ~15 cards single-column × ~200px each + 16px gaps */
        min-height: 3200px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .aict-agents-grid {
        /* ~8 rows × 2 cols × ~200px */
        min-height: 1700px;
    }
}
@media (min-width: 1025px) {
    .aict-agents-grid {
        /* ~5 rows × 3-4 cols × ~200px */
        min-height: 1100px;
    }
}

/* ============================================================
   END AICT-IMAGE-GRID-ASPECT-RATIO-20260520
   ============================================================ */