/* Spotlight sections: flat (no shadows, no gradients). Uses the site's own colour tokens. */
.sp { --sp-line: var(--ed-line, color-mix(in srgb, var(--text) 12%, var(--body-bg))); --sp-muted: var(--ed-muted, color-mix(in srgb, var(--text) 52%, var(--body-bg))); --sp-ink: var(--ed-ink, var(--text)); --sp-sunk: var(--ed-surface-sunken, color-mix(in srgb, var(--text) 4%, var(--body-bg))); container-type: inline-size; }
.sp a { color: inherit; text-decoration: none; }
.sp-title, .sp-lead-title { font-weight: 800; font-style: italic; letter-spacing: -.01em; line-height: 1.22; margin: 0; color: var(--sp-ink); }
.sp-title { font-size: 1rem; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-title a::after, .sp-lead-title a::after { content: ""; position: absolute; inset: 0; }
.sp-card, .sp-li, .sp-lead { position: relative; }

/* angled category tag */
.sp-tag { display: inline-block; align-self: flex-start; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .22rem .8rem .22rem .55rem; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); position: relative; z-index: 2; }
.sp-tag a { color: #fff; position: relative; z-index: 2; }

/* thumbs, hover zoom */
.sp-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sp-sunk); border-bottom: 1px solid var(--sp-line); }
.sp-thumb img, .sp-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.65,.3,1); }
.sp-card:hover .sp-thumb img, .sp-li:hover .sp-thumb img, .sp-lead:hover .sp-lead-img img { transform: scale(1.06); }
.sp-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem; background: var(--primary); color: #fff; }
.sp-ph i { font-size: 1.6rem; opacity: .9; }
.sp-ph b { font-size: 2.2rem; font-style: italic; font-weight: 900; opacity: .35; }

/* meta */
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .76rem; color: var(--sp-muted); margin-top: .5rem; }
.sp-meta > span + span::before { content: "·"; margin-right: .35rem; opacity: .7; }
.sp-price { font-weight: 800; color: var(--primary); }
.sp-price.free { color: var(--ok, #16a34a); }

/* cards: lift on hover (border only, no shadow) */
.sp-card { border: 1px solid var(--sp-line); border-radius: 10px; overflow: hidden; background: none; transition: transform .2s ease, border-color .2s ease; display: flex; flex-direction: column; }
.sp-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.sp-card .sp-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; }
.sp-card .sp-tag { margin-bottom: .1rem; }
.sp-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.sp-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sp-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.sp-under { margin-top: 1.4rem; }

/* spotlight top */
.sp-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.sp-lead { border-radius: 12px; overflow: hidden; min-height: 380px; border: 1px solid var(--sp-line); background: var(--sp-sunk); display: flex; align-items: flex-end; transition: border-color .2s ease; }
.sp-lead:hover { border-color: var(--primary); }
.sp-lead-img { position: absolute; inset: 0; }
.sp-lead-img .sp-ph { font-size: 1.4rem; }
.sp-lead-body { position: relative; z-index: 1; margin: 1rem; padding: 1.1rem 1.2rem 1.2rem; background: color-mix(in srgb, #0b0d12 82%, transparent); color: #fff; border-left: 4px solid var(--primary); width: calc(100% - 2rem); display: flex; flex-direction: column; gap: .4rem; }
.sp-lead-title { font-size: clamp(1.35rem, 2.6cqi, 2rem); color: #fff; }
.sp-lead-ex { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.sp-lead .sp-meta { color: rgba(255,255,255,.7); margin-top: .2rem; }
.sp-lead .sp-price { color: #fff; }

/* numbered rows */
.sp-side, .sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--sp-line); border-radius: 12px; overflow: hidden; }
.sp-li { display: grid; grid-template-columns: auto 92px minmax(0,1fr); gap: .85rem; align-items: center; padding: .8rem 1rem; border-top: 1px solid var(--sp-line); transition: background .2s ease, transform .2s ease; flex: 1 1 0; }
.sp-li:first-child { border-top: 0; }
.sp-li:hover { background: var(--sp-sunk); }
.sp-li .sp-thumb { border: 0; border-radius: 8px; aspect-ratio: 4/3; }
.sp-li .sp-ph i { font-size: 1.1rem; } .sp-li .sp-ph b { display: none; }
.sp-li .sp-title { font-size: .94rem; -webkit-line-clamp: 2; margin-top: .25rem; }
.sp-li .sp-meta { margin-top: .3rem; }
.sp-rank { font-size: 2.1rem; font-weight: 900; font-style: italic; line-height: 1; min-width: 1.4ch; color: transparent; -webkit-text-stroke: 1.5px var(--primary); text-align: center; }
.sp-list .sp-li { grid-template-columns: auto 110px minmax(0,1fr); }

/* "New" badge */
.sp-new { position: absolute; top: .65rem; right: .65rem; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; background: #e5362b; color: #fff; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 99px; }
.sp-new i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sp-pulse 1.4s ease-in-out infinite; }
.sp-li .sp-new { position: static; align-self: flex-start; grid-column: 3; justify-self: start; display: none; }
@keyframes sp-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .sp-new i { animation: none; } .sp-card, .sp-thumb img, .sp-lead-img img { transition: none; } }

/* adapts to the width it sits in */
@container (max-width: 820px) { .sp-top { grid-template-columns: 1fr; } .sp-lead { min-height: 320px; } .sp-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@container (max-width: 640px) { .sp-grid, .sp-cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@container (max-width: 420px) { .sp-grid, .sp-cols-2, .sp-cols-4 { grid-template-columns: 1fr; } .sp-li { grid-template-columns: auto 76px minmax(0,1fr); } .sp-rank { font-size: 1.6rem; } }

/* section heading used by homepage sections */
.sp-heading { font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.sp-sub { color: var(--ed-muted, #6b7280); margin: .4rem 0 0; max-width: 560px; }