/* =============================================================================
   File: jta-projects.css
   Creator: Mark Kiessling
   Created: August 2nd, 2026
   Purpose: Screenshot and project-card styling for projects.html ONLY.

   WHY THIS IS A SEPARATE FILE, deliberately: jta.css is the immutable visual
   foundation for every page on the site, and it contains no image, figure or
   caption rules of any kind - the identity is entirely typographic. Adding
   screenshot rules into jta.css would put new declarations in the reach of
   nine existing pages that have never had an image on them. Everything new
   lives here, is loaded only by projects.html, and inherits its colours from
   the existing jta.css variables so light and dark themes are handled by the
   foundation rather than duplicated here.
   ============================================================================= */

/* ---- the project grid --------------------------------------------------- */

.projectList {
  display: grid;
  gap: 34px;
  margin-top: 30px;
}

.projectCard {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.projectCard .projectBody {
  padding: 26px 28px 24px;
}

.projectCard h3 {
  margin: 0 0 6px;
  font-size: 1.32rem;
  letter-spacing: 0.1px;
}

.projectCard .projectRole {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.projectCard p {
  margin: 0 0 13px;
  line-height: 1.66;
}

.projectCard p:last-child {
  margin-bottom: 0;
}

/* A short list of concrete, verifiable facts. Deliberately plain rows rather
   than big numbers in coloured boxes - the site voice is measured, and a
   statistic shouted at the reader reads as marketing. */
.projectFacts {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hair2);
  display: grid;
  gap: 7px;
}

.projectFacts li {
  display: flex;
  gap: 14px;
  font-size: 0.93rem;
  line-height: 1.5;
}

.projectFacts .factLabel {
  flex: 0 0 8.6rem;
  color: var(--muted);
}

.projectFacts .factValue {
  flex: 1 1 auto;
}

/* ---- screenshots -------------------------------------------------------- */

/* The frame reads as a window sitting on the page rather than a photograph
   pasted into it, which is why it carries a hairline and a title strip rather
   than a drop shadow. */
.shot {
  margin: 0;
  border-bottom: 1px solid var(--hair);
  background: var(--bg2);
}

.shot .shotFrame {
  display: block;
  line-height: 0;
  background: var(--bg2);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.shot figcaption {
  padding: 11px 28px 13px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--hair2);
}

.shot figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

/* A screenshot is a photograph of a dark application window. On the LIGHT
   theme it would otherwise sit on the page as a hard black slab, so it is
   inset and given a surround rather than being allowed to bleed edge to edge.
   The light palette is not the dark one inverted - the same rule that governs
   the rest of this site. */
:root[data-theme="light"] .shot,
:root[data-theme="light"] .shot .shotFrame {
  background: var(--bg2);
}

:root[data-theme="light"] .shot .shotFrame {
  padding: 16px;
}

:root[data-theme="light"] .shot img {
  border: 1px solid var(--hair);
  border-radius: 6px;
}

/* Several screenshots for one project. Scrolls sideways on a phone instead of
   squeezing four unreadable thumbnails onto a 380 pixel screen. */
.shotRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
}

.shotRow .shot {
  border-bottom: 0;
  background: var(--bg2);
}

/* ---- caveat note -------------------------------------------------------- */

/* Used where a screenshot shows demonstration data rather than real records.
   Saying so plainly is the honest thing and costs nothing. */
.shotNote {
  margin: 0;
  padding: 10px 28px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px dashed var(--hair2);
}

/* ---- responsive --------------------------------------------------------- */

@media (min-width: 900px) {
  .projectCard .projectBody {
    padding: 30px 34px 28px;
  }

  .shot figcaption,
  .shotNote {
    padding-left: 34px;
    padding-right: 34px;
  }
}

@media (max-width: 700px) {
  .shotRow {
    grid-template-columns: 1fr;
  }

  .projectFacts li {
    display: block;
  }

  .projectFacts .factLabel {
    display: block;
    margin-bottom: 2px;
  }
}

/* Respect a reader who has asked the operating system for less motion. The
   shared reveal animation is in jta.css; this only guards what is added here. */
@media (prefers-reduced-motion: reduce) {
  .projectCard,
  .shot {
    transition: none;
  }
}

/* =============================================================================
   PRODUCT BOX SECTION - added August 2nd, 2026
   Creator: Mark Kiessling
   Purpose: the projects index grid of product boxes, and the box-plus-wrapped-
            text layout on each individual project page.

   TWO DIFFERENT LAYOUTS ON PURPOSE. The index uses a GRID because thirteen
   floated boxes with text wrapping around each one produces a page of ragged
   text edges and reads as amateur however good the artwork is. The individual
   project page uses a FLOAT because there is one box and a lot of copy, which
   is exactly the case a float was invented for.
   ============================================================================= */

/* ---- the index grid ----------------------------------------------------- */

.boxGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 30px 26px;
  margin-top: 34px;
}

.boxCard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.boxCard:hover .boxShot,
.boxCard:focus-visible .boxShot {
  transform: translateY(-4px);
}

.boxCard:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 10px;
}

/* The box artwork sits on the page unframed - it is already a photograph of a
   physical object with its own reflection, so a border around it would read as
   a picture of a picture. */
.boxShot {
  position: relative;
  display: block;
  line-height: 0;
  transition: transform 220ms ease;
}

.boxShot img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 4px;
}

/* THE APPLICATION'S REAL ICON, as a badge overlapping the lower left corner of
   the box - the way a sticker sits on shrink wrap. This is the element that
   ties the whole section together: the same mark appears here on the index and
   again beside the heading on the project's own page, so the reader learns the
   icon as the product's mark. It also quietly tells the truth - the box is
   packaging, the icon is the software. */
.boxBadge {
  position: absolute;
  left: -10px;
  bottom: 14px;
  width: 54px;
  height: 54px;
  padding: 7px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hair);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.boxBadge img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.boxCard h3 {
  margin: 16px 0 4px;
  font-size: 1.06rem;
  letter-spacing: 0.1px;
}

.boxCard .boxLine {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.boxCard .boxStatus {
  margin: 9px 0 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---- the individual project page: box floated, copy wrapped -------------- */

/* The float is cleared by the section that follows rather than by a spacer
   div, so a short description simply leaves whitespace beside the box instead
   of pushing the next section down a screen and a half. */
.productLede {
  margin-top: 26px;
}

.productBox {
  float: left;
  width: 38%;
  max-width: 330px;
  margin: 4px 34px 22px 0;
  line-height: 0;
  position: relative;
}

.productBox img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 5px;
}

.productBox figcaption {
  margin-top: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* The heading carries the real application icon beside the name at reading
   size, so the connection from packaging to software is made in one glance. */
.productHead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.productHead img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.productHead h1,
.productHead h2 {
  margin: 0;
}

.productLede p {
  line-height: 1.72;
  margin: 0 0 15px;
}

.productAfter {
  clear: both;
  padding-top: 4px;
}

/* A floated box beside a narrow column leaves a text measure too thin to read.
   Below 760px the box goes full width and the copy runs underneath it. */
@media (max-width: 760px) {
  .productBox {
    float: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 24px;
  }

  .productHead {
    gap: 13px;
  }

  .productHead img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .boxGrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 24px 18px;
  }

  .boxBadge {
    width: 42px;
    height: 42px;
    left: -7px;
    bottom: 10px;
    padding: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boxShot {
    transition: none;
  }
  .boxCard:hover .boxShot,
  .boxCard:focus-visible .boxShot {
    transform: none;
  }
}