/* ==========================================================================
   KDC — responsive.css
   Mobile-first. style.css and components.css hold the small-screen case;
   everything here is an upgrade at a breakpoint.
   Breakpoints: 480 / 640 / 860 / 1024 / 1280 / 1600
   ========================================================================== */

/* --- 480px and up: two-up product/partner grids --------------------------- */
@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

/* --- 640px and up --------------------------------------------------------- */
@media (min-width: 640px) {
  .utility-contact a + a { display: inline; }
  .partner-wall { grid-template-columns: repeat(3, 1fr); }
  .pager { grid-template-columns: repeat(2, 1fr); }
  .cert { grid-template-columns: 300px 1fr; }
  .cert-detail { border-top: 0; border-left: 1px solid var(--line); }
  .cert-figure img { max-width: 100%; }
}

/* --- 860px and up --------------------------------------------------------- */
@media (min-width: 860px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1.55fr 1fr; gap: 56px; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse .split-figure { order: -1; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; }

  .cta-inner { grid-template-columns: 1.5fr auto; gap: 44px; }
  .cta-actions { justify-content: flex-end; }

  .manifest-grid { grid-template-columns: repeat(5, 1fr); }
  .manifest-item {
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 0.12);
  }
  .manifest-item:first-child { border-left: 0; }
  .manifest-name { font-size: 1rem; }

  .utility-parent { display: inline; }
}

/* --- 960px and up: the desktop navigation takes over ----------------------
   Seven menu items plus the logo need 960px of shell before they fit on one
   line. Below that the drawer carries the same menu. */
@media (min-width: 960px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* --- 1024px and up -------------------------------------------------------- */
@media (min-width: 1024px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .partner-wall { grid-template-columns: repeat(4, 1fr); }
  .split { gap: 72px; }
  .to-top { right: 28px; bottom: 28px; }
  .contact-plate h2, .contact-plate h3 { padding: 28px 28px 0; }
  .contact-plate .table-wrap { padding: 18px 12px 12px; }
}

/* --- 1280px and up: the shell stops growing, the gutters do ---------------- */
@media (min-width: 1280px) {
  .card-body { padding: 28px 28px 30px; }
  .register li { padding: 24px 0; }
}

/* --- 1600px and up -------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --shell: 1320px; --gutter: 56px; }
}

/* --- Coarse pointers: no hover-only affordances --------------------------- */
@media (hover: none) {
  .card:hover { transform: none; }
  .partner img { filter: none; opacity: 1; }
  .card-media img { filter: saturate(1); }
  .nav-item--has-child:hover .nav-dropdown { opacity: 0; visibility: hidden; }
  .nav-parent[aria-expanded="true"] + .nav-dropdown { opacity: 1; visibility: visible; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  /* body reserves the fixed header's height on screen; in print there is no
     header, so the reservation has to go with it. */
  body { padding-top: 0 !important; }
  .site-header, .drawer, .to-top, .manifest, .hero-dots, .cta, .pager { display: none !important; }
  .ground, .site-footer { background: #fff !important; color: #000 !important; }
  .ground h1, .ground h2, .ground p, .site-footer * { color: #000 !important; }
  .hero-media, .page-head-media, .hero-scrim { display: none !important; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Spec line ------------------------------------------------------------ */
@media (min-width: 640px) {
  .spec-line { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}
@media (min-width: 860px) {
  .spec-line {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .spec-line li {
    padding: 22px 26px;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }
  .spec-line li:first-child { border-left: 0; padding-left: 0; }
}