/* Range grid — M04.
 *
 * Cards inside the hairline grid. Hovering fills the card with water rather
 * than lifting it: this system has no shadows, and sky is the colour that
 * means "pool".
 */

.pl-range__label {
  margin-bottom: var(--sp-4);
}

.pl-range__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition);
}

a.pl-range__card:hover,
a.pl-range__card:focus-visible {
  background: var(--c-water);
  /* Navy on sky is 7.8:1 — the correct pairing. On a dark section the card
   * text is paper, which would fail on sky, so it is pinned back to navy. */
  color: var(--pl-navy);
}

a.pl-range__card:hover .pl-muted,
a.pl-range__card:focus-visible .pl-muted {
  color: var(--pl-navy);
}

.pl-range__title {
  font-size: 1.1875rem;
}

.pl-range__text {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pl-range__spec {
  font-size: 0.78125rem;
  margin-top: auto;
}

/* --------------------------------------------------------------- compact */
/* Naming the product lines, not selling one of them. The framed grid becomes
 * three columns each opened by a single hairline — the same device the pillar
 * triad uses, for the same reason: these are three parts of one statement, not
 * three cards to choose between. */
.pl-range--compact .pl-range__grid {
  border-top: 0;
  border-left: 0;
  gap: var(--sp-4);
}

.pl-range--compact .pl-range__card {
  border-right: 0;
  border-bottom: 0;
  border-top: var(--rule) solid var(--c-rule);
  padding: var(--sp-3) 0 0;
  gap: var(--sp-3);
}

/* -------------------------------------------------------------- diagrams */
.pl-diagram {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.pl-diagram__water {
  fill: var(--c-water);
  stroke: var(--c-text);
  stroke-width: 1;
}

/* The cover takes the section's own surface colour, so it reads as solid
 * against the water in both themes: paper on sky in light, navy on sky in
 * dark. Both are legible; neither needs a second asset. */
.pl-diagram__cover {
  fill: var(--c-surface);
  stroke: var(--c-text);
  stroke-width: 1;
}

/* The terrace is drawn as an open path — it has no floor, because the floor
 * is the water. */
path.pl-diagram__cover {
  fill: var(--c-surface);
}

a.pl-range__card:hover .pl-diagram__cover,
a.pl-range__card:focus-visible .pl-diagram__cover {
  stroke: var(--pl-navy);
}

/* The section opener: a small label, a real heading, or both. A heading is the
 * better opener wherever the page needs a heading structure — the homepage
 * does — and the label alone is right where it does not. */
.pl-range__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.pl-range__title-head {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  max-width: 20ch;
}

/* -------------------------------------------------------- landscape variant */
/* E1 Landing Final: photograph first, then the icon beside the name.
 *
 * Two up, and stated rather than fitted — the design draws 1fr 1fr and it is a
 * decision, not an accident of card width. Left to auto-fit a 1440px screen
 * gives three and orphans the fourth card on a row of its own.
 *
 * These cards are discrete objects with a hover fill, so they drop the shared
 * .pl-grid frame: the hairlines that divide the catalogue's cards would draw a
 * box round each of these and then fight the fill. */
.pl-range--landscape .pl-range__grid {
  border: 0;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .pl-range--landscape .pl-range__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pl-range--landscape .pl-range__grid > * {
  border: 0;
  padding: 0;
}

.pl-range--landscape .pl-range__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--transition);
}

/* Sky on hover, as the design draws it. Navy type on sky is 7.8:1, which is
 * why the card may take the fill and type on sky may never be white. The base
 * card rule already does this; it is repeated here only to name the token
 * rather than the raw navy, and both resolve to the same colour. */
.pl-range--landscape a.pl-range__card:hover,
.pl-range--landscape a.pl-range__card:focus-visible {
  background: var(--c-water);
  color: var(--c-on-water);
}

.pl-range--landscape .pl-range__card img,
.pl-range--landscape .pl-range__card .pl-placeholder {
  width: 100%;
  height: clamp(11rem, 20vw, 16.25rem);
  object-fit: cover;
  display: block;
}

.pl-range--landscape .pl-range__foot {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.pl-range--landscape .pl-icon {
  flex: none;
  width: clamp(2.25rem, 4vw, 3.875rem);
  color: var(--pl-navy);
}

.pl-range--landscape .pl-range__title {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.1;
}

.pl-range--landscape .pl-range__text {
  margin: var(--sp-1) 0 0;
  line-height: 1.55;
}

/* The hover fill has to carry the muted text too, or the sentence drops out
 * of contrast the moment the card lights up. */
.pl-range--landscape a.pl-range__card:hover .pl-muted,
.pl-range--landscape a.pl-range__card:focus-visible .pl-muted {
  color: var(--c-on-water);
}

/* With a head link the opener becomes a row: heading left, link right, both on
 * the same baseline. Below 48rem it goes back to stacking, because a heading
 * and a link side by side at 375px leaves neither enough width. */
@media (min-width: 48rem) {
  .pl-range__head:has(.pl-range__head-link) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
  }
}

/* The head link sits with the heading rather than under it, so the row reads
 * as one line: here are four, or let us ask you instead. */
.pl-range__head-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-bottom: var(--rule) solid currentColor;
  white-space: nowrap;
}

.pl-range__head-link:hover {
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------- narrow */
/* One card per row on a phone, so the photograph is the only thing setting the
 * card's height. At the desktop's proportions four of them run to more than two
 * screens of scrolling before the reader reaches anything else; a shorter crop
 * keeps the range legible as a set rather than as a queue. */
@media (max-width: 47.999rem) {
  .pl-range--landscape .pl-range__grid {
    gap: var(--sp-4);
  }

  /* A wider crop, not a taller one: 16/9 of a full-width card is 184px, which
   * is *more* than the 176px floor the clamp above already lands on. 2/1 is the
   * ratio that actually buys height back. */
  .pl-range--landscape .pl-range__card img,
  .pl-range--landscape .pl-range__card .pl-placeholder {
    aspect-ratio: 2 / 1;
    height: auto;
  }
}