/* ===========================================================================
   COCAM — Mobile & accessibility refinements
   Loaded AFTER css/style.css. Targeted overrides only — never restyles.
   Fixes catalogued in /review/index.html (G1-G8, H1-H4, A1-A4, C1-C4, I1-I4, CT1-CT4).
   =========================================================================== */

/* ---------- G1 · Touch targets (44 px floor) ---------------------------- */
.lang-toggle button {
  min-height: 44px;
  min-width: 44px;
  padding: .55rem .9rem;
  font-size: .78rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__burger {
  width: 44px;
  height: 44px;
}

/* ---------- G2 · Hero title legibility on phones ------------------------ */
.hero__title {
  font-size: clamp(2.4rem, 8vw, 7.5rem);
  text-wrap: balance;
  hyphens: auto;
}
.display { text-wrap: balance; }

/* ---------- G3 · Section padding floor on phones ------------------------ */
/* Tightened site-wide in style.css; mobile floor stays in sync, no override. */

/* ---------- G4 · Hero meta wrapping on phones --------------------------- */
@media (max-width: 700px) {
  .hero__meta { gap: .4rem 1.2rem; }
  .hero__meta span { font-size: .68rem; }
}

/* ---------- G5 · Button stacking fills column on narrow screens --------- */
@media (max-width: 540px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { justify-content: center; }
}

/* ---------- G6 · Nav blur perf on mobile -------------------------------- */
@media (max-width: 900px) {
  .nav {
    background: rgba(244, 237, 224, 0.94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
  }
}

/* ---------- H1 · Statbar single row at every width ---------------------- */
.statbar__inner { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem; }
@media (max-width: 700px) {
  .statbar { padding: 1.1rem var(--gutter); }
  .statbar__num { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .statbar__num span { font-size: .55em !important; }
  .statbar__label { font-size: .58rem; letter-spacing: 0.14em; margin-top: .35rem; }
}

/* ---------- H2 / C3 · Spec table stacks on phones ----------------------- */
@media (max-width: 540px) {
  .spec-table tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: .85rem 0;
  }
  .spec-table th,
  .spec-table td { padding: 0; width: 100% !important; }
  .spec-table th {
    font-size: .62rem;
    margin-bottom: .25rem;
  }
  .spec-table td { font-size: 1rem; }
  .spec-card { padding: 1.4rem 1.2rem; }
  .spec-card__head { padding-bottom: 1rem; margin-bottom: .8rem; }
  .spec-card__lot { font-size: 1.5rem; }
  .spec-card__crop { font-size: .7rem; }
}

/* ---------- H4 · Pullquote fills mobile column -------------------------- */
@media (max-width: 700px) {
  .pullquote { max-width: none; font-size: 1.35rem; }
}

/* ---------- A1 · Timeline dots safe inside gutter ----------------------- */
.timeline { padding-left: 1.6rem; position: relative; }
.timeline::before { left: 0; }
.timeline__item::before {
  left: -1.95rem;
  width: 9px; height: 9px;
}
@media (max-width: 700px) {
  .timeline { padding-left: 1.4rem; }
  .timeline__item::before { left: -1.7rem; }
}

/* ---------- A2 · Values trio reads as editorial run on mobile ----------- */
@media (max-width: 800px) {
  .values-list { display: grid; gap: 0; }
  .values-list > div {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--paper-3);
  }
  .values-list > div:first-child { padding-top: 0; }
  .values-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- A3 · Fact-list breathing on phones -------------------------- */
@media (max-width: 600px) {
  .fact-list li {
    padding: .9rem 0;
    gap: .15rem;
  }
  .fact-list li span em,
  .fact-list li span .fr-soft { color: var(--ink-soft); font-style: italic; }
}

/* ---------- G7 · Grain finer on narrow viewports ------------------------ */
@media (max-width: 700px) {
  .hero__grain {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  }
}

/* ---------- Process: 2-column at tablet; phones use the base single-column,
              full-width image with text stacked below (set in style.css). ---- */
@media (max-width: 800px) and (min-width: 480px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}

/* ---------- I2 · Gallery uses masonry columns on phones ----------------- */
@media (max-width: 699px) {
  .gallery {
    column-count: 2;
    column-gap: 8px;
    display: block;
  }
  .gallery__item {
    break-inside: avoid;
    margin-bottom: 8px;
    width: 100%;
  }
  .gallery__item img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .gallery__item--a img { aspect-ratio: 4/5; }
  .gallery__item--b img,
  .gallery__item--d img { aspect-ratio: 1; }
  .gallery__item--c img,
  .gallery__item--e img { aspect-ratio: 3/4; }
}

/* ---------- I1 · Two-up impact grid after pulling "0" out --------------- */
.impact-grid--two { display: grid; gap: 2rem; }
@media (min-width: 700px) { .impact-grid--two { grid-template-columns: repeat(2, 1fr); } }

/* ---------- I1 · Anchor pullquote for the zero-shareholders stat -------- */
.zero-pull {
  text-align: left;
  padding: 3.5rem 0;
  display: grid;
  gap: 1.2rem;
}
.zero-pull__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-style: italic;
  font-size: clamp(8rem, 22vw, 16rem);
  line-height: .85;
  letter-spacing: -.06em;
  color: var(--moss-dark);
  margin: 0;
}
.zero-pull__body {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  max-width: 26ch;
  margin: 0;
  color: var(--ink);
}
.zero-pull__attr {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- CT1 · Form labels Manrope, sentence case ------------------- */
.form__field label {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.form__field label .req { color: var(--terracotta); margin-left: .15rem; }

/* Bigger fields on mobile, 16px font to suppress iOS zoom-on-focus */
@media (max-width: 700px) {
  .form__field input,
  .form__field textarea,
  .form__field select {
    font-size: 16px;
    padding: 1rem 1.1rem;
  }
}

/* ---------- CT3 · Re-order contact: summary first on mobile ------------ */
@media (max-width: 800px) {
  .contact-flip > * { display: contents; }
  /* page-side hint: set order on the children */
  .contact-flip .contact-summary { order: 1; }
  .contact-flip .contact-form    { order: 2; }
}

/* ---------- Coffee: SKU-style grade card ------------------------------- */
.grade-card {
  background: var(--paper-2);
  padding: 2rem;
  border-radius: 4px;
  border-left: 3px solid var(--terracotta);
  display: grid;
  gap: .9rem;
  align-content: start;
}
.grade-card__rank {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.grade-card__code {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
}
.grade-card__score {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--moss-dark);
}
.grade-card__score small {
  font-size: .35em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--terracotta);
}
.grade-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin: .1rem 0 0; }
.grade-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- Coffee: trading-terms spec card ---------------------------- */
.terms-table th { width: 48%; }
@media (max-width: 540px) {
  .terms-table th { width: 100% !important; }
}

/* ---------- Generic: text-wrap balance on headings --------------------- */
h1, h2, h3 { text-wrap: balance; }
.editorial p, .lead { text-wrap: pretty; }

/* ---------- Nav: hide burger on desktop already done in style.css ------ */
/* keep nav__right spacing tight on mobile */
@media (max-width: 480px) {
  .nav__inner { padding: .8rem var(--gutter); }
  .nav__logo { font-size: 1.3rem; gap: .5rem; }
  .nav__logo-mark { width: 26px; height: 26px; }
  .nav__right { gap: .5rem; }
}