/* ═══════════════════════════════════════════════════════════════════════════
   ORCHARD & GRAIN CASE STUDY - orchard-and-grain.css
   Theme overrides on top of case-study.css: Dales-green hero + accents.
   Plus the bespoke brand-identity components (insights, positioning,
   ideation trio, logo showcase, type specs, palette, SKUs, mockup,
   constraints, outcome) that have no shared equivalent. All prefixed `og-`.
   ═══════════════════════════════════════════════════════════════════════════ */

.case-study-body--orchard {
  /* Hero gradient matches the Orchard & Grain section on index.html */
  --cs-hero-bg: linear-gradient(180deg, #44531f 0%, #313f17 55%, #1e2810 100%);
  --cs-hero-border: #4a5a24;
  --cs-footer-bg: #1e2810;
  --cs-accent: #5d6a2a;
  --cs-title-accent: #c5d27e;
  --cs-num-color: #5d6a2a;
  --cs-dark-card: #2a3715;
}

/* ─── Audience insights (research quotes) ────────────────────────────────── */
.og-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.og-insight {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 4px solid var(--cs-accent);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.og-insight p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.55;
  margin-bottom: 0.6rem;
}
.og-tag {
  /* push to the bottom so the tags align across all cards regardless of quote length */
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent);
  font-weight: 700;
}

/* ─── Positioning statement ──────────────────────────────────────────────── */
.og-positioning {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-left: 4px solid var(--cs-accent);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  margin-top: 0.5rem;
}
.og-pos-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.og-positioning p {
  color: #333;
  font-size: 0.98rem;
  line-height: 1.65;
}

/* ─── Ideation trio ──────────────────────────────────────────────────────── */
.og-ideation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}
.og-ideation figure { margin: 0; }
.og-ideation img {
  width: 100%;
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.18s, box-shadow 0.18s;
}
.og-ideation img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.og-ideation .og-chosen img { border: 2px solid var(--cs-accent); }
.og-ideation figcaption {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.55;
  margin-top: 0.6rem;
}
.og-step-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.og-step-num { font-weight: 800; color: var(--cs-accent); margin-right: 0.4rem; }

/* ─── Logo showcase ──────────────────────────────────────────────────────── */
.og-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.og-cell {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 1.5rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.og-cell img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.18s;
}
.og-cell img:hover { transform: scale(1.03); }
.og-cell figcaption {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  font-weight: 700;
  text-align: center;
}

/* ─── Typography specimens ───────────────────────────────────────────────── */
.og-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.og-type {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
}
.og-type-role {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.og-type-name {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.og-type-note { font-size: 0.85rem; color: #555; line-height: 1.55; }

/* ─── Colour palette ─────────────────────────────────────────────────────── */
.og-swatches {
  display: flex;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.og-swatch { flex: 1; }
.og-swatch-labels { display: flex; margin-top: 0.5rem; margin-bottom: 1.25rem; }
.og-swatch-label {
  flex: 1;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.4;
  color: #555;
}

/* ─── Packaging SKUs ─────────────────────────────────────────────────────── */
.og-sku-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.og-sku {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 8px;
  padding: 1.25rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.og-sku img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.18s;
}
.og-sku img:hover { transform: scale(1.02); }
.og-sku-label { font-size: 0.72rem; font-weight: 600; color: #444; text-align: center; }
.og-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ─── Mockup (portrait, centred + capped) ────────────────────────────────── */
.og-mockup { max-width: 460px; margin: 1.5rem auto 0; }
.og-mockup img {
  width: 100%;
  display: block;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.og-mockup img:hover { transform: scale(1.01); }
.og-mockup figcaption {
  font-size: 0.78rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 500;
}

/* ─── Constraints & scalability ──────────────────────────────────────────── */
.og-constraints {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.og-constraint {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 1.2rem 1.35rem;
}
.og-flag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}
.og-flag--challenge { background: #f3e0dc; color: #8f3023; }
.og-flag--strength  { background: #e7ecd6; color: #4a5520; }
.og-constraint h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
}
.og-constraint p { font-size: 0.9rem; color: #555; line-height: 1.6; }

/* ─── Outcome ────────────────────────────────────────────────────────────── */
.og-statement {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: #2a3715;
  line-height: 1.3;
  max-width: 760px;
  margin: 0 0 1.75rem;
}

/* ─── Sub-section divider (Typography / Palette / Constraints) ────────────── */
.og-subsection { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.1); }
.og-subsection .cs-subheading { margin-top: 0; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .og-insights,
  .og-ideation,
  .og-type-grid,
  .og-sku-grid,
  .og-constraints { grid-template-columns: 1fr; }
  .og-logo-grid { grid-template-columns: 1fr 1fr; }
  .og-swatch-label { font-size: 0.5rem; }
}