/* =============================================================================
   Landing (/) — real data now, replacing the Mock/MockCatalog design spike.

   Structure changed from the spike once real data replaced the mock catalogue:
   the live site's own landing (ComicLanding.tsx) shows the latest-updates feed as
   a plain grid (not a horizontal rail) and treats "มังงะ"/"นิยาย" as compact
   6-item preview rails with a "ดูทั้งหมด" link to /manga or /novel — there is no
   separate synopsis-led novel section. This file follows that real structure
   (brief chunk-5b-landing-account.md §1); the hero technique, cover component and
   token usage carry over unchanged from the spike.

   Tokens only (tokens.css); every colour goes through light-dark() or reuses a
   token, same rule as title.css.
   ============================================================================= */
@layer page {

  /* --- shared cover component ------------------------------------------------
     Fixed 7:10 frame, artwork absolutely positioned inside it so the box's size
     never depends on the image's own intrinsic ratio (see title.css .t-cover for
     the fuller writeup of why — same trap, same fix, independent copy because
     this stylesheet does not load title.css). */
  .cover {
    position: relative;
    display: block;
    aspect-ratio: var(--cover-ratio);
    overflow: clip;
    border-radius: var(--radius);
    background: var(--paper-sunk);
    isolation: isolate;
    transition: scale 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .cover__ambient {
    position: absolute;
    inset: -14%;
    z-index: -1;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.6);
    opacity: light-dark(0.5, 0.7);
  }

  .cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- empty state (no data at all) ----------------------------------------- */
  .h-empty {
    padding-block: clamp(4rem, 14vw, 8rem);
    text-align: center;
    color: var(--ink-2);
  }

  .h-empty h1 { font-family: var(--display); color: var(--ink); }

  /* --- hero ------------------------------------------------------------------
     One grid, artwork bleeding off the right/top/bottom edges. Two layers of the
     same artwork as two real elements, not an element plus a pseudo-element:
     `filter` on a parent also filters its pseudo-element, so a blurred parent
     cannot host a sharp child.
       .hero__art        — blurred, over-scanned atmosphere layer.
       .hero__art--sharp — the real artwork, on top. */
  .hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    min-height: min(78svh, 42rem);
    display: grid;
    align-items: end;
  }

  .hero__art {
    position: absolute;
    inset: -6% 0;
    z-index: -3;
    background-image: var(--cover);
    background-size: cover;
    background-position: center 18%;
    filter: blur(40px) saturate(1.5);
  }

  .hero__art--sharp {
    inset: 0;
    z-index: -2;
    filter: none;
  }

  /* Hand-off from artwork to page. Vertical fade (phones, where type sits under
     the art) plus a horizontal one on wide screens (type sits beside it). */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top,
        var(--paper) 0%,
        color-mix(in oklab, var(--paper) 84%, transparent) 16%,
        color-mix(in oklab, var(--paper) 32%, transparent) 50%,
        color-mix(in oklab, var(--paper) 10%, transparent) 100%);
  }

  /* No width here — this element also carries .wrap, which owns the page column
     width. A width rule in this layer would beat it (brief chunk-5a §4 / this
     chunk's own trap list). */
  .hero__body {
    position: relative;
    padding-block: clamp(2rem, 8vw, 4.5rem);
  }

  .hero__text { max-width: 34rem; }

  .eyebrow {
    font-family: var(--display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 0.6rem;
  }

  .hero h1 {
    margin: 0;
    font-size: var(--step-4);
    overflow-wrap: break-word;
    letter-spacing: -0.025em;
    color: var(--ink);
  }

  .hero__meta {
    margin-top: 1.1rem;
    color: var(--ink-2);
    font-size: var(--step-0);
  }

  .hero__meta .sep { color: var(--ink-3); margin-inline: 0.3rem; }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.6rem;
  }

  /* Desktop: artwork keeps the right of the hero, type gets a clean left column. */
  @media (width >= 58rem) {
    .hero { align-items: center; }

    .hero__art,
    .hero__art--sharp { inset-inline-start: 26%; }

    .hero__scrim {
      background:
        linear-gradient(to right,
          var(--paper) 0%,
          var(--paper) 32%,
          color-mix(in oklab, var(--paper) 60%, transparent) 46%,
          transparent 64%),
        linear-gradient(to top,
          var(--paper) 0%,
          color-mix(in oklab, var(--paper) 55%, transparent) 11%,
          transparent 38%);
    }
  }

  /* --- grid (latest updates + manga/novel rails) ---------------------------- */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.85rem, 2.5vw, 1.5rem);
  }

  .tile {
    display: block;
    text-decoration: none;
    contain: content;
    /* Same trap as title.css .t-tile: without this, a long nowrap title widens
       its own grid column and a row of equal-share columns comes out uneven
       (brief chunk-5a's "แก้ปกไม่เท่ากันบนหน้ารวมเรื่อง" fix, decisions.md). */
    min-width: 0;
  }

  .tile:hover .cover { scale: 1.02; }

  .tile__name {
    display: block;
    margin-top: 0.55rem;
    color: var(--ink);
    font-weight: 700;
    font-size: var(--step--1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tile__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--step--2);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (width >= 40rem) {
    .grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (width >= 48rem) {
    .grid { grid-template-columns: repeat(5, 1fr); }
  }

  /* --- free-release calendar (current Thai month) ---------------------------
     Two columns on wide screens (month grid + schedule list), stacked on
     phones. "Today"/"this month" both come from Helper.GetThaiTime server-side
     (brief §6) — nothing here recomputes a date. */
  .h-cal__layout {
    display: grid;
    gap: 1.25rem;
  }

  @media (width >= 48rem) {
    .h-cal__layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  }

  .h-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    padding: 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--paper-sunk);
  }

  .h-cal__weekday {
    text-align: center;
    font-size: var(--step--2);
    font-weight: 700;
    color: var(--ink-3);
    padding-block: 0.3rem;
  }

  .h-cal__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  .h-cal__day--blank { visibility: hidden; }

  .h-cal__day--free {
    background: color-mix(in oklab, var(--gold) 22%, transparent);
    color: var(--ink);
    font-weight: 800;
  }

  .h-cal__day--today {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .h-cal__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .h-cal__empty {
    padding: 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    color: var(--ink-2);
    font-size: var(--step--1);
  }

  .h-cal__row {
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--paper-rise);
  }

  .h-cal__row-day {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--gold);
    color: oklch(0.15 0 0);
    font-weight: 800;
  }

  .h-cal__row-items p {
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .h-cal__row-items p + p { margin-top: 0.25rem; }

  .h-cal__chip {
    display: inline-block;
    margin-inline-end: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--paper);
    font-size: var(--step--2);
    font-weight: 800;
  }
}