/* PD - Link Cards
   The intro, then white cards in 2 or 3 columns, then optional buttons.
   One column on phones and two from 768px; three from 1024px when chosen.

   Two card styles:
   - Feature (pd-link-cards--feature, the Home page): the tag in the global
     pill, the title, the description, and the global Primary button along
     the bottom of the card.
   - Compact (pd-link-cards--compact, How It Works): a lead-in line, then
     the title with an arrow circle on its right, centered on the title.

   Each card is one link stretched over the whole card (::after on the
   link). The cards' shape and colors are shared (css/main.css, section
   8): pd-card gives the padding, border and corners (40px above and below
   and 32px at the sides at 1440px), and pd-section--bg-white the white
   card's colors, so the pill, button and arrow look the same on every
   section background. A white card on a white section gets a light edge.

   Cards in a row are the same height. Where subgrid is supported, each
   card's parts sit on rows shared with the other cards in the row, so the
   titles start level and the buttons line up along the bottom. Elsewhere
   each card is a column with its button pushed to the bottom. No heights
   are set, so cards grow with zoom and text spacing.

   Logos: any card can have an image, at the top of a feature card or on
   the left of a compact card's lead-in line. When a card has one, the list
   gets pd-link-cards__list--images, and every rule that changes the
   layout needs it, so a section without images looks as it did before. */

/* Intro, cards, buttons */
.pd-link-cards__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-xl);               /* 40 → 60px */
}

/* At most 50rem (800px) wide: the Home heading stays on one line */
.pd-link-cards__inner > .pd-intro {
  max-width: 50rem;
}

.pd-link-cards__inner > .pd-intro--center {
  width: 100%;
  margin-inline: auto;
}

/* Balanced lines: the How It Works heading breaks after "works," as
   designed, instead of leaving "to start?" on a line of its own */
.pd-link-cards__inner > .pd-intro > :is(h2, h3) {
  text-wrap: balance;
}

/* minmax(0, 1fr): a long word wraps instead of widening the column */
.pd-link-cards__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pd-space-lg);               /* 24 → 40px */
  margin: 0;
  padding: 0;
  list-style: none;
}


/* Cards */

.pd-link-cards__card {
  position: relative;                    /* Holds the stretched link */
  display: flex;
  flex-direction: column;
}

/* Stretches the link over the whole card. Hovering the card gives the
   link its hover style. */
.pd-link-cards__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pd-radius-md);
}

/* Editor notes under the button or the title */
.pd-link-cards__action,
.pd-link-cards__notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-space-sm);
  margin-top: auto;
}

.pd-link-cards__notes {
  padding-top: var(--pd-space-sm);       /* 16 → 20px */
}


/* Feature cards */

/* The global pill (ice with ink text on the white card), at its own
   width */
.pd-link-cards__tag {
  align-self: flex-start;
  justify-self: start;
  margin-bottom: var(--pd-space-sm);     /* 16 → 20px */
}

.pd-link-cards__text {
  margin-top: var(--pd-space-lg);        /* 24 → 40px */
}

/* The description has no link button, but a pasted link still works: it
   sits above the stretched card link */
.pd-link-cards__text a {
  position: relative;
  z-index: 1;
}

/* The button, at least 24 → 40px below the text, along the bottom of the
   card, at its own width. Its focus ring is the global ring around the
   button, in the white card's colors. */
.pd-link-cards__action {
  padding-top: var(--pd-space-lg);
}


/* Compact cards */

/* 16px at every width, in the text color */
.pd-link-cards__lead-in {
  margin-bottom: var(--pd-space-sm);     /* 16 → 20px */
  font-size: 1rem;
  line-height: var(--pd-line-height-body);
}

/* The title and its arrow are the link, in the heading color (ink on the
   white card, 14.8:1). The arrow sits on the right, centered on the
   title, and the focus ring is one rectangle around both. Hovering the
   card underlines the title and darkens the arrow. */
.pd-link-cards__title > .pd-link-cards__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-sm);               /* 16 → 20px */
  color: inherit;
  text-decoration: none;
}

/* min-width: 0 lets a long word wrap instead of pushing the arrow out */
.pd-link-cards__title-text {
  min-width: 0;
}

.pd-link-cards__link:hover .pd-link-cards__title-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* The arrow circle, 36 → 46px, in the Primary button's colors: a white
   arrow on green (4.98:1, and 4.98:1 against the card), ink on hover.
   Decorative: the title is the link's name. */
.pd-link-cards__arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(2.25rem, 2.0714rem + 0.8929vw, 2.875rem);
  height: clamp(2.25rem, 2.0714rem + 0.8929vw, 2.875rem);
  border: 1px solid transparent;         /* Shows as an outline in high-contrast mode */
  border-radius: 50%;
  background-color: var(--pd-btn-primary-bg);
  color: var(--pd-btn-primary-text);
  transition: background-color 150ms ease, color 150ms ease;
}

.pd-link-cards__link:hover .pd-link-cards__arrow {
  background-color: var(--pd-btn-primary-hover-bg);
  color: var(--pd-btn-primary-hover-text);
}

/* 17 × 15px in the 46px circle, as designed */
.pd-link-cards__arrow-icon {
  display: block;
  width: 37%;
  height: auto;
}


/* Logos
   Sized by area, so square, wide and tall logos look about as big as each
   other: a square logo is --pd-link-cards-logo on each side, and any other
   shape is that times the square root of its width-to-height ratio wide
   (module.html writes the ratio on the logo's box), so a wordmark is wider
   and shorter and a crest narrower and taller. Never past the maximum
   width or height or wider than the card. Only the width is set: the
   height follows the file's own ratio, so nothing is stretched. */

.pd-link-cards {
  --pd-link-cards-logo: clamp(4rem, 3.6429rem + 1.7857vw, 5rem);   /* 64 → 80px */
  --pd-link-cards-logo-max-w: 15rem;     /* 240px */
  --pd-link-cards-logo-max-h: 6rem;      /* 96px, for tall logos */
}

.pd-link-cards--compact {
  --pd-link-cards-logo: 3.5rem;          /* 56px */
  --pd-link-cards-logo-max-w: 10rem;     /* 160px */
  --pd-link-cards-logo-max-h: 3.5rem;    /* Never taller than the line */
}

/* The logo's band: at least a square logo's height, the logo centered in
   it, on the left. Editor notes go under the image. */
.pd-link-cards__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--pd-space-sm);
  min-height: var(--pd-link-cards-logo);
}

/* Without a ratio (no width or height on the image field), or in a
   browser without sqrt(): at most 70% of the band's height, about the
   height a 2:1 logo gets by area, and the card's width */
.pd-link-cards__image {
  display: block;
  width: auto;
  max-width: min(100%, var(--pd-link-cards-logo-max-w));
  height: auto;
  max-height: calc(var(--pd-link-cards-logo) * 0.7);
}

/* The width uses fixed lengths only: with a percentage, the compact
   logo's box was as wide as the file, which pushed the lead-in onto its
   own line. max-width keeps it inside the card. */
@supports (width: calc(1px * sqrt(4))) {
  .pd-link-cards__media--sized > .pd-link-cards__image {
    width: min(var(--pd-link-cards-logo-max-w),
               calc(var(--pd-link-cards-logo) * sqrt(var(--pd-link-cards-ratio))),
               calc(var(--pd-link-cards-logo-max-h) * var(--pd-link-cards-ratio)));
    max-width: 100%;
    max-height: none;
  }
}

/* Feature cards: the logo at the top, 20 → 30px above the tag */
.pd-link-cards--feature .pd-link-cards__media {
  margin-bottom: var(--pd-space-md);
}

/* Compact cards: the logo on the left of the lead-in line, centered on
   each other. The lead-in moves under the logo when both don't fit. */
.pd-link-cards__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: var(--pd-space-sm);     /* 16 → 20px, as the lead-in */
}

.pd-link-cards__source > .pd-link-cards__lead-in {
  margin-bottom: 0;
}

/* In a section with logos, a lead-in without one is as tall as the logo
   line, so the lead-ins line up across a row */
.pd-link-cards__list--images .pd-link-cards__card > .pd-link-cards__lead-in {
  display: flex;
  align-items: center;
  min-height: var(--pd-link-cards-logo);
}


/* Rows shared across the cards in a row (subgrid). Each card spans the
   rows of the list's grid that its parts sit on, and the spacing between
   parts is margins and padding, so a part that no card in the row has
   takes no space.
   The list has no row gap: it would also sit between the rows inside each
   card and leave extra space next to a row no card uses. The space between
   rows of cards is each card's bottom margin instead, and the list's
   negative margin takes it back off after the last row. */
@supports (grid-template-rows: subgrid) {
  .pd-link-cards__list {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--pd-space-lg));
  }

  /* minmax(0, 1fr): a long word wraps instead of widening the card */
  .pd-link-cards__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: var(--pd-space-lg);   /* 24 → 40px */
  }

  .pd-link-cards--feature .pd-link-cards__card {
    grid-row: span 4;
  }

  .pd-link-cards--compact .pd-link-cards__card {
    grid-row: span 3;
  }

  .pd-link-cards__tag,
  .pd-link-cards__lead-in {
    grid-row: 1;
  }

  .pd-link-cards__title {
    grid-row: 2;
  }

  .pd-link-cards__text,
  .pd-link-cards__notes {
    grid-row: 3;
  }

  .pd-link-cards__action {
    grid-row: 4;
  }

  /* With logos, feature cards have a fifth row, first, for the logo. A
     card without one leaves it empty, so its tag, title, description and
     button stay level with the cards beside it. Compact logos share the
     lead-in's row. One class deeper than the rules above, so these win
     whatever the order. */
  .pd-link-cards--feature .pd-link-cards__list--images > .pd-link-cards__card {
    grid-row: span 5;
  }

  .pd-link-cards__list--images .pd-link-cards__media,
  .pd-link-cards__list--images .pd-link-cards__source {
    grid-row: 1;
  }

  .pd-link-cards--feature .pd-link-cards__list--images .pd-link-cards__tag {
    grid-row: 2;
  }

  .pd-link-cards--feature .pd-link-cards__list--images .pd-link-cards__title {
    grid-row: 3;
  }

  .pd-link-cards--feature .pd-link-cards__list--images .pd-link-cards__text {
    grid-row: 4;
  }

  .pd-link-cards--feature .pd-link-cards__list--images .pd-link-cards__action {
    grid-row: 5;
  }
}

/* Tablets: two columns */
@media (min-width: 768px) {
  .pd-link-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3 columns from 1024px, with titles at the card title size (module.html) */
@media (min-width: 1024px) {
  .pd-link-cards__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}