/* ==========================================================================
   TUOIL — family range
   A category page's positions: the families as a row of links across the
   top, the count, then one card per position -- a photograph ending on a
   point, the name and the opening line of its description. The cards take the
   same point as the catalogue's tiles, so the family page reads as the tile
   it was opened from, broken out into its positions.
   ========================================================================== */

.s-range {
  padding-block: 0 6rem;
  background: var(--c-cream);
}

/* --- Families ----------------------------------------------------------------- */
.s-range__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-range__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.s-range__nav-link:hover { background: var(--c-surface-2); border-color: var(--c-ink); }

.s-range__nav-link[aria-current='page'] {
  background: var(--c-base);
  border-color: var(--c-base);
  color: var(--c-on-dark);
}

.s-range__count {
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* --- Positions ---------------------------------------------------------------- */
.s-range__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) clamp(24px, 2.4vw, 40px);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.s-range__card {
  display: block;
  height: 100%;
  color: var(--c-ink);
  text-decoration: none;
}

/* at 3:2 a point reaching a fifth of the height is 13.3% of the width */
.s-range__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  clip-path: polygon(0 0, 86.7% 0, 100% 50%, 86.7% 100%, 0 100%);
}

.s-range__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.s-range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.s-range__name {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.s-range__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  transform: translateY(3px);
  transition: transform var(--dur-base) var(--ease-out);
}

.s-range__text {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.s-range__card:hover .s-range__img,
.s-range__card:focus-visible .s-range__img { transform: scale(1.05); }

.s-range__card:hover .s-range__arrow,
.s-range__card:focus-visible .s-range__arrow { transform: translate(4px, 3px); }

.s-range__card:focus-visible {
  outline: 2px solid var(--c-base);
  outline-offset: 6px;
}

@media (max-width: 1280px) {
  .s-range__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .s-range__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .s-range { padding-bottom: var(--sp-6); }
  .s-range__list { row-gap: var(--sp-5); }
}

@media (max-width: 560px) {
  .s-range__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .s-range__img,
  .s-range__arrow { transition: none; }
  .s-range__card:hover .s-range__img,
  .s-range__card:focus-visible .s-range__img { transform: none; }
}