/* 
 * Flip Card Component - Core Stylesheet
 * Version: 1.0.0
 * Features: Responsive, accessible, and compatible with major browsers
 */

/* Core flip card functionality */
.flip-card {
  perspective: 1000px;
  position: relative;
  height: 450px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

/* Both active states for mouse and keyboard/programmatic control */
.flip-card.flipped .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

/* Only apply hover effect when hover is supported and not on touch devices */
@media (hover: hover) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner {
    transition: none;
  }
  
  .flip-card:hover .flip-card-inner,
  .flip-card.flipped .flip-card-inner,
  .flip-card:focus-within .flip-card-inner {
    transition: none;
  }
}

.flip-card-front, 
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  overflow: auto;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Card size variations */
.card-standard {
  height: 450px;
}

.card-mini {
  height: 320px;
}

.card-tall {
  height: 600px;
}

/* Responsive grid for card layouts */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Focus states for better accessibility */
.flip-card:focus-within {
  outline: none;
}

.flip-card:focus-within .flip-card-inner {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.flip-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  border-radius: 0.25rem;
}

/* Fallbacks for older browsers */
@supports not (transform-style: preserve-3d) {
  .flip-card-inner {
    position: relative;
  }
  
  .flip-card-back {
    display: none;
  }
  
  .flip-card.flipped .flip-card-front {
    display: none;
  }
  
  .flip-card.flipped .flip-card-back {
    display: block;
    transform: none;
  }
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Ensure skip links are properly visible when focused */
.sr-only.focus-visible,
.sr-only:focus-visible {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  clip: auto;
  white-space: normal;
  border-width: 1px;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 999;
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdHlsZXMvZmxpcC1jYXJkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJmbGlwLWNhcmQubWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIFxuICogRmxpcCBDYXJkIENvbXBvbmVudCAtIENvcmUgU3R5bGVzaGVldFxuICogVmVyc2lvbjogMS4wLjBcbiAqIEZlYXR1cmVzOiBSZXNwb25zaXZlLCBhY2Nlc3NpYmxlLCBhbmQgY29tcGF0aWJsZSB3aXRoIG1ham9yIGJyb3dzZXJzXG4gKi9cblxuLyogQ29yZSBmbGlwIGNhcmQgZnVuY3Rpb25hbGl0eSAqL1xuLmZsaXAtY2FyZCB7XG4gIHBlcnNwZWN0aXZlOiAxMDAwcHg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiA0NTBweDtcbiAgd2lkdGg6IDEwMCU7XG4gIG1heC13aWR0aDogNDAwcHg7XG4gIG1hcmdpbjogMCBhdXRvO1xufVxuXG4uZmxpcC1jYXJkLWlubmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC44cyBjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxLjI3NSk7XG4gIHRyYW5zZm9ybS1zdHlsZTogcHJlc2VydmUtM2Q7XG59XG5cbi8qIEJvdGggYWN0aXZlIHN0YXRlcyBmb3IgbW91c2UgYW5kIGtleWJvYXJkL3Byb2dyYW1tYXRpYyBjb250cm9sICovXG4uZmxpcC1jYXJkLmZsaXBwZWQgLmZsaXAtY2FyZC1pbm5lcixcbi5mbGlwLWNhcmQ6Zm9jdXMtd2l0aGluIC5mbGlwLWNhcmQtaW5uZXIge1xuICB0cmFuc2Zvcm06IHJvdGF0ZVkoMTgwZGVnKTtcbn1cblxuLyogT25seSBhcHBseSBob3ZlciBlZmZlY3Qgd2hlbiBob3ZlciBpcyBzdXBwb3J0ZWQgYW5kIG5vdCBvbiB0b3VjaCBkZXZpY2VzICovXG5AbWVkaWEgKGhvdmVyOiBob3Zlcikge1xuICAuZmxpcC1jYXJkOmhvdmVyIC5mbGlwLWNhcmQtaW5uZXIge1xuICAgIHRyYW5zZm9ybTogcm90YXRlWSgxODBkZWcpO1xuICB9XG59XG5cbi8qIEFjY2Vzc2liaWxpdHk6IFJlc3BlY3QgcmVkdWNlZCBtb3Rpb24gcHJlZmVyZW5jZSAqL1xuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgLmZsaXAtY2FyZC1pbm5lciB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxuICBcbiAgLmZsaXAtY2FyZDpob3ZlciAuZmxpcC1jYXJkLWlubmVyLFxuICAuZmxpcC1jYXJkLmZsaXBwZWQgLmZsaXAtY2FyZC1pbm5lcixcbiAgLmZsaXAtY2FyZDpmb2N1cy13aXRoaW4gLmZsaXAtY2FyZC1pbm5lciB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxufVxuXG4uZmxpcC1jYXJkLWZyb250LCBcbi5mbGlwLWNhcmQtYmFjayB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgLXdlYmtpdC1iYWNrZmFjZS12aXNpYmlsaXR5OiBoaWRkZW47XG4gIGJhY2tmYWNlLXZpc2liaWxpdHk6IGhpZGRlbjtcbiAgYm9yZGVyLXJhZGl1czogMXJlbTtcbiAgYm94LXNoYWRvdzogMCAxMHB4IDI1cHggcmdiYSgwLDAsMCwwLjEpO1xuICBvdmVyZmxvdzogYXV0bztcbn1cblxuLmZsaXAtY2FyZC1iYWNrIHtcbiAgdHJhbnNmb3JtOiByb3RhdGVZKDE4MGRlZyk7XG59XG5cbi8qIENhcmQgc2l6ZSB2YXJpYXRpb25zICovXG4uY2FyZC1zdGFuZGFyZCB7XG4gIGhlaWdodDogNDUwcHg7XG59XG5cbi5jYXJkLW1pbmkge1xuICBoZWlnaHQ6IDMyMHB4O1xufVxuXG4uY2FyZC10YWxsIHtcbiAgaGVpZ2h0OiA2MDBweDtcbn1cblxuLyogUmVzcG9uc2l2ZSBncmlkIGZvciBjYXJkIGxheW91dHMgKi9cbi5jYXJkLWdyaWQge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgZ2FwOiAycmVtO1xuICB3aWR0aDogMTAwJTtcbiAgbWF4LXdpZHRoOiAxMjAwcHg7XG4gIG1hcmdpbjogMCBhdXRvO1xuICBwYWRkaW5nOiAxcmVtO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogNjQwcHgpIHtcbiAgLmNhcmQtZ3JpZCB7XG4gICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgMWZyKTtcbiAgfVxufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTAyNHB4KSB7XG4gIC5jYXJkLWdyaWQge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDMsIDFmcik7XG4gIH1cbn1cblxuLyogRm9jdXMgc3RhdGVzIGZvciBiZXR0ZXIgYWNjZXNzaWJpbGl0eSAqL1xuLmZsaXAtY2FyZDpmb2N1cy13aXRoaW4ge1xuICBvdXRsaW5lOiBub25lO1xufVxuXG4uZmxpcC1jYXJkOmZvY3VzLXdpdGhpbiAuZmxpcC1jYXJkLWlubmVyIHtcbiAgYm94LXNoYWRvdzogMCAwIDAgM3B4IHJnYmEoNjYsIDE1MywgMjI1LCAwLjUpO1xufVxuXG4uZmxpcC10cmlnZ2VyOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbiAgYm94LXNoYWRvdzogMCAwIDAgM3B4IHJnYmEoNjYsIDE1MywgMjI1LCAwLjUpO1xuICBib3JkZXItcmFkaXVzOiAwLjI1cmVtO1xufVxuXG4vKiBGYWxsYmFja3MgZm9yIG9sZGVyIGJyb3dzZXJzICovXG5Ac3VwcG9ydHMgbm90ICh0cmFuc2Zvcm0tc3R5bGU6IHByZXNlcnZlLTNkKSB7XG4gIC5mbGlwLWNhcmQtaW5uZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuICBcbiAgLmZsaXAtY2FyZC1iYWNrIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG4gIFxuICAuZmxpcC1jYXJkLmZsaXBwZWQgLmZsaXAtY2FyZC1mcm9udCB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuICBcbiAgLmZsaXAtY2FyZC5mbGlwcGVkIC5mbGlwLWNhcmQtYmFjayB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNmb3JtOiBub25lO1xuICB9XG59XG5cbi8qIFNjcmVlbiByZWFkZXIgb25seSB0ZXh0ICovXG4uc3Itb25seSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDFweDtcbiAgaGVpZ2h0OiAxcHg7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogLTFweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY2xpcDogcmVjdCgwLCAwLCAwLCAwKTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgYm9yZGVyLXdpZHRoOiAwO1xufVxuXG4vKiBFbnN1cmUgc2tpcCBsaW5rcyBhcmUgcHJvcGVybHkgdmlzaWJsZSB3aGVuIGZvY3VzZWQgKi9cbi5zci1vbmx5LmZvY3VzLXZpc2libGUsXG4uc3Itb25seTpmb2N1cy12aXNpYmxlIHtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB3aWR0aDogYXV0bztcbiAgaGVpZ2h0OiBhdXRvO1xuICBwYWRkaW5nOiAwLjVyZW0gMXJlbTtcbiAgbWFyZ2luOiAwO1xuICBjbGlwOiBhdXRvO1xuICB3aGl0ZS1zcGFjZTogbm9ybWFsO1xuICBib3JkZXItd2lkdGg6IDFweDtcbiAgdG9wOiAwLjVyZW07XG4gIGxlZnQ6IDAuNXJlbTtcbiAgei1pbmRleDogOTk5O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTtcbiAgYm94LXNoYWRvdzogMCAycHggNHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbn0iXX0= */