/* Swatch library (T31). Mobile first, tokens only.
   Prototype ("swatches"): heading with an optional text link on the right, then a grid of square samples with
   the name under each (13px). Small swatches have the design system's 22px swatch radius; large (patterns)
   are square-cornered. Columns per the spec: Small 4 / 6 / 8, Large 2 / 3 / 3 (phone / tablet / desktop).
   Details: without script, shown under the grid when targeted (:target); with script, a dialog (bottom sheet on phones). */

.swatches__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.swatches__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-10);
}
.swatches__titles { display: flex; flex-direction: column; gap: var(--space-3); }
.swatches__heading { margin: 0; }
.swatches__intro {
  margin: 0;
  max-width: var(--container-text);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* Grid */
.swatches__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.swatches--large .swatches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }

.swatches__item { min-width: 0; scroll-margin-top: var(--space-24); }

.swatches__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-heading);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.swatches__swatch:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-md);
}

.swatches__sample {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border-width) solid var(--c-ink-a10);
  border-radius: var(--radius-panel);
  background: var(--color-surface-quiet);
  transition: var(--transition-control);
}
.swatches--large .swatches__sample { border-radius: var(--radius-none); }
.swatches__sample picture,
.swatches__img {
  display: block;
  width: 100%;
  height: 100%;
}
.swatches__img { object-fit: cover; }
.swatches__swatch:hover .swatches__sample { border-color: var(--c-deep-blue); }
.swatches__item:target .swatches__sample {
  outline: var(--border-width-heavy) solid var(--color-accent-line);
  outline-offset: var(--focus-offset);
}

.swatches__text { display: flex; flex-direction: column; gap: var(--space-1); }
.swatches__name {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-label);
  color: var(--color-heading);
  overflow-wrap: anywhere;
}
.swatches__code {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--color-muted);
}
.swatches--large .swatches__name { font-size: var(--fs-body); }

/* Details (shared by the no-script :target view and the dialog) */
.swatches__details { display: none; }
.swatches__details:target,
.swatches__dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.swatches__details:target {
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-hairline);
  scroll-margin-top: var(--space-24);
}
.swatches__details:focus { outline: none; }
.swatches__big {
  max-width: 400px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-surface-quiet);
}
.swatches__big picture,
.swatches__big-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swatches__facts { display: flex; flex-direction: column; gap: var(--space-2); }
.swatches__details-name {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}
.swatches__details-code,
.swatches__details-note { margin: 0; font-size: var(--fs-body); color: var(--color-text); }
.swatches__details-code span { font-weight: var(--fw-medium); color: var(--color-heading); }
.swatches__comes-in-heading {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-eyebrow);
}
.swatches__comes-in { margin: 0; padding: 0; list-style: none; }
.swatches__comes-in a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-link);
  font-size: var(--fs-body);
}
.swatches__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-body-sm);
  color: var(--color-link);
}

/* With script: the details live in the dialog only. */
.swatches[data-swatches-ready] .swatches__details-list { display: none; }

.swatches__dialog {
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  margin: auto 0 0;            /* phones: a sheet from the bottom */
  padding: 0;
  border: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--c-white);
  color: var(--color-text);
  box-shadow: var(--shadow-panel);
  overflow: auto;
}
.swatches__dialog::backdrop { background: var(--c-ink-a26); }
.swatches__dialog-inner {
  position: relative;
  padding: var(--space-6) var(--page-gutter) var(--space-8);
}
.swatches__dialog-body .swatches__big { max-width: 240px; }
.swatches__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-deep-blue);
  cursor: pointer;
  transition: var(--transition-control);
  z-index: 1;
}
.swatches__close:hover { border-color: var(--c-deep-blue); }
.swatches__close:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

@media (prefers-reduced-motion: no-preference) {
  .swatches__dialog[open] { animation: swatches-sheet var(--duration-base) var(--ease-brand); }
  @keyframes swatches-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

@media (min-width: 600px) {
  .swatches__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .swatches--large .swatches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
  .swatches__details:target,
  .swatches__dialog-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .swatches__dialog-body .swatches__big { max-width: none; }
  .swatches__dialog {
    width: min(760px, calc(100vw - 2 * var(--page-gutter)));
    margin: auto;
    border-radius: var(--radius-card);
  }
  .swatches__dialog-inner { padding: var(--space-8); }
}

@media (min-width: 1024px) {
  .swatches__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
}