/* ==========================================================================
   Texium Solutions — Bento Stat widget
   Consumes design tokens from theme.css only. One card per grid cell —
   arrange several inside a native Elementor Container to build the
   overall bento layout; this file only styles the card itself.
   ========================================================================== */

.texium-bento {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--texium-surface);
  border: 1px solid var(--texium-border);
  border-radius: var(--texium-radius-lg);
  overflow: hidden;
}

/* When several Bento Stat cards sit in one flex column beside a taller
   card elsewhere in the row, let their Elementor wrappers grow to fill
   the column's full (stretched) height instead of leaving a gap. */

.elementor-widget-texium-bento-stat {
  flex-grow: 1;
  flex-basis: auto;
}

/* Chart variant */

.texium-bento__media--chart {
  padding: var(--texium-space-lg) var(--texium-space-lg) 0;
}

.texium-bento__chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 160;
}

/* Icon variant */

.texium-bento__media--icon {
  padding: var(--texium-space-lg) var(--texium-space-lg) 0;
}

.texium-bento__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--texium-radius-md);
  background: var(--texium-background-soft);
  color: var(--texium-primary);
}

.texium-bento__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.texium-bento__icon i {
  font-size: 1.5rem;
}

/* Photo variant */

.texium-bento--photo {
  position: relative;
}

.texium-bento__media--photo {
  overflow: hidden;
}

.texium-bento__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texium-bento--photo .texium-bento__body {
  position: relative;
  z-index: 1;
}

/* Right/left/background share overlay positioning; Top stays in normal flow. */

.texium-bento--photo-right .texium-bento__media--photo,
.texium-bento--photo-left .texium-bento__media--photo,
.texium-bento--photo-background .texium-bento__media--photo {
  position: absolute;
  top: 0;
  width: 45%;
  height: 100%;
}

/* Top: photo spans the card width above the body, like the chart/icon media. */

.texium-bento--photo-top .texium-bento__media--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Right: photo pinned right, masked into the surface on its left edge,
   text keeps clear by capping its width. */

.texium-bento--photo-right .texium-bento__media--photo {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

.texium-bento--photo-right .texium-bento__body {
  max-width: 60%;
}

/* Left: mirror of right. */

.texium-bento--photo-left .texium-bento__media--photo {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}

.texium-bento--photo-left .texium-bento__body {
  max-width: 60%;
  margin-left: auto;
}

/* Background: photo spans the full card, dimmed so text stays readable
   over any part of it; body is free to use the full width. */

.texium-bento--photo-background .texium-bento__media--photo {
  left: 0;
  width: 100%;
}

.texium-bento--photo-background .texium-bento__media--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--texium-surface) 55%, transparent) 0%, var(--texium-surface) 100%);
}

/* Body: number, label, description */

.texium-bento__body {
  display: flex;
  flex-direction: column;
  gap: var(--texium-space-xs);
  padding: var(--texium-space-lg);
  margin-top: auto;
}

.texium-bento__number {
  font-family: var(--texium-font-heading);
  font-size: var(--texium-font-size-h2);
  font-weight: var(--texium-weight-bold);
  line-height: var(--texium-leading-tight);
  color: var(--texium-heading);
}

.texium-bento__number-highlight {
  color: var(--texium-primary);
}

.texium-bento__label {
  margin: 0;
  font-size: var(--texium-font-size-md);
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-heading);
}

.texium-bento__desc {
  margin: 0;
  font-size: var(--texium-font-size-sm);
  line-height: var(--texium-leading-body);
  color: var(--texium-text-muted);
}

/* Chart/icon variants: media sits above the body with room to breathe;
   photo variant overlaps instead (handled above), so it's excluded. */

.texium-bento--chart .texium-bento__body,
.texium-bento--icon .texium-bento__body,
.texium-bento--photo-top .texium-bento__body {
  margin-top: var(--texium-space-lg);
}

@media (max-width: 600px) {
  .texium-bento__media--photo {
    position: static;
    width: 100%;
    height: 180px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .texium-bento__media--photo::after {
    display: none;
  }

  .texium-bento--photo-right .texium-bento__body,
  .texium-bento--photo-left .texium-bento__body {
    max-width: none;
    margin-left: 0;
  }
}