/* ==========================================================================
   Astratech Solutions — Components
   Buttons, nav, product cards and grid, forms, detail panel.
   ========================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.btn--compact { padding: var(--space-3) var(--space-5); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--color-accent-500);
  color: var(--color-ink-900);
  border: 1px solid var(--color-accent-500);
}

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

.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-border-on-dark);
}

.btn--ghost-on-dark:hover {
  border-color: var(--color-accent-300);
  color: var(--color-accent-300);
}

/* -- Nav links ------------------------------------------------------------- */

.site-nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-1);
  transition: color var(--duration-base) var(--ease-standard);
}

.site-nav__link:hover,
.site-nav__link.is-current { color: var(--color-text-primary); }

.site-footer__link {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.site-footer__link:hover {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-accent-500);
}

/* -- Menu toggle ----------------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-primary);
}

/* Hidden at the same width the inline nav appears — see the header note in
   layout.css for why that is 70rem and not 64rem. */
@media (min-width: 70rem) {
  .menu-toggle { display: none; }
}

/* -- Product index ---------------------------------------------------------
   A grouped grid. Everything in the range is visible on the page; nothing is
   hidden behind a horizontal drag. See the note in js/products.js. */

.range-groups {
  display: grid;
  gap: var(--space-8);
}

.range-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline);
}

.range-group__title {
  /* Footer product links target these headings; land them under the header. */
  scroll-margin-top: 6rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.range-group__count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--grid-gutter);
}

/* Grid items already stretch to the tallest card in the row, but the card
   nested inside the <li> does not inherit that height, so `margin-top: auto`
   on the foot had no slack to consume and the "Specification" cue landed at a
   different height in every card. Stretch the card to the row and the feet
   line up across the grid. */
.product-grid > li { display: flex; }
.product-grid > li > .product-card { flex: 1; }

@media (min-width: 48rem) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.product-card__media {
  position: relative;
  height: clamp(12rem, 17vw, 15rem);
  overflow: hidden;
  background: var(--color-ground-200);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The HS code sits on the image, not in the body copy. It is the first thing
   a buyer or a customs broker scans for, and it is the one identifier that
   means the same thing in every destination market. */
.product-card__hs {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 1;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-2);
  background: rgba(7, 19, 22, 0.82);
  color: var(--color-accent-300);
  border-radius: var(--radius-sm);
}

.product-card__body {
  padding: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.product-card__name {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

/* The trigger is a real link to the product's own page, stretched over the
   whole card so the entire card is clickable; JavaScript intercepts a plain
   click to open the panel instead, and a middle-click or a crawler follows
   the link. The accessible name stays on that one element. */
.product-card__trigger {
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.product-card__trigger::after {
  content: '';
  position: absolute;
  inset: 0;
}

.product-card__trigger:focus-visible {
  outline: none;
}

.product-card:has(.product-card__trigger:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* The subtitle is capped at two lines. A three-line subtitle does not break
   the alignment — the cards stretch and the rules still meet — but it makes
   one card in a row visibly taller than its neighbours' content and the index
   reads as ragged. Two lines is the budget; write to it. */
.product-card__botanical {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The rule and the cue are one unit, pinned to the bottom of the card.

   The rule used to sit directly under the subtitle, which meant a one-line
   subtitle left it high and a two-line subtitle pushed it down — the rules
   zig-zagged across a row while the bottom-aligned cue stayed put, and the
   gap between rule and cue swung with it. Both now sit in the foot, so the
   rule lands on one baseline across the grid and the cue is a fixed step
   below it. */
.product-card__foot {
  margin-top: auto;
  padding-top: var(--space-5);
}

.product-card__rule { display: block; }

.product-card__cue {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
}


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

.enquiry {
  background: var(--color-ink-800);
  border: var(--border-hairline-dark);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.enquiry__legend {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-400);
}

.field { display: grid; gap: var(--space-2); }

.field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  padding: 0;
}

.field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink-900);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.field__input:hover { border-color: var(--color-ink-400); }
.field__input:focus-visible { border-color: var(--color-accent-500); }

.field__input--area { resize: vertical; min-height: 6rem; }

.field__hint,
.field__error {
  font-size: var(--text-xs);
  color: var(--color-ink-400);
}

.field__error { color: var(--color-accent-300); }

.field__input[aria-invalid="true"] { border-color: var(--color-accent-300); }

.field-row { display: grid; gap: var(--space-5); }

.field--consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.field--consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  accent-color: var(--color-accent-500);
}

.field--consent .field__error { grid-column: 1 / -1; }

.field__consent-label {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-snug);
}

.field__consent-label a { color: var(--color-accent-300); }

/* "optional" sits after the label in the muted colour, so the required
   fields are the plain ones and nothing needs an asterisk. */
.field__optional {
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--color-ink-400);
  margin-left: var(--space-2);
}

.enquiry__status {
  font-size: var(--text-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
}

.enquiry__status[data-state="error"] { border-color: var(--color-accent-300); }
.enquiry__status[data-state="success"] { border-color: var(--color-accent-500); }

.enquiry__status-text {
  margin: 0;
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark-muted);
}

.enquiry__status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.enquiry__status-link {
  color: var(--color-accent-300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.enquiry__status-link:hover,
.enquiry__status-link:focus-visible { border-bottom-color: var(--color-accent-300); }

/* The escape hatch when no mail client opens: the whole enquiry on the
   clipboard, ready to paste into webmail. */
.enquiry__copy {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-ink-600);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.enquiry__copy:hover,
.enquiry__copy:focus-visible {
  border-color: var(--color-accent-500);
  color: var(--color-accent-300);
}

@media (min-width: 30rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .enquiry { padding: var(--space-7); }
}

/* -- Product detail panel -------------------------------------------------- */

.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  background: color-mix(in srgb, var(--color-ink-900) 55%, transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.detail-backdrop.is-open { opacity: 1; }

.detail-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-panel);
  width: min(42rem, 100%);
  background: var(--color-surface);
  border-left: var(--border-hairline);
  box-shadow: var(--shadow-panel);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.detail-panel.is-open { transform: translateX(0); }

/* The body settles in a beat after the panel, so the content reads as
   arriving rather than being already there when the door opens. */
@keyframes detail-body-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.detail-panel.is-open .detail-panel__body {
  animation: detail-body-in var(--duration-slow) var(--ease-out) 120ms both;
}

.detail-panel__inner { position: relative; }

.detail-panel__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.detail-panel__close:hover { border-color: var(--color-accent-500); }

.detail-panel__media { background: var(--color-ground-200); }

.detail-panel__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.detail-panel__body { padding: var(--space-6); }

.detail-panel__name { font-size: var(--text-2xl); margin-bottom: var(--space-2); }

.detail-panel__subtitle {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}

.detail-panel__description {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.detail-panel__subhead {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  padding-top: var(--space-5);
  margin-bottom: var(--space-4);
  border-top: var(--border-hairline);
}

.spec-list { margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); }

.spec-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-4);
  font-size: var(--text-sm);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
}

.spec-row__key {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.spec-row__value { margin: 0; color: var(--color-text-primary); }

.spec-row__value--tbc {
  color: var(--color-accent-600);
  font-weight: var(--weight-medium);
}

/* -- Grade table -----------------------------------------------------------
   For a commodity sold at several graded analyses. Figures are right-aligned
   and tabular so a buyer can read down a column; the parameter column is
   sticky so it stays legible when a narrow panel scrolls sideways. */

.grade-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline);
}

/* Fixed layout so the four grade columns are equal rather than sized to
   whichever heading happens to be longest — a comparison table that gives
   "Super Prime" half again the width of "Prime" reads as an accident.
   min-width keeps the columns legible on a phone, where the wrapper scrolls
   sideways under the sticky parameter column instead of crushing them. */
.grade-table {
  width: 100%;
  min-width: 34rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grade-table th,
.grade-table td {
  padding: var(--space-3) var(--space-3);
  text-align: right;
  border-bottom: var(--border-hairline);
}

.grade-table thead th {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  border-bottom: 1px solid var(--color-ink-900);
  vertical-align: bottom;
  /* Grade names wrap ("1121 Golden Sella" over two lines); the values below
     them stay on one line. Fixed layout would otherwise let a long heading
     run into its neighbour. */
  white-space: normal;
  line-height: var(--leading-snug);
}

.grade-table tbody tr:last-child th,
.grade-table tbody tr:last-child td { border-bottom: 0; }

/* The parameter column carries the row's name, so it reads left-aligned and
   stays put while the value columns scroll under it. */
/* Selectors are qualified with `th` so they outrank `.grade-table th` above,
   which sets the right alignment the value columns want. */
.grade-table th.grade-table__corner,
.grade-table th.grade-table__row-head {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 11.5rem;
  text-align: left;
  white-space: normal;
  background: var(--color-surface);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

.grade-table th.grade-table__corner { font-weight: var(--weight-semibold); }

.grade-table tbody td {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.tag {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
}

/* The per-product caveat — what actually goes wrong with this commodity, and
   what we do about it. Set on the dark ground rather than the light one below,
   because it is the paragraph the panel exists for and it should not read as
   a footnote. */
.detail-panel__callout {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  padding: var(--space-5);
  background: var(--color-ink-900);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-5);
  border-left: 2px solid var(--color-accent-500);
}

.detail-panel__note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: var(--space-4);
  background: var(--color-ground-200);
  margin-bottom: var(--space-5);
  border-left: 2px solid var(--color-accent-500);
}

body.has-panel-open { overflow: hidden; }

@media (max-width: 29.999rem) {
  .spec-row { grid-template-columns: 1fr; gap: var(--space-1); }
}