/* ==========================================================================
   Monal Group — Family of Brands 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.
   ========================================================================== */

/* ==========================================================================
   BRANDS  (Figma 1:1213 / 1:1450 / 1:1611 / grid)
   ========================================================================== */
.monal-brands { position: relative; padding-top: calc(var(--monal-u) * 9); }
.monal-brands__bg {
  position: absolute; left: 0; right: 0; top: calc(var(--monal-u) * 32); height: calc(var(--monal-u) * 96); z-index: -1;
  border-radius: calc(var(--monal-u) * 4) calc(var(--monal-u) * 4) 0 0;
  background: linear-gradient(to bottom, #d9e1df 0%, #e9eeed 45%, rgba(255,255,255,0) 100%);
}
.monal-brands__head { text-align: center; }
.monal-brands__title { font-weight: 500; font-size: calc(var(--monal-u) * 3); line-height: calc(var(--monal-u) * 3.7); letter-spacing: -.04em; }
.monal-brands__title em { font-family: var(--monal-f-serif); font-weight: 600; font-size: 1.15em; letter-spacing: -.04em; }
.monal-brands__title .monal-line:first-child { overflow: visible; clip-path: inset(calc(var(--monal-u) * -10) calc(var(--monal-u) * -3) 0 calc(var(--monal-u) * -3)); } /* peacock rises above the line box */
.monal-peacock { position: relative; display: inline-block; width: calc(var(--monal-u) * 7); height: calc(var(--monal-u) * 3.7); margin-left: calc(var(--monal-u) * .4); vertical-align: top; }
.monal-peacock__tile { position: absolute; left: 0; right: 0; bottom: calc(var(--monal-u) * .2); height: calc(var(--monal-u) * 3.5); border-radius: calc(var(--monal-u) * 1.7) 0 calc(var(--monal-u) * 1.7) 0; background: rgba(237,120,44,.2); /* Figma 1:1219 */ }
.monal-peacock__bird, .monal-peacock__body {
  position: absolute; left: calc(var(--monal-u) * 1.2); bottom: calc(var(--monal-u) * .2); width: calc(var(--monal-u) * 5.1); height: calc(var(--monal-u) * 6.6);
  background: var(--monal-c-black);
  -webkit-mask: url(../../assets/monal/icons/peacock.svg) center bottom / contain no-repeat;
          mask: url(../../assets/monal/icons/peacock.svg) center bottom / contain no-repeat;
}
.monal-peacock__body { /* Figma 1:1224 cream body fill (#FEF2EA) under the line art */
  background: var(--monal-c-cream);
  -webkit-mask-image: url(../../assets/monal/icons/peacock-body.svg); mask-image: url(../../assets/monal/icons/peacock-body.svg);
}
.monal-brands__lead { 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) * 28.6); margin: calc(var(--monal-u) * 1.9) auto 0; }

/* Category tabs — mobile: active bar + compact tiles */
.monal-cats { position: relative; display: grid; grid-template-columns: 1fr repeat(var(--monal-cats-rest, 2), auto); gap: calc(var(--monal-u) * 1); margin-top: calc(var(--monal-u) * 4.4); }
.monal-cat { position: relative; text-align: left; }
.monal-cat__tile {
  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) calc(var(--monal-u) * 1.6) calc(var(--monal-u) * .3); border: 1px solid var(--monal-c-orange); background: #fff; color: var(--monal-c-green);
  transition: background-color .35s, color .35s, transform .4s var(--monal-ease-out);
}
/* Mobile frame 1:1824 draws the glyph at ~55% of the 56 tile (ink 28-32);
   70% made every category icon visibly oversized in its tile. */
.monal-cat__tile .monal-i { width: 55%; height: 55%; }
.monal-cat__title, .monal-cat__text { display: none; }
.monal-cat:not(.monal-is-active) { grid-row: 2; align-self: start; margin-top: calc(var(--monal-u) * .7); }
.monal-cat.monal-is-active {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: center; min-height: calc(var(--monal-u) * 5.4); padding: 0 calc(var(--monal-u) * 7) 0 calc(var(--monal-u) * 1.2);
  background: var(--monal-c-green); color: #fff; border-radius: calc(var(--monal-u) * .8) calc(var(--monal-u) * .8) calc(var(--monal-u) * 1.2) 0;
}
.monal-cat.monal-is-active .monal-cat__title { display: block; font-family: var(--monal-f-serif); font-weight: 600; font-size: calc(var(--monal-u) * 2); line-height: 1; }
.monal-cat.monal-is-active .monal-cat__tile { position: absolute; right: calc(var(--monal-u) * 1.6); top: calc(var(--monal-u) * -1.5); background: var(--monal-c-orange); border-color: var(--monal-c-orange); color: #fff; }
.monal-cats__desc { grid-column: 1; grid-row: 2; font-size: calc(var(--monal-u) * 1.4); line-height: calc(var(--monal-u) * 2); color: var(--monal-c-muted); padding: calc(var(--monal-u) * .5) 0 0 calc(var(--monal-u) * 1.3); max-width: calc(var(--monal-u) * 19.5); }

.monal-subtabs { display: flex; justify-content: center; gap: calc(var(--monal-u) * .8); margin: calc(var(--monal-u) * 3.4) 0 calc(var(--monal-u) * 3); }
.monal-subtab {
  height: calc(var(--monal-u) * 3); padding: 0 calc(var(--monal-u) * 1.65); border-radius: var(--monal-leaf);
  font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1.8); line-height: 1; text-transform: uppercase; letter-spacing: -.02em;
  border: 1px solid rgba(237, 120, 44, .4); color: var(--monal-c-ink);
  transition: background-color .3s, border-color .3s;
}
.monal-subtab.monal-is-active { background: var(--monal-c-orange); border-color: var(--monal-c-orange); }
.monal-subtab:not(.monal-is-active):hover { border-color: var(--monal-c-orange); }

.monal-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--monal-u) * 3) calc(var(--monal-u) * 1.3); }
.monal-venue__link { display: block; }
.monal-venue__media {
  height: calc(var(--monal-u) * 10.5); border: 1px solid rgba(44, 90, 79, .2); border-radius: 0 calc(var(--monal-u) * 2.4) 0 calc(var(--monal-u) * 2.4); overflow: hidden;
  transition: transform .5s var(--monal-ease-out), box-shadow .5s var(--monal-ease-out);
}
.monal-venue__link:hover .monal-venue__media { transform: translateY(calc(var(--monal-u) * -.4)); box-shadow: 0 calc(var(--monal-u) * 1.6) calc(var(--monal-u) * 3) rgba(44, 90, 79, .12); }
.monal-venue__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * .6); margin-top: calc(var(--monal-u) * 1.2); }
.monal-venue__name { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1.5); line-height: 1.1; letter-spacing: -.04em; color: var(--monal-c-black); }
.monal-venue .monal-arrow-circle { width: calc(var(--monal-u) * 2.2); height: calc(var(--monal-u) * 2.2); }
.monal-brand-grid .monal-venue.monal-is-extra { display: none; }
.monal-brand-grid.monal-is-expanded .monal-venue.monal-is-extra { display: block; }

@media (min-width: 768px) {
  .monal-brands__title { font-size: calc(var(--monal-u) * 5.6); line-height: calc(var(--monal-u) * 6.6); }
  .monal-peacock { width: calc(var(--monal-u) * 10.4); height: calc(var(--monal-u) * 6.6); }
  .monal-peacock__tile { height: calc(var(--monal-u) * 5.2); border-radius: calc(var(--monal-u) * 2.6) 0 calc(var(--monal-u) * 2.6) 0; }
  .monal-peacock__bird, .monal-peacock__body { left: calc(var(--monal-u) * 1.9); width: calc(var(--monal-u) * 7.4); height: calc(var(--monal-u) * 9.6); }
  .monal-brands__lead { max-width: calc(var(--monal-u) * 52); }
  .monal-brand-grid { grid-template-columns: repeat(3, 1fr); gap: calc(var(--monal-u) * 3.6) calc(var(--monal-u) * 2.4); }
  .monal-venue__media { height: calc(var(--monal-u) * 18); border-radius: 0 calc(var(--monal-u) * 3.6) 0 calc(var(--monal-u) * 3.6); }
  .monal-venue__name { font-size: calc(var(--monal-u) * 2.2); }
  .monal-venue .monal-arrow-circle { width: calc(var(--monal-u) * 3.6); height: calc(var(--monal-u) * 3.6); }
}
@media (min-width: 1200px) {
  .monal-brands { padding-top: calc(var(--monal-u) * 22.9); }
  .monal-brands .monal-container { padding-inline: 0; }
  .monal-brands__bg { top: calc(var(--monal-u) * 74.2); height: calc(var(--monal-u) * 96.2); border-radius: calc(var(--monal-u) * 15) calc(var(--monal-u) * 15) 0 0; background: linear-gradient(to bottom, rgba(44,90,79,.2), rgba(44,90,79,0)); /* Figma 1:1449 */ }
  .monal-brands__title { font-size: calc(var(--monal-u) * 8.87); line-height: calc(var(--monal-u) * 10.5); }
  .monal-brands__title em { font-size: calc(var(--monal-u) * 10.2); line-height: 1; }
  .monal-brands__title .monal-line { height: calc(var(--monal-u) * 10.5); }
  .monal-peacock { width: calc(var(--monal-u) * 16.4); height: calc(var(--monal-u) * 10.5); margin-left: calc(var(--monal-u) * .8); } /* 'The Monal' ends 1083, tile at 1106 */
  .monal-peacock__tile { bottom: 0; height: calc(var(--monal-u) * 8.2); border-radius: calc(var(--monal-u) * 4) 0 calc(var(--monal-u) * 4) 0; }
  .monal-peacock__bird, .monal-peacock__body { left: calc(var(--monal-u) * 2.8); bottom: 0; width: calc(var(--monal-u) * 11.6); height: calc(var(--monal-u) * 15.1); }
  .monal-brands__lead { max-width: calc(var(--monal-u) * 64.8); margin-top: calc(var(--monal-u) * 3); font-size: max(calc(var(--monal-u) * 2.2), 15px); line-height: calc(var(--monal-u) * 3.4); }

  .monal-cats { grid-template-columns: repeat(var(--monal-cats-count, 3), 1fr); gap: calc(var(--monal-u) * 2); margin-top: calc(var(--monal-u) * 12.4); }
  .monal-cat, .monal-cat.monal-is-active, .monal-cat:not(.monal-is-active) {
    grid-column: auto; grid-row: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: calc(var(--monal-u) * 16.6); margin: 0; padding: calc(var(--monal-u) * 2.8) calc(var(--monal-u) * 4) 0;
    border-radius: calc(var(--monal-u) * 3); color: var(--monal-c-ink);
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, rgba(44,90,79,.2), rgba(44,90,79,1)) border-box;
    transition: background .45s var(--monal-ease-out), color .45s var(--monal-ease-out), box-shadow .45s var(--monal-ease-out);
  }
  .monal-cat:hover { box-shadow: 0 calc(var(--monal-u) * 2) calc(var(--monal-u) * 4) rgba(44, 90, 79, .1); }
  .monal-cat.monal-is-active { background: var(--monal-c-green); border-color: var(--monal-c-green); color: #fff; }
  .monal-cat__title, .monal-cat.monal-is-active .monal-cat__title {
    display: block; font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 3.2); line-height: calc(var(--monal-u) * 4.2); letter-spacing: -.04em; color: var(--monal-c-green);
    transition: font-size .45s var(--monal-ease-out), color .45s;
  }
  .monal-cat__title, .monal-cat.monal-is-active .monal-cat__title { font-family: var(--monal-f-display); font-weight: 400; }
  .monal-cat.monal-is-active .monal-cat__title { font-size: calc(var(--monal-u) * 4); letter-spacing: 0; color: #fff; }
  .monal-cat__text { display: block; max-width: calc(var(--monal-u) * 39); margin-top: calc(var(--monal-u) * 1.2); font-size: max(calc(var(--monal-u) * 2), 13px); line-height: calc(var(--monal-u) * 2.8); }
  .monal-cat__tile, .monal-cat.monal-is-active .monal-cat__tile {
    position: absolute; top: calc(var(--monal-u) * -5.8); right: calc(var(--monal-u) * 2.6); 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) * 1.4) calc(var(--monal-u) * 2.4) calc(var(--monal-u) * .4);
  }
  .monal-cat__tile .monal-i { width: 60%; height: 60%; }
  .monal-cats__desc { display: none; }

  .monal-subtabs { gap: calc(var(--monal-u) * 1.3); margin: calc(var(--monal-u) * 7.5) 0 calc(var(--monal-u) * 5.7); }
  .monal-subtab { height: calc(var(--monal-u) * 6.4); padding: 0 calc(var(--monal-u) * 2.4); font-size: calc(var(--monal-u) * 4.04); border-radius: calc(var(--monal-u) * .4) calc(var(--monal-u) * .4) calc(var(--monal-u) * 1.6) calc(var(--monal-u) * .4); }
  .monal-subtab[data-monal-sub="dining"] { width: calc(var(--monal-u) * 18.7); padding: 0; }
  .monal-subtab[data-monal-sub="qsr"] { width: calc(var(--monal-u) * 11.9); padding: 0; }

  .monal-brand-grid { grid-template-columns: repeat(4, 1fr); gap: 0 calc(var(--monal-u) * 4.6); row-gap: calc(var(--monal-u) * 14); position: relative; }
  .monal-brand-grid::before { /* divider between rows (Figma 1:1575) */
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--monal-u) * 36.3); height: 1px; background: rgba(30, 25, 22, .1);
  }
  .monal-brand-grid .monal-venue.monal-is-extra { display: block; }
  .monal-venue__media { height: calc(var(--monal-u) * 22); border-radius: 0 calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5); }
  .monal-venue__foot { margin-top: calc(var(--monal-u) * 2); }
  /* 3.3u keeps every supplied brand name on one line inside the 219px name
     column (the longest, "The Monal Rawalpindi", measures 207px) without
     shrinking the display serif further than it can carry. Line height is
     unchanged, so the card returns to the single-line height of the design. */
  .monal-venue__name { font-size: calc(var(--monal-u) * 3.3); line-height: calc(var(--monal-u) * 3.2); }
  .monal-venue .monal-arrow-circle { width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); }
  .monal-brands .monal-show-more { display: none; }
  .monal-brands { padding-bottom: calc(var(--monal-u) * 11.6); }
}

@media (max-width: 1199px) {
  .monal-brands .monal-container { padding-inline: calc(var(--monal-u) * 1.2); }
}

/* --------------------------------------------------------------------------
   Widget additions (the static build only ever rendered placeholder blocks)
   - real card images fill the media box exactly like the placeholder does
   - cards filtered out by the active category / sub-tab stay hidden even when
     the mobile grid is expanded
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Widget addition — a real image fills the media box exactly like the design's
   placeholder block. The image is taken out of flow: inside the grid that
   centres the placeholder label, height:100% would resolve against an
   auto-sized row and the picture would keep its intrinsic ratio and overflow.
   -------------------------------------------------------------------------- */
.monal-venue__media { display: grid; position: relative; overflow: hidden; }
.monal-venue__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.monal-brand-grid .monal-venue[hidden] { display: none !important; }