/* Two-column text band. Self-contained: colour and type come from the
   ecore/tokens contract and the theme's heading scale, never from literals. */

[data-component-id='ecore_common:text_pair'] {
  display: block;
  padding: 96px 40px;

  .text-pair {
    display: grid;
    /* Even columns with a wide gutter: the heading needs room to wrap on its
       own terms and the copy needs a readable measure. */
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    max-width: 1160px;
    margin-inline: auto;
  }

  .text-pair__heading {

    h1,
    h2,
    h3 {
      margin: 0;
    }
  }

  /* Brand-coloured rule alongside the heading, on the heading column so it
     spans however many lines the heading wraps to. */
  .text-pair.has-rule .text-pair__heading {
    border-left: 3px solid var(--ec-primary);
    padding-left: 32px;
  }

  .text-pair__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Optically aligns the first line of copy with the heading's first line,
       which sits lower in its box because of the display line-height. */
    padding-top: 6px;
  }

  .text-pair__copy {
    color: var(--ec-ink);
    /* The body field holds plain text, so it never picks up the theme's
       `p { line-height: 1.666 }`. State the site's body setting here. */
    line-height: 1.666;

    /* Colour the paragraph directly, not just this wrapper: a theme's bare
       `p { color: ... }` is an element selector and outranks inheritance. */
    p {
      color: var(--ec-ink);
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  [data-component-id='ecore_common:button'] {
    margin-top: 28px;
  }

  /* Heading on the right: the columns swap and the rule moves with the
     heading. */
  .text-pair.heading-right {

    .text-pair__heading {
      order: 2;
    }

    .text-pair__body {
      order: 1;
    }

    &.has-rule .text-pair__heading {
      border-left: 0;
      border-right: 3px solid var(--ec-primary);
      padding-left: 0;
      padding-right: 32px;
    }
  }

  /* Shaded: the panel is inset on one side and runs off the opposite edge of
     the page, per the comp. The columns are capped so the copy stops rather
     than spreading across the bleed. */
  &[data-background='sunken'] {
    padding: 128px 0;

    .text-pair {
      background-color: var(--ec-surface-sunken);
      padding: 96px 80px;
      max-width: none;
      /* The inset edge lines up with the content column of a sibling section -
         category_grid caps its grid at 1400px and centres it, falling back to a
         40px gutter once the viewport is narrower than that. Same formula here,
         so the panel edge tracks the cards above it at every width. */
      margin-inline: max(40px, calc((100% - 1400px) / 2)) 0;
      grid-template-columns: minmax(0, 450px) minmax(0, 450px);
      justify-content: start;
    }

    .text-pair.heading-right {
      margin-inline: 0 max(40px, calc((100% - 1400px) / 2));
      justify-content: end;
    }
  }

  /* Single column below desktop. The heading no longer sits beside the copy,
     so the gap becomes vertical and the side choice has nothing left to do. */
  @media (max-width: 1000px) {
    padding: 64px 28px;

    .text-pair {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .text-pair.heading-right {

      .text-pair__heading {
        order: 0;
      }

      .text-pair__body {
        order: 0;
      }
    }

    .text-pair__body {
      padding-top: 0;
    }

    &[data-background='sunken'] {
      padding: 80px 0;

      .text-pair,
      .text-pair.heading-right {
        margin-inline: 0;
        padding: 64px 36px;
        grid-template-columns: 1fr;
      }
    }
  }

  @media (max-width: 640px) {
    padding: 48px 20px;

    .text-pair.has-rule .text-pair__heading {
      padding-left: 20px;
    }

    .text-pair.heading-right.has-rule .text-pair__heading {
      padding-right: 20px;
    }

    &[data-background='sunken'] {
      padding: 56px 0;

      .text-pair,
      .text-pair.heading-right {
        padding: 48px 24px;
      }
    }
  }
}