/* The product template — E3.
 *
 * The sections a product page adds to the module library: the hero (M23), the
 * installation contexts (M07), the document library (M13) and the variant
 * parity block (M24). Everything else on the page reuses a module's markup and
 * therefore its stylesheet — the specification is the M06 list, the questions
 * are the M14 accordion, the installations are the M17 grid.
 *
 * No colour literals. Every value traces to tokens.css.
 */

/* ------------------------------------------------------------- M23 hero  */
/* The columns carry the padding, not the section, so the hairline between them
 * runs the full height of the taller one. */
.pl-product-hero {
  /* Outside the wrap this is the centring margin plus the gutter; inside it
   * collapses to the gutter alone. It keeps the copy lined up with every other
   * module while the photograph runs to the page edge. Same idiom as M21. */
  --pl-inset: max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter));

  padding-block: 0;
  overflow: hidden;
}

.pl-product-hero__inner {
  display: grid;
  gap: 0;
}

.pl-product-hero__text {
  padding-block: var(--sp-6) var(--sp-8);
}

.pl-product-hero__media {
  padding-block: var(--sp-4);
}

.pl-product-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--rule) solid var(--c-rule);
}

@media (min-width: 64rem) {
  /* The grid leaves the wrap so the photograph can reach the right-hand page
   * edge, exactly as the approved mockup has it. The columns take the inset
   * back on their outer edges, so nothing else moves. */
  .pl-product-hero__inner {
    grid-template-columns: 1.15fr 1fr;
    max-width: none;
    padding-inline: 0;
  }

  .pl-product-hero__text {
    padding-left: var(--pl-inset);
    padding-right: var(--sp-6);
    align-self: center;
  }

  /* The photograph fills its column edge to edge, as the mockup has it: no
   * inset, no fixed ratio, just the tallest column deciding the height. The
   * hairline is the column border, so the image can run right up to it. */
  .pl-product-hero__media {
    position: relative;
    min-height: 440px;
    padding: 0;
    overflow: hidden;
    border-left: var(--rule) solid var(--c-rule);
  }

  .pl-product-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
  }
}

.pl-product-hero__eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-product-hero__standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
}

/* The key facts. Bordered mono chips, because they are data and they are read
 * as a set — a customer comparing two covers reads this line on both. */
.pl-product-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin-top: var(--sp-3);
}

/* DR-01: filled water, navy type. They were slate outlines, which read as
 * empty boxes beside a navy bar. Navy on sky is 7.8:1; slate on sky is 3.3:1
 * and would have failed (C14), so the label inside a chip is navy too. */
.pl-product-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 6px 10px;
  background: var(--c-water);
  color: var(--c-on-water);
  border: 0;
  font-size: 0.78125rem;
}

.pl-product-hero__fact-label {
  color: var(--c-on-water);
  opacity: 0.72;
  text-transform: uppercase;
}

/* Punctuation, not content: the label reads correctly without it, so it does
 * not belong in the field or in the markup. */
.pl-product-hero__fact-label::after {
  content: ":";
}

.pl-product-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}

.pl-product-hero__figcaption {
  padding-top: var(--sp-1);
  font-size: 0.75rem;
}

/* --------------------------------------------------- section furniture  */
/* A label on the left, an escape hatch on the right — the specification names
 * itself and offers the download in the same line. */
.pl-product-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.pl-product-spec__note {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
}

/* ---------------------------------------- M07 mechanism by pool type  */
/* An exclusive disclosure — <details name> — so one arrangement is open at a
 * time without a line of JavaScript. The marker vocabulary is the FAQ's,
 * because they are the same gesture and the reader should not have to learn
 * two. */
.pl-explorer__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
}

.pl-explorer__title {
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 24ch;
  margin: 0;
}

.pl-explorer__drawings {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pl-explorer__intro {
  margin-block: var(--sp-3) var(--sp-4);
}

.pl-explorer__list {
  border-top: var(--rule) solid var(--c-rule);
}

.pl-explorer__item {
  border-bottom: var(--rule) solid var(--c-rule);
}

.pl-explorer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  min-height: 44px;
  cursor: pointer;
  list-style: none;   /* Firefox */
}

.pl-explorer__summary::-webkit-details-marker {
  display: none;
}

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

.pl-explorer__name {
  font-weight: 600;
}

/* The code is the arrangement's identity in a drawing set — it stays on the
 * summary line so a builder can find the panel by the code they were given. */
.pl-explorer__code {
  font-size: 0.75rem;
  margin-left: auto;
}

.pl-explorer__summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--rule) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--rule) 100% no-repeat;
}

.pl-explorer__item[open] .pl-explorer__summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--rule) no-repeat;
}

.pl-explorer__panel {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
}

@media (min-width: 64rem) {
  .pl-explorer__panel {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-6);
    align-items: start;
  }
}

.pl-explorer__media img {
  width: 100%;
  border: var(--rule) solid var(--c-rule);
}

.pl-explorer__lead {
  margin: 0 0 var(--sp-3);
  max-width: 52ch;
  text-wrap: pretty;
}

.pl-explorer__points {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.pl-explorer__point {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-1);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 52ch;
  text-wrap: pretty;
}

/* The mark carries no colour of its own. A green tick and a red cross would be
 * two new colours, and this palette has five — the glyph and the sentence are
 * the whole distinction, which is also why the disadvantage is not greyed out:
 * it is the most useful line in the panel. */
.pl-explorer__mark {
  font-family: var(--font-mono);
  font-weight: 500;
}

.pl-explorer__point--no .pl-explorer__mark {
  color: var(--c-text-muted);
}

.pl-explorer__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  margin: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.pl-explorer__facts dt,
.pl-explorer__facts dd {
  padding-block: var(--sp-1);
  border-bottom: var(--rule) solid var(--c-rule);
}

.pl-explorer__facts dd {
  margin: 0;
}

.pl-explorer__note {
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
}

.pl-explorer__help {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
}

.pl-explorer__help a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* --------------------------------------------- M13 document library  */
.pl-docs__note {
  margin-block: var(--sp-1) var(--sp-4);
  font-size: 0.9375rem;
}

.pl-docs__list {
  border-top: var(--rule) solid var(--c-rule);
  max-width: 54rem;
}

.pl-docs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: var(--rule) solid var(--c-rule);
  text-decoration: none;
  min-height: 44px;
  transition: background-color var(--transition);
}

.pl-docs__item:hover {
  background: var(--c-water);
}

/* Slate on sky is 3.3:1 and fails AA. The row is readable at rest and must
 * stay readable while it is being pointed at, so the quiet half of the row
 * comes up to full ink on hover — navy on sky is 7.8:1. E3 leaves it slate;
 * this is a deliberate departure, in the direction the brandbook's own
 * contrast rule requires. */
.pl-docs__item:hover .pl-docs__meta {
  color: var(--c-text);
}

.pl-docs__name {
  font-weight: 500;
}

.pl-docs__meta {
  color: var(--c-text-muted);
  font-size: 0.78125rem;
  white-space: nowrap;
}

/* On a page the questions are a full-width module; on a product they sit in a
 * column of reading matter beside the specification, and E3 caps them with it.
 * Scoped to the template so the module keeps its own behaviour elsewhere. */
.pl-product .pl-faq__list {
  max-width: 54rem;
}

/* -------------------------------------------- M24 variant parity  */
.pl-variant__intro {
  margin-block: var(--sp-2) var(--sp-4);
}

.pl-variant__title {
  color: var(--c-text);
  margin-bottom: var(--sp-3);
}

/* The column heading is a link to the other cover, and a heading is not an
 * inline word in a sentence — it is the control that carries you there, so it
 * takes a full touch target. It was 16px tall on a phone. */
.pl-variant__title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Two columns of the same four facts. The fixed name column is what lets the
 * values line up as a comparison rather than as two lists. */
.pl-variant__facts {
  display: grid;
  /* A narrower name column on a phone: the two covers stack there, so the
   * facts no longer have to line up across a gutter, and the values need the
   * room more than the labels do. */
  grid-template-columns: 7rem 1fr;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
  font-size: 0.8125rem;
  line-height: 1.6;
}

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

.pl-variant__label {
  color: var(--c-text-muted);
  text-transform: uppercase;
}