/* Shared page card (T29): Feature grid Paths and Range, Keep exploring (T45, compact), guide cards.
   One link per card: the link (title, or the range card's pill) stretches over the whole card
   with ::after, and the focus ring is drawn around the whole card.
   Tokens only. Mobile first; the grid around the cards belongs to the caller. */

/* The focus ring takes the colour of the ground around the card (set on the card's parent),
   so it stays visible when the card has its own theme ground (range cards). */
:has(> .page-card) { --page-card-focus: var(--color-focus); }
.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  border-radius: var(--page-card-radius);
  color: var(--color-text);
  --page-card-radius: var(--radius-media);
}
.page-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.page-card__title {
  overflow-wrap: break-word;
  text-wrap: balance;
}
.page-card__text {
  margin: 0;
  overflow-wrap: break-word;
}

/* The one link stretches over the card. */
.page-card__link { color: inherit; text-decoration: none; }
.page-card__link:hover { color: inherit; text-decoration: none; }
.page-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--page-card-radius);
}
.page-card__link:focus-visible { outline: none; }
.page-card__link:focus-visible::after {
  outline: var(--focus-width) solid var(--page-card-focus, var(--color-focus));
  outline-offset: var(--focus-offset);
}

.page-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-8);
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}
.page-card__arrow { flex: none; transition: transform var(--duration-fast) var(--ease-brand); }
.page-card--linked:hover .page-card__arrow { transform: translateX(3px); }

.page-card__media { overflow: hidden; }
.page-card__media picture { display: block; height: 100%; }
.page-card__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Standard (Feature grid Standard, Products used, B11): a rounded photo on top, then the title
   and a short line straight on the band, as the prototype's card rows ("Where should you use…").
   No overflow clipping on the card, so the focus ring drawn round it stays whole (T41 lesson);
   the photo clips itself. The compact variant (Keep exploring) keeps its own panel below. ── */
.page-card--standard { border: var(--border-width) solid var(--color-hairline); background: var(--c-white); }
.page-card--standard:not(.page-card--compact) { border: 0; background: none; }
.page-card--standard .page-card__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--page-card-radius);
  background: var(--c-grey-100);
}
.page-card--standard .page-card__body { gap: var(--space-2); padding: var(--space-4) 0 0; }
.page-card--standard .page-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}
.page-card--standard .page-card__text { color: var(--color-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body-tight); }
.page-card--standard:not(.page-card--compact).page-card--linked:hover .page-card__title { color: var(--color-link); }
/* Room under the last line (B11 round 2), so the focus ring drawn round the card clears the
   descenders of a title-only card. Not on the compact variant, which keeps its own padding. */
.page-card--standard:not(.page-card--compact) .page-card__body { padding-bottom: var(--space-3); }

/* ── Path: big white link card on the grey band ─────────────────────── */
.page-card--path {
  min-height: calc(var(--space-40) + var(--space-20));
  padding: var(--space-8) var(--space-7) var(--space-7);
  border: var(--border-width) solid var(--color-hairline);
  background: var(--c-white);
  transition: border-color var(--duration-fast) var(--ease-brand);
}
.page-card--path:hover { border-color: var(--color-border); }
.page-card--path .page-card__body { gap: var(--space-2); }
.page-card--path .page-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
}
@media (min-width: 1024px) {
  .page-card--path .page-card__title { font-size: var(--fs-h2); }
}

/* ── Range: logo, title, text and pill on the range's theme ground, photo below ── */
.page-card--range {
  --page-card-radius: var(--radius-card);
  /* Logo height follows the prototype: 52 px on phones and tablets, growing to 64 px on wide screens (T29b). */
  --page-card-logo-height: clamp(52px, 4.4vw, var(--space-16));
  background: var(--theme-bg);
}
.page-card--range .page-card__body { padding: var(--space-8); }
.page-card__logo { margin-bottom: var(--space-6); }
.page-card__logo-image {
  width: auto;
  height: var(--page-card-logo-height, var(--space-16));
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.page-card--range .page-card__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
}
.page-card--range .page-card__text { max-width: var(--container-text); margin-bottom: var(--space-6); }
.page-card--range .page-card__cta { margin-top: auto; }
.page-card--range .page-card__media {
  aspect-ratio: 3 / 2;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
/* The pill is the card's link; its ::after must stretch over the card, and a backdrop filter
   would trap it inside the pill (the card's solid ground needs no blur anyway). */
.page-card--range .page-card__cta {
  position: static;
  font-size: var(--fs-body);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Compact (Keep exploring, T45): title with an arrow beside it, nothing else ── */
.page-card--compact {
  overflow: visible; /* no photo to clip; the focus ring is drawn outside the card */
  background: var(--c-white);
  transition: background-color var(--duration-fast) var(--ease-brand);
}
.page-card--compact:hover { background: var(--c-blue-050); }
.page-card--compact .page-card__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-7);
}
.page-card--compact .page-card__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.page-card__compact-arrow { display: flex; flex: none; color: var(--color-link); }