/* ==========================================================================
   TUOIL — product families
   The catalogue's tiles: a photograph ending on a
   point, and under it a pale panel with the family's name, what is in it and
   an arrow, ending on a point of its own. Both points reach the same distance,
   so a tile reads as one figure in two parts.

   Five families on a six-column grid: three tiles across the first row, two
   wider ones across the second, so both rows end on the same line.
   ========================================================================== */

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

.s-families__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-families__item { grid-column: span 2; }
.s-families__item:nth-child(n + 4) { grid-column: span 3; }

.s-families__card {
  --tile-h: clamp(170px, 15vw, 236px);
  --nose: calc(var(--tile-h) * 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--c-ink);
  text-decoration: none;
}

.s-families__media {
  display: block;
  height: var(--tile-h);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--nose)) 0, 100% 50%, calc(100% - var(--nose)) 100%, 0 100%);
}

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

.s-families__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--sp-3);
  margin-top: 6px;
  padding: var(--sp-3) calc(var(--nose) + var(--sp-2)) var(--sp-3) var(--sp-3);
  background: var(--c-surface-2);
  clip-path: polygon(0 0, calc(100% - var(--nose)) 0, 100% 50%, calc(100% - var(--nose)) 100%, 0 100%);
  transition: background-color var(--dur-base) var(--ease-out);
}

.s-families__name {
  grid-column: 1 / -1;
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.s-families__list-text {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.s-families__arrow {
  width: 22px;
  height: 22px;
  color: var(--c-ink);
  transition: transform var(--dur-base) var(--ease-out);
}

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

.s-families__card:hover .s-families__body,
.s-families__card:focus-visible .s-families__body { background: var(--c-surface-3); }

.s-families__card:hover .s-families__arrow,
.s-families__card:focus-visible .s-families__arrow { transform: translateX(4px); }

/* The clip-paths sit on the parts, not on the link, so the link's own
   outline shows whole around the tile. */
.s-families__card:focus-visible {
  outline: 2px solid var(--c-base);
  outline-offset: 4px;
}

@media (max-width: 1024px) {
  .s-families__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-families__item,
  .s-families__item:nth-child(n + 4) { grid-column: span 1; }
  /* the odd fifth takes the full row */
  .s-families__item:last-child { grid-column: 1 / -1; }
  .s-families__card { --tile-h: clamp(170px, 26vw, 240px); }
}

@media (max-width: 768px) {
  .s-families { padding-block: var(--sp-6); }
}

@media (max-width: 600px) {
  .s-families__list { grid-template-columns: minmax(0, 1fr); }
  .s-families__card { --tile-h: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-families__img,
  .s-families__arrow { transition: none; }
  .s-families__card:hover .s-families__img,
  .s-families__card:focus-visible .s-families__img { transform: none; }
}