/* ==========================================================================
   Monal Group — At a Glance widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   GLANCE  (Figma 1:867)
   ========================================================================== */
.monal-glance { position: relative; padding-top: calc(var(--monal-u) * 5); overflow-x: clip; }
.monal-glance__wordmark { display: none; }
.monal-glance__label { display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--monal-u) * .6); text-align: center; }
.monal-glance__label p { font-size: calc(var(--monal-u) * 1.1); font-weight: 300; line-height: 1.4; text-transform: uppercase; }
.monal-glance__label strong { font-weight: 600; }
.monal-glance__head { text-align: center; padding: calc(var(--monal-u) * 2.8) var(--monal-gutter) calc(var(--monal-u) * 4); }
.monal-glance__head .monal-h2 { margin-bottom: calc(var(--monal-u) * 1.4); }
.monal-glance__body { font-size: calc(var(--monal-u) * 1.6); line-height: calc(var(--monal-u) * 2.2); color: var(--monal-c-muted); max-width: calc(var(--monal-u) * 30); margin: 0 auto; }
.monal-glance__media { order: 3; }
.monal-glance { display: flex; flex-direction: column; }
.monal-stats {
  display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(var(--monal-u) * 4.8);
  margin: 0 calc(var(--monal-u) * 1.2); padding: calc(var(--monal-u) * 5.6) calc(var(--monal-u) * 1) calc(var(--monal-u) * 4.3);
  border-top: 1px solid var(--monal-c-orange);
  background: linear-gradient(to bottom, #f4f4f4, #fbfbfb 70%, #fff);
  text-align: center;
}
.monal-stats__item { display: flex; flex-direction: column; align-items: center; gap: calc(var(--monal-u) * 1.2); }
.monal-stats__value { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 2.2); line-height: 1.2; letter-spacing: -.04em; }
.monal-stats__label { font-size: calc(var(--monal-u) * 1.6); line-height: 1.3; color: var(--monal-c-muted); }
.monal-glance__media { --monal-figure-margin: 0 calc(var(--monal-u) * 1.3) 0 0; }
.monal-glance__media img { width: 100%; height: calc(var(--monal-u) * 20); object-fit: cover; object-position: 50% 15%; border-top-right-radius: calc(var(--monal-u) * 4); } /* solved vs Figma 1:1826 */

@media (min-width: 768px) {
  .monal-stats { grid-template-columns: repeat(var(--monal-stats-count, 4), 1fr); margin: 0 var(--monal-gutter); }
  .monal-glance__body { max-width: calc(var(--monal-u) * 56); }
  .monal-glance__media { --monal-figure-margin: 0 var(--monal-gutter) 0 0; }
  .monal-glance__media img { height: calc(var(--monal-u) * 36); }
}
@media (min-width: 1200px) {
  .monal-glance {
    display: grid; max-width: calc(var(--monal-u) * 192); margin: 0 auto; padding-top: calc(var(--monal-u) * 19);
    grid-template-columns: calc(var(--monal-u) * 41.2) calc(var(--monal-u) * 11.2) calc(var(--monal-u) * 121.4) 1fr;
    grid-template-rows: auto calc(var(--monal-u) * 23.1);
  }
  .monal-glance__wordmark { display: block; position: absolute; top: calc(var(--monal-u) * 18.9); left: calc(var(--monal-u) * 142); width: calc(var(--monal-u) * 50.8); height: auto; pointer-events: none; }
  .monal-glance__label { grid-column: 1; grid-row: 1; align-self: start; align-items: flex-start; flex-direction: column; gap: calc(var(--monal-u) * 2.9); padding: calc(var(--monal-u) * .5) 0 0 calc(var(--monal-u) * 9.2); text-align: left; }
  .monal-glance__label p { font-size: max(calc(var(--monal-u) * 2.2), 14px); line-height: calc(var(--monal-u) * 2.8); }
  .monal-glance__label strong { display: block; }
  .monal-glance__head { grid-column: 3; grid-row: 1; text-align: left; padding: 0 0 calc(var(--monal-u) * 5.9); }
  .monal-glance__head .monal-h2 { margin-bottom: calc(var(--monal-u) * 5.9); }
  .monal-glance__body { max-width: calc(var(--monal-u) * 77.4); margin: 0; font-size: max(calc(var(--monal-u) * 2.2), 15px); line-height: calc(var(--monal-u) * 3.6); }
  .monal-glance__media { grid-column: 1; grid-row: 1 / 3; align-self: end; --monal-figure-margin: 0; height: calc(var(--monal-u) * 40.4); }
  .monal-glance__media img { height: calc(var(--monal-u) * 40.4); border-top-right-radius: calc(var(--monal-u) * 7); object-position: 50% 0; } /* Figma 1:893: 412×412 image, top-aligned in a 404 mask */
  .monal-stats {
    grid-column: 3; grid-row: 2; grid-template-columns: repeat(var(--monal-stats-count, 4), calc(var(--monal-u) * 31.1)); row-gap: 0;
    margin: 0; padding: calc(var(--monal-u) * 6.2) 0 0 calc(var(--monal-u) * 5.9); text-align: left;
    border-top: 0; border-left: 1px solid rgba(237, 120, 44, .55);
    background: linear-gradient(90deg, rgba(120,120,120,.1), rgba(120,120,120,0)); /* Figma 1:869 */
  }
  .monal-stats__item { align-items: flex-start; gap: calc(var(--monal-u) * 1.8); }
  .monal-stats__value { font-size: calc(var(--monal-u) * 3.4); line-height: calc(var(--monal-u) * 5.2); }
  .monal-stats__label { font-size: max(calc(var(--monal-u) * 2.4), 15px); line-height: calc(var(--monal-u) * 5.2); }
}