/* ParksRadar flip cards.
   Pattern ADOPTED from Uiverse.io by ElSombrero2 (3D flip: transform-style:preserve-3d +
   backface-visibility:hidden + rotateY(180deg)). RE-THEMED to ParksRadar (light/cream, brand
   colors) and made ACCESSIBLE: flips ONLY on .flipped (click/tap/keyboard), and falls
   back to a non-3D stacked reveal under prefers-reduced-motion. Dark #151515 theme + neon border
   from the original were REJECTED.
   2026-07-21: hover-flip REMOVED — it trapped the card (desktop hover forced the back face, so a
   click could never return to front while the cursor was over the card, and the front "Find on map"
   button rotated out of reach). Flip is now deterministic and identical on desktop + touch. */
.pr-cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.pr-card{ perspective:1100px; width:100%; outline:none; }
.pr-card:focus-visible{ box-shadow:0 0 0 3px rgba(63,174,107,.5); border-radius:14px; }
.pr-card__inner{ position:relative; width:100%; min-height:300px; transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.2,1); border-radius:14px; }
.pr-card.flipped .pr-card__inner{ transform:rotateY(180deg); }
.pr-card__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:14px; background:#fffaf0; border:1px solid #e6d6ba; box-shadow:0 6px 18px rgba(60,40,20,.12);
  overflow:hidden; display:flex; flex-direction:column; padding:14px; box-sizing:border-box; }
.pr-card__back{ transform:rotateY(180deg); background:#fff7e8; overflow:auto; }
.pr-card__title{ font:700 16px Georgia,serif; color:#7a4e26; margin:0 0 4px; }
.pr-card__graph{ margin:6px 0; }
.pr-card__flipbtn{ position:absolute; top:8px; right:8px; border:1px solid #e6d6ba; background:#fff;
  border-radius:8px; font-size:11px; padding:3px 8px; cursor:pointer; color:#8a7456; z-index:3; }
/* Profile tiles: denser grid, shorter cards than ride cards. */
.pr-cards-grid--tiles{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.pr-cards-grid--tiles .pr-card__inner{ min-height:188px; }
.pr-cards-grid--tiles .pr-card__face{ padding:12px; }
/* Safety tiles (e.g. First aid): calm blue accent, never sponsored (data-pr-noads excludes them). */
.pr-tile--safety .pr-card__face{ background:#f3f8fc; border-color:#cfe0ee; }
.pr-tile--safety .pr-card__back{ background:#eef5fb; }
.pr-card__safety{ font:700 10px -apple-system,Segoe UI,sans-serif; text-transform:uppercase; letter-spacing:.04em;
  color:#2f6fae; background:#dcebf9; background:#dcebf9; border:1px solid #cfe0ee; border-radius:6px; padding:1px 6px; vertical-align:middle; }
@media (prefers-reduced-motion: reduce){
  .pr-card{ perspective:none; }
  .pr-card__inner{ transform:none!important; transition:none; }
  .pr-card__face{ position:relative; inset:auto; backface-visibility:visible; -webkit-backface-visibility:visible; }
  .pr-card__back{ transform:none; display:none; }
  .pr-card.flipped .pr-card__back{ display:flex; }
}