/*
 * Tablet / compact range (600.02–1279.98px): iPads and small windows.
 * The desktop cube scene's capability columns are JS-positioned with fixed
 * 212px column widths, so they physically need >=1280px — below that the
 * headings overlap. In this range we do what the design itself does on mobile:
 * hide the cube scene (and the sec4 word cloud patch-myai.css already hides)
 * and show the stacked capabilities pillars (#pga-caps-mobile), restyled as a
 * centered reading column with larger type. Everything else keeps the desktop
 * layout. scene-cubes.js is also not loaded below 1280 (see index.astro).
 */
@media (min-width: 600.02px) and (max-width: 1279.98px) {
  section.cubes-sec {
    display: none !important;
  }

  #pga-caps-mobile {
    padding: 96px 48px 104px;
    border-top: none;
  }
  #pga-caps-mobile .ch2,
  #pga-caps-mobile .pillars {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  #pga-caps-mobile .ch2 {
    font-size: clamp(38px, 5vw, 48px);
    line-height: 1.12;
    margin-bottom: 64px;
    text-align: center;
  }
  #pga-caps-mobile .pillars {
    gap: 44px;
  }
  #pga-caps-mobile .ptitle {
    font-size: 34px;
  }
  #pga-caps-mobile .pf-q {
    font-size: 17px;
    padding: 13px 2px;
  }
  #pga-caps-mobile .pf-a {
    font-size: 16px;
  }
  /* Section headings are white-space:nowrap in the design (sized for 1440);
     let them wrap instead of running off the viewport. */
  .sec6c-title,
  .cubes-h2,
  .tmon-h2,
  .news-h2,
  .faq-h2 {
    white-space: normal !important;
  }
}

/* The design's news grid drops to 2 columns at <=900px; with 3 cards that
   leaves a hole. Show the injected 4th card (patch-tablet.js) only there,
   completing a 2x2 grid. Desktop (3-col) and phones (1-col) keep 3 cards. */
.pga-news-extra {
  display: none;
}
@media (min-width: 600.02px) and (max-width: 900px) {
  .pga-news-extra {
    display: flex;
  }
}