/**
 * Baby in Brazil Stats module styles.
 *
 * The module intentionally uses CSS Grid and custom properties instead of a
 * Bootstrap grid dependency. Joomla templates can override the theme tokens at
 * the template level while each module instance can control columns and spacing
 * through inline CSS variables generated from admin params.
 *
 * @package     Joomla.Site
 * @subpackage  mod_bib_stats
 * @since       1.0.0
 */

.bib-stats {
  --bib-stats-color: var(--theme-color, #0f78c8);
  --bib-stats-color-rgb: var(--theme-color-rgb, 15, 120, 200);
  --bib-stats-color-secondary: var(--theme-color-secondary, #12497f);
  --bib-stats-color-secondary-rgb: var(--theme-color-secondary-rgb, 18, 73, 127);
  --bib-stats-surface: var(--theme-surface, #ffffff);
  --bib-stats-surface-soft: var(--theme-surface-soft, #eaf4fb);
  --bib-stats-text: var(--theme-text, #122330);
  --bib-stats-text-soft: var(--theme-text-soft, #54616a);
  --bib-stats-text-muted: var(--theme-text-muted, #767f87);
  --bib-stats-line: var(--theme-line-soft, #e3eef6);
  --bib-stats-on-color: var(--theme-on-color, #ffffff);
  --bib-stats-radius: var(--theme-radius-md, 12px);
  --bib-stats-radius-sm: var(--theme-radius-sm, 8px);
  --bib-stats-shadow: var(--gallery-shadow-soft, 0 8px 25px rgba(18, 35, 48, .06));

  margin-block: 20px;
  color: var(--bib-stats-text);
}

.bib-stats * {
  box-sizing: border-box;
}

.bib-stats a {
  color: inherit;
  text-decoration: none;
}

.bib-stats__container {
  width: 100%;
}

.bib-stats__container--bounded {
  max-width: var(--bib-stats-container-width, 1180px);
  margin-inline: auto;
}

.bib-stats__header {
  max-width: 760px;
  margin: 0 0 18px;
}

.bib-stats--centered .bib-stats__header,
.bib-stats--layout-centered .bib-stats__header {
  margin-inline: auto;
  text-align: center;
}

.bib-stats__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--bib-stats-color);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bib-stats__title {
  margin: 0;
  color: var(--bib-stats-text);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.045em;
}

.bib-stats__text {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--bib-stats-text-soft);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}

.bib-stats--centered .bib-stats__text,
.bib-stats--layout-centered .bib-stats__text {
  margin-inline: auto;
}

.bib-stats__items {
  display: grid;
  gap: var(--bib-stats-gap, 16px);
}

.bib-stats__items--exact {
  grid-template-columns: repeat(var(--bib-stats-cols-mobile, 1), minmax(0, 1fr));
}

.bib-stats__items--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bib-stats-item-min-width, 180px)), 1fr));
}

.bib-stats__item {
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px 22px;
  border: 1px solid var(--bib-stats-line);
  border-radius: var(--bib-stats-radius);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--bib-stats-shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bib-stats__item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bib-stats-color-rgb), .24);
}

.bib-stats__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  color: var(--bib-stats-color);
  border-radius: 50%;
  background: rgba(var(--bib-stats-color-rgb), .09);
}

.bib-stats__icon svg {
  width: 42px;
  height: 42px;
  stroke: currentColor;
  stroke-width: 1.65;
  fill: none;
}

.bib-stats__icon svg * {
  fill: none;
}

.bib-stats__body {
  min-width: 0;
}

.bib-stats__value {
  display: block;
  color: var(--bib-stats-text);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.bib-stats__suffix {
  margin-left: 1px;
}

.bib-stats__label {
  display: block;
  margin-top: 6px;
  color: var(--bib-stats-text-soft);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 760;
}

.bib-stats__description {
  display: block;
  margin-top: 5px;
  color: var(--bib-stats-text-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}

.bib-stats--compact .bib-stats__item,
.bib-stats--layout-compact .bib-stats__item {
  grid-template-columns: 46px 1fr;
  min-height: 86px;
  padding: 14px 16px;
}

.bib-stats--compact .bib-stats__icon,
.bib-stats--layout-compact .bib-stats__icon {
  width: 46px;
  height: 46px;
}

.bib-stats--compact .bib-stats__icon svg,
.bib-stats--layout-compact .bib-stats__icon svg {
  width: 29px;
  height: 29px;
}

.bib-stats--dark,
.bib-stats--layout-dark {
  --bib-stats-surface: var(--theme-dark-surface, #12497f);
  --bib-stats-text: #ffffff;
  --bib-stats-text-soft: rgba(255, 255, 255, .82);
  --bib-stats-text-muted: rgba(255, 255, 255, .66);
  --bib-stats-line: rgba(255, 255, 255, .16);
  --bib-stats-shadow: 0 18px 45px rgba(5, 25, 45, .18);
}

.bib-stats--dark .bib-stats__container,
.bib-stats--layout-dark .bib-stats__container {
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--bib-stats-radius);
  background: linear-gradient(135deg, var(--bib-stats-color-secondary), var(--bib-stats-color));
}

.bib-stats--dark .bib-stats__item,
.bib-stats--layout-dark .bib-stats__item {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}

.bib-stats--dark .bib-stats__icon,
.bib-stats--layout-dark .bib-stats__icon {
  color: var(--bib-stats-on-color);
  background: rgba(255, 255, 255, .13);
}

.bib-stats--cards .bib-stats__item,
.bib-stats--layout-cards .bib-stats__item {
  grid-template-columns: 1fr;
  justify-items: start;
  min-height: 190px;
  padding: 22px;
  background: var(--bib-stats-surface);
}

.bib-stats--strip .bib-stats__items,
.bib-stats--layout-strip .bib-stats__items {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--bib-stats-line);
  border-radius: var(--bib-stats-radius);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--bib-stats-shadow);
}

.bib-stats--strip .bib-stats__item,
.bib-stats--layout-strip .bib-stats__item {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.bib-stats--strip .bib-stats__item:not(:last-child),
.bib-stats--layout-strip .bib-stats__item:not(:last-child) {
  border-right: 1px solid var(--bib-stats-line);
}

@media (min-width: 576px) {
  .bib-stats__items--exact {
    grid-template-columns: repeat(var(--bib-stats-cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .bib-stats__items--exact {
    grid-template-columns: repeat(var(--bib-stats-cols-desktop, 4), minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .bib-stats__items--exact {
    grid-template-columns: repeat(var(--bib-stats-cols-wide, 4), minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .bib-stats__item {
    grid-template-columns: 56px 1fr;
    padding: 16px;
  }

  .bib-stats__icon {
    width: 56px;
    height: 56px;
  }

  .bib-stats__icon svg {
    width: 35px;
    height: 35px;
  }

  .bib-stats--strip .bib-stats__item:not(:last-child),
  .bib-stats--layout-strip .bib-stats__item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--bib-stats-line);
  }
}