/* ============================================================
   ht-set-grid.css  —  Hidden Temple default checklist item grid
   ------------------------------------------------------------
   Shared DEFAULT layout for normal set / checklist item pages.
   Load AFTER the page's inline <style> and mobile.css.

   Goal: normal checklist pages show 2 items per row wherever the
   viewport reasonably allows (no 1-up "dead zone" at tablet /
   small-window widths), with tile internals that never overflow
   at narrow 2-up columns. 1-up is reserved for special/wide
   multi-print grids (ht-set-grid-special.css, .sets-grid--wide).

   Scope: density + tile rules target `.sets-wrap .sets-grid` (the
   numbered checklist) only, so pack-art / first-print / sealed-
   product sub-grids are untouched. Tile-internal rules use the
   child combinator (> .snm / > .ph-f) so they apply ONLY to tiles
   whose number/name/type are direct children (e.g. TCG + Amada
   sticker rows); tiles that wrap their text in a .body element
   (e.g. Battrio) and multi-print .fp-col tiles are left as-is.
   ============================================================ */

/* --- Default: exactly 2 items per row on normal checklist pages --- */
.sets-wrap .sets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Direct-child tiles: let the name + type drop to their own
       full-width lines so a narrow 2-up column never overflows or
       overlaps the photos. (Battrio-style .body tiles are unaffected.) --- */
.sets-wrap .sets-grid .set-tile { flex-wrap: wrap; }
.sets-wrap .sets-grid .set-tile > .snm { flex: 1 1 100%; min-width: 0; }
.sets-wrap .sets-grid .set-tile > .sty { position: static !important; flex: 1 1 100%; text-align: left; margin-top: 2px; }

/* --- Tablet / small window: trim photo size so 2-up stays roomy --- */
@media (max-width: 820px) {
  .sets-wrap .sets-grid .set-tile > .ph-f,
  .sets-wrap .sets-grid .set-tile > .ph-b { width: 100px !important; height: 100px !important; }
}

/* --- Narrow / phone: compact 2-up --- */
@media (max-width: 600px) {
  .sets-wrap .sets-grid { gap: 8px; }
  /* Reserve a bottom strip so the absolutely-positioned Add-to-Anvil icon
     (anvil-tiles.js: bottom:10px right:10px, ~28px) sits BELOW all tile
     content and can never cover a long card name or the print label. */
  .sets-wrap .sets-grid .set-tile { gap: 8px; padding: 8px; padding-bottom: 46px !important; min-height: 0; }
  .sets-wrap .sets-grid .set-tile > .ph-f,
  .sets-wrap .sets-grid .set-tile > .ph-b { width: 80px !important; height: 80px !important; }
  /* Let long multi-word names wrap instead of overflowing under the icon. */
  .sets-wrap .sets-grid .set-tile > .snm { overflow-wrap: anywhere; word-break: break-word; }
  /* Print/type label (e.g. "Non Holo"): mobile.css right-aligns it, which on
     narrow 2-up cards pushes it toward the bottom-right Add-to-Anvil icon.
     Force it onto its own full-width line, left-aligned. */
  .sets-wrap .sets-grid .set-tile > .sty {
    text-align: left !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box;
  }
}

/* --- + Photo control: reserve flow space so the absolutely
       positioned button (banner-anvil-cart.js: position:absolute;
       top:100%) never overlaps the item / print-slot labels. --- */
.set-tile .fp-col { row-gap: 8px; }
.set-tile .ph-f:has(.ht-addphoto),
.set-tile .ph-b:has(.ht-addphoto) { margin-bottom: 52px; }

/* Final mobile tile lock:
   This file loads after mobile.css on checklist pages, so the protective
   phone layout has to live here too. Keep photo/upload slots in a stable
   first row and force every label/name/body line underneath it. */
@media (max-width: 600px) {
  /* 1-up on phones for checklists whose tiles carry photo slots. The tile
     below is a 2-column photo grid, so a 2-up outer grid meant four slots
     across a phone and a ~19vw slot against a 28vw floor. One tile per row
     gives each slot ~43-45vw. Mirrors the rule in mobile.css — keep the two
     in step. Grids whose tiles have no photo slot stay 2-up. */
  .sets-wrap .sets-grid:not(.hf-grid):has(> .set-tile > .ph-f),
  .sets-wrap .sets-grid:not(.hf-grid):has(> .set-tile > .ph-b) {
    grid-template-columns: 1fr !important;
  }
  .sets-wrap .sets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    column-gap: 6px !important;
    row-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
    padding-bottom: 34px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-f,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-b {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(84px, 24vw, 116px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 5px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-f { grid-column: 1 !important; }
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-b { grid-column: 2 !important; }

  /* background-size/position/repeat used to be repeated here to undo the
     cover-cropped canvas thumbnail. That canvas is opt-in now, and
     banner-anvil-cart.js already sets contain/center/no-repeat !important on
     every .set-tile .ph-f.has-img / .ph-b.has-img, so only padding is left. */
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-f.has-img,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .ph-b.has-img {
    padding: 0 !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) .ht-addphoto {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 98px) !important;
    min-width: 0 !important;
    max-width: 98px !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 5px 6px !important;
    line-height: 1.05 !important;
    font-size: clamp(13px, 2.25vw, 14px) !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .sn,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .snm,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .jp,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .sty,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .body {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: left !important;
    z-index: 1 !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-top: 2px !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .snm,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .body .snm {
    font-size: clamp(15px, 4.5vw, 20px) !important;
    line-height: 1.13 !important;
  }

  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .sty,
  .sets-wrap .sets-grid .set-tile:not(.pack-art-tile):not(.tcg-set-tile):not(.fp3):not(.fp4) > .body .sty {
    display: block !important;
    font-size: clamp(10px, 3.25vw, 13px) !important;
    line-height: 1.2 !important;
    color: var(--ink-dim) !important;
  }

  .sets-wrap .sets-grid .set-tile.ht-anvil-pad {
    padding-right: 7px !important;
  }

  .sets-wrap .sets-grid .set-tile .anvil-toggle,
  .sets-wrap .sets-grid .set-tile .anvil-img {
    right: 8px !important;
    bottom: 8px !important;
  }
}

/* --- Zukan AR product-shots: stack the one-row tiles on phones ---
   The zukan-ar-*-page inline styles pin the Product Shots grid to a single
   nowrap flex row at every width (body.zukan-ar-N-page section.sticker-head >
   .sets-grid { flex-wrap:nowrap }). With three tiles x two PORTRAIT wells,
   390px leaves each well ~55px, so the empty-slot "+ PHOTO" button and the
   contributor captions ("HIDDENTEMPLE") break mid-word. Let the row wrap so
   each tile takes a full row -> two wells across per tile (~165px each), wide
   enough for the button and captions.

   Scoped to the zukan-ar family via [class*="zukan-ar-"]; the leading `html`
   lifts specificity above the page-local nowrap rule (which loads after this
   file). Landscape-slot one-row product grids on other pages (e.g.
   pokemon-amada-adv-part-1) use a different body / no body class and are not
   matched, so they keep their single row. Phone-only; desktop untouched. */
@media (max-width: 600px) {
  html body[class*="zukan-ar-"] section.sticker-head > .sets-grid { flex-wrap: wrap !important; }
  html body[class*="zukan-ar-"] section.sticker-head > .sets-grid > .set-tile { flex: 1 1 100% !important; }
}

/* --- 3D "pack" product-shots: shrink the contributor caption in the
   narrow wells so a single-word handle never fractures mid-word ---
   The pokemon-3d family (DP 3D parts, special pack, Best Wishes movie
   stickers, VIZ video promos) pins its Product Shots grid to a nowrap
   flex row of two-well tiles (body inline style:
   section.sticker-head > .sets-grid { flex-wrap:nowrap }). At 390px each
   pack-art well is only ~77px, so the 13px .ht-credit caption naming a
   contributor's handle ("HIDDENTEMPLE") is force-broken by
   overflow-wrap:anywhere into "HIDDENTE / MPLE". Drop the caption a few
   px in these product-shot wells only, so a typical handle sits on one
   clean centred line — the same way it already renders in the WIDE
   pack-art wells on Merlin / Amada. Full text stays visible (no
   ellipsis: a contributor must always see their name). Phone-only.

   Scoped to the family via [class*="dp3d-"] / [class*="ht-3d-"] and to
   the Product Shots block (section.sticker-head, never .sets-wrap), so
   checklist captions, other families' wide pack-art captions, and the
   protected hsc1 / tg3 / tsg3 pages are all untouched. The leading
   `html` + the tile descendant chain out-specify mobile.css's !important
   13px floor, and this file loads after mobile.css so source order
   backs it too. */
@media (max-width: 600px) {
  html body[class*="dp3d-"] section.sticker-head .set-tile .ht-credit,
  html body[class*="ht-3d-"] section.sticker-head .set-tile .ht-credit {
    font-size: clamp(9px, 2.3vw, 11px) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
  }
}