/**
 * Section: Made In (Australian-made band)
 * Ported from .docs/mockup/css/about.css lines 246-314 (Australian-made
 * band block), plus the `.madein-grid` rule from the shared 900px
 * responsive block and the `.madein-stats` rule from the shared 560px
 * responsive block at the end of that file. Tokens only.
 *
 * Contrast (Deep Ocean background, see section report for the ratios):
 * the eyebrow (--terracotta), the body paragraph and stat labels
 * (--coastal-blue) all fall under WCAG AA 4.5:1 as coded here. Ported
 * verbatim per instruction -- not corrected in this file.
 */

.madein {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  background: var(--deep-ocean);
  color: var(--coastal-soft); /* was --coastal-blue: 3.51:1, under AA. */
}

.madein-grid {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.madein-grid .eyebrow {
  color: var(--pebble); /* was --terracotta: 2.21:1 on Deep Ocean, unusable.
                          Pebble is the treatment `wildlife` already uses for an
                          eyebrow on a dark ground, so this is consistency, not a
                          new decision. ~9.5:1. */
  margin-bottom: var(--space-s);
}

.madein-grid h2 {
  color: var(--off-white);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-s);
  max-width: 16ch;
}

.madein-grid h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--coastal-blue);
}

.madein-grid > div > p {
  color: var(--coastal-soft); /* was --coastal-blue: 4.06:1, under AA. */
  line-height: 1.6;
  max-width: 50ch;
}

.madein-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

.madein-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(168, 200, 212, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-m);
}

.madein-stat .num {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--off-white);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.madein-stat .label {
  font-size: var(--text-small);
  color: var(--coastal-soft); /* was --coastal-blue: 3.51:1, under AA. */
  line-height: 1.45;
}


/* === RESPONSIVE === */
@media (max-width: 900px) {
  .madein-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 560px) {
  .madein-stats {
    grid-template-columns: 1fr;
  }
}