/* SHY-26 — "We think you'll love these."

   The starter-picks row on the welcome-from-Relish page (SHY-21): a short,
   read-only strip of compact recipe teasers chosen from the person's own
   library (see internal/app/starter_recipes.go + partials/starter_picks.html).

   Each cell is image-over-title-over-caption, matching the SHY-21 mockup's
   "White Bean Soup / picked for you" cards. Deliberately lighter than the
   full recipe_card: no time chip, no meta strip, no save heart — these are
   first-impression teasers on a signed-out page, not library cards.

   Design-bible alignment: 1px border at rest (1.6, no resting shadow),
   one radius vocabulary (1.8, --radius-lg), tomato accent left to the page
   CTA so this row stays calm. Hover lifts with a subtle shadow + raise
   (1.6's "elevation in motion" carve-out), reduced-motion respected.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it and utility classes always do — same as welcome.css. */

@layer components {

  .starter-picks {
    width: 100%;
    margin-block-start: var(--space-10);
  }

  /* Section heading — Outfit, not the Fraunces page hero: the welcome
     page already spends its one generous Fraunces moment (bible 0.3.2) on
     "Welcome, <name>." This is a quieter section label. */
  .starter-picks__heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
  }

  /* Three across on wide; collapses to one column on narrow. The mockup
     shows three; minmax keeps each card legible if a library only yields
     two picks. */
  .starter-picks__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .starter-picks__cell {
    min-width: 0;
  }

  .starter-picks__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--md-border);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
    overflow: hidden;
    transition:
      transform var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      box-shadow var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }

  .starter-picks__link:hover {
    transform: translateY(-2px);
    border-color: var(--md-outline-variant, var(--md-border));
    box-shadow: var(--shadow-sm, 0 2px 8px rgb(0 0 0 / 8%));
  }

  .starter-picks__link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  /* Media — square-ish by default; honors the real aspect ratio when the
     recipe carries hero dimensions (--ratio set inline, same contract as
     recipe_card). */
  .starter-picks__media {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 3);
    background: var(--md-surface-container);
    overflow: hidden;
  }

  .starter-picks__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Fallback panel — typography/skeleton only (non-negotiable #3). Hidden
     while the real image is present; img-fallback.js reveals it only if
     both publisher + bucket sources fail. */
  .starter-picks__fallback {
    position: absolute;
    inset: 0;
    background: var(--md-surface-container-high, var(--md-surface-container));
  }

  .starter-picks__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
  }

  .starter-picks__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--md-on-surface);
    /* Two-line clamp so a long title doesn't blow out card heights. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .starter-picks__caption {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  @media (prefers-reduced-motion: reduce) {
    .starter-picks__link {
      transition: box-shadow 0.01ms;
    }

    .starter-picks__link:hover {
      transform: none;
    }
  }

  @media (max-width: 640px) {
    .starter-picks__row {
      grid-template-columns: 1fr;
    }
  }
}