/* ============================================================
   Rail Design System — Card
   Heard · Guest + Line

   Variants: basic, with-image (top or leading), with-actions, with-metadata
   States:   default, hover, focus, active, disabled, loading (skeleton)

   Usage:
   <!--
     Basic card:
     <div class="rail-card">
       <div class="rail-card__body">
         <h3 class="rail-card__title">Margherita Pizza</h3>
         <p class="rail-card__description">Classic tomato, mozzarella, basil</p>
       </div>
     </div>

     Card with top image:
     <div class="rail-card rail-card--image-top">
       <div class="rail-card__image">
         <img src="photo.jpg" alt="Dish photo" />
       </div>
       <div class="rail-card__body">
         <h3 class="rail-card__title">Margherita Pizza</h3>
         <p class="rail-card__description">Classic tomato, mozzarella, basil</p>
       </div>
     </div>

     Card with leading image:
     <div class="rail-card rail-card--image-leading">
       <div class="rail-card__image">
         <img src="photo.jpg" alt="Dish photo" />
       </div>
       <div class="rail-card__body">
         <h3 class="rail-card__title">Margherita Pizza</h3>
         <p class="rail-card__description">Classic tomato, mozzarella, basil</p>
       </div>
     </div>

     Card with metadata:
     <div class="rail-card">
       <div class="rail-card__body">
         <h3 class="rail-card__title">Margherita Pizza</h3>
         <p class="rail-card__description">Classic tomato, mozzarella, basil</p>
         <div class="rail-card__meta">
           <span>$14.00</span>
           <span>12 min</span>
         </div>
       </div>
     </div>

     Card with actions:
     <div class="rail-card">
       <div class="rail-card__body">
         <h3 class="rail-card__title">Margherita Pizza</h3>
         <p class="rail-card__description">Classic tomato, mozzarella, basil</p>
       </div>
       <div class="rail-card__actions">
         <button class="rail-card__action">Edit</button>
         <button class="rail-card__action">Remove</button>
       </div>
     </div>

     Loading skeleton:
     <div class="rail-card rail-card--loading" aria-busy="true">
       <div class="rail-card__image"><div class="rail-card__skeleton"></div></div>
       <div class="rail-card__body">
         <div class="rail-card__skeleton rail-card__skeleton--title"></div>
         <div class="rail-card__skeleton rail-card__skeleton--text"></div>
       </div>
     </div>

     Disabled card:
     <div class="rail-card rail-card--disabled" aria-disabled="true">...</div>
   -->
   ============================================================ */


/* --- Base card --- */

.rail-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
}


/* --- Interactive states --- */

.rail-card:hover:not(.rail-card--disabled):not(.rail-card--loading) {
  box-shadow: var(--elevation-2);
  border-color: var(--border-strong);
}

.rail-card:focus-within:not(.rail-card--disabled):not(.rail-card--loading) {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}

.rail-card:active:not(.rail-card--disabled):not(.rail-card--loading) {
  box-shadow: var(--elevation-1);
}


/* --- Disabled --- */

.rail-card--disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* --- Card image --- */

.rail-card__image {
  overflow: hidden;
  flex-shrink: 0;
}

.rail-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Variant: top image (default image position) --- */

.rail-card--image-top {
  flex-direction: column;
}

.rail-card--image-top .rail-card__image {
  width: 100%;
  height: var(--card-image-height);
}


/* --- Variant: leading image (horizontal layout) --- */

.rail-card--image-leading {
  flex-direction: row;
}

.rail-card--image-leading .rail-card__image {
  width: var(--card-image-width);
  min-height: 100%;
}


/* --- Card body --- */

.rail-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-padding);
  flex: 1;
  min-width: 0;
}


/* --- Card title --- */

.rail-card__title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  color: var(--text-primary);
}


/* --- Card description --- */

.rail-card__description {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  color: var(--text-secondary);
}


/* --- Card metadata --- */

.rail-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-inline-md);
  font-family: 'Inter', sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-tertiary);
}


/* --- Card actions --- */

.rail-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-gap-sm);
  padding: 0 var(--card-padding) var(--card-padding);
}

.rail-card__action {
  padding: var(--space-inset-sm) var(--space-inset-md);
  font-family: 'Inter', sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-label-weight);
  color: var(--text-link);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.rail-card__action:hover {
  background-color: var(--interactive-subtle);
}

.rail-card__action:focus-visible {
  outline: var(--focus-ring-width) solid var(--border-focus);
  outline-offset: var(--focus-ring-offset);
}


/* --- Loading skeleton --- */

.rail-card--loading {
  pointer-events: none;
}

.rail-card__skeleton {
  background-color: var(--surface-subtle);
  border-radius: var(--radius-sm);
  animation: rail-card-shimmer 1.5s ease-in-out infinite;
}

.rail-card--loading .rail-card__image {
  background-color: var(--surface-subtle);
}

.rail-card__skeleton--title {
  height: var(--type-label-line);
  width: 60%;
}

.rail-card__skeleton--text {
  height: var(--type-caption-line);
  width: 80%;
}

@keyframes rail-card-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}