/* ===========================================================
   MODULE: ABOUT-US-SECTION (layout + stats)
   Path: /modules/about-us-section/about-us-section.css
   =========================================================== */

.atx-about-us {
  /* Hook in to global tokens */
  --atx-about-bg: var(--page-bg);
  --atx-about-text: var(--font-body-color);
  --atx-about-muted: var(--font-body-color);
  --atx-about-ink: var(--text-main);
  --atx-about-radius-lg: 8px;
  --atx-about-shadow: var(--shadow-soft);

  background: var(--atx-about-bg);
  color: var(--atx-about-text);
}

/* Inner uses global .wrap for width + padding */
.atx-about-us__wrap {
  /* .wrap already handles max-width + padding */
}

/* SECTION HEADING (uses global .atx-section-heading) */
.atx-about-us__title {
  text-align: center;
}

/* SPLITS (image + text) ----------------------------------- */

.atx-about-us__split {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--gap-lg);
}

@media (min-width: 768px) {
  .atx-about-us__split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Generic text & image blocks */

.atx-about-us__heading {
  /* Typography comes from .atx-content-heading */
  color: var(--atx-about-ink);
  text-align: left; /* LEFT aligned content heading for each block */
}

.atx-about-us__text p {
  color: var(--atx-about-muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
  text-align: justify; /* Justified text in blocks */
}

.atx-about-us__media {
  width: 100%;
}

.atx-about-us__image {
  border-radius: var(--atx-about-radius-lg);
  box-shadow: var(--atx-about-shadow);
  background: center/cover no-repeat;
  min-height: 300px;
}


/* On mobile: show image before text for block 1 (image-right) */
@media (max-width: 767.98px) {
  .atx-about-us__split--image-right .atx-about-us__media {
    order: -1;
  }
}


/* Order variations (handled i HTML) */
.atx-about-us__split--image-right { /* text först, bild sist */ }
.atx-about-us__split--image-left  { /* bild först, text sist */ }

/* ===========================================================
   STATS / COUNTERS
   =========================================================== */

.atx-about-stats {
  background: transparent;
}

/* Heading above counters (SECTION heading style) */
.atx-about-stats__title {
  text-align: center;
}

/* Inner also uses .wrap by markup */
.atx-about-stats__wrap {
  width: 100%;
}

/* Centered full-width row that wraps only when needed */
.atx-about-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--gap-sm);
  width: 100%;
}

/* Cards span the available width and wrap when space is too small */
.atx-about-stat {
  /* Same size for all counters */
  --atx-about-icon-size: var(--icon-circle-size-md);
  --atx-about-num-size: clamp(26px, 3.8vw, 36px);

  /* Accent color for icon circle (per-item, via inline var) */
  --atx-about-stat-accent: var(--are-color);

  flex: 1 1 0;
  min-width: 180px;

  background: var(--are-panel-color-1); /* PANEL is not red */
  border: 1px solid var(--border-light);
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow-soft);
  padding: 1.4rem 1.1rem 1.25rem;
  text-align: center;
  color: var(--text-main);

  /* Fade-in + slide-up baseline */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease var(--atx-about-delay, 0ms),
    transform 0.6s ease var(--atx-about-delay, 0ms),
    box-shadow 0.18s ease;
}

.atx-about-stat.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hover: lätt lyft */
.atx-about-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

/* Icon circle ------------------------------------------------ */

.atx-about-stat__icon {
  width: var(--atx-about-icon-size);
  height: var(--atx-about-icon-size);
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  background: var(--atx-about-stat-accent); /* CIRCLE uses brand/per-item color */
  color: #000;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}

.atx-about-stat__icon img {
  width: 60%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Number & label -------------------------------------------- */

.atx-about-stat__num {
  font-weight: 900;
  color: var(--text-main);
  font-size: var(--atx-about-num-size);
  line-height: 1;
  letter-spacing: 0.5px;
}

.atx-about-stat__label {
  margin-top: 0.4rem;
  color: var(--muted, #666);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Size modifiers (kept but visually unified) ---------------- */

.atx-about-stat--sm,
.atx-about-stat--md,
.atx-about-stat--lg {
  /* All counters now share the same size,
     but these classes remain for potential future tweaks. */
}