/* Moved from template-parts/carousels/grid-mockup3.php */
  :root{ --iwgc-pink:var(--brand-pink); --iwgc-blue:var(--brand-blue); --iwgc-max:1600px; }
  .iwgc{ background:#F1F1F1; padding:36px 0; }
  .iwgc-wrap{ max-width:var(--iwgc-max); margin:0 auto; padding:0 16px; position:relative; text-align:center; }
  .iwgc-heading{ text-align:center; font-weight:700; margin:8px 0 16px; line-height:1.05; font-size: clamp(20px, 3.2vw, 32px); color:#000; }

  /* Layout helpers (no Swiper used here) */

  /* Card - clean, no frame or shadow */
  .iwgc-card{ background:transparent; border:none; border-radius:0; box-shadow:none; overflow:hidden; height:100%; display:flex; flex-direction:column; box-sizing:border-box; width:260px; }
  .iwgc-link{ display:block; text-decoration:none; color:inherit; height:100%; }

  /* Monitor mockup image — center and scale responsively while keeping aspect */
  .iwgc-img{ width:80%; max-width:300px; height:auto; object-fit:contain; display:block; background:#f3f4f6; border-radius:10px; margin:18px auto 6px; }
  @media (min-width:900px){ .iwgc-img{ max-width:260px; } }
  @media (max-width:640px){ .iwgc-img{ max-width:280px; margin:12px auto 8px; } }

  .iwgc-body{ padding:8px 14px 18px; display:flex; flex-direction:column; align-items:center; }

  /* Title (single-line on mobile, allow two lines on larger screens) */
  .iwgc-title{
    font-size:15px; font-weight:600; text-align:center; margin:6px 0 0; max-width:220px;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    color:#000;
    display:inline-block;
  }

  /* Enforce uniform title styling and prevent any transform/scale from other CSS */
  .iwgc .swiper-slide .iwgc-title,
  .iwgc-card .iwgc-title { font-size:15px !important; font-weight:600 !important; line-height:1.15 !important; }

  /* Prevent transforms/animations from theme or plugins */
  .iwgc .swiper-slide-active .iwgc-card,
  .iwgc .swiper-slide .iwgc-card { transform: none !important; }
  .iwgc .iwgc-card, .iwgc .iwgc-title { transition: none !important; }

  /* Small meta under title (darken slightly for legibility) */
  .iwgc-desc{ margin-top:8px; font-size:13px; color:#000; text-align:center; }

  /* Keep consistent card heights but reduce on smaller screens */
  .iwgc-card{ min-height:300px; }

  /* Responsive card widths */
  @media (max-width:1200px){ .iwgc-card{ width:220px; } }
  @media (max-width:768px){ .iwgc-card{ width:190px; min-height:260px; } }

  /* Grid (static) - slightly tighter gap on small screens */
  .iwgc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:24px; align-items:start; padding:12px 0 18px; justify-content:center; justify-items:center; }
  /* Ensure links and card text inherit black color and are centered */
  .iwgc, .iwgc-wrap, .iwgc-body, .iwgc-item, .iwgc-link, .iwgc-card { color:#000; text-align:center; }
  .iwgc-link{ color:inherit; }
   .iwgc-item{ display:block; width:100%; max-width:340px; box-sizing:border-box; justify-self:center; }

  /* Smaller main heading on narrow viewports to avoid excessive vertical stacking */
  @media (max-width:600px){
    .iwgc-heading{ font-size:28px; margin-bottom:12px; }
  .iwgc-title{ font-size:14px !important; max-width:180px; white-space:nowrap; -webkit-line-clamp:1; line-clamp:1; }
    .iwgc-desc{ font-size:13px; }
    .iwgc-grid{ gap:20px; }
    .iwgc-card{ min-height:220px; }
  }

  /* Strong centering for very narrow viewports: use flex so rows center naturally */
  @media (max-width:480px){
    .iwgc-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; padding-left:6px; padding-right:6px; }
    .iwgc-item{ flex:0 0 calc(50% - 18px); max-width:220px; box-sizing:border-box; }
    .iwgc-card{ width:100%; }
  }

  /* Reduced motion: ensure no unexpected transitions */
  @media (prefers-reduced-motion: reduce){
    .iwgc .iwgc-card, .iwgc .iwgc-title{ transition:none !important; }
  }

  /* Focus styles for accessibility */
  .iwgc-link:focus-visible{ outline:2px solid var(--iwgc-blue); outline-offset:4px; border-radius:12px; }

  /* Reserve height to mitigate CLS */
  .iwgc-img{ aspect-ratio: 16/10; }