/* =====================================================================
   THE LISTICLE ENTRY
   ---------------------------------------------------------------------
   Lifted out of list.html unchanged so the category pages can use the
   identical component. Design tokens still live in assets/site.css.
   ===================================================================== */
/* ===== guide-page styles (shared bits live in assets/site.css) ===== */

/* "UPDATE —" strip, one line, countdown inline */
.notice { background:var(--md-tertiary-container); color:var(--md-on-tertiary-container);
          border-bottom:1px solid color-mix(in srgb,var(--md-tertiary) 26%,transparent); }
.notice-in { display:flex; align-items:center; justify-content:center; gap:8px 14px;
             flex-wrap:wrap; padding-block:8px; text-align:center; }
.notice b { font-weight:700; }
.cd { display:inline-flex; gap:4px; }
.cd i { font-style:normal; min-width:52px; padding:2px 7px; border-radius:var(--r-sm);
        background:color-mix(in srgb,var(--md-on-tertiary-container) 12%,transparent);
        font-variant-numeric:tabular-nums; font-weight:600; }

/* article head — tightened */
.head { padding-top:22px; }
.tagpills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.tagpill { padding:5px 12px; border-radius:var(--r-xs); }
.tagpill--a { background:var(--md-primary); color:var(--md-on-primary); }
.tagpill--b { background:var(--pill-red); color:var(--pill-red-ink); }
h1.display { margin-bottom:14px; }
.byline { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
          color:var(--md-on-surface-variant); font-size:.9375rem; }
.byline-av { width:30px; height:30px; border-radius:50%; background:var(--md-secondary-container);
             color:var(--md-on-secondary-container); display:grid; place-items:center;
             font-family:"Rubik",sans-serif; font-weight:600; font-size:.6875rem; }
.byline b { color:var(--md-on-surface); font-weight:600; }
.byline-adv { padding:3px 9px; border-radius:var(--r-xs); background:var(--md-surface-c-high); }

/* User-supplied hero banner. */
.mosaic { margin:24px 0 10px; border-radius:var(--r-xl); overflow:hidden; }
.mosaic img { display:block; width:100%; height:auto; }
.mosaic-cap { color:var(--md-on-surface-variant); margin:0 0 4px; }

/* lede */
.lede { padding-block:24px 20px; }
.lede strong { font-weight:600; }

/* ===== the entry — the core listicle unit ===== */
.entries { display:flex; flex-direction:column; }
.entry { padding-block:32px; border-top:1px solid var(--md-outline-variant); }
.entry:first-child { border-top:0; }
.entry-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.num { flex-shrink:0; min-width:38px; height:38px; padding:0 9px; border-radius:var(--r-md);
       background:var(--md-primary); color:var(--md-on-primary); display:grid; place-items:center;
       font-family:"Roboto Mono",monospace; font-weight:500; font-size:1rem;
       font-variant-numeric:tabular-nums; transition:border-radius .34s var(--ease-spring); }
.entry:hover .num { border-radius:var(--r-full); }
.entry--todo .num { background:var(--md-surface-c-highest); color:var(--md-on-surface-variant); }
.entry-title { flex:1; min-width:0; }
.entry-title .pname { color:var(--md-primary); text-decoration:none; }
.entry-title .pname:hover { text-decoration:underline; text-underline-offset:3px; }

.entry-media { border-radius:var(--r-lg); overflow:hidden; background:var(--md-surface-c-high);
               box-shadow:var(--shadow-1); }
.art { position:relative; aspect-ratio:16/9; }
.art > svg, .art > .slot { width:100%; height:100%; object-fit:cover; display:block; border:0; }
.art--embed { background:#000; }
.art--embed .slot { object-fit:contain; }
.mediabox--gif .slot { width:100%; height:100%; object-fit:cover; }
/* trend badge on an item that clicks pushed up the list */
.trend { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; padding:5px 10px;
         border-radius:var(--r-full); background:var(--md-tertiary-container);
         color:var(--md-on-tertiary-container); font-weight:700; }
.art-badge { position:absolute; top:12px; right:12px; padding:5px 12px; border-radius:var(--r-full);
             background:var(--badge); color:var(--badge-ink); box-shadow:var(--shadow-1); }
.art-stats { position:absolute; top:12px; left:12px; display:grid; gap:7px; justify-items:start; }
.art-stats > span { display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
             border-radius:var(--r-sm); background:color-mix(in srgb,var(--md-inverse-surface) 84%,transparent);
             color:var(--md-inverse-on-surface); backdrop-filter:blur(8px); }
.art-off { background:var(--md-error) !important; color:var(--md-on-error) !important; font-weight:700; }
.art-tag { position:absolute; left:12px; bottom:12px; padding:4px 9px; border-radius:var(--r-xs);
           background:color-mix(in srgb,var(--md-inverse-surface) 84%,transparent);
           color:var(--md-inverse-on-surface); backdrop-filter:blur(8px); }

.dealbar { display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:11px 14px;
           background:var(--md-surface-c-lowest); border-top:2px solid var(--md-primary); }
.scorepill { display:inline-flex; align-items:baseline; gap:2px; min-width:44px; justify-content:center;
             padding:4px 9px; border-radius:var(--r-full); background:var(--md-primary);
             color:var(--md-on-primary); font-weight:700; font-variant-numeric:tabular-nums; }
.scorepill small { font-size:.625rem; opacity:.8; font-weight:500; }
.deallink { display:inline-flex; align-items:center; gap:5px; color:var(--md-primary);
            font-family:"Rubik",sans-serif; font-weight:600; font-size:.875rem;
            text-decoration:underline; text-underline-offset:3px; }
.dealproof { margin-left:auto; color:var(--md-on-surface-variant); white-space:nowrap; }

.entry-body { padding-top:18px; }
.feats { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; }
.feats li { display:flex; gap:10px; align-items:flex-start; }
.feats svg { margin-top:5px; color:var(--md-primary); }
.entry-meta { display:flex; gap:7px 15px; flex-wrap:wrap; margin-top:12px;
              color:var(--md-on-surface-variant); justify-content:center; }
.entry-meta span { display:inline-flex; align-items:center; gap:5px; }

/* video + GIF placeholders */
.mediabox { position:relative; display:grid; place-items:center; background:var(--md-surface-c-high); }
.mediabox--video { aspect-ratio:16/9; }
.mediabox--gif { aspect-ratio:16/5; border-radius:var(--r-lg); overflow:hidden; margin-top:14px; }
.medialabel { position:absolute; top:12px; left:12px; padding:4px 9px; border-radius:var(--r-xs);
              background:var(--md-inverse-surface); color:var(--md-inverse-on-surface); z-index:2; }
.play { width:68px; height:68px; border-radius:50%; border:0; cursor:pointer; z-index:2;
        background:var(--md-primary); color:var(--md-on-primary); display:grid; place-items:center;
        box-shadow:var(--shadow-3); transition:border-radius .34s var(--ease-spring); }
.play:hover { border-radius:var(--r-lg); }
.gifanim { position:absolute; inset:0; overflow:hidden; }
.gifanim i { position:absolute; top:50%; translate:0 -50%; width:12%; aspect-ratio:1;
             border-radius:38%; background:var(--art-1);
             animation:drift 2.6s var(--ease-emph) infinite alternate; }
.gifanim i:nth-child(1){ left:26%; }
.gifanim i:nth-child(2){ left:44%; background:var(--art-4); animation-delay:-.26s; }
.gifanim i:nth-child(3){ left:62%; background:var(--art-5); animation-delay:-.52s; }
@keyframes drift { 0%{transform:translateY(52%) rotate(0) scale(.74); border-radius:38%;}
                   100%{transform:translateY(-52%) rotate(130deg) scale(1.04); border-radius:50%;} }

/* auto-loading sentinel + status */
.loadzone { display:grid; justify-items:center; gap:12px; padding-block:40px;
            border-top:1px solid var(--md-outline-variant); color:var(--md-on-surface-variant); }
.spinner { width:26px; height:26px; border-radius:50%;
           border:3px solid var(--md-surface-c-highest); border-top-color:var(--md-primary);
           animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress { width:min(300px,100%); height:4px; border-radius:var(--r-full);
            background:var(--md-surface-c-highest); overflow:hidden; }
.progress i { display:block; height:100%; background:var(--md-primary); border-radius:var(--r-full);
              transition:width .45s var(--ease-std); }
.empty { text-align:center; padding:60px 20px; color:var(--md-on-surface-variant); }


@media (max-width:640px) {
  .tagpills a { margin-left:0 !important; }
  .dealproof { margin-left:0; width:100%; }
  .selwrap, .selwrap select { flex:1; }
  .entry-meta { justify-content:flex-start; }
}
/* Short mobile actions avoid squeezing long offer copy into unreadable text. */
.entry .cta-label-mobile { display:none; }
@media (max-width:768px) {
  .entry .btn-cta {
    font-size:clamp(.875rem, 3.8vw, 1rem);
    padding:12px 14px;
    line-height:1.4;
    white-space:normal;
    text-align:center;
  }
  .entry .btn-cta > span { min-width:0; max-width:100%; }
  .entry .cta-label-full { display:none; }
  .entry .cta-label-mobile { display:block; min-width:0; overflow-wrap:anywhere; }
}

/* Keep the supplied product photos complete inside the existing media frame. */
.art--contain { background:#fff; }
.art--contain > .slot { object-fit:contain; }
.head .guide-tip { margin-top:16px; font-style:italic; color:var(--md-on-surface-variant); }