/* ============================================================
   ht-card.css  —  Hidden Temple "HSC1" set-card system
   ------------------------------------------------------------
   Reusable card layout extracted from the locked HSC1 page so
   any set page can get the same look. Apply by adding class
   "ht-card-grid" to the .sets-grid that holds the item tiles,
   and structuring each tile as:

     <div class="set-tile fp2" id="t-NNN">
       <div class="fp-cols">
         <div class="fp-col"><div class="ph-f" data-side="front"></div><span class="fp-cl">Front</span></div>
         <div class="fp-col"><div class="ph-b" data-side="back"></div><span class="fp-cl">Back</span></div>
       </div>
       <div class="fp-meta">
         <div class="fp-nl"><span class="sn">#NNN</span><span class="snm">Name</span></div>
         <span class="fp-type fp-type-holo">Holo</span>
       </div>
     </div>

   Variants:  fp2 = Front/Back (default standard set)
              fp3 = three photo columns   (e.g. HSC1 1st/2nd print)
              fp4 = four photo columns
   Type pills: fp-type-nonholo | fp-type-holo | fp-type-prism
               fp-type-gold | fp-type-promo
   Photo credit text is hidden (.ht-credit) exactly like HSC1.
   ============================================================ */

/* --- 2-up grid on desktop --- */
.ht-card-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(460px,1fr)) !important; gap:10px !important; }

/* --- card shell --- */
.ht-card-grid .set-tile { display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 16px 10px 10px; border:1px solid var(--line); background:rgba(15,28,30,0.4); transition:all 0.2s ease; min-height:160px; position:relative; }
.ht-card-grid .set-tile:hover { border-color:var(--teal-deep); background:rgba(109,181,176,0.04); }

/* --- photo columns --- */
.ht-card-grid .set-tile .fp-cols { display:flex !important; flex-direction:row !important; gap:8px; align-items:flex-start; flex-shrink:0; }
.ht-card-grid .set-tile .fp-col { display:flex !important; flex-direction:column !important; align-items:center; gap:7px; }
.ht-card-grid .set-tile .fp-col .ph-f,
.ht-card-grid .set-tile .fp-col .ph-b { width:144px !important; height:176px !important; flex:0 0 auto !important; aspect-ratio:auto !important; }
.ht-card-grid .set-tile.fp3 .fp-col .ph-f,
.ht-card-grid .set-tile.fp3 .fp-col .ph-b { width:132px !important; height:162px !important; }
.ht-card-grid .set-tile.fp4 .fp-col .ph-f,
.ht-card-grid .set-tile.fp4 .fp-col .ph-b { width:112px !important; height:138px !important; }
.ht-card-grid .set-tile .fp-cl { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:0.04em; color:var(--ink-dim); text-transform:uppercase; text-align:center; white-space:nowrap; line-height:1.15; }
/* uploader credit: hidden while still nested in the photo slot; shown once
   ht-card-fit.js lifts it into the column flow, under the Front/Back caption */
.ht-card-grid .set-tile .fp-col .ph-f .ht-credit,
.ht-card-grid .set-tile .fp-col .ph-b .ht-credit { display:none !important; }
.ht-card-grid .set-tile .fp-col > .ht-credit { position:static !important; top:auto !important; left:auto !important; right:auto !important; display:block !important; text-align:center; margin-top:1px; line-height:1.12; max-width:100%; }
.ht-card-grid .set-tile .fp-col .ht-addphoto { font-size:10px !important; padding:3px 6px !important; min-width:0 !important; max-width:calc(100% - 6px) !important; white-space:nowrap; box-sizing:border-box; }
/* Desktop clearance under an empty slot: banner-anvil-cart.js hangs the
   + Photo button below the slot (absolute; top:100%; margin-top:3px;
   min-height:44px), which would bury the .fp-cl caption. Reserve the same
   52px strip ht-set-grid.css uses so button (3 + 44px) and caption never
   touch. The phone block below zeroes this margin and centres the button
   inside the slot instead. */
.ht-card-grid .set-tile .fp-col .ph-f:has(.ht-addphoto),
.ht-card-grid .set-tile .fp-col .ph-b:has(.ht-addphoto) { margin-bottom:52px; }

/* --- meta (number + name + type) --- */
.ht-card-grid .set-tile .fp-meta { flex:1 1 auto !important; min-width:0; display:flex !important; flex-direction:column !important; justify-content:center; gap:5px; container-type:inline-size; text-align:left; }
.ht-card-grid .set-tile .fp-nl { display:flex !important; align-items:baseline; flex-wrap:wrap; gap:2px 8px; min-width:0; white-space:normal; overflow:visible; }
.ht-card-grid .set-tile .fp-nl .sn { flex-shrink:0; font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; color:var(--bronze-bright); font-size:clamp(9px,3.4cqi,13px); }
.ht-card-grid .set-tile .fp-nl .snm { min-width:0; flex:0 1 auto; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:break-word; font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--ink); line-height:1.2; font-size:clamp(13px,8.5cqi,24px) !important; }
.ht-card-grid .set-tile .fp-type { display:block !important; margin:0; align-self:flex-start; text-align:left; flex-shrink:0; position:static !important; font-family:'IBM Plex Mono',monospace; letter-spacing:0.16em; text-transform:uppercase; font-size:clamp(8px,4.4cqi,12px); }
.ht-card-grid .set-tile .fp-type-nonholo { color:var(--ink-faint); }
.ht-card-grid .set-tile .fp-type-holo,
.ht-card-grid .set-tile .fp-type-prism { color:var(--teal-bright); }
.ht-card-grid .set-tile .fp-type-gold { color:var(--bronze-bright); }
.ht-card-grid .set-tile .fp-type-promo { color:var(--blood); }

/* Four-photo desktop cards keep metadata on its own full-width row so names
   never collapse into an ellipsis beside the four image columns. */
.ht-card-grid .set-tile.fp4 .fp-meta { flex:0 0 100% !important; width:100% !important; }
.ht-card-grid .set-tile.fp4 .fp-nl { white-space:normal !important; overflow:visible !important; flex-wrap:wrap !important; }
.ht-card-grid .set-tile.fp4 .fp-nl .snm { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

/* product / sealed cards: same shell, no type pill */
.ht-card-grid .set-tile.product-card .fp-nl .sn { color:var(--bronze-bright); }

/* --- phones: one readable card per row; four-photo cards wrap 2-up --- */
@media (max-width:600px){
  html body .sets-wrap .sets-grid.ht-card-grid,
  .ht-card-grid { grid-template-columns:1fr !important; gap:10px !important; }
  html body .ht-card-grid .set-tile { display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:8px; min-height:0; align-items:flex-start; padding:10px 8px 12px 8px !important; }
  .ht-card-grid .set-tile .fp-cols { flex:0 0 100% !important; width:100% !important; gap:8px !important; margin-bottom:2px !important; }
  .ht-card-grid .set-tile .fp-col { flex:1 1 0 !important; min-width:0 !important; gap:3px !important; }
  .ht-card-grid .set-tile.fp4 .fp-cols { flex-wrap:wrap !important; }
  .ht-card-grid .set-tile.fp4 .fp-col { flex:0 0 calc(50% - 4px) !important; max-width:calc(50% - 4px) !important; }
  .ht-card-grid .set-tile .fp-col .ph-f,
  .ht-card-grid .set-tile .fp-col .ph-b { flex:0 0 auto !important; width:100% !important; max-width:none !important; height:auto !important; aspect-ratio:5 / 6 !important; }
  .ht-card-grid .set-tile.fp4 .fp-col .ph-f,
  .ht-card-grid .set-tile.fp4 .fp-col .ph-b { width:100% !important; max-width:none !important; height:auto !important; }
  .ht-card-grid .set-tile .fp-cl { font-size:13px !important; letter-spacing:0.02em !important; white-space:normal !important; }
  body .ht-card-grid .set-tile .fp-col .ph-f,
  body .ht-card-grid .set-tile .fp-col .ph-b { margin-bottom:0 !important; }
  body .ht-card-grid .set-tile .fp-col .ht-addphoto { top:50% !important; left:50% !important; margin:0 !important; transform:translate(-50%,-50%) !important; min-width:44px !important; min-height:44px !important; width:calc(100% - 16px) !important; max-width:calc(100% - 16px) !important; padding:8px !important; font-size:13px !important; }
  .ht-card-grid .set-tile .fp-col > .ht-credit { font-size:13px !important; }
  .ht-card-grid .set-tile .fp-meta { flex:1 1 100% !important; gap:3px !important; }
  .ht-card-grid .set-tile .fp-nl { white-space:normal !important; overflow:visible !important; flex-wrap:wrap !important; align-items:baseline; }
  .ht-card-grid .set-tile .fp-nl .sn,
  .ht-card-grid .set-tile .fp-type { font-size:13px !important; }
  .ht-card-grid .set-tile .fp-nl .snm { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; line-height:1.25; font-size:clamp(16px,5vw,20px) !important; }
  .ht-anvil-on .ht-card-grid .set-tile .fp-meta { padding-right:30px !important; }
}