/* GINGER AFRO PAGES
   Ginger Afro is the name I trade under for websites, branding and digital identity.
   Its pages (the /ginger-afro/ hub and the case studies under it) keep this site's
   header, footer, type, cards and buttons, and borrow a few Ginger Afro accents.
   Every rule here is scoped to the `.ga` page wrapper, so loading this sheet
   changes nothing outside it. Load it with `styles: ["/css/pages/ginger-afro.css"]`
   and Space Mono with `fonts: ["space-mono"]`.

   Orange is for shapes and large text only: small orange text fails contrast on
   the light theme, so text links stay green (`text-link`). Text on orange is black. */
.ga {
  --ga-orange: var(--ginger);  /* ginger orange (#ff4b33, src/tailwind.css): wordmark, the // mark, hard shadows, marks */
  --ga-amber: #ff9f1c;   /* rare second splash */
  --ga-rust: #c9300f;    /* orange text on the light theme, when it can't be avoided */
  --ga-ink: #0e0e0e;     /* text on orange */
  --ga-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Section headings: the // mark turns ginger orange */
.ga .h-section::before {
  color: var(--ga-orange);
}

/* The outlined GINGER AFRO wordmark (the gaWordmark shortcode): edge to edge in orange */
.ga .ga-wordmark {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ga-orange);
}

/* Wall label: mono, uppercase, letter-spaced captions ("Fig. 01 / Homepage, desktop"),
   fact sheet labels and chart axis labels */
.ga .ga-label {
  margin: 0;
  font-family: var(--ga-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Numbered plate: a rule, "01 / The brief" in mono, then the section heading.
   Use the ui.gaPlate macro, so numbers come from the template. */
.ga .ga-plate {
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--image-border-color);
}

.ga .ga-plate > .ga-label {
  margin-bottom: 0.5rem;
}

.ga .ga-plate-num {
  font-weight: 700;
  color: var(--title-color);
}

/* Hero kicker on a case study: the wordmark, small, then "Studio work" */
.ga .ga-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

.ga .ga-kicker .ga-wordmark {
  width: auto;
  height: 1.1rem;
}

/* Fact sheet labels in mono */
.ga .ga-facts dt {
  font-family: var(--ga-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Device trio (partials/ga-device-trio.njk): desktop, tablet and phone frames side by side,
   bottom aligned. On small screens the phone and tablet sit side by side, phone first,
   with the desktop below. The desktop gets the hard orange shadow. */
.ga .ga-devices {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-areas: "mobile tablet" "desktop desktop" "caption caption";
  align-items: end;
  gap: 1.25rem;
  margin: 0;
}

@media (min-width: 768px) {
  .ga .ga-devices {
    grid-template-columns: 6fr 2.3fr 1.25fr;
    grid-template-areas: "desktop tablet mobile" "caption caption caption";
    gap: 1.5rem;
  }
}

.ga .ga-device {
  border: 1px solid var(--image-border-color);
  background: var(--card-solid);
  padding: 0.5rem;
  border-radius: 1.25rem;
}

.ga .ga-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.ga .ga-device-desktop {
  grid-area: desktop;
  padding-top: 1.25rem; /* a browser-ish top bar */
  border-radius: 0.75rem;
  box-shadow: 8px 8px 0 var(--ga-orange);
}

.ga .ga-device-desktop img {
  border-radius: 0.25rem;
}

.ga .ga-device-tablet {
  grid-area: tablet;
}

.ga .ga-device-mobile {
  grid-area: mobile;
  border-radius: 1.5rem;
  padding: 0.4rem;
}

.ga .ga-device-mobile img {
  border-radius: 1.15rem;
}

.ga .ga-devices > figcaption {
  grid-area: caption;
  margin-top: 0.5rem;
}