/*
  Layout and UI primitives. Configure them by setting their custom properties on the
  same element (from a component class). Each primitive declares its own defaults, so a
  nested primitive never inherits a parent's setting. Primitives never set outer margins.
*/

@layer primitives {
  /* ---- Container: full-bleed row (backgrounds reach both edges); content centred, at most --content-max wide ---- */
  .container {
    padding-inline: max(var(--gutter), (100% - var(--content-max)) / 2);
  }

  /* ---- Stack: vertical flow ---- */
  .stack {
    --stack-gap: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  /* ---- Cluster: horizontal row that wraps ---- */
  .cluster {
    --cluster-gap: var(--space-2);
    --cluster-justify: flex-start;
    --cluster-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: var(--cluster-align);
    justify-content: var(--cluster-justify);
    gap: var(--cluster-gap);
  }

  /* ---- Split: two-up row, equal children ---- */
  .split {
    --split-gap: var(--space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--split-gap);
  }

  .split > * {
    flex: 1;
  }

  /* ---- Grid: auto-fit columns ---- */
  .grid {
    --grid-gap: var(--space-5);
    --grid-min: var(--card-min);
    --grid-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
  }

  /* ---- Button: renders the same on <a> and <button>. Text is uppercased here, not in the source. ---- */
  .button {
    display: inline-block;
    font-size: var(--text-sm);
    font-family: var(--font-body);
    line-height: normal;
    padding: var(--button-pad-y) var(--button-pad-x);
    font-weight: var(--weight-bold);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--radius);
  }

  .button--primary {
    background-color: var(--color-action);
    color: var(--color-on-action);
    border: none;
    transition: background-color 0.2s ease;
  }

  .button--primary:hover,
  .button--primary:active {
    background-color: var(--color-action-hover);
  }

  .button--outline {
    background: none;
    border: 2px solid var(--color-on-dark);
    color: var(--color-on-dark);
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }

  .button--outline:hover {
    background-color: var(--color-on-dark-hover);
    border-color: var(--color-on-dark);
    opacity: 0.9;
  }

  .button--outline:active {
    background-color: var(--color-on-dark-active);
    opacity: 0.8;
  }

  /* Outline for light backgrounds (--outline is white, for the hero photo). */
  .button--outline-on-light {
    background: none;
    border: 2px solid var(--color-action);
    color: var(--color-accent-text);
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .button--outline-on-light:hover,
  .button--outline-on-light:active {
    border-color: var(--color-action-hover);
    color: var(--color-action-hover);
  }

  .button--inverse {
    background-color: var(--color-on-band);
    color: var(--color-band);
    border: none;
    transition: background-color 0.2s ease;
  }

  .button--inverse:hover,
  .button--inverse:active {
    background-color: var(--color-field);
  }

  .button--upload {
    background-color: var(--color-upload);
    color: var(--color-on-action);
    border: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }

  .button--upload:hover {
    background-color: var(--color-upload-hover);
    opacity: 0.9;
  }

  .button--upload:active {
    background-color: var(--color-upload-hover);
    opacity: 0.8;
  }

  /* ---- Field: label + control column ---- */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .field label,
  .label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-body);
    line-height: normal;
  }

  .field input,
  .field textarea {
    border: 1px solid var(--color-field-border);
    background-color: var(--color-field);
    border-radius: var(--radius);
    padding: var(--space-2);
  }

  .field input,
  .field textarea,
  .field select {
    font-size: max(var(--text-input-min), var(--text-md));
  }

  /* An input's natural width follows its own font, so below 1537 the 16px floor would widen the consult
     card and make .split pairs wrap sooner. Pin it to the width it had at --text-md. The @supports guard
     matters: contain without contain-intrinsic-inline-size (Safari < 17) would size the input as 0 wide. */
  @supports (contain-intrinsic-inline-size: 1px) {
    @media screen and (max-width: 1536px) {
      .field input {
        contain: inline-size;
        contain-intrinsic-inline-size: var(--field-intrinsic-w);
      }
    }
  }

  .field textarea {
    min-height: var(--textarea-min-h);
    height: var(--textarea-min-h);
    resize: none;
    overflow-y: hidden;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1; /* Firefox dims placeholders by default */
  }

  .field input:focus,
  .field input:not(:placeholder-shown),
  .field textarea:focus,
  .field textarea:not(:placeholder-shown) {
    background-color: var(--color-field-filled);
  }

  /* ---- Text styles: heading looks, independent of the heading level ---- */
  .display-2xl {
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    font-family: var(--font-display);
    line-height: var(--leading-display);
  }

  .display-xl {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold); /* Odor Mean Chey only ships 400: this is a synthesized bold */
    font-family: var(--font-display);
    line-height: normal;
  }

  .display-lg {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    font-family: var(--font-display);
    line-height: normal;
  }

  /* ---- Icon ---- */
  .icon {
    --icon-size: var(--icon-sm);
    width: var(--icon-size);
    height: var(--icon-size);
  }

  /* ---- Visually hidden: removed from layout, still read by screen readers ---- */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}