/* nexusbiz.tech — All Applications: every live app the studio has built, a
 * card each, right below the hero.
 *
 * The cards are Task Job's module grid (taskjob.work), the screenshot this
 * section was asked to match, with Task Job's own values: a white tile with a
 * #e4e9f0 rim, a glossy 3D icon standing on its own with a soft drop shadow,
 * the name in heavy ink (#101828), and the selected look, a dark ring on a
 * #eef3ff tile with the picture a little larger, as the hover. The names are
 * in the page's Inter where Task Job's are in Suwannaphum (a Khmer face whose
 * Latin is a serif): the section sits among Inter and Orbitron, and the face
 * would be a font download for one short label a card.
 *
 *   - Markup: appsSection() in scripts/apps.mjs, inserted by scripts/build.mjs.
 *   - Styles: this file, linked after background-boxes.css.
 *   - No script: the cards are plain links to the apps' live sites.
 *
 * The section is transparent, so the Background Boxes grid shows between the
 * cards, and site.js lights its cells there; a card has a background, so the
 * grid stays dark under it, as under every other card on the page.
 */

.ap-root {
  position: relative;
  z-index: 1;
  padding: 40px 0 24px;
}

/* The heading, as the rail's (.cr-head in overrides.css): a cyan eyebrow over
   the kit's gradient page title with the page's halo. */
.ap-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}
.ap-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nx-cyan-ink);
}
.ap-title {
  margin: 0;
  font-family: var(--ug-font-display);
  font-size: clamp(1.625rem, 1rem + 2.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: transparent;
  background-image: var(--ug-page-title-fill);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: var(--nx-title-halo);
}
.ap-lede {
  margin: 0.5rem 0 0;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(220, 232, 255, 0.8);
  text-wrap: balance;
}

/* The grid: as many columns of at least 118px as the content column holds
   (seven at full width), each card the same height in its row. */
.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-item {
  display: flex;
  min-width: 0;
}

/* The card. The rim is an inset shadow, as in Task Job, so the selected ring
   can thicken without the card changing size. text-shadow: none, because the
   body's dark halo, inherited, smudges dark ink on a white tile. */
.ap-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  padding: 16px 8px 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #e4e9f0;
  color: #101828;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.ap-icon {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 6px 10px rgba(22, 35, 70, 0.18));
  transition: transform 0.15s ease;
  -webkit-user-drag: none;
}
.ap-name {
  font-family: var(--ug-font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* What the app is and where it opens, for screen readers only: the icon says
   it for everyone else. */
.ap-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Task Job's selected card, as the hover: the tint, the dark ring and the
   larger picture. Its ring is the card's edge on Task Job's light page; on
   this dark one a 2px white edge outside it keeps the ring in view. Only
   where there is a real hover, so a tap on a phone does not leave a card
   looking selected. The colour is restated: the export's own `a:hover`
   (#cfe0ff, for links on the dark page) outranks .ap-card. */
@media (hover: hover) {
  .ap-card:hover {
    color: #101828;
    background: #eef3ff;
    box-shadow: inset 0 0 0 3px #101828, 0 0 0 2px #ffffff;
  }
  .ap-card:hover .ap-icon {
    transform: scale(1.08);
  }
}
.ap-card:focus-visible {
  outline: 2px solid var(--nx-cyan-ink);
  outline-offset: 4px;
  color: #101828;
  background: #eef3ff;
  box-shadow: inset 0 0 0 3px #101828, 0 0 0 2px #ffffff;
}
.ap-card:focus-visible .ap-icon {
  transform: scale(1.08);
}
.ap-card:active {
  transform: scale(0.97);
}

/* Phones: always three across, the large ones too (Task Job's own grid is
   four across at 430px, which this was until asked otherwise), with the card
   scaled down rather than the names wrapping into three lines. */
@media (max-width: 479px) {
  .ap-head {
    margin-bottom: 24px;
  }
  .ap-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .ap-card {
    min-height: 100px;
    gap: 8px;
    padding: 12px 4px 11px;
    border-radius: 14px;
  }
  .ap-icon {
    width: 48px;
    height: 48px;
  }
  .ap-name {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-card,
  .ap-icon {
    transition: none;
  }
  .ap-card:active,
  .ap-card:hover .ap-icon,
  .ap-card:focus-visible .ap-icon {
    transform: none;
  }
}

/* Paper: the gradient title takes ink (overrides.css does the same for every
   other title), the lede the kit's muted, and the cards a printable hairline. */
@media print {
  .ap-title {
    color: #1c2a48 !important;
    background: none !important;
    filter: none !important;
  }
  .ap-lede {
    color: var(--ug-text-muted) !important;
  }
  .ap-card {
    box-shadow: none !important;
    border: 1px solid #d9dce3;
  }
}

/* Forced colours drop the inset rim and the gradient: the title takes the
   system's text colour and each card a real border. */
@media (forced-colors: active) {
  .ap-title {
    color: CanvasText !important;
    background: none !important;
    filter: none !important;
  }
  .ap-card {
    border: 1px solid CanvasText;
  }
  .ap-card:hover,
  .ap-card:focus-visible {
    border-color: Highlight;
  }
}