/*
 * mod_jpc_feature_imagetext - default styles: an image tile and a text block side by side, optionally reversed.
 * Designed for the Grand Mesa Music distributor rows (hairline under each row, rounded green-washed image tile, pill button).
 *
 * Easy to override: change the --jpc-fit-* tokens below from your template CSS, from the module's "Custom CSS" box
 * ({module} = this module), or replace the rules. Literal values live only in the token block; the site's own tokens are
 * used when they exist.
 */

.jpc-fit {
  /* tokens */
  --jpc-fit-row: var(--sp-fluid-row, clamp(2rem, 5vw, 3.25rem));
  --jpc-fit-rule: var(--bw-hair, 1px) solid var(--color-wash-edge, #CBDACB);
  --jpc-fit-gap-y: var(--sp-16, 2rem);
  --jpc-fit-gap-x: var(--sp-fluid-gap, clamp(2rem, 6vw, 5rem));
  --jpc-fit-col: var(--flex-dist-col, 1 1 21rem);
  --jpc-fit-tile-min: var(--size-dist-media, 13rem);
  --jpc-fit-tile-pad: var(--sp-12, 1.5rem);
  --jpc-fit-tile-radius: var(--br-xl, 22px);
  --jpc-fit-tile-border: var(--bw-hair, 1px) solid var(--color-wash-edge, #CBDACB);
  --jpc-fit-tile-bg: var(--grad-media, radial-gradient(circle at 30% 20%, #fff 0, #E8F1E8 70%));
  --jpc-fit-tile-shadow: var(--shadow-tile, 0 10px 30px #344E2C1F);
  --jpc-fit-img-radius: var(--br-md, 6px);
  --jpc-fit-head-gap: var(--sp-h3-tight, 0.4em);
  --jpc-fit-btn-gap: var(--sp-4, 0.5rem);
  --jpc-fit-btn-pad: var(--pad-btn, 0.7rem 1.5rem);
  --jpc-fit-btn-radius: var(--br-pill, 999px);
  --jpc-fit-btn-bg: var(--color-primary-dark, #344E2C);
  --jpc-fit-btn-bg-hover: var(--color-primary, #416C41);
  --jpc-fit-btn-color: var(--color-on-primary, #fff);
  --jpc-fit-btn-font: var(--font-head, system-ui, sans-serif);
  --jpc-fit-btn-size: var(--fs-lg, 1.1rem);
  --jpc-fit-btn-weight: var(--fw-bold, 700);

  padding-block: var(--jpc-fit-row);
  border-bottom: var(--jpc-fit-rule);
}

.jpc-fit__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jpc-fit-gap-y) var(--jpc-fit-gap-x);
}
.jpc-fit--left .jpc-fit__row { flex-direction: row; }
.jpc-fit--right .jpc-fit__row { flex-direction: row-reverse; }

.jpc-fit__media,
.jpc-fit__content { flex: var(--jpc-fit-col); min-width: 0; }

.jpc-fit__media {
  display: grid;
  place-items: center;
  min-height: var(--jpc-fit-tile-min);
  padding: var(--jpc-fit-tile-pad);
  border-radius: var(--jpc-fit-tile-radius);
  border: var(--jpc-fit-tile-border);
  background: var(--jpc-fit-tile-bg);
  box-shadow: var(--jpc-fit-tile-shadow);
}
.jpc-fit__link { display: block; }
.jpc-fit__img { display: block; max-width: 100%; height: auto; border-radius: var(--jpc-fit-img-radius); }

.jpc-fit__text h2,
.jpc-fit__text h3,
.jpc-fit__text h4 { margin-bottom: var(--jpc-fit-head-gap); }

.jpc-fit__actions { text-align: center; }
.jpc-fit__button {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin: var(--jpc-fit-btn-gap) 0 0;
  padding: var(--jpc-fit-btn-pad);
  border: 0;
  border-radius: var(--jpc-fit-btn-radius);
  background: var(--jpc-fit-btn-bg);
  color: var(--jpc-fit-btn-color);
  font-family: var(--jpc-fit-btn-font);
  font-size: var(--jpc-fit-btn-size);
  font-weight: var(--jpc-fit-btn-weight);
  line-height: normal;
  text-align: center;
  text-decoration: none;
}
.jpc-fit__button:hover { background: var(--jpc-fit-btn-bg-hover); color: var(--jpc-fit-btn-color); }