/* ============================================================
   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
   ============================================================ */

/* [v4.16.80hm +theme-single-mode-dark 2026-05-09 Q3-batch-62.4] auto-migrated hex literals to var(--aict-*) tokens */
/**
 * AICT Mobile-First — Touch Runner Optimizations
 * @since 1.73.0
 */

/* ─── Prevent horizontal overflow from off-screen elements ─── */
html, body {
  overflow-x: hidden;
}

/* ─── Touch targets ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Minimum 44×44px touch targets for all interactive elements */
  .aict-run-btn,
  .aict-copy-btn,
  .aict-export-btn,
  button[id*="aict"],
  .aict-btn-sm {
    min-height: 44px;
    min-width: 44px;
  }

  /* Tool form inputs — larger on mobile */
  .aict-tool-textarea,
  textarea[class*="aict"],
  .aict-input,
  input[class*="aict"] {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 14px !important;
  }

  /* Agent runner: stack columns */
  .aict-detail-runner {
    grid-template-columns: 1fr !important;
  }

  /* Wider step pills on mobile */
  .aict-detail-step-pill {
    min-width: unset !important;
    font-size: 12px !important;
  }
}

/* ─── Sticky Run button (mobile) ───────────────────────────── */
@media (max-width: 768px) {
  .aict-sticky-run-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--aict-bg);
    border-top: 1px solid var(--aict-border);
    padding: 12px 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .aict-sticky-run-bar .aict-run-btn {
    flex: 1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    background: #7c3aed;
    color: var(--aict-bg, #fff);
    border: none;
    cursor: pointer;
  }

  .aict-sticky-run-bar .aict-run-btn:disabled {
    background: #a78bfa;
    cursor: not-allowed;
  }

  /* Dark mode adjustments for sticky run bar */
  [data-theme="dark"] .aict-sticky-run-bar {
    background: var(--aict-bg-card);
    border-top-color: var(--aict-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .aict-sticky-run-bar .aict-run-btn {
    background: #818cf8;
  }

  [data-theme="dark"] .aict-sticky-run-bar .aict-run-btn:disabled {
    background: #4c1d95;
  }

  /* Prevent page content from being hidden behind sticky bar */
  .aict-tool-page-body,
  .aict-detail-page {
    padding-bottom: 80px !important;
  }
}

/* ─── Tool page mobile layout ───────────────────────────────── */
@media (max-width: 600px) {
  .aict-tool-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .aict-results-section {
    padding: 16px !important;
  }

  /* Hide labels, show placeholder only on very small screens */
  .aict-field-label {
    font-size: 13px !important;
  }

  /* Sharing / export bar: horizontal scroll */
  .aict-share-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
}

/* ─── Swipe-friendly horizontal tabs ───────────────────────── */
@media (max-width: 768px) {
  .aict-search-tabs,
  .aict-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }

  .aict-search-tabs::-webkit-scrollbar,
  .aict-tab-bar::-webkit-scrollbar {
    display: none;
  }

  .aict-search-tab,
  .aict-tab {
    flex-shrink: 0;
  }
}

/* ─── Agents page — mobile step flow ───────────────────────── */
@media (max-width: 768px) {
  .aict-agents-hero h1 {
    font-size: 1.6rem !important;
  }

  .aict-agents-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Reduce motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Floating chat/WhatsApp button positioning ────────────────── */
/* Desktop: move above compare bar and other fixed elements */
.whatsapp-float,
.floating-chat-btn,
[class*="whatsapp"],
[class*="chat-float"] {
  bottom: 80px !important;
  z-index: 9990 !important; /* below compare bar (9998), below modals */
}

/* Mobile: smaller, tucked right, above sticky nav */
@media (max-width: 768px) {
  .whatsapp-float,
  .floating-chat-btn,
  [class*="whatsapp"],
  [class*="chat-float"] {
    bottom: 80px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Hide floating chat on pages with a contact form */
.landing-page-contact .whatsapp-float,
.landing-page-contact .floating-chat-btn,
.landing-page-contact [class*="whatsapp"],
.landing-page-contact [class*="chat-float"] {
  display: none !important;
}