/*
 * Promo Block / Promo Grid tile styles. ONE source of truth.
 * Synced by scripts/sync-promo-modules.mjs into:
 *   - chameleon-modules/src/shared/promo-tiles-css.generated.ts (SDK runtime)
 *   - chameleon-wordpress-plugin/assets/css/chameleon-promo-tiles.css (first paint, no FOUC)
 *
 * Every value comes from a --chm-promo-* custom property that
 * shared/contracts/promo-settings.ts (TS) and class-chameleon-promo.php (PHP)
 * both emit on .chm-promo-root. Defaults live in shared/module-config.json only.
 */
[data-chameleon] .chm-promo-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
[data-chameleon] .chm-promo-root *,
[data-chameleon] .chm-promo-root *::before,
[data-chameleon] .chm-promo-root *::after {
  box-sizing: border-box;
}
[data-chameleon] .chm-promo-root .chm-promo-heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

/* Grid geometry (desktop). Tall tiles are two rows plus the gap. */
[data-chameleon] .chm-promo-grid {
  --chm-promo-p: var(--chm-promo-pad);
  --chm-promo-bo: var(--chm-promo-btn-offset);
  --chm-promo-ts: var(--chm-promo-title-size);
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(var(--chm-cols, 3), minmax(0, 1fr));
  grid-auto-rows: var(--chm-promo-height);
  grid-auto-flow: dense;
  column-gap: var(--chm-promo-col-gap, var(--chm-promo-gap));
  row-gap: var(--chm-promo-gap);
}
[data-chameleon] .chm-promo-grid[data-ratio] {
  grid-auto-rows: auto;
}
@media (min-width: 1025px) {
  [data-chameleon] .chm-promo-grid[data-layout="bento-tall-stacked"] > :nth-child(4n + 1) { grid-column: 1; }
  [data-chameleon] .chm-promo-grid[data-layout="bento-tall-stacked"] > :nth-child(4n + 2),
  [data-chameleon] .chm-promo-grid[data-layout="bento-tall-stacked"] > :nth-child(4n + 3) { grid-column: 2; }
  [data-chameleon] .chm-promo-grid[data-layout="bento-tall-stacked"] > :nth-child(4n + 4) { grid-column: 3; }
  [data-chameleon] .chm-promo-grid[data-layout="bento-left"] > :nth-child(3n + 1) { grid-column: 1; }
  [data-chameleon] .chm-promo-grid[data-layout="bento-left"] > :nth-child(3n + 2),
  [data-chameleon] .chm-promo-grid[data-layout="bento-left"] > :nth-child(3n + 3) { grid-column: 2; }
}

/* Tile link: the whole tile is one anchor. */
[data-chameleon] .chm-promo-root .chm-promo-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
  border-radius: var(--chm-promo-radius);
}
[data-chameleon] .chm-promo-root .chm-promo-link[data-span="2"] {
  grid-row: span 2;
}
[data-chameleon] .chm-promo-grid[data-ratio] .chm-promo-link {
  aspect-ratio: var(--chm-promo-ratio);
}
[data-chameleon] .chm-promo-grid[data-min-height] .chm-promo-link {
  min-height: var(--chm-promo-min-height);
}
[data-chameleon] .chm-promo-root .chm-promo-tile {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--chm-promo-radius);
  background: var(--chameleon-primary, #111111);
  color: #fff;
}
[data-chameleon] .chm-promo-root .chm-promo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  /* Must beat the SDK base [data-chameleon] img { height: auto !important },
     or the photo stops at its natural height and the tile shows a flat band. */
  height: 100% !important;
  max-width: none !important;
  margin: 0;
  object-fit: cover;
  object-position: var(--chm-promo-img-pos);
}
[data-chameleon] .chm-promo-root .chm-promo-overlay {
  position: absolute;
  inset: 0;
  background: var(--chm-promo-overlay);
  pointer-events: none;
}

/* Copy block. Position comes from data-text-position on the grid. */
[data-chameleon] .chm-promo-root .chm-promo-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: var(--chm-promo-p);
}
[data-chameleon] .chm-promo-grid[data-text-position="center"] .chm-promo-copy { justify-content: center; }
[data-chameleon] .chm-promo-grid[data-text-position^="bottom"] .chm-promo-copy { justify-content: flex-end; }
[data-chameleon] .chm-promo-grid[data-text-position="center"] .chm-promo-copy,
[data-chameleon] .chm-promo-grid[data-text-position$="-center"] .chm-promo-copy { align-items: center; text-align: center; }
[data-chameleon] .chm-promo-grid[data-text-position$="-right"] .chm-promo-copy { align-items: flex-end; text-align: right; }

[data-chameleon] .chm-promo-root .chm-promo-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-family: var(--chameleon-tr-moduleHeader-font, var(--chameleon-font, Inter)), system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: var(--chameleon-tr-moduleHeader-size, var(--chm-promo-ts)) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #fff !important;
}
[data-chameleon] .chm-promo-root .chm-promo-subtitle {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--chameleon-tr-moduleMeta-font, var(--chameleon-font, Inter)), system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: var(--chameleon-tr-moduleMeta-size, var(--chm-promo-subtitle-size)) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
}

/* Button: pill pinned to the bottom edge for top positions, in flow otherwise. */
[data-chameleon] .chm-promo-root .chm-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 0;
  padding: 4px 14px;
  border: 0;
  border-radius: var(--chm-promo-btn-radius);
  background: var(--chm-promo-btn-bg, #1e2a44);
  color: var(--chm-promo-btn-fg, #ffffff);
  font-family: var(--chameleon-tr-submitBtn-font, var(--chameleon-font, Inter)), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
}
[data-chameleon] .chm-promo-grid[data-btn-style="light"] .chm-promo-btn {
  background: var(--chm-promo-btn-bg, #ffffff);
  color: var(--chm-promo-btn-fg, #1f2421);
}
[data-chameleon] .chm-promo-grid[data-btn-style="outline"] .chm-promo-btn {
  background: var(--chm-promo-btn-bg, transparent);
  color: var(--chm-promo-btn-fg, #ffffff);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
[data-chameleon] .chm-promo-grid[data-btn-style="link"] .chm-promo-btn {
  background: var(--chm-promo-btn-bg, transparent);
  color: var(--chm-promo-btn-fg, #ffffff);
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-chameleon] .chm-promo-grid[data-text-position^="top"] .chm-promo-btn {
  position: absolute;
  bottom: var(--chm-promo-bo);
  margin: 0;
}
[data-chameleon] .chm-promo-grid[data-text-position="top-left"] .chm-promo-btn { left: var(--chm-promo-p); }
[data-chameleon] .chm-promo-grid[data-text-position="top-right"] .chm-promo-btn { right: var(--chm-promo-p); }
[data-chameleon] .chm-promo-grid[data-text-position="top-center"] .chm-promo-btn { left: 50%; transform: translateX(-50%); }

/* Tablet */
@media (max-width: 1024px) {
  [data-chameleon] .chm-promo-grid {
    --chm-promo-p: var(--chm-promo-pad-tablet);
    grid-template-columns: repeat(var(--chm-cols-tablet, 2), minmax(0, 1fr));
    grid-auto-rows: var(--chm-promo-height-tablet);
  }
  [data-chameleon] .chm-promo-grid[data-ratio] {
    grid-auto-rows: auto;
  }
}

/* Mobile (single column by default, see data-cols-mobile) */
@media (max-width: 767px) {
  [data-chameleon] .chm-promo-grid {
    --chm-promo-p: var(--chm-promo-pad-mobile);
    --chm-promo-bo: var(--chm-promo-btn-offset-mobile);
    --chm-promo-ts: var(--chm-promo-title-size-mobile);
    grid-template-columns: repeat(var(--chm-cols-mobile, 1), minmax(0, 1fr));
    grid-auto-rows: var(--chm-promo-height-mobile);
  }
  [data-chameleon] .chm-promo-grid[data-cols-mobile="1"] {
    grid-auto-rows: auto;
  }
  [data-chameleon] .chm-promo-grid[data-cols-mobile="1"]:not([data-ratio]) .chm-promo-link {
    height: var(--chm-promo-height-mobile);
  }
  [data-chameleon] .chm-promo-grid[data-cols-mobile="1"]:not([data-ratio]) .chm-promo-link[data-span="2"] {
    grid-row: auto;
    height: var(--chm-promo-height-mobile-tall);
  }
  [data-chameleon] .chm-promo-grid[data-ratio] {
    grid-auto-rows: auto;
  }
}