/* finesse · component: case library cards · tokens: existing yellow/violet identity */
.case-library-card{overflow:visible;border:0;background:transparent;perspective:1200px;box-shadow:none}
.case-library-card:hover{box-shadow:none}
.case-library-flipper{position:relative;display:flex;flex:1;min-width:0;transform-style:preserve-3d}
.case-library-front,.case-library-back{border:1px solid var(--line);border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.case-library-front{width:100%;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transform:rotateY(0deg)}
.case-library-info{display:flex;flex-direction:column;align-items:center;flex:1;width:100%}
.case-library-info>p:first-of-type{margin-bottom:10px}
.case-library-info .case-library-summary{font-size:14px;line-height:1.8;color:var(--text);margin:0;max-width:30em;min-height:1.8em;text-wrap:pretty}
.case-library-resources{display:flex;align-items:center;justify-content:center;gap:20px;align-self:stretch;border-top:1px solid var(--line);padding-top:12px;margin:10px 0 16px;color:var(--action)}
.case-library-resources>span{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.case-library-resources svg{width:16px;height:16px;flex:none}
.case-library-button{margin-top:auto}
.case-library-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:24px;padding:26px;background:var(--action);color:var(--on-dark);border:3px solid var(--yellow);transform:rotateY(180deg);pointer-events:none}
.case-back-brand,.case-back-footer{font-size:13px;letter-spacing:.05em}
.case-back-main{display:flex;flex-direction:column;align-items:center;gap:22px}
.case-back-main strong{font-size:26px;font-weight:700;color:inherit}
.case-back-symbol{display:grid;place-items:center;width:76px;height:76px;background:var(--yellow);color:var(--ink);border-radius:50%}
.case-back-symbol svg{width:36px;height:36px}
.case-library-card:nth-child(even) .case-library-back{background:var(--yellow);color:var(--ink);border-color:var(--action)}
.case-library-card:nth-child(even) .case-back-symbol{background:var(--action);color:var(--on-dark)}
.case-library-card:focus-visible{outline:3px solid var(--action);outline-offset:5px}
@media(hover:hover){.case-library-card:hover .case-library-front{border-color:var(--action);box-shadow:var(--shadow)}}
/* Match the homepage deal: 140 ms stagger, 1.15 s arrival, 1.1 s turn. */
@keyframes case-library-deal{0%{opacity:0;transform:translateY(55px) rotate(-10deg) scale(.9)}12%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes case-library-turn{0%,25%{transform:rotateY(180deg)}100%{transform:rotateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .case-library-grid.is-dealing .case-library-card{animation:case-library-deal 1.15s cubic-bezier(.2,.78,.23,1) both;animation-delay:calc(var(--case-order,0)*.14s)}
 .case-library-grid.is-dealing .case-library-flipper{animation:case-library-turn 1.1s cubic-bezier(.2,.78,.23,1) both;animation-delay:calc(var(--case-order,0)*.14s + .18s)}
 .case-library-grid.is-dealing .case-library-card:focus-within,.case-library-grid.is-dealing .case-library-card:focus-within .case-library-flipper{animation:none}
}
@media(max-width:700px){.case-library-resources{gap:12px}.case-library-resources>span{gap:4px}.case-library-resources svg{width:14px;height:14px}.case-library-info .case-library-summary{font-size:13px;min-height:1.8em}.case-library-back{padding:20px}.case-back-main strong{font-size:22px}}
@media(min-width:421px) and (max-width:560px){.case-library-resources{gap:8px}.case-library-resources>span{font-size:11px;gap:3px}.case-library-resources svg{width:12px;height:12px}}
@media(prefers-reduced-motion:reduce){.case-library-flipper{animation:none!important;transform:none!important}}
@media print{.case-library-flipper{animation:none!important;transform:none!important}.case-library-back{display:none}}

/* Keep the link's hit area stable while its visual face lifts and tilts. */
.case-library-card{position:relative;transition:opacity .24s ease}
.case-library-flipper{transition:transform .28s cubic-bezier(.2,.78,.23,1)}
.case-library-front{transition:border-color .22s ease,box-shadow .28s ease}
@media(hover:hover) and (pointer:fine){
 .case-library-grid:not(.is-dealing)>.case-library-card:hover{z-index:2}
 .case-library-grid:not(.is-dealing)>.case-library-card:hover .case-library-flipper{transform:translateY(-8px) rotate(-1.4deg) scale(1.02)}
 .case-library-grid:not(.is-dealing)>.case-library-card:hover .case-library-front{border-color:var(--action);box-shadow:0 22px 42px -18px rgba(50,30,87,.3)}
 .case-library-grid:not(.is-dealing):has(>.case-library-card:hover)>.case-library-card:not(:hover){opacity:.55}
}
@media(prefers-reduced-motion:reduce){.case-library-card,.case-library-flipper,.case-library-front{transition:none}}

/* Keep the desktop 1280px / three-column card proportions on phones.
   410 2/3px is one desktop card; every visual dimension uses the same scale.
   The whole card remains the link target, independently of the smaller CTA. */
@media(max-width:768px){
 .has-category-nav .case-library-grid{max-width:410.666667px;margin-inline:auto}
 .has-category-nav .case-library-card{container-type:inline-size}
 .has-category-nav .case-library-front,.has-category-nav .case-library-back{--case-u:calc(100cqi / 410.666667);font-size:calc(16 * var(--case-u));line-height:1.85;border-width:calc(1 * var(--case-u));border-radius:calc(16 * var(--case-u))}
 .has-category-nav .case-library-card img{height:calc(280 * var(--case-u));aspect-ratio:auto}
 .has-category-nav .case-library-info{padding:calc(20 * var(--case-u))}
 .has-category-nav .case-library-info h2{font-size:calc(22 * var(--case-u));line-height:1.5;margin:0 0 calc(4 * var(--case-u))}
 .has-category-nav .case-library-info>p:first-of-type{font-size:calc(14 * var(--case-u));line-height:1.85;margin:0 0 calc(10 * var(--case-u))}
 .has-category-nav .case-library-info .case-library-summary{font-size:calc(14 * var(--case-u));line-height:1.8;margin:0;min-height:1.8em}
 .has-category-nav .case-library-resources{gap:calc(20 * var(--case-u));padding-top:calc(12 * var(--case-u));margin:calc(10 * var(--case-u)) 0 calc(16 * var(--case-u));border-top-width:calc(1 * var(--case-u))}
 .has-category-nav .case-library-resources>span{font-size:calc(12 * var(--case-u));gap:calc(5 * var(--case-u))}
 .has-category-nav .case-library-resources svg{width:calc(16 * var(--case-u));height:calc(16 * var(--case-u))}
 .has-category-nav .case-library-button{font-size:calc(15 * var(--case-u));line-height:1.5;min-width:calc(148 * var(--case-u));min-height:calc(44 * var(--case-u));padding:calc(9 * var(--case-u)) calc(22 * var(--case-u));gap:calc(10 * var(--case-u));border-width:calc(1 * var(--case-u));border-radius:calc(10 * var(--case-u));box-shadow:0 calc(2 * var(--case-u)) 0 var(--cover-line)}
 .has-category-nav .case-library-button svg{width:calc(18 * var(--case-u));height:calc(18 * var(--case-u))}
 .has-category-nav .case-library-back{padding:calc(26 * var(--case-u));gap:calc(24 * var(--case-u));border-width:calc(3 * var(--case-u))}
 .has-category-nav :is(.case-back-brand,.case-back-footer){font-size:calc(13 * var(--case-u))}
 .has-category-nav .case-back-main{gap:calc(22 * var(--case-u))}
 .has-category-nav .case-back-main strong{font-size:calc(26 * var(--case-u))}
 .has-category-nav .case-back-symbol{width:calc(76 * var(--case-u));height:calc(76 * var(--case-u))}
 .has-category-nav .case-back-symbol svg{width:calc(36 * var(--case-u));height:calc(36 * var(--case-u))}
}