/*
 * cards.css — ANZ v3 Card Component
 *
 * Namespace: .anz-v3-card
 * Variants: product card / tile card / info card
 * All selectors scoped: body.anz-v3 .anz-v3-card*
 * No hex values — var(--...) only.
 *
 * Phase 4 pages: home, shop, collections, PDP-related
 * Provenance: IA spec §3.3 (Clear Skies Ultrasoft card hover), §6.2 (radius-md)
 */


/* ===================================================================
 * BASE CARD
 * =================================================================== */

body.anz-v3 .anz-v3-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    box-shadow var(--motion-standard) var(--motion-exit),
    transform var(--motion-standard) var(--motion-exit);
}

body.anz-v3 .anz-v3-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Cart "holding boxes" — soft wash on inner panels; deep-sea text overrides
   inline pacific-blue (fails AA on this surface). */
body.anz-v3 .anz-v3-checkout .anz-v3-card:not(.anz-v3-checkout__body) {
  background-color: var(--surface-soft);
  border-color: transparent;
}
body.anz-v3 .anz-v3-checkout .anz-v3-card:not(.anz-v3-checkout__body):hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}
body.anz-v3 .anz-v3-checkout .anz-v3-card:not(.anz-v3-checkout__body) .panel-heading {
  color: var(--anz-deep-sea) !important;
}

/* FAQ section title — pacific-blue banner to differentiate subject rows. */
body.anz-v3 .anz-v3-faq-section .anz-v3-card__title {
  background-color: var(--anz-pacific-blue) !important;
  color: var(--anz-cloud-white, #ffffff) !important;
  border-radius: var(--radius-sm);
  padding: var(--space-3, 12px) var(--space-4, 16px) !important;
  margin: 0 0 var(--space-4, 16px) !important;
}

body.anz-v3 .anz-v3-card__image {
  background-color: var(--surface-inverse);
  display: block;
  width: 100%;
}

body.anz-v3 .anz-v3-card__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body.anz-v3 .anz-v3-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

body.anz-v3 .anz-v3-card__title {
  color: var(--anz-pacific-blue);
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-h3-lh);
  margin: 0;
}

body.anz-v3 .anz-v3-card__subtitle {
  color: var(--text-secondary);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-lh);
}

body.anz-v3 .anz-v3-card__text {
  color: var(--text-secondary);
  flex: 1;
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
}

body.anz-v3 .anz-v3-card__footer {
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

body.anz-v3 .anz-v3-card__price {
  color: var(--text);
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--type-h3-lh);
}

body.anz-v3 .anz-v3-card__price-original {
  color: var(--text-muted);
  font-size: var(--type-body-s-size);
  text-decoration: line-through;
}


/* ===================================================================
 * PRODUCT CARD — e-commerce product listing variant
 * =================================================================== */

body.anz-v3 .anz-v3-card--product .anz-v3-card__image {
  aspect-ratio: 4 / 3;
}

body.anz-v3 .anz-v3-card--product:hover {
  background-color: var(--bg-wash);
}


/* ===================================================================
 * INFO CARD — content / editorial variant (Clear Skies Ultrasoft)
 * Provenance: IA spec §3.4 — swapped Sand→Clear-Skies-Ultrasoft
 * after aesthetic review: Sand read as beige/stale on FAQ sections.
 * =================================================================== */

body.anz-v3 .anz-v3-card--info {
  background-color: var(--surface);
  border-color: var(--border);
}

body.anz-v3 .anz-v3-card--info .anz-v3-card__title {
  color: var(--anz-pacific-blue);
}


/* ===================================================================
 * TILE CARD — category / collection tile variant
 * =================================================================== */

body.anz-v3 .anz-v3-card--tile {
  align-items: center;
  background-color: var(--bg-wash);
  border-color: transparent;
  justify-content: center;
  min-height: 160px;
  text-align: center;
}

body.anz-v3 .anz-v3-card--tile .anz-v3-card__body {
  align-items: center;
}


/* ===================================================================
 * PLACEHOLDER — awaiting DAM photography
 * =================================================================== */

body.anz-v3 .anz-v3-card [data-placeholder="awaiting-DAM"] {
  aspect-ratio: 4 / 3;
  min-height: 0;
}


/* ===================================================================
 * RESPONSIVE
 * =================================================================== */

@media (max-width: 768px) {
  body.anz-v3 .anz-v3-card:hover {
    transform: none;
  }
}


/* ===================================================================
 * REDUCED MOTION
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.anz-v3 .anz-v3-card {
    transition: none;
  }

  body.anz-v3 .anz-v3-card:hover {
    transform: none;
  }
}