/* =====================================================================
   JUST DOG — Homepage category grid ("分類 8 宮格")
   8 illustrated category entries: circular icon + Chinese name + English line.
   Spec: operator file claude-code-指令-分類區塊.md (2026-09-06).
   All selectors are prefixed .jd-cats / .jd-cat so nothing leaks into
   WoodMart's own styles. No !important anywhere. Loaded on the front
   page only (see functions.php, handle 'jd-category').
   Images live in ../img/category/ — the 8 icons are .webp (385×376
   circular crayon illustrations, swapped in 2026-09-26; they are already
   trimmed to the artwork, and the aspect-ratio maths below depends on
   that, so re-trim before swapping any of them). 2026-09-26: the pink pill
   (image, then the .jd-cat__pill wrapper itself) is gone — .jd-cat__zh and
   .jd-cat__en are direct children of .jd-cat and sit under the icon with
   their own margins. Phones: 4 cards per row (2 × 4).
   ===================================================================== */

.jd-cats {
  padding: clamp(32px, 5vw, 72px) 0;   /* no side padding — the grid's edges must sit on the container's edges (operator 2026-09-06) */
}

/* Operator 2026-09-06 (2nd pass): column min 210px → 126px, gaps widened (row 26–52px,
   column 22–44px), type scales with the card via cqw (no px floors), and the grid spans the
   full container width (edges flush with the other homepage rows). Column count is whatever
   auto-fit packs into the container at that minimum — at the 1000px site width that is 5-up. */
.jd-cats__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));  /* base; every width is pinned by the media rules below */
  gap: clamp(26px, 3.6vw, 52px) clamp(22px, 3vw, 44px);        /* row gap, column gap */
  align-items: end;                 /* every card's label bottom sits on one baseline */
}

/* Operator 2026-09-06 (3rd pass, site width → 1200px): all 8 cards on ONE row on desktop. The
   container's content box is 1170px; 8 × 126px needs the column gap at the bottom of its range
   (8×126 + 7×22 = 1162px), so the gap is pinned to 22px here. Tablets get a balanced 4+4 instead of
   whatever auto-fit would pack (6+2 / 5+3); phones stay on auto-fit (2-up). */
@media (min-width: 1200px) {
  .jd-cats__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 22px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .jd-cats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Phones / small widths: 4-up (4 + 4), operator 2026-09-26 「手機版 8個目錄改成一行4個並且增加適當間距」
   (was 2-up, 2026-09-06). The base gap's 22px column floor is too wide for 4 columns at 375px, so
   the phone rule sets its own: column 10–16px, row 26–34px. Card width at 375 / 430px viewports
   ≈ 74 / 89px; labels scale with it via cqw (see .jd-cat__zh / __en floors). */
@media (max-width: 767px) {
  .jd-cats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(26px, 7vw, 34px) clamp(10px, 3vw, 16px);
  }
}

.jd-cat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  container-type: inline-size;      /* type scales with card width via cqw — mobile text stays proportional */
  text-decoration: none;
  color: var(--jd-text-title);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.jd-cat:hover,
.jd-cat:focus-visible {
  transform: translateY(-9px) scale(1.025);
  color: var(--jd-text-title);
  text-decoration: none;
}

/* Keyboard focus ring. WoodMart paints every link's :focus-visible outline itself
   (base.css `:is(a,button,…):focus-visible { outline: … !important }`), so a plain
   `outline:` here loses. That rule reads the --wd-otl-* custom properties, which is
   the theme's own hook for restyling the ring — set them on the card instead. */
.jd-cat {
  --wd-otl-width: 3px;
  --wd-otl-style: solid;
  --wd-otl-color: var(--jd-accent);
  --wd-otl-offset: 6px;
  border-radius: 28px;              /* the ring follows this radius */
}

.jd-cat__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / .62;
}

.jd-cat__art img {
  max-width: 82%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Label block (no wrapper): Chinese name, then the English line. Margins are in cqw so the
   breathing room scales with the card; letter-spacing on the Chinese name gives it the airy,
   "printed" feel, and text-indent (= the letter-spacing) cancels the trailing gap so the
   centred text is optically centred. */
.jd-cat__zh {
  margin-top: clamp(12px, 10cqw, 22px);         /* icon → Chinese name */
  font-family: var(--jd-font-display);          /* Baloo 2 + Noto Sans TC stack from jd-fonts.css */
  font-weight: 500;                             /* Noto Sans TC 500 is loaded (400;500;700) */
  font-size: 16px;                              /* fallback for browsers without cqw */
  font-size: clamp(12px, 14.5cqw, 32px);        /* scales with card width; was 10.4cqw / max 28px (operator 2026-09-26 「中文名稱加大字級」) */
  letter-spacing: .14em;
  text-indent: .14em;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--jd-text-title);
}

.jd-cat__en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: clamp(4px, 4.6cqw, 10px);         /* Chinese name → English line */
  font-family: "Gaegu", "Nunito", sans-serif;   /* operator 2026-09-28: Gaegu (Google Fonts, Korean hand-writing face), 400, .14em (was Nunito 600, .06em) */
  font-weight: 400;
  font-size: 14px;                              /* operator 2026-09-28 「.jd-cat__en的 font-size 改成 14px」 (was clamp(8px, 7.4cqw, 19px), ≈ 9.6px on desktop) */
  font-size: min(14px, 14.2cqw);                /* 14px wherever the card is ≥ 99px wide (desktop, tablet); narrower cards (4-up phone grid, 65–90px) shrink it so the
                                                   longest label ("Pet Living ❯" = 95px at 14px) still fits its card instead of running into the next one */
  letter-spacing: .14em;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--jd-text-muted);
}

.jd-cat__en i {
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
  color: #f7c5c8;          /* operator 2026-09-28 (was var(--jd-sale), blush-600); operator-given, not a palette token */
}

/* Engines without aspect-ratio: let the art flow. */
@supports not (aspect-ratio: 1 / 1) {
  .jd-cat__art img { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-cat { transition: none; }
  .jd-cat:hover { transform: none; }
}

/* the locked category name 「JUST DOG 天然零食」 (owner decisions 2026-09-30) is wider than a tile: it may break after "JUST DOG" (two short
   lines, centred) instead of running into the neighbouring tiles; the four-character names stay on one line as before */
.jd-cat__zh { white-space: normal; text-wrap: balance; line-height: 1.3; }