/* ============================================================
   mtg-all.dirtyshoulders.com - HOMEPAGE
   ------------------------------------------------------------
   The hero + the responsive grid of year cards. Built on the
   decks tokens / hero / section frame so it reads as the same
   product. Each year card is a full-bleed cover tile: the
   year's highest-value card art is the background, a dark
   gradient keeps the text readable, and it lifts on hover the
   same way the decks deck-card does.
   ============================================================ */

@layer components {

  /* ============================================================
     HERO TAGLINE EXTRAS - the count chip inside the tagline
     ============================================================ */
  .hero__tagline strong {
    color: var(--accent);
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.92em;
    letter-spacing: var(--tracking-wide);
    font-variant-numeric: tabular-nums;
  }


  /* ============================================================
     YEAR GRID - responsive grid of year cards, newest first.
     auto-fill so it reflows from 1 column on phones up to 3-4
     on wide screens, all tiles the same size.
     ============================================================ */
  .year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-md);
    margin: var(--space-xl) 0;
    align-items: stretch;
  }

  /* DENSER ON WIDE SCREENS - auto-fill caps at 3 columns inside the
     1152px (--wrap-wide) shell because 4 x 280 + gaps overflows its inner
     width, so a 1440px monitor still only shows 3. Force a 4th column from
     1280px up (columns land at ~260px, comfortably above the tile minimum).
     The 1/2/3 auto-fill steps below 1280px are untouched. */
  @media (min-width: 1280px) {
    .year-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Loading / error placeholder, mirrors deck-grid__loading. */
  .year-grid__status {
    grid-column: 1 / -1;
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--ink-050);
    border: 1px dashed var(--rule-medium);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--bone-700);
    text-align: center;
  }


  /* ============================================================
     YEAR CARD - one year. Full-bleed cover tile.
     ------------------------------------------------------------
     Layered background:
       1. inline style background-image = title card art (cover)
       2. ::before - dark gradient overlay so the text reads
       3. content sits on top, anchored to the bottom
     ============================================================ */
  .year-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    padding: var(--space-md) var(--space-md) var(--space-md);
    overflow: hidden;

    background-color: var(--ink-100);
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;

    border: 1px solid var(--rule-medium);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition:
      border-color var(--dur-fast) var(--ease-out-quart),
      transform var(--dur-fast) var(--ease-out-quart),
      box-shadow var(--dur-fast) var(--ease-out-quart);
  }

  /* DARK OVERLAY - readable text over any art. Stronger at the
     bottom where the copy lives, lighter up top so the art shows. */
  .year-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top,
        oklch(8% 0.010 95 / 0.94) 0%,
        oklch(10% 0.010 95 / 0.78) 34%,
        oklch(12% 0.010 95 / 0.42) 62%,
        oklch(14% 0.010 95 / 0.20) 100%);
    transition: background var(--dur-fast) var(--ease-out-quart);
  }

  /* TOP SCRIM - a second gradient anchored to the top edge so the
     counts rail stays legible over bright art (some 2025/2026 title
     cards measured ~1.85-2.66:1 without it). Sits above the art but
     below the text (z-index -1, same plane as ::before, painted
     after it). Fades to transparent by the time it clears the
     counts band so the art still breathes through the middle. */
  .year-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42%;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        oklch(8% 0.010 95 / 0.82) 0%,
        oklch(9% 0.010 95 / 0.52) 38%,
        oklch(11% 0.010 95 / 0.18) 74%,
        transparent 100%);
    transition: background var(--dur-fast) var(--ease-out-quart);
  }

  .year-card:hover,
  .year-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--accent-lift-md);
  }
  /* Keyboard focus (WCAG 2.4.7) must be unmistakable AND distinct from hover.
     Hover only recolors the 1px border to gold; focus adds a real 2px accent
     outline held off the tile so it reads as a ring, not just a border swap. */
  .year-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .year-card:hover::before,
  .year-card:focus-visible::before {
    background:
      linear-gradient(to top,
        oklch(8% 0.010 95 / 0.92) 0%,
        oklch(10% 0.010 95 / 0.70) 36%,
        oklch(12% 0.010 95 / 0.34) 66%,
        color-mix(in oklch, var(--accent) 12%, transparent) 100%);
  }

  /* PLAIN VARIANT - no title card art for that year. Fall back to
     a hatched ink panel so it still reads as a card. */
  .year-card.is-plain {
    background-image:
      repeating-linear-gradient(45deg,
        transparent 0 9px, var(--ink-150) 9px 10px),
      linear-gradient(180deg, var(--ink-100), var(--ink-050));
    background-size: auto, auto;
  }
  .year-card.is-plain::before {
    background: linear-gradient(to top,
      oklch(10% 0.010 95 / 0.70), oklch(14% 0.010 95 / 0.30));
  }


  /* TOP-RIGHT KICKER - set/card count rail at the top, mono. */
  .year-card__counts {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-md);
    right: var(--space-md);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    align-items: center;

    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--bone-900);
    text-shadow:
      0 1px 2px oklch(0% 0 0 / 0.9),
      0 0 10px oklch(0% 0 0 / 0.7);
  }

  /* COUNTS BACKING PLATE (WCAG 1.4.3) - the 11px counts line measured only
     ~3.2:1 over the lightest 2025/2026 art even with the ::after top scrim
     and a text-shadow. A text-shadow does not raise measured contrast, so we
     lay a dark plate directly behind the counts band: a top-anchored gradient
     held at >=0.88 alpha through the band, fading out below it. This is
     pinned to the counts box (not the whole tile) so it tracks the text and
     guarantees >=4.5:1 over even pale artwork. Spans full tile width via
     negative insets that cancel the band's own left/right inset. */
  .year-card__counts::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Cancel the band's own left/right inset so the plate spans the full
       tile width, and pull up to the tile's top edge. */
    left: calc(var(--space-md) * -1);
    right: calc(var(--space-md) * -1);
    top: calc(var(--space-sm) * -1);
    /* Cover ~64px down from the tile top (the band sits at space-sm, so the
       band's own height + that offset land inside this), holding >=0.88
       alpha through the band before fading out so the art still breathes. */
    height: 64px;
    pointer-events: none;
    background:
      linear-gradient(to bottom,
        oklch(7% 0.010 95 / 0.94) 0%,
        oklch(7% 0.010 95 / 0.90) 56%,
        oklch(8% 0.010 95 / 0.66) 82%,
        transparent 100%);
  }
  .year-card__counts .sep {
    color: var(--accent);
  }
  .year-card__counts strong {
    color: var(--bone-900);
    font-weight: var(--fw-body-strong);
    font-variant-numeric: tabular-nums;
  }


  /* THE YEAR - the big number, the hero of the tile. */
  .year-card__year {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-display-bold);
    font-size: clamp(3.25rem, 7vw, 4.5rem);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--bone-900);
    font-variant-numeric: tabular-nums;
    text-shadow:
      0 2px 18px oklch(0% 0 0 / 0.75),
      0 0 40px var(--accent-glow);
  }


  /* CAPTION - "Top: Murktide Regent · $2,300" */
  .year-card__top {
    margin-top: var(--space-2xs);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 var(--space-2xs);

    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--bone-700);
    text-shadow: 0 1px 6px oklch(0% 0 0 / 0.85);
  }
  .year-card__top-lbl { color: var(--bone-500); }
  .year-card__top-name {
    color: var(--bone-900);
    font-weight: var(--fw-body-strong);
    /* Keep long card names from blowing out the tile. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .year-card__top .sep { color: var(--bone-300); }
  .year-card__top-price {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }


  /* ARROW - bottom-right nubbin, slides on hover (matches deck-card). */
  .year-card__arrow {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-md);
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 1px 8px oklch(0% 0 0 / 0.85);
    transition: transform var(--dur-fast) var(--ease-out-quart);
  }
  .year-card:hover .year-card__arrow,
  .year-card:focus-visible .year-card__arrow {
    transform: translateX(5px);
  }


  @media (max-width: 520px) {
    .year-card {
      min-height: 220px;
      padding: var(--space-sm);
    }
    .year-card__counts {
      left: var(--space-sm);
      right: var(--space-sm);
      font-size: var(--fs-label-sm);
      letter-spacing: var(--tracking-wide);
    }
    .year-card__year { font-size: clamp(2.75rem, 16vw, 3.75rem); }
    .year-card__arrow { right: var(--space-sm); }
  }
}