/*
 * TrendingPunjabi — Top Lists (premium, photo-forward).
 * Path: /otherLinks/mainFiles/css/top-lists.css   (load after header CSS, ?v=N)
 * Built on --tp-* tokens (variables.css) + --tp-medal-*/--tp-gold (ranking-polish.css)
 * so dark + light themes work automatically and it matches the site's medal system.
 */

.tl-wrap { max-width: 1000px; margin: 0 auto; padding: 18px 16px 70px; width: 100%; text-align: left; }
.tl-dir { text-align: left; }
.tl-wrap *, .tl-dir * { box-sizing: border-box; }

/* Explicit left-align: a global rule centers <p>/text elements site-wide, which
   beats inherited alignment — so force left on every Top-List text element. */
.tl-hero-inner, .tl-hero h1, .tl-hero-intro,
.tl-item, .tl-body, .tl-name-row, .tl-desc, .tl-links, .tl-credit,
.tl-related h3, .tl-rel-body, .tl-rel-body div,
.tl-dir-hero h1, .tl-dir-hero p, .tl-dir-cbody, .tl-dir-cbody h3 { text-align: left; }

/* Breadcrumbs */
.tl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 0.82rem; margin-bottom: 16px; color: var(--tp-text-muted, #848d97); }
.tl-crumbs a { color: var(--tp-text-secondary, #8b949e); text-decoration: none; }
.tl-crumbs a:hover { color: var(--tp-accent, #e8b84a); }
.tl-crumbs span { color: var(--tp-text-muted, #6e7681); }

/* ===== Cinematic hero ===== */
.tl-hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--tp-border, #30363d);
    border-radius: var(--tp-radius-xl, 20px);
    background: var(--tp-bg-card, #161b22);
    background-image: linear-gradient(135deg, var(--tp-accent-soft, rgba(232,184,74,0.14)) 0%, transparent 55%),
        radial-gradient(120% 140% at 88% -20%, var(--tp-accent-glow, rgba(232,184,74,0.12)) 0%, transparent 60%);
    margin-bottom: 20px;
}
.tl-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--hero-img); background-size: cover; background-position: center 28%;
    opacity: 0.34; filter: blur(34px) saturate(1.25); transform: scale(1.2);
}
.tl-hero-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,17,23,0.42) 0%, rgba(13,17,23,0.82) 72%, rgba(13,17,23,0.95) 100%); }
[data-theme="light"] .tl-hero-bg { opacity: 0.16; }
[data-theme="light"] .tl-hero-bg::after { background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(246,248,250,0.92) 80%, rgba(246,248,250,0.97) 100%); }
.tl-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
    background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); opacity: 0.75; }
.tl-hero-inner { position: relative; z-index: 1; padding: 26px 24px 24px; }
.tl-hero.has-img .tl-hero-inner { padding-top: 40px; }
.tl-hero-cat {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.4px;
    color: var(--tp-accent, #e8b84a); background: var(--tp-accent-soft, rgba(232,184,74,0.15));
    border: 1px solid var(--tp-accent-soft, rgba(232,184,74,0.25));
    padding: 5px 12px; border-radius: var(--tp-radius-full, 9999px); margin-bottom: 12px;
}
.tl-hero h1 {
    font-size: clamp(1.55rem, 5vw, 2.3rem); line-height: 1.18; margin: 0 0 12px; font-weight: 800;
    color: var(--tp-text-primary, #f0f6fc); letter-spacing: -0.5px;
}
.tl-hero-intro { color: var(--tp-text-secondary, #8b949e); font-size: 1rem; line-height: 1.7; margin: 0; max-width: 760px; }
.tl-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tl-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600;
    color: var(--tp-text-secondary, #8b949e); background: var(--tp-bg-elevated, #1c2128);
    border: 1px solid var(--tp-border, #30363d); padding: 5px 12px; border-radius: var(--tp-radius-full, 9999px);
    font-variant-numeric: tabular-nums;
}
.tl-chip-gold { color: var(--tp-accent, #e8b84a); background: var(--tp-accent-soft, rgba(232,184,74,0.13)); border-color: transparent; }

/* Affiliate disclosure */
.tl-disclosure {
    margin-bottom: 18px; padding: 12px 15px; font-size: 0.8rem; line-height: 1.6;
    color: var(--tp-text-secondary, #8b949e); background: rgba(232,184,74,0.06);
    border: 1px dashed rgba(232,184,74,0.28); border-radius: 10px;
}

/* ===== Items ===== */
.tl-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.tl-item {
    display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start;
    padding: 16px; border-radius: var(--tp-radius-lg, 14px);
    background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: tlIn 0.4s ease both;
}
.tl-item:hover { transform: translateY(-3px); border-color: var(--tp-accent, #e8b84a); box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
.tl-item.is-1 { border-color: color-mix(in srgb, var(--tp-medal-1, #fbbf24) 55%, var(--tp-border, #30363d)); box-shadow: 0 8px 28px var(--tp-medal-1-glow, rgba(251,191,36,0.30)); }
.tl-item.is-1 { box-shadow: inset 4px 0 0 0 var(--tp-medal-1, #fbbf24), 0 8px 28px var(--tp-medal-1-glow, rgba(251,191,36,0.22)); }
.tl-item.is-2 { box-shadow: inset 4px 0 0 0 var(--tp-medal-2, #c0c0c0); }
.tl-item.is-3 { box-shadow: inset 4px 0 0 0 var(--tp-medal-3, #cd7f32); }

@keyframes tlIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tl-item:nth-child(1) { animation-delay: .02s; } .tl-item:nth-child(2) { animation-delay: .05s; }
.tl-item:nth-child(3) { animation-delay: .08s; } .tl-item:nth-child(n+4) { animation-delay: .1s; }

.tl-thumb {
    position: relative; width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
    background: var(--tp-bg-elevated, #1c2128); border: 1px solid var(--tp-border, #30363d);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-thumb-ph { font-size: 2.4rem; opacity: 0.6; }
.tl-item.is-1 .tl-thumb { outline: 2px solid var(--tp-medal-1, #fbbf24); outline-offset: -2px; }

/* Rank medal badge (overlaps thumb corner) */
.tl-rank {
    position: absolute; top: 6px; left: 6px; min-width: 30px; height: 30px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--tp-radius-full, 9999px); font-weight: 800; font-size: 0.92rem;
    font-variant-numeric: tabular-nums; color: var(--tp-text-primary, #f0f6fc);
    background: rgba(13,17,23,0.78); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.14);
    line-height: 1;
}
.tl-rank-is-1 { color: #3a2c00; background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); border-color: transparent; box-shadow: 0 0 10px var(--tp-medal-1-glow, rgba(251,191,36,0.4)); }
.tl-rank-is-2 { color: #1c2128; background: var(--tp-silver, linear-gradient(135deg,#9ca3af,#6b7280)); border-color: transparent; }
.tl-rank-is-3 { color: #fff; background: var(--tp-bronze, linear-gradient(135deg,#d97706,#b45309)); border-color: transparent; }

.tl-body { min-width: 0; }
.tl-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-name-row h2 { font-size: 1.18rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--tp-text-primary, #f0f6fc); word-break: break-word; }
.tl-brand { font-size: 0.8rem; font-weight: 600; color: var(--tp-accent, #e8b84a); background: var(--tp-accent-soft, rgba(232,184,74,0.12)); padding: 2px 9px; border-radius: var(--tp-radius-full, 9999px); }
.tl-desc { color: var(--tp-text-secondary, #8b949e); font-size: 0.95rem; line-height: 1.65; margin: 6px 0 10px; word-break: break-word; }
.tl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tl-links a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: filter 0.15s, transform 0.15s; }
.tl-lnk { background: rgba(88,166,255,0.12); color: var(--tp-link, #58a6ff); border: 1px solid rgba(88,166,255,0.25); }
.tl-aff { background: linear-gradient(135deg, #f59e0b, #ec4899); color: #fff; }
.tl-links a:hover { filter: brightness(1.12); transform: translateY(-1px); }
.tl-credit { margin-top: 9px; font-size: 0.7rem; color: var(--tp-text-muted, #6e7681); }

/* ===== Related ===== */
.tl-related { margin-top: 38px; }
.tl-related h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 14px; color: var(--tp-text-primary, #f0f6fc); }
.tl-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tl-rel-card { display: block; text-decoration: none; color: inherit; background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d); border-radius: 14px; overflow: hidden; transition: transform 0.15s, border-color 0.15s; }
.tl-rel-card:hover { transform: translateY(-3px); border-color: var(--tp-accent, #e8b84a); }
.tl-rel-imgwrap { aspect-ratio: 16/9; background: var(--tp-bg-elevated, #1c2128); }
.tl-rel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-rel-ph { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--tp-text-muted, #6e7681); }
.tl-rel-body { padding: 11px 13px 13px; }
.tl-rel-body small { color: var(--tp-text-muted, #848d97); font-size: 0.73rem; }
.tl-rel-body div { font-size: 0.94rem; font-weight: 600; line-height: 1.35; margin-top: 3px; color: var(--tp-text-primary, #f0f6fc); }

.tl-photo-note { margin-top: 26px; font-size: 0.74rem; color: var(--tp-text-muted, #6e7681); text-align: center; line-height: 1.6; }

/* Empty state */
.tl-empty { text-align: center; padding: 64px 22px; background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d); border-radius: var(--tp-radius-xl, 20px); }
.tl-empty-ico { font-size: 3rem; margin-bottom: 12px; }
.tl-empty h1 { font-size: 1.6rem; margin: 0 0 8px; color: var(--tp-text-primary, #f0f6fc); }
.tl-empty p { color: var(--tp-text-secondary, #8b949e); margin: 0 0 18px; }
.tl-empty-btn { display: inline-block; padding: 11px 22px; background: var(--tp-accent, #e8b84a); color: #000; text-decoration: none; border-radius: var(--tp-radius-full, 9999px); font-weight: 700; }

/* ===== Directory (/top/) ===== */
.tl-dir { max-width: 1200px; margin: 0 auto; padding: 18px 16px 70px; width: 100%; }
.tl-dir-hero {
    position: relative; overflow: hidden; padding: 28px 24px; margin-bottom: 18px;
    border: 1px solid var(--tp-border, #30363d); border-radius: var(--tp-radius-xl, 20px);
    background: var(--tp-bg-card, #161b22);
    background-image: linear-gradient(135deg, rgba(236,72,153,0.10), var(--tp-accent-soft, rgba(232,184,74,0.10)));
}
.tl-dir-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); opacity: 0.75; }
.tl-dir-hero h1 { font-size: clamp(1.55rem, 5vw, 2.1rem); font-weight: 800; margin: 0 0 8px; color: var(--tp-text-primary, #f0f6fc); letter-spacing: -0.5px; }
.tl-dir-hero p { color: var(--tp-text-secondary, #8b949e); font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 800px; }
.tl-dir-hero p strong { color: var(--tp-accent, #e8b84a); }

.tl-dir-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tl-dir-cats a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--tp-radius-full, 9999px);
    background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d);
    color: var(--tp-text-secondary, #8b949e); text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.tl-dir-cats a:hover { border-color: var(--tp-accent, #e8b84a); color: var(--tp-accent, #e8b84a); transform: translateY(-1px); }
.tl-dir-cats a.active { background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); color: #000; border-color: transparent; }

.tl-dir-search { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.tl-dir-search input, .tl-dir-search select { padding: 11px 14px; background: var(--tp-bg-input, #0d1117); border: 1px solid var(--tp-border, #30363d); border-radius: 10px; color: var(--tp-text-primary, #f0f6fc); font-size: 0.9rem; }
.tl-dir-search input { flex: 1; min-width: 200px; }
.tl-dir-search button { padding: 11px 20px; background: var(--tp-accent, #e8b84a); color: #000; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
.tl-dir-count { color: var(--tp-text-muted, #848d97); font-size: 0.85rem; margin-bottom: 12px; }

.tl-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tl-dir-card { display: flex; flex-direction: column; background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d); border-radius: var(--tp-radius-lg, 14px); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; animation: tlIn 0.4s ease both; }
.tl-dir-card:hover { transform: translateY(-4px); border-color: var(--tp-accent, #e8b84a); box-shadow: 0 14px 34px rgba(0,0,0,0.32); }
.tl-dir-imgwrap { position: relative; aspect-ratio: 16/9; background: var(--tp-bg-elevated, #1c2128); overflow: hidden; }
.tl-dir-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.tl-dir-card:hover .tl-dir-img { transform: scale(1.05); }
.tl-dir-img.placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.8rem; color: #3a4151; }
.tl-dir-imgwrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,17,23,0.55) 100%); pointer-events: none; }
.tl-dir-badge { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #000; background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); padding: 4px 9px; border-radius: var(--tp-radius-full, 9999px); }
.tl-dir-cbody { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.tl-dir-ccat { display: inline-flex; align-items: center; gap: 5px; font-size: 0.73rem; color: var(--tp-text-muted, #848d97); }
.tl-dir-cbody h3 { font-size: 1.04rem; line-height: 1.35; color: var(--tp-text-primary, #f0f6fc); margin: 0; font-weight: 700; word-break: break-word; text-transform: none; }
.tl-dir-cmeta { display: flex; gap: 12px; color: var(--tp-text-muted, #6e7681); font-size: 0.77rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; margin-top: auto; }

.tl-empty-state { text-align: center; padding: 60px 20px; background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d); border-radius: var(--tp-radius-xl, 20px); }
.tl-empty-state .e { font-size: 3rem; margin-bottom: 10px; }
.tl-empty-state h2 { color: var(--tp-text-primary, #f0f6fc); font-size: 1.4rem; margin: 0 0 6px; }
.tl-empty-state p { color: var(--tp-text-secondary, #8b949e); font-size: 0.95rem; margin: 0 auto 14px; max-width: 540px; }
.tl-empty-state a { color: var(--tp-accent, #e8b84a); }

.tl-dir-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.tl-dir-pager a, .tl-dir-pager span { padding: 9px 15px; background: var(--tp-bg-card, #161b22); border: 1px solid var(--tp-border, #30363d); border-radius: 9px; color: var(--tp-text-secondary, #8b949e); text-decoration: none; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tl-dir-pager a:hover { border-color: var(--tp-accent, #e8b84a); color: var(--tp-accent, #e8b84a); }
.tl-dir-pager .cur { background: var(--tp-gold, linear-gradient(135deg,#fbbf24,#f59e0b)); color: #000; border-color: transparent; font-weight: 700; }

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .tl-item { grid-template-columns: 92px 1fr; gap: 13px; padding: 13px; }
    .tl-thumb { width: 92px; height: 92px; }
    .tl-name-row h2 { font-size: 1.05rem; }
    .tl-hero-inner { padding: 20px 17px; }
    .tl-hero.has-img .tl-hero-inner { padding-top: 30px; }
    .tl-dir-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
    .tl-dir-cbody h3 { font-size: 0.94rem; }
    .tl-dir-cbody { padding: 10px 12px 12px; }
    .tl-dir-cats a { padding: 7px 12px; font-size: 0.8rem; }
}
@media (max-width: 380px) { .tl-dir-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .tl-item, .tl-dir-card { animation: none !important; }
    .tl-item:hover, .tl-dir-card:hover { transform: none; }
    .tl-dir-card:hover .tl-dir-img { transform: none; }
}

/* =====================================================================
   "COVER STORY DELUXE" — /top/ directory-card redesign (v2).
   Appended AFTER the base .tl-dir-* rules so it wins by source order.
   Pure CSS · no JS · no web fonts · no external requests · no color-mix · no :has().
   Driven by one per-category hue token (--cat-h / --cat-s) set via [data-cat],
   which tints BOTH photo scrims and placeholder cover tiles.
   Dark + [data-theme="light"] + locked mobile 2-up (to 380px) + reduced-motion.
   ===================================================================== */

/* --- per-category hue map: one knob powers placeholder body + photo scrim tint --- */
.tl-dir-imgwrap { --cat-h: 42; --cat-s: 70%; }                       /* default = gold */
.tl-dir-imgwrap:not([data-cat]),
.tl-dir-imgwrap[data-cat=""]              { --cat-h: 42;  --cat-s: 70%; } /* LEFT JOIN null -> gold */
.tl-dir-imgwrap[data-cat="entertainment"] { --cat-h: 282; --cat-s: 64%; }
.tl-dir-imgwrap[data-cat="cars"]          { --cat-h: 16;  --cat-s: 78%; }
.tl-dir-imgwrap[data-cat="destinations"]  { --cat-h: 150; --cat-s: 54%; }
.tl-dir-imgwrap[data-cat="apps"]          { --cat-h: 212; --cat-s: 70%; }
.tl-dir-imgwrap[data-cat="food"]          { --cat-h: 28;  --cat-s: 82%; }
.tl-dir-imgwrap[data-cat="business"]      { --cat-h: 222; --cat-s: 40%; }
.tl-dir-imgwrap[data-cat="lifestyle"]     { --cat-h: 320; --cat-s: 62%; }
.tl-dir-imgwrap[data-cat="education"]     { --cat-h: 256; --cat-s: 58%; }
.tl-dir-imgwrap[data-cat="sports"]        { --cat-h: 122; --cat-s: 50%; }
.tl-dir-imgwrap[data-cat="shopping"]      { --cat-h: 340; --cat-s: 66%; }

/* --- grid: a touch more air --- */
.tl-dir-grid { gap: 18px; }

/* --- card: warmer elevation + smoother spring on hover --- */
.tl-dir-card {
  background: var(--tp-bg-card, #161b22);
  border: 1px solid var(--tp-border, #30363d);
  border-radius: var(--tp-radius-lg, 14px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1), border-color 0.22s ease, box-shadow 0.22s ease;
}
.tl-dir-card:hover {
  transform: translateY(-5px);
  border-color: var(--tp-accent, #e8b84a);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42), 0 0 0 1px var(--tp-accent-glow, rgba(232,184,74,0.12));
}
.tl-dir-card:focus-visible { outline: 2px solid var(--tp-accent, #e8b84a); outline-offset: 2px; }

/* --- image frame: contained ring + tinted plate so white-bg logos don't bleed --- */
.tl-dir-imgwrap {
  position: relative;
  aspect-ratio: 16 / 9;          /* preserved -> no CLS */
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.5) 16%) 0%,
      var(--tp-bg-elevated, #1c2128) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 -28px 36px -22px rgba(0,0,0,0.55);
}

/* --- the photo: portrait-safe crop + gentle (safe) normalization --- */
.tl-dir-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;       /* favor faces/tops over default center crop */
  display: block;
  filter: saturate(0.98) contrast(1.02);   /* softened so white/vivid shots don't blow out */
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), filter 0.3s ease;
}
.tl-dir-card:hover .tl-dir-img { transform: scale(1.05); filter: saturate(1.02) contrast(1.03); }

/* top sheen + inner ring over the image so washed-out / white shots feel framed */
.tl-dir-imgwrap::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 18%);
}

/* two-stop magazine scrim, tinted toward the category hue at the foot */
.tl-dir-imgwrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent 42%,
      hsla(var(--cat-h), var(--cat-s), 8%, 0.30) 78%,
      hsla(var(--cat-h), var(--cat-s), 6%, 0.66) 100%);
}

/* =========================  PLACEHOLDER COVER TILES  ========================= */
/* Layered hsl gradients = a designed jewel-tone "cover"; emoji + DOM kicker = real text. */
.tl-dir-img.placeholder {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 9px; padding: 14px;
  font-size: clamp(2.6rem, 8vw, 3.4rem);
  line-height: 1; color: #fff; text-align: center;
  filter: none; transform: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  background:
    radial-gradient(95% 75% at 26% 18%, hsla(var(--cat-h), var(--cat-s), 64%, 0.34) 0%, transparent 60%),
    conic-gradient(from 210deg at 80% 16%, hsla(var(--cat-h), var(--cat-s), 58%, 0.22), transparent 42%),
    linear-gradient(150deg,
      hsl(var(--cat-h) var(--cat-s) 32%) 0%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.85) 18%) 52%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.7) 10%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
.tl-dir-card:hover .tl-dir-img.placeholder { transform: none; }      /* covers don't zoom */
.tl-dir-img.placeholder > span[aria-hidden] {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.40));
}

/* the real DOM category-name kicker beneath the icon */
.tl-dir-phlabel {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: hsl(var(--cat-h) 92% 88%);
  text-shadow: 0 1px 6px rgba(0,0,0,0.50);
  opacity: 0.96;
}

/* =========================  KICKER BADGE (frosted, legible over white photos)  ========================= */
.tl-dir-badge {
  position: absolute; top: 11px; left: 11px; z-index: 3;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: rgba(13,17,23,0.46);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  padding: 4px 10px; border-radius: var(--tp-radius-full, 9999px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.30);
  line-height: 1;
}
.tl-dir-badge::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin-right: 6px; vertical-align: middle; border-radius: 50%;
  background: hsl(var(--cat-h, 42) 80% 60%);
  box-shadow: 0 0 6px hsl(var(--cat-h, 42) 80% 60%);
}

/* =========================  CARD BODY  ========================= */
.tl-dir-cbody { padding: 14px 16px 16px; gap: 8px; }
.tl-dir-cbody h3 {
  font-size: 1.05rem; line-height: 1.32; font-weight: 800;
  letter-spacing: -0.2px; color: var(--tp-text-primary, #e6edf3);
  margin: 0; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-dir-card:hover .tl-dir-cbody h3 { color: var(--tp-accent, #e8b84a); }
.tl-dir-cmeta {
  display: flex; gap: 12px; margin-top: auto;
  color: var(--tp-text-muted, #848d97); font-size: 0.76rem;
  flex-wrap: wrap; font-variant-numeric: tabular-nums;
}

/* =========================  LIGHT THEME  ========================= */
[data-theme="light"] .tl-dir-card { box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
[data-theme="light"] .tl-dir-card:hover {
  box-shadow: 0 16px 34px rgba(0,0,0,0.14), 0 0 0 1px var(--tp-accent-glow, rgba(184,134,11,0.08));
}
[data-theme="light"] .tl-dir-imgwrap {
  background:
    radial-gradient(120% 120% at 50% 0%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.6) 90%) 0%,
      var(--tp-bg-elevated, #ffffff) 72%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.07),                /* dark hairline so white logos separate */
    inset 0 -24px 30px -22px rgba(0,0,0,0.16);
}
[data-theme="light"] .tl-dir-imgwrap::before {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 16%);
}
[data-theme="light"] .tl-dir-imgwrap::after {
  background:
    linear-gradient(180deg,
      transparent 50%,
      hsla(var(--cat-h), var(--cat-s), 35%, 0.12) 82%,
      hsla(var(--cat-h), var(--cat-s), 28%, 0.30) 100%);
}
/* placeholders stay rich/dark in light theme so white-on-white never happens */
[data-theme="light"] .tl-dir-img.placeholder {
  background:
    radial-gradient(95% 75% at 26% 18%, hsla(var(--cat-h), var(--cat-s), 70%, 0.42) 0%, transparent 60%),
    conic-gradient(from 210deg at 80% 16%, hsla(var(--cat-h), var(--cat-s), 60%, 0.26), transparent 42%),
    linear-gradient(150deg,
      hsl(var(--cat-h) var(--cat-s) 44%) 0%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.9) 31%) 52%,
      hsl(var(--cat-h) calc(var(--cat-s) * 0.8) 23%) 100%);
}
[data-theme="light"] .tl-dir-phlabel { color: hsl(var(--cat-h) 72% 93%); }
[data-theme="light"] .tl-dir-badge { color: #fff; background: rgba(13,17,23,0.55); }

/* =========================  MOBILE — LOCKED 2-UP (incl. <=380px)  ========================= */
@media (max-width: 600px) {
  .tl-dir-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tl-dir-cbody { padding: 11px 12px 13px; gap: 6px; }
  .tl-dir-cbody h3 { font-size: 0.93rem; line-height: 1.3; }
  .tl-dir-img.placeholder { font-size: clamp(2.1rem, 11vw, 2.7rem); gap: 6px; padding: 10px; }
  .tl-dir-phlabel { font-size: 0.58rem; letter-spacing: 1.2px; }
  .tl-dir-badge { font-size: 0.56rem; padding: 3px 8px; top: 8px; left: 8px; }
}
/* override base stylesheet's drop-to-1-up: keep tight 2-up on smallest phones */
@media (max-width: 380px) {
  .tl-dir-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tl-dir-img.placeholder { font-size: clamp(1.9rem, 12vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-dir-card, .tl-dir-card:hover { transform: none; }
  .tl-dir-card:hover .tl-dir-img { transform: none; }
}