/* ===========================================
   Homepage ("The Report" direction)
   ===========================================
   One bold element per screen: the photo of the
   printed report on marker yellow in the hero,
   the yellow button in the navy closing band.
   Everything else stays quiet. Shared sections,
   the audit form, the fix example and the closing
   band live in components/.
   =========================================== */

@layer pages {
  .home-hero {
    border-bottom: 1px solid var(--color-border);

    .home-hero__container {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-20);
      align-items: start;
      max-width: var(--page-width);
      margin: 0 auto;
      padding: var(--space-20) var(--space-6);
    }

    .home-hero__intro {
      align-self: center;
    }

    .home-hero__title {
      max-width: 13ch;
      margin: 0;
      font-size: clamp(2.5rem, 1.7rem + 2vw, 3.25rem);
      font-weight: 750;
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .home-hero__lede {
      max-width: 30ch;
      margin: var(--space-6) 0 0;
      font-size: var(--text-xl);
      line-height: 1.5;
      color: var(--color-text-muted);
      text-wrap: pretty;
    }

    .audit-form {
      margin-top: var(--space-10);
    }

    .home-hero__method {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    /* Photo of the printed report on marker yellow: the page's one yellow field */
    .home-hero__figure {
      align-self: center;
      margin: 0;
    }

    .home-hero__image {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* Example client report */
  .report {
    margin: 0;

    .report__page {
      padding: var(--space-10);
      border: 1px solid var(--color-border);
      background: var(--color-background);
    }

    .report__header {
      display: flex;
      justify-content: space-between;
      gap: var(--space-6);
      padding-bottom: var(--space-5);
      border-bottom: 2px solid var(--color-text);

      p {
        margin: 0;
      }
    }

    .report__agency {
      font-weight: var(--font-bold);
      letter-spacing: -0.01em;
    }

    .report__prepared {
      font-size: var(--text-sm);
      text-align: right;
      color: var(--color-text-muted);
    }

    .report__title {
      margin: var(--space-6) 0 0;
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      line-height: 1.25;
      letter-spacing: -0.015em;
    }

    .report__summary {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-10);
      align-items: center;
      margin-top: var(--space-6);
      padding-bottom: var(--space-6);
      border-bottom: 1px solid var(--color-border);
    }

    .report__score {
      margin: 0;
      line-height: 1;
    }

    .report__score-value {
      font-size: 5.5rem;
      font-weight: 800;
      letter-spacing: -0.045em;
    }

    .report__score-scale {
      margin-left: var(--space-1);
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      color: var(--color-text-muted);
    }

    .report__score-trend {
      display: block;
      margin-top: var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      color: var(--color-success);
    }

    .report__facts {
      display: grid;
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        margin: 0;
      }
    }

    .report__good {
      color: var(--color-success);
    }

    .report__bad {
      color: var(--color-error);
    }

    .report__table {
      width: 100%;
      margin-top: var(--space-2);
      border-collapse: collapse;
      font-size: 0.9375rem;

      thead,
      tr,
      th {
        background: transparent;
      }

      th,
      td {
        padding: 0.625rem var(--space-3) 0.625rem 0;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        vertical-align: top;
      }

      th {
        padding-bottom: var(--space-2);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-gray-700);
      }

      .report__num {
        text-align: right;
      }

      .report__status {
        padding-right: 0;
        font-weight: var(--font-semibold);
        text-align: right;
      }
    }

    .report__criterion {
      font-weight: var(--font-semibold);
      white-space: nowrap;
    }

    .report__footer {
      display: flex;
      justify-content: space-between;
      gap: var(--space-6);
      margin-top: var(--space-6);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .report__page-number {
      white-space: nowrap;
    }
  }

  @media (max-width: 960px) {
    .home-hero .home-hero__container {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .home-hero .home-hero__container {
      padding-top: var(--space-12);
      padding-bottom: var(--space-12);
    }


    .report .report__page {
      padding: var(--space-6) var(--space-5);
    }
  }

  @media (max-width: 640px) {
    .home-hero {
      .home-hero__container {
        gap: var(--space-6);
        padding-top: var(--space-8);
      }

      .home-hero__title {
        font-size: 2.125rem;
      }

      .home-hero__lede {
        margin-top: var(--space-4);
        font-size: 1.0625rem;
      }

      .audit-form {
        margin-top: var(--space-6);
      }

      .home-hero__method {
        display: none;
      }
    }

    .report {
      .report__page {
        padding: var(--space-5) var(--space-4);
      }

      .report__header {
        flex-direction: column;
        gap: var(--space-2);
      }

      .report__title {
        font-size: 1.375rem;
      }

      .report__prepared {
        text-align: left;
      }

      .report__summary {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .report__score-value {
        font-size: 4rem;
      }

      .report__table .report__num,
      .report__page-number {
        display: none;
      }
    }
  }

  /* Small phones: drop the sheet border so findings fit on one line */
  @media (max-width: 480px) {
    .report .report__page {
      padding-left: 0;
      padding-right: 0;
      border: 0;
    }
  }
}