/* Card Component */

/* Component-specific custom properties */
.c-card {
  /* Base properties */
  --c-card-background: var(--ds-color-surface);
  --c-card-border-color: var(--ds-color-border);
  --c-card-border-width: 1px;
  --c-card-border-radius: var(--ds-radius-m);
  --c-card-shadow: var(--ds-shadow-card);
  --c-card-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Spacing */
  --c-card-padding: var(--ds-space-m);
  --c-card-padding-s: var(--ds-space-s);
  --c-card-padding-m: var(--ds-space-m);
  --c-card-padding-l: var(--ds-space-l);
  --c-card-padding-compact: var(--ds-space-m);
  --c-card-padding-spacious: var(--ds-space-xl);
  --c-card-gap: var(--ds-space-m);
  
  /* Header */
  --c-card-header-background: transparent;
  --c-card-header-border-color: var(--ds-color-border);
  --c-card-header-border-width: 0 0 1px 0;
  --c-card-header-padding: var(--ds-space-m);
  --c-card-header-padding-s: var(--ds-space-s);
  --c-card-header-padding-m: var(--ds-space-m);
  --c-card-header-padding-l: var(--ds-space-l);
  --c-card-header-font-size: var(--ds-font-size-l);
  --c-card-header-font-weight: var(--ds-font-weight-medium);
  --c-card-header-text-color: var(--ds-color-text);
  --c-card-header-icon-color:var(--ds-color-text);
  --c-card-header-icon-size: 1rem;
  --c-card-icon-stroke-width: 2;

  /* Body */
  --c-card-body-background: transparent;
  --c-card-body-padding: var(--ds-space-l);
  --c-card-body-text-color: var(--ds-color-text);
  --c-card-body-max-height: none;
  
  /* Footer */
  --c-card-footer-background: var(--ds-color-surface-raised);
  --c-card-footer-border-color: var(--ds-color-border);
  --c-card-footer-border-width: 1px 0 0 0;
  --c-card-footer-padding: var(--ds-space-l);
  --c-card-footer-text-color: var(--ds-color-text-weak);
  --c-card-footer-font-size: var(--ds-font-size-s);
  
  /* Hover state */
  --c-card-background-hover: var(--ds-color-surface);
  --c-card-shadow-hover: var(--ds-shadow-card-hover);
  --c-card-transform-hover: translateY(-1px);
  
  /* Focus state */
  --c-card-border-color-focus: var(--ds-color-accent);
  --c-card-shadow-focus: var(--ds-shadow-card-hover), 0 0 0 2px var(--ds-color-accent-weak);
  
  /* Disabled state */
  --c-card-background-disabled: var(--ds-color-surface-lowered);
  --c-card-border-color-disabled: var(--ds-color-border);
  --c-card-text-color-disabled: var(--ds-color-text-weakest);
  --c-card-shadow-disabled: none;
}

/* Base card container */
.c-card {
  display: flex;
  flex-direction: column;
  
  background-color: var(--c-card-background);
  border: var(--c-card-border-width) solid var(--c-card-border-color);
  border-radius: var(--c-card-border-radius);
  box-shadow: var(--c-card-shadow);
  
  /* overflow: hidden; */
  transition: var(--c-card-transition);
}

/* Card header */
.c-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-card-gap);
  
  background-color: var(--c-card-header-background);
  border: var(--c-card-header-border-width) solid var(--c-card-header-border-color);
  padding: var(--c-card-header-padding);
  
  font-size: var(--c-card-header-font-size);
  font-weight: var(--c-card-header-font-weight);
  color: var(--c-card-header-text-color);
  line-height: var(--ds-line-height-s);
}
.c-card__header--no-padding {
  padding: 0;
}

.c-card__header-content {
  flex: 1;
  min-width: 0;
}
.c-card__header-icon {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
  width: var(--c-card-header-icon-size);
  height: var(--c-card-header-icon-size);
  color: var(--c-card-header-icon-color);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.c-card__header-icon svg {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
  width: var(--c-card-header-icon-size);
  height: var(--c-card-header-icon-size);
  stroke-width: var(--c-card-icon-stroke-width);
}
.c-card__header-title {
  display: inline-flex; 
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.c-card__header-subtitle {
  margin: var(--ds-space-xs) 0 0 0;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-s);
}

.c-card__header-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  flex-shrink: 0;
}
.c-card__link {
  color: var(--ds-color-text-link);
  text-decoration: none;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-height-s);
}

/* Card body */
.c-card__body {
  flex: 1;
  
  background-color: var(--c-card-body-background);
  color: var(--c-card-body-text-color);
  
  /* overflow: hidden; */
}
.c-card__body:not(.c-card--no-padding) {
  padding: var(--c-card-body-padding);
}


.c-card__body-content {
  height: 100%;
}

/* Card footer */
.c-card__footer {
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  gap: var(--c-card-gap); 
  /* flex-direction: row; */

  background-color: var(--c-card-footer-background);
  border: var(--c-card-footer-border-width) solid var(--c-card-footer-border-color);
  padding: var(--c-card-footer-padding);
  
  font-size: var(--c-card-footer-font-size);
  color: var(--c-card-footer-text-color);
  line-height: var(--ds-line-height-s);
}

.c-card__footer-content {
  flex: 1;
  min-width: 0;
}

.c-card__footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-s);
  flex-shrink: 0;
}

/* ========================================
   CARD MODIFIERS
   ======================================== */

/* Padded variants */
.c-card--padded {
  --c-card-header-padding: var(--c-card-padding);
  --c-card-body-padding: var(--c-card-padding);
  --c-card-footer-padding: var(--c-card-padding);
}

.c-card--padded-compact {
  --c-card-header-padding: var(--c-card-padding-compact);
  --c-card-body-padding: var(--c-card-padding-compact);
  --c-card-footer-padding: var(--c-card-padding-compact);
}

.c-card--padded-spacious {
  --c-card-header-padding: var(--c-card-padding-spacious);
  --c-card-body-padding: var(--c-card-padding-spacious);
  --c-card-footer-padding: var(--c-card-padding-spacious);
}

/* No padding */
.c-card--no-padding .c-card__header,
.c-card--no-padding .c-card__body,
.c-card--no-padding .c-card__footer {
  padding: 0;
}

.c-card__body--no-padding {
  padding: 0 !important;
}

.c-card__body--padding-s {
  padding: 0 var(--c-card-padding-s) var(--c-card-padding-s) var(--c-card-padding-s) !important;
}
.c-card__body--padding-m {
  padding: 0 var(--c-card-padding-m) var(--c-card-padding-s) var(--c-card-padding-s) !important;
}
.c-card__body--padding-l {
  padding: 0 var(--c-card-padding-l) var(--c-card-padding-s) var(--c-card-padding-s) !important;
}

/* Scrollable body */
.c-card--scrollable .c-card__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: var(--c-card-body-max-height, 20rem);
}

/* Sections variant (visible borders between sections) */
.c-card--sections .c-card__header {
  border-bottom: 1px solid var(--c-card-header-border-color);
}

.c-card--sections .c-card__footer {
  border-top: 1px solid var(--c-card-footer-border-color);
}

/* Flat variant (no shadow, minimal border) */
.c-card--flat {
  --c-card-shadow: none;
  --c-card-border-color: var(--ds-color-border-weak);
}

/* Elevated variant (stronger shadow) */
.c-card--elevated {
  --c-card-shadow: var(--ds-shadow-card-elevated);
}

/* Interactive variant (hover effects) */
.c-card--interactive {
  cursor: pointer;
}

.c-card--interactive:hover {
  background-color: var(--c-card-background-hover);
  box-shadow: var(--c-card-shadow-hover);
  transform: var(--c-card-transform-hover);
}

.c-card--interactive:focus-visible {
  outline: none;
  border-color: var(--c-card-border-color-focus);
  box-shadow: var(--c-card-shadow-focus);
}

/* Disabled state */
.c-card--disabled {
  background-color: var(--c-card-background-disabled);
  border-color: var(--c-card-border-color-disabled);
  color: var(--c-card-text-color-disabled);
  box-shadow: var(--c-card-shadow-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   CARD LAYOUTS
   ======================================== */

/* Horizontal layout */
.c-card--horizontal {
  flex-direction: row;
}

.c-card--horizontal .c-card__header {
  border-right: 1px solid var(--c-card-header-border-color);
  border-bottom: none;
  flex-shrink: 0;
  min-width: 200px;
}

.c-card--horizontal .c-card__footer {
  border-left: 1px solid var(--c-card-footer-border-color);
  border-top: none;
  flex-shrink: 0;
  min-width: 200px;
}

/* Compact layout */
.c-card--compact {
  --c-card-padding: var(--ds-space-s);
  --c-card-gap: var(--ds-space-s);
  --c-card-header-font-size: var(--ds-font-size-m);
  --c-card-footer-font-size: var(--ds-font-size-xs);
}

/* Full height */
.c-card--full-height {
  height: 100%;
}

/* ========================================
   CARD CONTENT TYPES
   ======================================== */

/* Media card (for images/videos) */
.c-card__media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.c-card--media-top .c-card__media {
  order: -1;
}

.c-card--media-bottom .c-card__media {
  order: 1;
}

/* List content */
.c-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-card__list-item {
  padding: var(--ds-space-s) 0;
  border-bottom: 1px solid var(--ds-color-border-weak);
}

.c-card__list-item:last-child {
  border-bottom: none;
}

/* Table content */
.c-card__table {
  width: 100%;
  border-collapse: collapse;
}

.c-card__table th,
.c-card__table td {
  padding: var(--ds-space-s);
  text-align: left;
  border-bottom: 1px solid var(--ds-color-border-weak);
}

.c-card__table th {
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
}

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

/* Mobile adjustments */
@media (max-width: 768px) {
  .c-card {
    --c-card-padding: var(--ds-space-m);
    --c-card-border-radius: var(--ds-radius-s);
  }
  
  .c-card--horizontal {
    flex-direction: column;
  }
  
  .c-card--horizontal .c-card__header {
    border-right: none;
    border-bottom: 1px solid var(--c-card-header-border-color);
    min-width: auto;
  }
  
  .c-card--horizontal .c-card__footer {
    border-left: none;
    border-top: 1px solid var(--c-card-footer-border-color);
    min-width: auto;
  }
  
  .c-card--scrollable .c-card__body {
    max-height: 15rem;
  }
}

/* Small screens */
@media (max-width: 480px) {
  .c-card {
    --c-card-padding: var(--ds-space-s);
    --c-card-gap: var(--ds-space-s);
    --c-card-border-radius: var(--ds-radius-xs);
  }
  
  .c-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-s);
  }
  
  .c-card__header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .c-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-s);
  }
  
  .c-card__footer-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ========================================
   ACCESSIBILITY & INTERACTION STATES
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-card {
    border-width: 2px;
  }
  
  .c-card--interactive:focus-visible {
    box-shadow: 0 0 0 3px var(--ds-color-accent);
  }
  
  .c-card--sections .c-card__header,
  .c-card--sections .c-card__footer {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .c-card {
    transition: none;
  }
  
  .c-card--interactive:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  .c-card {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  
  .c-card__header,
  .c-card__footer {
    background: white !important;
    border-color: black !important;
  }
  
  .c-card--interactive:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

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

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

/* Loading state */
.c-card--loading {
  position: relative;
  pointer-events: none;
}

.c-card--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-card--loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ds-color-border);
  border-top-color: var(--ds-color-accent);
  border-radius: 50%;
  animation: c-card-spin 1s linear infinite;
  z-index: 1;
}

@keyframes c-card-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========================================
   CARD GRID LAYOUTS
   ======================================== */

/* Base grid container */
.c-card-grid {
  display: grid;
  gap: var(--ds-space-m);
  width: 100%;
}

/* Flex container */
.c-card-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-m);
  width: 100%;
}

/* Grid: 5 columns */
.c-card-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Grid: 4 columns */
.c-card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid: 3 columns */
.c-card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid: 2 columns */
.c-card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Grid: 1 column */
.c-card-grid--1 {
  grid-template-columns: 1fr;
}

/* ----------------------------------------
   SIATKI (kolumny × rzędy) - równe kolumny
   Format: cols-XxY = X kolumn, Y rzędów
   ---------------------------------------- */

/* Grid: 2x2 - 2 kolumny × 2 rzędy = 4 karty */
.c-card-grid--cols-2x2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Grid: 2x3 siatka - 2 kolumny × 3 rzędy = 6 kart */
.c-card-grid--cols-2x3 {
  grid-template-columns: repeat(2, 1fr);
}

/* Grid: 3x2 siatka - 3 kolumny × 2 rzędy = 6 kart */
.c-card-grid--cols-3x2 {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid: 3x3 siatka - 3 kolumny × 3 rzędy = 9 kart */
.c-card-grid--cols-3x3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Grid: 4x2 siatka - 4 kolumny × 2 rzędy = 8 kart */
.c-card-grid--cols-4x2 {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid: 4x3 siatka - 4 kolumny × 3 rzędy = 12 kart */
.c-card-grid--cols-4x3 {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------
   PROPORCJE KOLUMN (2 kolumny o różnych szerokościach)
   Format: AxB = pierwsza kolumna A części, druga B części
   ---------------------------------------- */

/* Grid: 1x1 - proporcja 1:1 (50%:50%) */
.c-card-grid--1x1 {
  grid-template-columns: 1fr 1fr;
}

/* Grid: 2x1 - proporcja 2:1 (66.6%:33.3%) */
.c-card-grid--2x1 {
  grid-template-columns: 2fr 1fr;
}

/* Grid: 1x2 - proporcja 1:2 (33.3%:66.6%) */
.c-card-grid--1x2 {
  grid-template-columns: 1fr 2fr;
}

/* Grid: 3x1 - proporcja 3:1 (75%:25%) */
.c-card-grid--3x1 {
  grid-template-columns: 3fr 1fr;
}

/* Grid: 1x3 - proporcja 1:3 (25%:75%) */
.c-card-grid--1x3 {
  grid-template-columns: 1fr 3fr;
}

/* Grid: 4x1 - proporcja 4:1 (80%:20%) */
.c-card-grid--4x1 {
  grid-template-columns: 4fr 1fr;
}

/* Grid: 1x4 - proporcja 1:4 (20%:80%) */
.c-card-grid--1x4 {
  grid-template-columns: 1fr 4fr;
}

/* Grid: 3x2 - proporcja 3:2 (60%:40%) */
.c-card-grid--3x2 {
  grid-template-columns: 3fr 2fr;
}

/* Grid: 2x3 - proporcja 2:3 (40%:60%) */
.c-card-grid--2x3 {
  grid-template-columns: 2fr 3fr;
}

/* Flex: 5 columns */
.c-card-flex--5 > * {
  flex: 0 0 calc((100% - 4 * var(--ds-space-m)) / 5);
  min-width: 0;
}

/* Flex: 4 columns */
.c-card-flex--4 > * {
  flex: 0 0 calc((100% - 3 * var(--ds-space-m)) / 4);
  min-width: 0;
}

/* Flex: 3 columns */
.c-card-flex--3 > * {
  flex: 0 0 calc((100% - 2 * var(--ds-space-m)) / 3);
  min-width: 0;
}

/* Flex: 2 columns */
.c-card-flex--2 > * {
  flex: 0 0 calc((100% - 1 * var(--ds-space-m)) / 2);
  min-width: 0;
}

/* Flex: 1 column */
.c-card-flex--1 > * {
  flex: 0 0 100%;
  min-width: 0;
}

/* ----------------------------------------
   FLEX PROPORCJE (2 elementy o różnych szerokościach)
   Format: AxB = pierwszy element A części, drugi B części
   ---------------------------------------- */

/* Flex: 1x1 - proporcja 1:1 (50%:50%) */
.c-card-flex--1x1 > *:first-child {
  flex: 1 1 calc(50% - var(--ds-space-m) / 2);
  min-width: 0;
}
.c-card-flex--1x1 > *:last-child {
  flex: 1 1 calc(50% - var(--ds-space-m) / 2);
  min-width: 0;
}

/* Flex: 2x1 - proporcja 2:1 (66.6%:33.3%) */
.c-card-flex--2x1 > *:first-child {
  flex: 2 1 0;
  min-width: 0;
}
.c-card-flex--2x1 > *:last-child {
  flex: 1 1 0;
  min-width: 0;
}

/* Flex: 1x2 - proporcja 1:2 (33.3%:66.6%) */
.c-card-flex--1x2 > *:first-child {
  flex: 1 1 0;
  min-width: 0;
}
.c-card-flex--1x2 > *:last-child {
  flex: 2 1 0;
  min-width: 0;
}

/* Flex: 3x1 - proporcja 3:1 (75%:25%) */
.c-card-flex--3x1 > *:first-child {
  flex: 3 1 0;
  min-width: 0;
}
.c-card-flex--3x1 > *:last-child {
  flex: 1 1 0;
  min-width: 0;
}

/* Flex: 1x3 - proporcja 1:3 (25%:75%) */
.c-card-flex--1x3 > *:first-child {
  flex: 1 1 0;
  min-width: 0;
}
.c-card-flex--1x3 > *:last-child {
  flex: 3 1 0;
  min-width: 0;
}

/* Flex: 4x1 - proporcja 4:1 (80%:20%) */
.c-card-flex--4x1 > *:first-child {
  flex: 4 1 0;
  min-width: 0;
}
.c-card-flex--4x1 > *:last-child {
  flex: 1 1 0;
  min-width: 0;
}

/* Flex: 1x4 - proporcja 1:4 (20%:80%) */
.c-card-flex--1x4 > *:first-child {
  flex: 1 1 0;
  min-width: 0;
}
.c-card-flex--1x4 > *:last-child {
  flex: 4 1 0;
  min-width: 0;
}

/* Flex: 3x2 - proporcja 3:2 (60%:40%) */
.c-card-flex--3x2 > *:first-child {
  flex: 3 1 0;
  min-width: 0;
}
.c-card-flex--3x2 > *:last-child {
  flex: 2 1 0;
  min-width: 0;
}

/* Flex: 2x3 - proporcja 2:3 (40%:60%) */
.c-card-flex--2x3 > *:first-child {
  flex: 2 1 0;
  min-width: 0;
}
.c-card-flex--2x3 > *:last-child {
  flex: 3 1 0;
  min-width: 0;
}

/* Gap modifiers */
.c-card-grid--gap-s,
.c-card-flex--gap-s {
  gap: var(--ds-space-s);
}

.c-card-grid--gap-m,
.c-card-flex--gap-m {
  gap: var(--ds-space-m);
}

.c-card-grid--gap-l,
.c-card-flex--gap-l {
  gap: var(--ds-space-l);
}

.c-card-grid--gap-xl,
.c-card-flex--gap-xl {
  gap: var(--ds-space-xl);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   xl: 1280px, lg: 1024px, md: 768px, sm: 640px
   ======================================== */

/* --- XL breakpoint (max-width: 1279px) --- */
@media (max-width: 1279px) {
  /* 5 cols → 4 cols */
  .c-card-grid--5 { grid-template-columns: repeat(4, 1fr); }
  .c-card-flex--5 > * { flex: 0 0 calc((100% - 3 * var(--ds-space-m)) / 4); }
}

/* --- LG breakpoint (max-width: 1023px) --- */
@media (max-width: 1023px) {
  /* 5 cols → 3 cols */
  .c-card-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .c-card-flex--5 > * { flex: 0 0 calc((100% - 2 * var(--ds-space-m)) / 3); }

  /* 4 cols → 3 cols */
  .c-card-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .c-card-flex--4 > * { flex: 0 0 calc((100% - 2 * var(--ds-space-m)) / 3); }

  /* Siatki 4-kolumnowe → 3 kolumny */
  .c-card-grid--cols-4x2,
  .c-card-grid--cols-4x3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- MD breakpoint (max-width: 767px) --- */
@media (max-width: 767px) {
  /* 5 cols → 2 cols */
  .c-card-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .c-card-flex--5 > * { flex: 0 0 calc((100% - 1 * var(--ds-space-m)) / 2); }

  /* 4 cols → 2 cols */
  .c-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .c-card-flex--4 > * { flex: 0 0 calc((100% - 1 * var(--ds-space-m)) / 2); }

  /* 3 cols → 2 cols */
  .c-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .c-card-flex--3 > * { flex: 0 0 calc((100% - 1 * var(--ds-space-m)) / 2); }

  /* Siatki 3-4 kolumnowe → 2 kolumny */
  .c-card-grid--cols-3x2,
  .c-card-grid--cols-3x3,
  .c-card-grid--cols-4x2,
  .c-card-grid--cols-4x3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- SM breakpoint (max-width: 639px) --- */
@media (max-width: 639px) {
  /* Równe kolumny → 1 kolumna */
  .c-card-grid--5,
  .c-card-grid--4,
  .c-card-grid--3,
  .c-card-grid--2 {
    grid-template-columns: 1fr;
  }

  .c-card-flex--5 > *,
  .c-card-flex--4 > *,
  .c-card-flex--3 > *,
  .c-card-flex--2 > * {
    flex: 0 0 100%;
  }

  /* Siatki → 1 kolumna */
  .c-card-grid--cols-2x2,
  .c-card-grid--cols-2x3,
  .c-card-grid--cols-3x2,
  .c-card-grid--cols-3x3,
  .c-card-grid--cols-4x2,
  .c-card-grid--cols-4x3 {
    grid-template-columns: 1fr;
  }

  /* Proporcje → 1 kolumna */
  .c-card-grid--1x1,
  .c-card-grid--2x1,
  .c-card-grid--1x2,
  .c-card-grid--3x1,
  .c-card-grid--1x3,
  .c-card-grid--4x1,
  .c-card-grid--1x4,
  .c-card-grid--3x2,
  .c-card-grid--2x3 {
    grid-template-columns: 1fr;
  }

  .c-card-flex--1x1 > *,
  .c-card-flex--2x1 > *,
  .c-card-flex--1x2 > *,
  .c-card-flex--3x1 > *,
  .c-card-flex--1x3 > *,
  .c-card-flex--4x1 > *,
  .c-card-flex--1x4 > *,
  .c-card-flex--3x2 > *,
  .c-card-flex--2x3 > * {
    flex: 0 0 100% !important;
  }
}