/**
 * Copyright (c) 2026 SEVEN TWENTY DEGREES (Pty) Ltd
 * Registration No: 2023/212025/07
 * All rights reserved.
 *
 * This software is the proprietary and confidential information of
 * SEVEN TWENTY DEGREES (Pty) Ltd. Unauthorized
 * copying, modification, distribution, or use is strictly prohibited.
 */

/* =========================================================================
   COMPONENTS — buttons, tags, cards, forms, hero, article body, callouts.
   ========================================================================= */

/* ---- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
  cursor: pointer;
}
.btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }

.btn--light {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.btn--light:hover { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }

/* ---- Tags / badges -------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--color-paper-alt);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-rule);
  white-space: nowrap;
}
.tag--severity-high {
  background: color-mix(in srgb, var(--color-severity-high) 10%, var(--color-paper));
  color: var(--color-severity-high);
  border-color: color-mix(in srgb, var(--color-severity-high) 35%, transparent);
}
.tag--severity-med {
  background: color-mix(in srgb, var(--color-severity-med) 14%, var(--color-paper));
  color: var(--color-severity-med);
  border-color: color-mix(in srgb, var(--color-severity-med) 35%, transparent);
}
.tag--severity-low {
  background: color-mix(in srgb, var(--color-severity-low) 14%, var(--color-paper));
  color: var(--color-severity-low);
  border-color: color-mix(in srgb, var(--color-severity-low) 35%, transparent);
}
.tag--ai {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-paper));
  color: color-mix(in srgb, var(--color-accent) 60%, var(--color-ink));
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.tag--category { background: var(--color-paper); color: var(--color-muted); }

/* ---- Dateline (newsroom feel) -------------------------------------- */

.dateline {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
}
.dateline .dot { width: 3px; height: 3px; background: var(--color-muted); border-radius: 50%; display: inline-block; }

/* ---- Eyebrow / section labels -------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* ---- Hero ----------------------------------------------------------- */

.hero {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--color-rule);
  background:
    radial-gradient(ellipse at 85% 15%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 55%),
    var(--color-paper);
}
.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-8);
  }
}
.hero h1 {
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: 14ch;
  font-variation-settings: "opsz" 64, "SOFT" 30;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-primary);
  font-variation-settings: "opsz" 64, "SOFT" 80;
}
.hero__sub {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: 46ch;
  margin-top: var(--space-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__media .placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-5);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Article cards (news) ------------------------------------------ */

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}
.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.article-card__media {
  margin: 0 0 var(--space-3) 0;
  aspect-ratio: 16 / 10;
  background: var(--color-paper-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card h3 {
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
}
.article-card__summary {
  color: var(--color-ink-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}
.article-card__footer {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule-soft);
}

/* Lead story — bigger, wider */
.article-card--lead {
  grid-column: 1 / -1;
  padding: var(--space-6) var(--space-7);
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.article-card--lead h3 {
  font-size: var(--fs-2xl);
  color: var(--color-paper);
  max-width: 24ch;
}
.article-card--lead .article-card__summary { color: color-mix(in srgb, var(--color-paper) 85%, transparent); }
.article-card--lead .article-card__footer {
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
  border-top-color: color-mix(in srgb, var(--color-paper) 18%, transparent);
}
.article-card--lead:hover { color: var(--color-paper); }

/* ---- Product tiles -------------------------------------------------- */

.product-tile {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.product-tile__media {
  aspect-ratio: 4 / 3;
  background: var(--color-paper-deep);
  border-bottom: 1px solid var(--color-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-tile__media .placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: var(--space-3);
}
.product-tile__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.product-tile h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.product-tile__summary { color: var(--color-ink-soft); font-size: var(--fs-base); }
.product-tile__cta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

/* Variants per product line — retired 2026-04-20 (no protein product lines). */

/* ---- Forms ---------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-soft);
  font-weight: var(--fw-medium);
}
.field input[type="email"],
.field input[type="text"],
.field input[type="tel"],
.field select,
.field textarea {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  font-size: var(--fs-base);
  width: 100%;
  transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.field textarea { min-height: 140px; resize: vertical; }
.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.checkgroup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: 0.3rem;
}
.checkgroup label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  cursor: pointer;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  transition: background var(--dur-quick) var(--ease-out);
}
.checkgroup label:hover { background: var(--color-paper-alt); }
.checkgroup input[type="checkbox"] { accent-color: var(--color-primary); }

.form-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 640px;
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  display: none;
}
.form-status[data-state="ok"]   { display: block; background: color-mix(in srgb, var(--color-severity-low) 14%, var(--color-paper)); color: var(--color-severity-low); }
.form-status[data-state="err"]  { display: block; background: color-mix(in srgb, var(--color-severity-high) 10%, var(--color-paper)); color: var(--color-severity-high); }
.form-status[data-state="info"] { display: block; background: var(--color-paper-alt); color: var(--color-ink-soft); }

/* ---- Article body (news article template) ------------------------- */

.article-header {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}
.article-header__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.article-header h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
  max-width: 22ch;
  font-variation-settings: "opsz" 48, "SOFT" 30;
}
.article-header__lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
  margin-top: var(--space-4);
  max-width: var(--measure-article);
  font-style: italic;
}
.article-header__byline {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.article-body {
  padding-block: var(--space-7);
}
.article-body p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  margin-top: var(--space-4);
}
.article-body p:first-child { margin-top: 0; }
.article-body p:first-child::first-letter {
  font-family: var(--font-serif);
  font-size: 3.6em;
  float: left;
  line-height: 0.9;
  padding: 0.15em 0.12em 0 0;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}
.article-body h2,
.article-body h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.article-body h2 { font-size: var(--fs-xl); }

/* Callouts */
.callout {
  background: var(--color-paper-alt);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}
.callout--disclaimer {
  border-left-color: var(--color-muted);
  background: color-mix(in srgb, var(--color-muted) 6%, var(--color-paper));
  font-size: var(--fs-sm);
}

/* Source list */
.source-list {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
}
.source-list h2 {
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
  font-weight: var(--fw-medium);
}
.source-list ol {
  padding-left: 1.4em;
  font-size: var(--fs-sm);
}
.source-list li { margin-top: var(--space-2); color: var(--color-ink-soft); }
.source-list a { word-break: break-word; }

/* ---- News filter pills --------------------------------------------- */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.filter-pills a {
  display: inline-flex;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  background: var(--color-paper);
  text-decoration: none;
  white-space: nowrap;
}
.filter-pills a:hover { background: var(--color-paper-alt); color: var(--color-ink); }
.filter-pills a[aria-current="page"] {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

/* ---- News side rail ------------------------------------------------ */

.rail-card {
  background: var(--color-paper-alt);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
}
.rail-card h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}
.rail-card p {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}
.rail-card form { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- Home: "what we sell" tiles row -------------------------------- */

.product-row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- Home: benefits grid ------------------------------------------- */

.benefits {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.benefit {
  padding: var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.benefit__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-primary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  display: block;
}
.benefit h4 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.benefit p { font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* ---- Home: about strip --------------------------------------------- */

.about-strip {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 820px) {
  .about-strip { grid-template-columns: 1fr auto; align-items: center; }
}
.about-strip p { font-family: var(--font-serif); font-size: var(--fs-md); max-width: 46ch; color: color-mix(in srgb, var(--color-paper) 92%, transparent); }
.about-strip h2 { color: var(--color-paper); font-size: var(--fs-xl); margin-bottom: var(--space-3); }

/* ---- Product page specifics ---------------------------------------- */

.product-hero {
  background: var(--color-paper-alt);
  border-bottom: 1px solid var(--color-rule);
  padding-block: var(--space-7);
}
.product-hero__media {
  aspect-ratio: 3 / 2;
  background: var(--color-paper-deep);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule);
}
/* Product-hero variants retired 2026-04-20 (no protein product lines). */

.cut-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: var(--space-5);
}
.cut-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  margin-top: 0;
}
.cut-list strong { display: block; font-family: var(--font-serif); font-size: var(--fs-md); }
.cut-list span { font-size: var(--fs-sm); color: var(--color-muted); }

/* Sourcing / traceability block */
.trace-block {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-left: 4px solid var(--color-sage);
  padding: var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-top: var(--space-6);
}
.trace-block h3 {
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-innovation);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
}

/* ---- Utilities ------------------------------------------------------ */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.text-muted { color: var(--color-muted); }
.text-mono  { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.lede { font-size: var(--fs-md); color: var(--color-ink-soft); max-width: var(--measure-wide); }