/* The Featured row above the lists on /calendar, /browse and the category pages (functions/_sponsors.js spotSlots): MacPip's
   style.css rules for it, 1:1 (read only, 15 Nov 2026). Four slots: gold paid tiles first, then dashed "Your app here" frames. */
.listspots{display:block;margin-bottom:20px}
.fthead{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 0 9px}
.ftlab{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 8px 3px;background:#3a2c08;color:#ffe9a3;border-radius:5px;font:10px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase}
.ftlab i{width:8px;height:8px;border-radius:50%;background:#f3c63f;border:1.500px solid #ffe9a3}
.ftget{margin-inline-start:auto;font-size:12.500px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px;padding-block:4px;margin-block:-4px}
.spslots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.spslot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:104px;padding:14px;color:#1d1b17;text-decoration:none;background:linear-gradient(100deg,#fff6d2,#fbe59a 60%,#fff2c0);border:2px solid #b98a18;border-radius:14px;box-shadow:0 0 0 3px rgba(247,215,116,.5),0 6px 16px rgba(166,122,20,.22);overflow:hidden;transition:translate .35s var(--spring),scale .35s var(--spring),box-shadow .3s var(--ease)}
.spslot:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);translate:-110% 0}
.spslot:hover,.spslot:focus-visible{translate:0 -4px;scale:1.02;box-shadow:0 0 0 3px #f7d774,0 14px 26px rgba(166,122,20,.34)}
.spslot:hover:after,.spslot:focus-visible:after{translate:110% 0;transition:translate .8s var(--ease)}
.spslot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.spslot .icon{width:54px!important;height:54px!important;background:#fff7d6;border:2px solid #a67a14;border-radius:14px;box-shadow:2px 2px 0 rgba(58,44,8,.25);transition:rotate .35s var(--spring)}
.spslot:hover .icon{rotate:-4deg}
.spslotx{display:flex;flex-direction:column;gap:3px;min-width:0}
.spslotx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 21px/1.05 var(--serif)}
.spslotx small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.3;color:#5c470f}
.spslotopen{background:transparent;border:2px dashed #b98a18;box-shadow:none;color:var(--ink)}
.spslotopen:hover,.spslotopen:focus-visible{background:rgba(247,215,116,.16);box-shadow:none}
.spslotopen .spplus{display:grid;place-items:center;width:54px;height:54px;border:2px dashed #b98a18;border-radius:14px;font:24px/1 var(--pixel);color:#a67a14}
.spslotopen .spslotx small{color:var(--mute)}
@media (max-width:860px){.spslots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (min-width:861px){.narrow .spslot{grid-template-columns:1fr;align-content:start;gap:8px;min-height:0;padding:12px}}
@media (min-width:861px){.narrow .spslot .icon,.narrow .spslotopen .spplus{width:46px!important;height:46px!important}}
@media (min-width:861px){.narrow .spslotx b{font-size:19px}}
@media (max-width:560px){.spslot{grid-template-columns:1fr;align-content:start;gap:8px;min-height:0;padding:12px}}
@media (max-width:560px){.spslot .icon,.spslotopen .spplus{width:46px!important;height:46px!important}}
@media (max-width:560px){.spslotx b{font-size:18px}}
@media (max-width:560px){.spslotx small{font-size:12px}}
@media (hover:none){.spslot:hover{translate:none;scale:1}}
@media (hover:none){.spslot:hover:after{translate:-110% 0;transition:none}}
@media (prefers-reduced-motion:reduce){.spslot,.spslot .icon{transition:none}}
@media (prefers-reduced-motion:reduce){.spslot:hover,.spslot:focus-visible{translate:none;scale:1}}
@media (prefers-reduced-motion:reduce){.spslot:after{display:none}}
@media (pointer:coarse){.ftget{position:relative}}
@media (pointer:coarse){.ftget::after{content:"";position:absolute;inset:-9px -6px}}
/* iPip's kit: ".cl h2" (the serif headings) and ".cl .wrap" (margin 0 auto) outrank the single classes above, so the label keeps
   MacPip's pixel face and the row its 20px under it here. */
.cl .ftlab{font:10px/1 var(--pixel);font-weight:400;letter-spacing:.08em}
.cl .wrap.listspots,.cl .cbrowse .listspots{margin-bottom:20px}