/* PD - Solution Cards
   The intro, up to three colored cards, then an optional row of smaller
   white "More Options" cards below a divider. One column on phones, two
   from 768px, three from 1024px, for both kinds of card.

   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, so the image is 309px wide, as
   designed); pd-card--teal, pd-card--slate or pd-card--green colors the
   main cards; the More Options cards are white (pd-section--bg-white) with
   a light edge on every background (pd-card--outlined).

   Cards in a row are the same height. Where subgrid is supported, each
   card's parts (image, title, description, link) sit on rows shared with
   the other cards in the row, so the titles and descriptions start level
   and the links line up along the bottom, as designed. Elsewhere each card
   is a column with its link pushed to the bottom. No heights are set, so
   cards grow with zoom and text spacing. */

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

/* At most 50rem (800px) wide: the Home and For Employers headings then
   break their lines as designed */
.pd-solution-cards__inner > .pd-intro {
  max-width: 50rem;
}

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

/* minmax(0, 1fr): a long word wraps instead of widening the column */
.pd-solution-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-solution-cards__card,
.pd-solution-cards__more-card {
  position: relative;                    /* Holds the stretched link */
  display: flex;
  flex-direction: column;
}

/* The editor's image across the card, on a white panel, so a transparent
   illustration looks as designed. Editor notes go under it. */
.pd-solution-cards__media {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-sm);
  margin-bottom: var(--pd-space-md);     /* 20 → 30px */
}

.pd-solution-cards__image {
  display: block;
  width: 100%;
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-white);
}

.pd-solution-cards__text {
  margin-top: var(--pd-space-sm);        /* 16 → 20px */
}

/* The link, at least 16 → 20px below the text, along the bottom of the
   card. Editor notes go under it. */
.pd-solution-cards__action,
.pd-solution-cards__notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-space-sm);
  margin-top: auto;
  padding-top: var(--pd-space-sm);
}

/* The global text link with arrow. The whole card is its tap target, so it
   doesn't need its own 44px height, and its focus ring (the global
   two-tone ring, in the card's colors) hugs the text. */
.pd-solution-cards__link {
  min-height: 0;
}

/* Stretches the link over the whole card. Hovering the card underlines the
   link's words (.pd-btn--text:hover .pd-btn__text in css/main.css). */
.pd-solution-cards__link::after,
.pd-solution-cards__more-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pd-radius-md);
}


/* More Options */

/* The divider: a decorative line in the text color at 15% (#d9d9d9-like on
   white, as designed), as in Steps */
.pd-solution-cards__more {
  padding-top: var(--pd-space-xl);       /* 40 → 60px */
  border-top: 1px solid color-mix(in srgb, var(--pd-color-text) 15%, transparent);
}

/* A heading, at the body size */
.pd-solution-cards__more-label {
  margin-bottom: var(--pd-space-lg);     /* 24 → 40px */
  font-size: var(--pd-font-size-body);
  line-height: var(--pd-line-height-body);
  letter-spacing: 0;
}

/* The title is the link, in the heading color as designed (ink on the
   white card, 14.8:1). The arrow says it's a link; hovering the card
   underlines the title. An inline block, so the focus ring is one
   rectangle around a title on two lines, never wider than the card, so a
   long word still wraps. */
.pd-solution-cards__more-link {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

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

.pd-solution-cards__arrow {
  margin-inline-start: 0.3em;
}


/* 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-solution-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-solution-cards__card,
  .pd-solution-cards__more-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-solution-cards__card {
    grid-row: span 4;
  }

  .pd-solution-cards__more-card {
    grid-row: span 3;
  }

  .pd-solution-cards__media {
    grid-row: 1;
  }

  .pd-solution-cards__card > .pd-solution-cards__title {
    grid-row: 2;
  }

  .pd-solution-cards__card > .pd-solution-cards__text {
    grid-row: 3;
  }

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

  .pd-solution-cards__more-card > .pd-solution-cards__title {
    grid-row: 1;
  }

  .pd-solution-cards__more-card > .pd-solution-cards__text {
    grid-row: 2;
  }

  .pd-solution-cards__notes {
    grid-row: 3;
  }
}

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

@media (min-width: 1024px) {
  .pd-solution-cards__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}