/* annona.co.uk - Cousin Cards exhibit (js/exhibits/cousins.js): flip cards, compare mode, side-by-side panel */

.cousins{display:grid;gap:1.25rem}

/* ---------- compare bar ---------- */
.compare-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.compare-hint{margin:0;font-size:.95em;color:var(--green-900)}
.compare-toggle[aria-pressed="true"]{background:var(--accent);color:var(--seed);box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--accent)}
.compare-toggle:focus-visible{outline:3px solid var(--seed);outline-offset:3px}
.is-comparing .cousins-grid{outline:3px dashed var(--accent);outline-offset:.5rem;border-radius:var(--radius)}

/* ---------- card grid ---------- */
.cousins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem;align-items:start} /* neighbours stay 14rem when one card grows */
.card{perspective:1000px;min-height:14rem;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.card{font:inherit;color:var(--ink);display:block;width:100%;border-radius:var(--radius);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
/* Compare mode never locks touch scrolling: a finger swipe over the grid still pans the page (touch-action:pan-y
   stays); mouse drag-to-compare does not need touch-action, and cousins.js starts no drag for touch pointers. */
.card:focus-visible{outline:3px solid var(--seed);outline-offset:4px}
.card-inner{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);height:100%}
.card-inner{display:block;min-height:inherit}
.card[aria-pressed="true"] .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.face{display:flex;flex-direction:column;gap:.35rem;overflow:hidden}
.face.front{background:var(--c)} /* flat fallback for browsers without color-mix() */
.face.front{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c))}
.face.back{transform:rotateY(180deg);background:var(--cream)}
.face.back{font-size:.85rem;line-height:1.4;gap:.5rem}
/* A flipped card grows to fit its facts: the back face becomes the in-flow face and sizes .card-inner, so nothing is
   clipped and there is no scroller (a scroller would be a stray keyboard focus stop inside the button). */
.card[aria-pressed="true"] .face.back{position:relative}
.face .emoji{font-size:3rem;line-height:1}
/* Front-face text is seed-brown, not green: the darker card colours (soursop, custard apple) leave green-900 at
   2.2-3.4:1 on the gradient; --seed clears 5:1 on every card colour. */
.face .name{font:800 1.15rem/1.15 var(--font-display);color:var(--seed)}
.face.back .name{font-size:.95rem;color:var(--green-900)}
.face .latin{font-style:italic;font-size:.9rem;color:var(--seed)}
.face .hint{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--seed)}
.face .fact{display:block}

/* compare selection + drag */
.is-selected{outline:4px solid var(--accent)}
.card.is-selected{outline-offset:4px}
.card.is-selected .face.front::after{content:"✓";position:absolute;top:.5rem;right:.6rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:var(--seed);font-weight:900}
.card.is-dragging{opacity:.45}
.card.is-drop-target{outline:4px dashed var(--accent);outline-offset:4px;transform:scale(1.04)}
.drag-ghost{position:fixed;top:0;left:0;z-index:100;pointer-events:none;opacity:.9;transform-origin:center;filter:drop-shadow(0 12px 18px rgba(20,40,20,.3)) }

/* ---------- compare panel ---------- */
.compare-panel{padding:1.25rem;background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow)}
.compare-title{margin:0 0 1rem;font:800 clamp(1.3rem,1rem + 1.2vw,1.9rem)/1.15 var(--font-display);color:var(--green-900)}
.compare-title:focus-visible{outline:3px solid var(--seed);outline-offset:4px;border-radius:6px}
.compare-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.compare-col{padding:1rem;background:var(--paper);border-radius:12px;border-top:8px solid var(--c);min-width:0}
.compare-name{margin:0;font:800 1.2rem/1.2 var(--font-display);color:var(--green-900)}
.compare-latin{margin:0 0 .75rem;font-style:italic;font-size:.95em;color:var(--green-900)}
.compare-col .row{display:flex;flex-direction:column;gap:.2rem;margin:0 0 .75rem}
.compare-col .label{font-size:.8em;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--green-900)}
.bar-track{display:block;height:1rem;background:rgba(31,77,43,.12);border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar--weight .bar-fill{background:var(--green-600)}
.bar-text{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{padding:.15rem .6rem;border-radius:999px;background:var(--custard);font-size:.9em;font-weight:700}
.row--yesno strong{font-size:1.1em}
.kid-note{margin:1rem 0 .5rem;padding:.75rem 1rem;background:var(--custard);border-radius:12px;font-weight:800;color:var(--green-900)}
.compare-panel .read-btn{margin-top:.5rem}

/* ---------- reduced motion: flip is an instant swap, no bar growth ---------- */
@media (prefers-reduced-motion:reduce){
  .card-inner{transition:none}
  .bar-fill{transition:none}
  .card.is-drop-target{transform:none}
}
.reduced-motion .card-inner{transition:none}
.reduced-motion .bar-fill{transition:none}

/* ---------- narrow screens ---------- */
@media (max-width:560px){
  .cousins-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:.75rem}
  .card[aria-pressed="true"]{grid-column:1 / -1}   /* a flipped card takes the full width so its facts have a readable measure */
  .face.back{font-size:1rem}
  .face{padding:.75rem}
  .face .emoji{font-size:2.4rem}
  .face .name{font-size:1rem}
  .compare-body{grid-template-columns:1fr}
  .compare-panel{padding:1rem}
}