/*
  A hang of plates. Each plate stands above the service, or the pair of
  services, it illustrates; plates share one foot line, like pictures hung
  on a rail, so the captions under them share one line too.
  Colour for the colour services, black and white for the care.
*/
.services__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-2xl);
  max-width: 26rem;
  margin-inline: auto;
  counter-reset: service;
}

/* Plate first to the eye, name first in the source */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  counter-increment: service;
}

.service::before {
  content: counter(service, upper-roman);
  grid-row: 2;
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-accent-strong);
}

.service__name {
  grid-row: 3;
  font-size: var(--text-h3);
}

.service__text {
  grid-row: 4;
  max-width: 26em;
  margin-top: var(--space-xs);
  color: var(--color-ink-soft);
}

.service__plate {
  grid-row: 1;
  margin-bottom: var(--space-md);
}

/* Where the service leads: one small-caps link per page it opens */
.service__links {
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-md);
}

.service__photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.service__photo--mono {
  filter: var(--filter-mono);
}

/* Hair Spa has no plate of its own: it reads on under the hair plate */
.service--spa {
  margin-top: calc(var(--space-lg) - var(--space-2xl));
}

.service--nails .service__photo {
  object-position: 50% 30%;
}

.service--brows .service__photo {
  aspect-ratio: 1;
}

.service--makeup .service__photo {
  object-position: 50% 20%;
}

/* Cut wide from the top: the bowl and the hand */
.service--rituals .service__photo {
  aspect-ratio: 3 / 2;
  object-position: 50% 0;
}

/*
  The hang needs subgrid, so that every caption in a rank starts on the
  same line; a browser without it keeps the single column above.
*/
@supports (grid-template-rows: subgrid) {
  /* Three ranks on six columns: hair over its two services beside the nails, then two plates, then one */
  @media (min-width: 48em) {
    .services__list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: repeat(5, auto) var(--rank-gap) repeat(5, auto) var(--rank-gap) repeat(5, auto);
      gap: 0 var(--space-lg);
      max-width: 44rem;
    }

    .service {
      grid-template-rows: subgrid;
    }

    .service__plate {
      align-self: end;
    }

    .service--color {
      grid-area: 1 / 1 / span 5 / span 4;
    }

    /* Its caption keeps to the left half; Hair Spa takes the right one */
    .service--color .service__name,
    .service--color .service__text,
    .service--color .service__links {
      max-width: calc(50% - var(--space-lg) / 2);
    }

    .service--color .service__photo {
      aspect-ratio: 1;
      object-position: 50% 12%;
    }

    /* No plate, so Hair Spa takes only the four caption rows of the rank */
    .service--spa {
      grid-area: 2 / 3 / span 4 / span 2;
      margin-top: 0;
    }

    .service--spa::before {
      grid-row: 1;
    }

    .service--spa .service__name {
      grid-row: 2;
    }

    .service--spa .service__text {
      grid-row: 3;
    }

    .service--spa .service__links {
      grid-row: 4;
    }

    .service--nails {
      grid-area: 1 / 5 / span 5 / span 2;
    }

    .service--nails .service__photo {
      aspect-ratio: 2 / 3;
    }

    .service--brows {
      grid-area: 7 / 1 / span 5 / span 3;
    }

    .service--makeup {
      grid-area: 7 / 4 / span 5 / span 3;
    }

    .service--rituals {
      grid-area: 13 / 1 / span 5 / span 6;
    }

    .service--rituals .service__photo {
      aspect-ratio: 2 / 1;
    }
  }

  /* Two ranks on twelve columns: four captions under three plates, then two */
  @media (min-width: 64em) {
    .services__list {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: repeat(5, auto) var(--rank-gap) repeat(5, auto);
      max-width: none;
    }

    /*
      A caption of the first rank is a quarter of the hang wide: 22.5vw less
      three quarters of a gap, up to 80em. The longest name, Face & Brows
      Atelier, sets 8.3em wide, so at an 8.85th of the quarter it keeps to one
      line and no caption in the rank opens an empty line under its name.
      The numeral keeps its proportion to the name.
    */
    .service::before {
      font-size: min(var(--text-lead), (22.5vw - 1.125rem) / 10.1);
    }

    .service__name {
      font-size: min(var(--text-h3), (22.5vw - 1.125rem) / 8.85);
    }

    .service--color {
      grid-area: 1 / 1 / span 5 / span 6;
    }

    .service--spa {
      grid-area: 2 / 4 / span 4 / span 3;
    }

    .service--nails {
      grid-area: 1 / 7 / span 5 / span 3;
    }

    .service--brows {
      grid-area: 1 / 10 / span 5 / span 3;
    }

    .service--brows .service__photo {
      aspect-ratio: 2 / 3;
      object-position: 24% 50%;
    }

    .service--makeup {
      grid-area: 7 / 1 / span 5 / span 4;
    }

    .service--rituals {
      grid-area: 7 / 5 / span 5 / span 8;
    }

    .service--rituals .service__photo {
      aspect-ratio: 3 / 2;
    }
  }
}