/* ── Featured cards (2026-11-02) — adds to the existing look, changes no colors ── */

/* The fan: the card on show in front, the rest tucked behind it. */
.ph-set-card:not(.ph-slab-card) .ph-pair{position:relative}
.ph-set-card:not(.ph-slab-card) .ph-pair-side:last-child{overflow:hidden}
.ph-fan{position:relative;display:block;height:clamp(150px,18vw,214px);aspect-ratio:var(--ph-ratio);max-width:100%;flex:none}
.ph-pair-side .ph-fan>.ph-picture{position:relative;z-index:3;height:100%}
.ph-fan-back{position:absolute;inset:0;z-index:var(--ph-z,1);transform:translateX(var(--ph-x)) rotate(var(--ph-r)) scale(.9);transform-origin:50% 92%;filter:drop-shadow(3px 8px 7px #0004);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ph-fan-back img{display:block;width:100%;height:100%;object-fit:fill;border-radius:4.6%/3.4%;user-select:none;pointer-events:none}
@media (hover:hover){.ph-pair-side:hover .ph-fan-back{transform:translateX(calc(var(--ph-x) * 1.18)) rotate(calc(var(--ph-r) * 1.25)) scale(.9)}}
@media(max-width:620px){.ph-fan-back{transform:translateX(calc(var(--ph-x) * .72)) rotate(calc(var(--ph-r) * .8)) scale(.88)}}

/* Dealing the next card: the front one slides off left, the next comes in from the right. */
.ph-fan>.ph-picture.ph-fan-out{animation:ph-fan-out .17s ease-in forwards}
.ph-fan>.ph-picture.ph-fan-in{animation:ph-fan-in .3s cubic-bezier(.2,.7,.2,1)}
@keyframes ph-fan-out{to{transform:translateX(-34%) rotate(-11deg) scale(.9);opacity:0}}
@keyframes ph-fan-in{from{transform:translateX(30%) rotate(9deg) scale(.9);opacity:0}}

/* The arrow, in the corner of the featured-card panel. */
.ph-fan-next{position:absolute;right:14px;bottom:14px;z-index:4;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ph-black);border-radius:50%;background:var(--ph-black);color:var(--ph-white);cursor:pointer;transition:transform .2s ease}
.ph-fan-next:hover{transform:translateX(2px)}
.ph-fan-next:focus-visible{outline:2px solid var(--ph-black);outline-offset:3px}
@media(max-width:620px){.ph-fan-next{right:10px;bottom:10px;width:36px;height:36px}}

/* The row of featured cards in the set guide. */
.ph-featured-strip{display:flex;gap:10px;overflow-x:auto;padding:6px 3px 10px;scrollbar-width:thin}
.ph-featured-strip button{flex:none;height:92px;aspect-ratio:var(--ph-ratio);padding:0;border:0;border-radius:5px;background:none;cursor:pointer;opacity:.6;transition:opacity .2s ease,transform .2s ease;outline:2px solid transparent;outline-offset:3px}
.ph-featured-strip button:hover{opacity:.9;transform:translateY(-3px)}
.ph-featured-strip button[aria-pressed=true]{opacity:1;outline-color:var(--ph-black)}
.ph-featured-strip button:focus-visible{outline-color:var(--ph-black)}
.ph-featured-strip img{display:block;width:100%;height:100%;object-fit:fill;border-radius:4.6%/3.4%}
@media(max-width:620px){.ph-featured-strip button{height:80px}}
