/* ==========================================================================
 * WattWisely — use cases hub and the five segment pages
 * ==========================================================================
 * One sheet for all six pages. They share a template, so splitting the styles
 * would only mean two files that have to be edited together.
 */

@layer pages {

  /* -- Left-aligned section heads ------------------------------------------ */
  /* The problem section on a segment page, and the mixed-sites section on the
     hub, are both running argument rather than a header over a grid. Left
     aligned and held to the measure, because that is how prose is read. */

  .uc-problem__title,
  .uc-mixed__title {
    margin-top: var(--ww-space-3);
    max-width: 24ch;
  }

  .uc-problem__body,
  .uc-mixed__body { margin-top: var(--ww-space-6); }

  .uc-mixed__points { margin-top: var(--ww-space-7); }

  /* -- Recommended setup ---------------------------------------------------- */

  .uc-setup__list {
    margin-top: var(--ww-space-9);
    border-top: 1px solid var(--ww-border);
  }

  .uc-setup__row {
    display: grid;
    gap: var(--ww-space-2);
    padding-block: var(--ww-space-6);
    border-bottom: 1px solid var(--ww-border);
  }

  @media (min-width: 768px) {
    /* Term beside definition rather than above it. The fixed first track keeps
       all four terms on one edge, which is what makes the list scannable — a
       reader looking only for "how many ports" should not have to read the
       other three rows to find it. */
    .uc-setup__row {
      grid-template-columns: 13rem 1fr;
      gap: var(--ww-space-6);
    }
  }

  .uc-setup__label {
    color: var(--ww-muted);
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 0.15em;
  }

  .uc-setup__value strong {
    display: block;
    font-size: var(--ww-step-1);
    line-height: var(--ww-leading-tight);
  }

  .uc-setup__note {
    display: block;
    margin-top: var(--ww-space-3);
    color: var(--ww-body);
    max-width: var(--ww-measure);
  }

  /* -- What it costs -------------------------------------------------------- */

  .uc-costs__body { font-size: var(--ww-step-1); }

  .uc-costs__note {
    max-width: var(--ww-measure);
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  /* A flex column rather than the card's default flow, so the chip and the
     button size to their own content and centre — left to stretch, a full-width
     "Compare all tiers" stops reading as a button and starts reading as a bar. */
  .uc-costs__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    padding: var(--ww-space-7);
    text-align: center;
  }

  .uc-costs__card > * { width: 100%; }

  .uc-costs__card .chip,
  .uc-costs__card .btn { width: auto; }


  .uc-costs__card .btn { margin-top: var(--ww-space-6); }
}