/**
 * Shared Card Styles
 * ===================
 * Common responsive behaviors for all card-based modules:
 * - card-base.module
 * - card-pricing.module
 * - cards-grid.module
 * - cards-pricingtable.module
 *
 * Key principles:
 * 1. Cards ALWAYS fill their grid cell completely (no partial cards visible)
 * 2. Images smaller than container are horizontally centered
 * 3. Grid columns are determined by explicit count, not min-width
 */

/* =============================================================================
   GRID LAYOUTS - Prevent partial card visibility
   ============================================================================= */

/**
 * Auto-fit grid with proper minimum sizing
 * Uses min() to ensure cards go full-width on narrow screens
 * rather than showing partial cards
 */
.c-card-grid,
.c-cards-grid__container {
  display: grid;
  gap: var(--grid-gap, var(--spacing, 1.5rem));

  /* Responsive grid with min-width fallback */
  grid-template-columns: repeat(
    var(--grid-cols, auto-fit),
    minmax(min(280px, 100%), 1fr)
  );
}

/**
 * Explicit column count grids (preferred for predictable layouts)
 * These prevent partial cards by using exact column counts at each breakpoint
 */

/* Mobile: stack or 2 columns */
@media (max-width: 640px) {
  .c-card-grid,
  .c-cards-grid__container {
    grid-template-columns: repeat(var(--grid-cols-mobile, 1), 1fr);
  }
}

/* Tablet: 2-3 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .c-card-grid,
  .c-cards-grid__container {
    grid-template-columns: repeat(var(--grid-cols-tablet, 2), 1fr);
  }
}

/* Desktop: 3-4 columns */
@media (min-width: 1025px) {
  .c-card-grid,
  .c-cards-grid__container {
    grid-template-columns: repeat(var(--grid-cols-desktop, 3), 1fr);
  }
}


/* =============================================================================
   CARD BASE - Shared card container behavior
   ============================================================================= */

/**
 * Cards fill their grid cell completely
 * Never overflow or show partial cards
 */
:where(.c-card),
:where(.p-card) {
  /* Fill the grid cell */
  width: 100%;
  min-width: 0; /* Allow cards to shrink below content size */

  /* Prevent content overflow */
  overflow: hidden;

  /* Modern containment for performance */
  contain: layout style paint;
}


/* =============================================================================
   IMAGE HANDLING - Centered images, proper scaling
   ============================================================================= */

/**
 * Card media containers
 * Images smaller than container width are centered
 */
:where(.c-card__media) {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Background for images that don't fill container */
  background: var(--color-bg-secondary, #f9fafb);
}

/**
 * Card images - centered and properly scaled
 */
:where(.c-card__media > img) {
  display: block;
  max-width: 100%;
  height: auto;

  /* Center horizontally if smaller than container */
  margin-left: auto;
  margin-right: auto;

  /* Default object-fit - can be overridden by module settings */
  object-fit: var(--card-img-fit, contain);
  object-position: center;
}

/**
 * Cover mode - fill container
 * For when image should fill the entire media area
 */
:where(.c-card__media--cover > img),
:where(.c-card__media[data-fit="cover"] > img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No max-width constraint in cover mode */
  max-width: none;
}

/**
 * Contain mode - preserve aspect ratio, center
 * For logos, icons, or when you want to see the full image
 */
:where(.c-card__media--contain > img),
:where(.c-card__media[data-fit="contain"] > img) {
  max-width: var(--card-img-max-width, 100%);
  max-height: var(--card-img-max-height, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

/**
 * Fixed size images
 * When an exact size is specified, respect it and center
 */
:where(.c-card__media > img[width][height]) {
  /* If explicit dimensions, center in container */
  flex-shrink: 0;
}


/* =============================================================================
   PRICING TABLE GRID
   ============================================================================= */

/**
 * Pricing tables use explicit column counts to ensure
 * all pricing cards are fully visible
 */
:where(.p-table) {
  display: grid;
  gap: var(--t-gap, 1.5rem);

  /* Mobile: single column */
  grid-template-columns: 1fr;
}

@media (min-width: 641px) {
  :where(.p-table) {
    /* Tablet: 2 columns */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  :where(.p-table) {
    /* Desktop: use configured column count */
    grid-template-columns: repeat(var(--p-cols, 3), 1fr);
  }
}


/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/**
 * Force image to fill container (override contain behavior)
 */
.c-card__media--fill > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

/**
 * Force image to be centered and not stretched
 */
.c-card__media--center > img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
}

/**
 * Equal height cards (use on the grid container)
 * Cards in the same row will have equal height
 */
.c-card-grid--equal-height {
  align-items: stretch;
}

.c-card-grid--equal-height > * {
  display: flex;
  flex-direction: column;
}


/* =============================================================================
   DARK MODE
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :where(.c-card__media) {
    background: var(--color-bg-secondary-dark, #374151);
  }
}


/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .c-card-grid,
  .c-cards-grid__container,
  .p-table {
    display: block;
  }

  :where(.c-card),
  :where(.p-card) {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
}
