/* ==========================================================================
   Monal Group — Foundation 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.
   ========================================================================== */

/* ==========================================================================
   FOUNDATION  (Figma 1:1577 – 1:1594)
   Skewed shapes are decorative backgrounds; content sits in an unskewed container.
   ========================================================================== */
.monal-foundation { position: relative; margin-top: calc(var(--monal-u) * 5.2); }
.monal-foundation__shape { display: none; }
.monal-foundation__inner { padding-inline: var(--monal-inset); }
.monal-foundation__brand {
  position: relative; display: flex; align-items: center; min-height: calc(var(--monal-u) * 5.6); padding: 0 calc(var(--monal-u) * 7.6) 0 calc(var(--monal-u) * 1.2);
  background: var(--monal-c-green); border-radius: calc(var(--monal-u) * .3) calc(var(--monal-u) * 1) 0 0; color: var(--monal-c-cream);
}
.monal-foundation__title { font-family: var(--monal-f-serif); font-weight: 600; font-size: calc(var(--monal-u) * 2); line-height: 1; letter-spacing: -.02em; }
.monal-foundation__tile {
  position: absolute; right: calc(var(--monal-u) * 1.6); top: calc(var(--monal-u) * -1.5); display: grid; place-items: center;
  width: calc(var(--monal-u) * 5.6); height: calc(var(--monal-u) * 5.6); border-radius: calc(var(--monal-u) * .3) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * .3); background: var(--monal-c-orange); color: #fff;
}
.monal-foundation__tile .monal-i { width: 60%; height: 60%; }
.monal-foundation__content {
  display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: calc(var(--monal-u) * 1.2);
  margin-top: calc(var(--monal-u) * 1); padding: calc(var(--monal-u) * 1.8) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 1.6); border-radius: calc(var(--monal-u) * 1.2);
  border: 1px solid transparent;
  background: linear-gradient(#e9eeed, #e9eeed) padding-box, linear-gradient(135deg, rgba(44,90,79,.9), rgba(44,90,79,.1)) border-box;
}
.monal-foundation__text { grid-column: 1 / -1; text-align: center; font-size: calc(var(--monal-u) * 1.4); line-height: 1.3; color: var(--monal-c-muted); }
.monal-pillars { display: flex; justify-content: space-between; gap: calc(var(--monal-u) * 1); padding-right: calc(var(--monal-u) * 1); }
.monal-pillars li { display: flex; flex-direction: column; align-items: center; gap: calc(var(--monal-u) * .3); font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1.15); letter-spacing: -.02em; }
.monal-pillars .monal-i { width: calc(var(--monal-u) * 2.6); height: calc(var(--monal-u) * 2.6); }
/* Size only. The base sheet already leaves the circle transparent at rest;
   repeating it here matched the specificity of .monal-arrow-circle:hover and,
   loading later, cancelled the orange fill every other arrow on the page
   gets on hover. */
.monal-foundation .monal-arrow-circle { width: calc(var(--monal-u) * 4.5); height: calc(var(--monal-u) * 4.5); }

@media (min-width: 768px) {
  .monal-foundation__title { font-size: calc(var(--monal-u) * 2.8); }
  .monal-pillars li { font-size: calc(var(--monal-u) * 1.5); }
  .monal-pillars .monal-i { width: calc(var(--monal-u) * 3.2); height: calc(var(--monal-u) * 3.2); }
}
@media (min-width: 1200px) {
  .monal-foundation { margin: 0; height: calc(var(--monal-u) * 20.6); overflow: hidden; }
  .monal-foundation__shape {
    display: block; position: absolute; top: 0; bottom: 0;
    transform: skewX(-13deg); transform-origin: 0 100%;
  }
  .monal-foundation__shape--l { left: calc(var(--monal-u) * -10); width: calc(50% - calc(var(--monal-u) * 96) + calc(var(--monal-u) * 10) + calc(var(--monal-u) * 81)); background: var(--monal-c-green); border-radius: 0 calc(var(--monal-u) * 3) calc(var(--monal-u) * 3) 0; }
  .monal-foundation__shape--r {
    left: calc(50% - calc(var(--monal-u) * 96) + calc(var(--monal-u) * 83.3)); right: calc(var(--monal-u) * -10); border-radius: calc(var(--monal-u) * 3) 0 0 calc(var(--monal-u) * 3);
    border: 1px solid transparent;
    background: linear-gradient(#e9eeed, #e9eeed) padding-box, linear-gradient(90deg, rgba(44,90,79,1) 0%, rgba(44,90,79,.4) 30%, rgba(44,90,79,0) 100%) border-box;
  }
  .monal-foundation__inner {
    position: relative; height: 100%; padding: 0;
    display: grid; grid-template-columns: calc(var(--monal-u) * 73.6) 1fr; align-items: center;
  }
  .monal-foundation__brand { min-height: 0; padding: 0; background: none; border-radius: 0; gap: calc(var(--monal-u) * 3.9); align-items: flex-start; }
  .monal-foundation__brand .monal-foundation__title { margin-top: calc(var(--monal-u) * 3.3); }
  .monal-foundation__tile { position: static; width: calc(var(--monal-u) * 12.3); height: calc(var(--monal-u) * 12.3); border-radius: calc(var(--monal-u) * .4) calc(var(--monal-u) * 2) calc(var(--monal-u) * 2) calc(var(--monal-u) * .4); }
  .monal-foundation__title { font-family: var(--monal-f-display); font-weight: 400; font-size: calc(var(--monal-u) * 5.6); line-height: calc(var(--monal-u) * 5); letter-spacing: -.04em; }
  .monal-foundation__content {
    display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  }
  .monal-foundation__text { flex: none; width: calc(var(--monal-u) * 20.6); text-align: left; font-size: max(calc(var(--monal-u) * 2.4), 14px); line-height: calc(var(--monal-u) * 3.4); color: var(--monal-c-muted); }
  .monal-pillars { display: grid; grid-template-columns: repeat(var(--monal-pillars-count, 4), calc(var(--monal-u) * 10.33)); justify-items: center; gap: 0; padding: 0; margin: calc(var(--monal-u) * 1) auto 0 calc(var(--monal-u) * 3.9); }
  .monal-pillars li { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 4.2); gap: 0; letter-spacing: -.04em; }
  .monal-pillars .monal-i { width: calc(var(--monal-u) * 4.9); height: calc(var(--monal-u) * 4.9); margin-bottom: calc(var(--monal-u) * -.5); }
  .monal-foundation .monal-arrow-circle { width: calc(var(--monal-u) * 8.9); height: calc(var(--monal-u) * 8.9); }
}

/* ---------- Mobile/tablet specifics (Figma 1:1848 part) ---------- */
@media (max-width: 1199px) {
  .monal-foundation__inner { padding-right: 0; }
  .monal-foundation__brand { margin-right: var(--monal-inset); border-radius: calc(var(--monal-u) * .8) calc(var(--monal-u) * .8) calc(var(--monal-u) * 1.2) 0; }
  .monal-foundation__title { font-size: calc(var(--monal-u) * 2.2); font-weight: 700; }
  .monal-foundation__content {
    grid-template-columns: auto 1fr; justify-items: start; column-gap: calc(var(--monal-u) * 2.3);
    padding: calc(var(--monal-u) * 1.6) 0 calc(var(--monal-u) * 1) calc(var(--monal-u) * 1.6); border-right: 0; border-radius: calc(var(--monal-u) * 1.2) 0 0 calc(var(--monal-u) * 1.2);
    background: linear-gradient(#e9eeed, #e9eeed) padding-box, linear-gradient(90deg, rgba(44,90,79,1), rgba(44,90,79,.35) 40%, rgba(44,90,79,0)) border-box;
  }
  .monal-foundation__text { justify-self: stretch; font-size: calc(var(--monal-u) * 1.5); line-height: calc(var(--monal-u) * 2); padding-right: calc(var(--monal-u) * 1.6); }
  .monal-pillars { display: grid; grid-template-columns: repeat(var(--monal-pillars-count, 4), calc(var(--monal-u) * 6)); justify-items: center; gap: 0; padding: 0; }
  .monal-pillars li { font-size: calc(var(--monal-u) * 1.4); gap: calc(var(--monal-u) * .2); letter-spacing: -.04em; }
  .monal-pillars .monal-i { width: calc(var(--monal-u) * 3); height: calc(var(--monal-u) * 3); }
}