/* ============================================================
   12D – CARDS GRID WIDGET
   File: assets/css/cards-grid.css
   ============================================================ */

/* ============================================================
   BASE WRAPPER
   ============================================================ */

.d12-cards-grid {
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.d12-cards-grid .d12-cg-grid {
  box-sizing: border-box;
}

/* Placeholder (when no items selected) */
.d12-cards-grid .d12-cg-placeholder {
  padding: 1rem;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.03);
}

/* ============================================================
   ITEM WRAPPER (single source of truth)
   ============================================================ */

.d12-cards-grid .d12-cg-item {
  box-sizing: border-box;
  min-width: 0;

  /* Equal-height chain starts here */
  display: flex;
  height: 100%;

  /* IMPORTANT:
     Do NOT force width:100% here.
     Grid and Flex need different behavior. */
  width: auto;
  max-width: none;

  min-height: var(--d12-cg-item-min-h, 0px);
}

/* FLEX: (needed for flex row sizing + equal height) */
.d12-cards-grid[data-layout="flex"] .d12-cg-item {
  width: 100%;
  max-width: var(--d12-cg-item-max, none);
}

/* GRID: items must fill their grid tracks so all cards stay same width */
.d12-cards-grid[data-layout="grid"] .d12-cg-item {
  width: 100%;
  max-width: none; /* track controls width; card cap is handled on .d12-card */
}

/* ============================================================
   EQUAL HEIGHT (FULL CHAIN FIX)
   ============================================================ */

/* Embedded Elementor wrapper */
.d12-cards-grid .d12-cg-item > .elementor {
  width: 100%;
  display: flex;
  height: 100%;
}

/* Elementor "document" wrapper inside (data-elementor-type="container") */
.d12-cards-grid .d12-cg-item > .elementor > [data-elementor-type] {
  width: 100%;
  display: flex;
  height: 100%;
}

/* Your template root container (d12-card-cell) */
.d12-cards-grid .d12-cg-item .e-con.d12-card-cell {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
}

/* Elementor widget container often needs stretching too */
.d12-cards-grid .d12-cg-item .elementor-widget,
.d12-cards-grid .d12-cg-item .elementor-widget-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Card fills the available height */
.d12-cards-grid .d12-cg-item .d12-card {
  width: 100%;
  height: auto;
  min-height: inherit;
}

/* --------------------------------------------
   Item Max Width (visual cap)
   - In FIXED columns, the item (.d12-cg-item) is the column "slot" width.
   - We cap the card INSIDE the slot so column count stays strict,
     but the card doesn't grow too wide.
--------------------------------------------- */
.d12-cards-grid .d12-cg-item .d12-card {
  max-width: min(var(--d12-cg-item-max, 99999px), 100%);
  margin-left: auto;
  margin-right: auto;
}

/* FIXED GRID:
   the grid item must fill the track, but the card inside may still respect
   Item Max Width and stay centered inside that track. */
.d12-cards-grid[data-layout="grid"][data-cols-mode="fixed"] .d12-cg-item {
  width: 100%;
  max-width: none;
  justify-content: center;
}

/* ============================================================
   GRID ENGINE
   ============================================================ */

.d12-cards-grid[data-layout="grid"] .d12-cg-grid {
  display: grid;

  /* spacing */
  column-gap: var(--d12-cg-col-gap, 24px);
  row-gap: var(--d12-cg-row-gap, 24px);

  /* driven by [data-justify] rules below */
  justify-content: start;

  /* cap + center the INNER grid, not the outer wrapper */
  width: 100%;
  max-width: var(--d12-cg-max-w, none);
  margin-left: 0;
  margin-right: 0;

  /* stretching behavior */
  align-items: stretch;
}

/* Default: full-width grid for "start" alignment */
.d12-cards-grid[data-layout="grid"][data-justify="start"] .d12-cg-grid {
  width: 100%;
}

/*
  AUTO columns may shrink-wrap the inner grid so justify-content
  has visible effect (center/end/space-*).

  FIXED columns must stay full-width, otherwise cards can appear
  farther apart than the actual column-gap.
*/
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="center"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="end"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-between"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-around"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-evenly"] .d12-cg-grid {
  width: max-content;
  max-width: 100%;
}

/* FIXED columns: keep the grid full-width so column-gap stays literal */
.d12-cards-grid[data-layout="grid"][data-cols-mode="fixed"] .d12-cg-grid {
  width: 100%;
  max-width: var(--d12-cg-max-w, none);
}

/* ============================================================
   GRID ALIGNMENT (source of truth = data-justify)
   ============================================================ */

/* Grid track alignment */
.d12-cards-grid[data-layout="grid"][data-justify="start"] .d12-cg-grid {
  justify-content: start;
}
.d12-cards-grid[data-layout="grid"][data-justify="center"] .d12-cg-grid {
  justify-content: center;
}
.d12-cards-grid[data-layout="grid"][data-justify="end"] .d12-cg-grid {
  justify-content: end;
}
.d12-cards-grid[data-layout="grid"][data-justify="space-between"] .d12-cg-grid {
  justify-content: space-between;
}
.d12-cards-grid[data-layout="grid"][data-justify="space-around"] .d12-cg-grid {
  justify-content: space-around;
}
.d12-cards-grid[data-layout="grid"][data-justify="space-evenly"] .d12-cg-grid {
  justify-content: space-evenly;
}

/* ============================================================
   GRID BLOCK POSITION (do not center the whole grid unless asked)
   ============================================================ */

/* Start: pin the grid to the left (even when max-width is smaller) */
.d12-cards-grid[data-layout="grid"][data-justify="start"] .d12-cg-grid {
  margin-left: 0;
  margin-right: auto;
}

/* End: pin the grid to the right */
.d12-cards-grid[data-layout="grid"][data-justify="end"] .d12-cg-grid {
  margin-left: auto;
  margin-right: 0;
}

/* Center / space-* : keep it centered as a block (expected behavior) */
.d12-cards-grid[data-layout="grid"][data-justify="center"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-justify="space-between"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-justify="space-around"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-justify="space-evenly"] .d12-cg-grid {
  margin-left: auto;
  margin-right: auto;
}

/*
  AUTO columns:
  - default to start
  - optionally center items inside tracks when using centered alignment
*/
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"] .d12-cg-grid {
  justify-items: start;
}

.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="center"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="end"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-between"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-around"] .d12-cg-grid,
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-justify="space-evenly"] .d12-cg-grid {
  justify-items: center;
}

/*
  FIXED columns:
  cards should fill their tracks so the visible spacing is controlled
  by column-gap / row-gap, not by centering inside each track.
*/
.d12-cards-grid[data-layout="grid"][data-cols-mode="fixed"] .d12-cg-grid {
  justify-items: stretch;
}

/* ============================================================
   MOBILE: keep grid full-width, but keep alignment visible
   (alignment is only visible when items are not full-width)
   ============================================================ */
@media (max-width: 767px) {
  /* disable shrink-wrap so 1-column grids can go full width */
  .d12-cards-grid[data-layout="grid"] .d12-cg-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Default: behave like "start" */
  .d12-cards-grid[data-layout="grid"] .d12-cg-item {
    justify-self: start;
  }

  /* If user chooses center/space-*, center the item (useful if item has max-width) */
  .d12-cards-grid[data-layout="grid"][data-justify="center"] .d12-cg-item,
  .d12-cards-grid[data-layout="grid"][data-justify="space-between"] .d12-cg-item,
  .d12-cards-grid[data-layout="grid"][data-justify="space-around"] .d12-cg-item,
  .d12-cards-grid[data-layout="grid"][data-justify="space-evenly"] .d12-cg-item {
    justify-self: center;
  }

  /* True "end": push the item to the right */
  .d12-cards-grid[data-layout="grid"][data-justify="end"] .d12-cg-item {
    justify-self: end;
  }
}

/* Fixed columns (strict column count) */
.d12-cards-grid[data-layout="grid"][data-cols-mode="fixed"] .d12-cg-grid {
  grid-template-columns: repeat(var(--d12-cg-cols, 2), minmax(0, 1fr));
}

/* ============================================================
   AUTO COLUMNS (RESPONSIVE WITH SOFT COLUMN LIMIT)
   ============================================================ */

.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"] .d12-cg-grid {

  /*
    We calculate the maximum column width that still respects
    the preferred column count.

    Example (desktop):
    max columns = 4
    → container width / 4
  */

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        var(--d12-cg-auto-min, 280px),
        calc(100% / var(--d12-cg-auto-pref-cols, 4))
      )
    );
}

/* ============================================================
   AUTO COLUMN PREFERENCES (SOFT LIMITS – 7 BREAKPOINT SYSTEM)
   ============================================================ */

/* Ultra-wide screens */
@media (min-width: 2400px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 4;
  }
}

/* Large desktop */
@media (max-width: 2399px) and (min-width: 1920px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 4;
  }
}

/* Standard desktop */
@media (max-width: 1919px) and (min-width: 1367px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 4;
  }
}

/* Small desktop */
@media (max-width: 1366px) and (min-width: 1201px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 3;
  }
}

/* Tablet landscape */
@media (max-width: 1200px) and (min-width: 1025px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 2;
  }
}

/* Tablet portrait / large mobile */
@media (max-width: 1024px) and (min-width: 881px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 2;
  }
}

/* Mobile */
@media (max-width: 880px) {
  .d12-cards-grid[data-cols-mode="auto"] {
    --d12-cg-auto-pref-cols: 1;
  }
}

/* Auto columns + forced columns count (set via --d12-cg-auto-cols) */
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-auto-cols] .d12-cg-grid {
  grid-template-columns: repeat(var(--d12-cg-auto-cols, 3), minmax(var(--d12-cg-auto-min, 280px), 1fr));
  max-width: 100%;
}

/* Auto columns + JS balancing (only when JS sets data-auto-balance="1") */
.d12-cards-grid[data-layout="grid"][data-cols-mode="auto"][data-auto-balance="1"] .d12-cg-grid {
  grid-template-columns: repeat(var(--d12-cg-auto-cols, 2), minmax(var(--d12-cg-auto-min, 280px), 1fr));
}
/* ============================================================
   FLEX ENGINE
   ============================================================ */

/*
  Flex rows don't have a "row height" like CSS Grid.
  So .d12-cg-item height:100% (from base) can prevent equal-height stretching.

  Fix:
  - In flex mode, remove height:100% and let the row define the height.
  - align-items: stretch makes each item in the row match the tallest item.
*/
.d12-cards-grid[data-layout="flex"] .d12-cg-item {
  height: auto; /* overrides base height:100% */
  align-self: stretch; /* ensures the item participates in row stretching */
}

.d12-cards-grid[data-layout="flex"] .d12-cg-grid {
  display: flex;
  flex-wrap: wrap;

  /*
    IMPORTANT:
    In flex mode, we must prevent justify-content from distributing
    leftover space BETWEEN items (space-between/around/evenly),
    because that makes gaps look "elastic".

    So we only allow: start / center / end.
  */
  justify-content: var(--d12-cg-justify-flex, flex-start);

  /* equal-height per row */
  align-items: stretch;

  /* fixed spacing controlled ONLY by these variables */
  column-gap: var(--d12-cg-col-gap, 24px);
  row-gap: var(--d12-cg-row-gap, 24px);

  width: 100%;
  max-width: var(--d12-cg-max-w, none);
  margin-left: auto;
  margin-right: auto;
}

/* Map widget alignment to flex-safe values (no space-*) */
.d12-cards-grid[data-layout="flex"][data-justify="start"]  { --d12-cg-justify-flex: flex-start; }
.d12-cards-grid[data-layout="flex"][data-justify="center"] { --d12-cg-justify-flex: center; }
.d12-cards-grid[data-layout="flex"][data-justify="end"]    { --d12-cg-justify-flex: flex-end; }

/* If someone selects space-* in the UI, fall back to center (or start if you prefer) */
.d12-cards-grid[data-layout="flex"][data-justify="space-between"],
.d12-cards-grid[data-layout="flex"][data-justify="space-around"],
.d12-cards-grid[data-layout="flex"][data-justify="space-evenly"] {
  --d12-cg-justify-flex: center;
}

/* Fixed columns sizing in flex mode (gap-aware) */
/* STRICT: never allow more than --d12-cg-cols items per row */
.d12-cards-grid[data-layout="flex"][data-cols-mode="fixed"] .d12-cg-item {
  --d12-cg-fixed-w: calc((100% - ((var(--d12-cg-cols, 3) - 1) * var(--d12-cg-col-gap, 24px))) / var(--d12-cg-cols, 3));

  flex: 0 0 var(--d12-cg-fixed-w);
  width: var(--d12-cg-fixed-w);
  min-width: var(--d12-cg-fixed-w);
  max-width: var(--d12-cg-fixed-w);
}

/* Auto mode in flex: use min width to wrap naturally */
.d12-cards-grid[data-layout="flex"][data-cols-mode="auto"] .d12-cg-item {
  flex: 1 1 var(--d12-cg-auto-min, 280px);

  /* Respect Item Max Width (if set) */
  max-width: min(var(--d12-cg-item-max, 99999px), 100%);
}

/* ============================================================
   FLEX GRID – HOVER MOTION SHOULD HAPPEN ON THE GRID ITEM
   not only on the inner .d12-card
   ============================================================ */

.d12-cards-grid[data-layout="flex"] .d12-cg-item {
  position: relative;
  transition: transform 0.45s ease, z-index 0.01s linear;
  transform-origin: center center;
}

.d12-cards-grid[data-layout="flex"] .d12-cg-item:hover {
  transform: translateY(-6px) scale(1.03);
  z-index: 30;
}

/* ============================================================
   MOBILE PORTRAIT – DEFAULT CARD WIDTH SAFETY
   Prevent cards from becoming full-width on very small screens
   if Item Max Width is not explicitly set.
   ============================================================ */

@media (max-width: 767px) {

  .d12-cards-grid .d12-cg-item .d12-card {
    max-width: min(
      var(--d12-cg-item-max, 320px),
      100%
    );
  }

}

/* End of file cards-grid.css */