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

/* ==========================================================================
   PRESENCE  (Figma 1:1095 / 1:1155 / 1:1103 / 1:1074)
   ========================================================================== */
.monal-presence { position: relative; padding-top: calc(var(--monal-u) * 8); }
.monal-presence__title .monal-flag {
  display: inline-block; vertical-align: -.12em; width: 1.2em; height: auto; margin: 0 .05em;
  border-radius: .25em 0 .25em 0; border: 1px solid #d9d9d9;
  box-shadow: 0 .35em .6em -.2em rgba(40, 170, 60, .45);
}
.monal-presence__lead { margin-top: calc(var(--monal-u) * 1.4); 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); }
.monal-city { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * 1.6); margin-top: calc(var(--monal-u) * 4.8); }
.monal-city__name { display: flex; align-items: center; gap: calc(var(--monal-u) * 1.6); }
.monal-city__icon { width: calc(var(--monal-u) * 5); height: calc(var(--monal-u) * 4.2); background: var(--monal-city-icon, url(../../assets/monal/icons/city-islamabad.svg)) left center / contain no-repeat; flex: none; }
.monal-city h3 { font-family: var(--monal-f-display); font-weight: 400; font-size: calc(var(--monal-u) * 3.4); line-height: 1; letter-spacing: -.04em; }
.monal-city .monal-round-nav { display: none; }
.monal-places {
  display: flex; gap: calc(var(--monal-u) * 1.7); margin-top: calc(var(--monal-u) * 1.8); margin-right: calc(var(--monal-gutter) * -1); padding-right: var(--monal-gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.monal-places::-webkit-scrollbar { display: none; }
.monal-place { flex: 0 0 calc(var(--monal-u) * 14.2); scroll-snap-align: start; }
.monal-place a { display: block; }
.monal-place__media { height: calc(var(--monal-u) * 11.7); border-radius: 0 calc(var(--monal-u) * 2) 0 0; background: rgba(44,90,79,.1); /* Figma 1:1160 */ font-size: calc(var(--monal-u) * 1.2); transition: transform .5s var(--monal-ease-out); }
.monal-place a:hover .monal-place__media { transform: translateY(calc(var(--monal-u) * -.3)); }
.monal-place__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * .8); margin-top: calc(var(--monal-u) * 1.4); }
.monal-place__name { font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1.4); line-height: 1.25; letter-spacing: -.04em; color: var(--monal-c-black); }
.monal-place .monal-arrow-circle { width: calc(var(--monal-u) * 3.8); height: calc(var(--monal-u) * 3.8); }
.monal-places.monal-is-switching { opacity: 0; }

/* Map */
.monal-map { position: relative; margin-top: calc(var(--monal-u) * 3.6); pointer-events: none; }
.monal-map .monal-pin, .monal-map__zoom { pointer-events: auto; }
.monal-map__zoom {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--monal-u) * .4);
  font-size: calc(var(--monal-u) * 1.2); line-height: 1.2; font-weight: 600; text-transform: uppercase; text-align: left;
}
.monal-map__zoom .monal-i { width: calc(var(--monal-u) * 3); height: calc(var(--monal-u) * 3); padding: calc(var(--monal-u) * .7); border: 1px solid var(--monal-c-ink); border-radius: 50%; background-clip: content-box; }
/* The URL comes from the widget as an inline custom property: a url() written
   here would be resolved against monal-base.css (where --monal-i is used),
   not against this file. */
.monal-map__zoom[aria-pressed="true"] .monal-i { --monal-i: var(--monal-zoom-minus); }
.monal-map__viewport { overflow: hidden; }
.monal-map__stage {
  --monal-w: 820; --monal-h: 685;
  position: relative; width: 100%; aspect-ratio: 820 / 685; transform-origin: 62% 30%;
  transition: transform .8s var(--monal-ease-out);
}
.monal-map.monal-is-zoomed .monal-map__stage { transform: scale(1.7); }
.monal-map__shape {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  filter: drop-shadow(calc(var(--monal-u) * 5.3) calc(var(--monal-u) * 5.7) calc(var(--monal-u) * 6) rgba(0,0,0,.07)); /* Figma 1:1124 DROP_SHADOW r120 #000 7% (53,57) */
}
.monal-map__bird {
  position: absolute; z-index: 0; left: calc(135 / 820 * 100%); top: calc(8 / 685 * 100%);
  width: calc(247 / 820 * 100%); height: calc(497 / 685 * 100%);
  background: #cfdcd8; opacity: .7; /* Figma 1:1105 pale engraving */
  -webkit-mask: url(../../assets/monal/icons/map-peacock.svg) center / contain no-repeat;
          mask: url(../../assets/monal/icons/map-peacock.svg) center / contain no-repeat;
}
.monal-map__word {
  position: absolute; z-index: 2; right: 0; bottom: 14%; width: 50%; opacity: .5; pointer-events: none;
}
/* The marker is nothing but a dot. The button itself is an invisible box that
   exists to be clickable: no background, no border, no radius ring, no shadow.
   Everything you can see is ::before, and the pulse rides on that dot's own
   box-shadow so the halo grows from the marker rather than from a 25px box. */
.monal-pin {
  position: absolute; z-index: 3; left: calc(var(--monal-x) / 820 * 100%); top: calc(var(--monal-y) / 685 * 100%);
  width: calc(var(--monal-u) * 3.3); height: calc(var(--monal-u) * 3.3); margin: calc(var(--monal-u) * -1.65) 0 0 calc(var(--monal-u) * -1.65);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  --monal-pulse-to: calc(var(--monal-u) * .85);
  transition: transform .35s var(--monal-ease-out);
}
/* The dot. */
.monal-pin::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: calc(var(--monal-u) * .6); height: calc(var(--monal-u) * .6);
  border-radius: 50%; background: var(--monal-c-ink);
  animation: monal-pin-pulse 2s ease-out infinite;
}

/* The cities cluster tightly around Islamabad, so the pulse is deliberately
   short-range and low-opacity, and neighbours are offset in time: three
   overlapping haloes never read as one blob. */
@keyframes monal-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(237, 120, 44, .45); }
  /* The halo is spent well before the cycle ends; the rest of the loop is a
     pause, which is what stops six markers reading as one restless cluster. */
  45%  { box-shadow: 0 0 0 var(--monal-pulse-to) rgba(237, 120, 44, 0); }
  100% { box-shadow: 0 0 0 var(--monal-pulse-to) rgba(237, 120, 44, 0); }
}
.monal-pin:nth-of-type(3n + 2)::before { animation-delay: 1.07s; }
.monal-pin:nth-of-type(3n)::before     { animation-delay: 2.13s; }
@media (prefers-reduced-motion: reduce) {
  .monal-pin::before { animation: none; }
}

/* State resets in the base sheet would repaint the button on hover/focus, so
   the marker stays background-free through every state. */
.monal-pin:hover, .monal-pin:focus, .monal-pin:active { background: none; box-shadow: none; }
.monal-pin:hover { transform: scale(1.15); }
.monal-pin.monal-is-active::before { background: var(--monal-c-orange); }
/* Smaller and a shade heavier than the original: at this density the old
   11px serif ran into its neighbours. The white halo keeps it legible where a
   label crosses the map outline. */
.monal-pin__label {
  position: absolute; left: 50%; bottom: calc(100% + calc(var(--monal-u) * .55)); transform: translateX(-50%);
  font-family: var(--monal-f-serif); font-size: calc(var(--monal-u) * 1.25); font-weight: 500; line-height: calc(var(--monal-u) * 1.5); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
  color: var(--monal-c-ink); pointer-events: none;
  text-shadow: 0 0 calc(var(--monal-u) * .35) #fff, 0 0 calc(var(--monal-u) * .7) #fff;
}

/* Label anchors. The pin stays exactly where the map puts it; only the label
   steps aside, which is what pulls the Islamabad / Rawalpindi / Murree cluster
   apart without moving any city off its real position. */
.monal-pin[data-monal-label-pos="below"] .monal-pin__label {
  bottom: auto; top: calc(100% + calc(var(--monal-u) * .55));
}
.monal-pin[data-monal-label-pos="left"] .monal-pin__label {
  left: auto; right: calc(100% + calc(var(--monal-u) * .5));
  bottom: 50%; transform: translateY(50%);
}
.monal-pin[data-monal-label-pos="right"] .monal-pin__label {
  left: calc(100% + calc(var(--monal-u) * .5));
  bottom: 50%; transform: translate(0, 50%);
}

/* Only a label sitting above the pin is in the pointer card's way. */
.monal-pin.monal-is-active:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label {
  bottom: calc(100% + calc(var(--monal-u) * 6.2));
}
.monal-pin-card {
  position: absolute; z-index: 4; width: calc(var(--monal-u) * 7.4); height: calc(var(--monal-u) * 8.3); margin-left: calc(var(--monal-u) * -3.7); margin-top: calc(var(--monal-u) * -8.25); padding: calc(var(--monal-u) * .8);
  left: calc(var(--monal-x, 534.5) / 820 * 100%); top: calc(var(--monal-y, 190.5) / 685 * 100%);
  background: url(../../assets/monal/icons/map-pin-frame.svg) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--monal-u) * .6) calc(var(--monal-u) * 1.2) rgba(0,0,0,.12));
  transition: left .6s var(--monal-ease-out), top .6s var(--monal-ease-out);
  pointer-events: none;
}
.monal-pin-card img { width: calc(var(--monal-u) * 5.8); height: calc(var(--monal-u) * 5.8); object-fit: cover; border-radius: calc(var(--monal-u) * 1.27); }

/* --------------------------------------------------------------------------
   Reveal mode: pointers stay out of the way until a location is hovered,
   focused or selected, so the map reads as the design intends and only the
   place being explored shows its picture.
   -------------------------------------------------------------------------- */
.monal-map--reveal .monal-pin-card {
  opacity: 0;
  transform: translateY(calc(var(--monal-u) * .8)) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity .3s var(--monal-ease-out), transform .35s var(--monal-ease-out);
}
.monal-map--reveal .monal-pin-card.monal-is-shown {
  opacity: 1;
  transform: none;
}
/* The marker itself is only ~25px across and the design makes its label
   click-through, so the pointer was hard to summon. A transparent hit area
   around each marker, plus a hoverable label, makes the whole cluster a
   target — nothing about the visual size changes. */
.monal-pin::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--monal-u) * 4.8); height: calc(var(--monal-u) * 4.8);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.monal-map--reveal .monal-pin__label { pointer-events: auto; cursor: pointer; }
/* The label steps aside for the pointer, exactly as it does for the active pin. */
.monal-map--reveal .monal-pin:hover:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label,
.monal-map--reveal .monal-pin:focus-visible:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label {
  bottom: calc(100% + calc(var(--monal-u) * 6.2));
}
@media (prefers-reduced-motion: reduce) {
  .monal-map--reveal .monal-pin-card { transform: none; }
}
/* A city with no photo still gets its pointer: the frame is filled with the
   design's placeholder tint (the same rgba(44,90,79,.1) the venue and story
   cards use) and marked with a small picture glyph. */
.monal-pin-card--empty::before {
  content: ""; display: block;
  width: calc(var(--monal-u) * 5.8); height: calc(var(--monal-u) * 5.8);
  border-radius: calc(var(--monal-u) * 1.27);
  background: rgba(44, 90, 79, .1);
  box-shadow: inset 0 0 0 1px rgba(44, 90, 79, .2);
}
.monal-pin-card--empty::after {
  content: ""; position: absolute;
  left: 50%; top: calc(var(--monal-u) * 3.7);
  transform: translate(-50%, -50%);
  width: calc(var(--monal-u) * 2.6); height: calc(var(--monal-u) * 2.6);
  background: var(--monal-c-green-70);
  -webkit-mask: var(--monal-ph-glyph) center / contain no-repeat;
          mask: var(--monal-ph-glyph) center / contain no-repeat;
}

/* Contact actions */
.monal-contact-panel {
  margin: calc(var(--monal-u) * 1.6) var(--monal-inset) 0; padding: calc(var(--monal-u) * 1.8) calc(var(--monal-u) * 1) calc(var(--monal-u) * 1.6); border-radius: calc(var(--monal-u) * .4);
  background: linear-gradient(90deg, rgba(44,90,79,.1), rgba(44,90,79,.04));
}
.monal-contact-actions { display: flex; justify-content: center; gap: calc(var(--monal-u) * 3.6); }
.monal-contact-actions a {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--monal-u) * .9); text-align: center;
  font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 1.2); line-height: 1.25; letter-spacing: -.02em; text-transform: uppercase;
}
.monal-ring {
  display: grid; place-items: center; width: calc(var(--monal-u) * 5); height: calc(var(--monal-u) * 5); border-radius: 50%;
  border: 1px solid #d9d9d9; background: rgba(255,255,255,.6);
  transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--monal-ease-out);
}
.monal-ring .monal-i { width: calc(var(--monal-u) * 2.6); height: calc(var(--monal-u) * 2.6); }
.monal-contact-actions a:hover .monal-ring { background: var(--monal-c-green); border-color: var(--monal-c-green); color: #fff; transform: translateY(calc(var(--monal-u) * -.3)); }

@media (min-width: 768px) {
  .monal-presence__lead { max-width: calc(var(--monal-u) * 46); }
  .monal-city .monal-round-nav { display: flex; }
  .monal-place { flex-basis: calc(var(--monal-u) * 20); }
  .monal-place__media { height: calc(var(--monal-u) * 16.6); border-radius: 0 calc(var(--monal-u) * 3) 0 0; }
  .monal-place__name { font-size: calc(var(--monal-u) * 2); }
}
@media (min-width: 1200px) {
  .monal-presence { padding-top: calc(var(--monal-u) * 21); padding-bottom: calc(var(--monal-u) * 24.6); }
  .monal-presence__grid { position: relative; }
  .monal-presence__col { width: calc(var(--monal-u) * 64.8); }
  .monal-presence__title { font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2); }
  .monal-presence__title .monal-flag { width: calc(var(--monal-u) * 7.4); margin: 0 calc(var(--monal-u) * -.5) 0 calc(var(--monal-u) * .4); vertical-align: calc(var(--monal-u) * -.1); border-radius: calc(var(--monal-u) * 1) 0 calc(var(--monal-u) * 1) 0; }
  .monal-presence__lead { margin-top: calc(var(--monal-u) * 2); max-width: none; font-size: max(calc(var(--monal-u) * 2.2), 15px); line-height: calc(var(--monal-u) * 3.4); }
  .monal-city { margin-top: calc(var(--monal-u) * 3.9); padding-bottom: calc(var(--monal-u) * 3); border-bottom: 1px solid rgba(30,25,22,.1); align-items: flex-end; }
  .monal-city__name { align-self: stretch; }
  .monal-city h3 { margin-top: calc(var(--monal-u) * 2.8); }
  .monal-city__name { gap: calc(var(--monal-u) * 2.9); }
  .monal-city__icon { width: calc(var(--monal-u) * 8.4); height: calc(var(--monal-u) * 7); }
  .monal-city h3 { font-size: calc(var(--monal-u) * 6); line-height: calc(var(--monal-u) * 4.2); }
  .monal-places { margin: calc(var(--monal-u) * 4.2) 0 0; padding: 0; gap: calc(var(--monal-u) * 2.4); overflow: visible; }
  .monal-place { flex: 0 0 calc(var(--monal-u) * 20); }
  .monal-place__media { height: calc(var(--monal-u) * 16.6); font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8); }
  .monal-place__foot { margin-top: calc(var(--monal-u) * 1.2); }
  .monal-place__name { font-size: calc(var(--monal-u) * 2.8); line-height: calc(var(--monal-u) * 3.2); }
  .monal-place .monal-arrow-circle { width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); }

  .monal-map { position: absolute; z-index: 2; left: calc(var(--monal-u) * 69.2); top: calc(var(--monal-u) * -3.2); width: calc(var(--monal-u) * 82); margin: 0; }
  .monal-map__zoom { display: none; }
  .monal-map__word { display: none; }
  .monal-pin { width: calc(var(--monal-u) * 3.3); height: calc(var(--monal-u) * 3.3); }

  .monal-contact-panel {
    position: absolute; margin: 0; border-radius: 0; padding: calc(var(--monal-u) * 5.4) 0 0 calc(var(--monal-u) * 20.3);
    z-index: 1; top: calc(calc(var(--monal-u) * 21) + calc(var(--monal-u) * 38.6)); left: calc(50% + calc(var(--monal-u) * 24.1)); right: 0; height: calc(var(--monal-u) * 22.6);
    background: linear-gradient(90deg, rgba(44,90,79,.1), rgba(44,90,79,0));
  }
  .monal-contact-actions { justify-content: flex-start; gap: calc(var(--monal-u) * 2); }
  .monal-contact-actions li:nth-child(1) a { width: calc(var(--monal-u) * 7.8); }
  .monal-contact-actions li:nth-child(2) a { width: calc(var(--monal-u) * 10.1); }
  .monal-contact-actions li:nth-child(3) a { width: calc(var(--monal-u) * 10.9); }
  .monal-contact-actions a { gap: calc(var(--monal-u) * 1.1); font-size: calc(var(--monal-u) * 2); line-height: calc(var(--monal-u) * 2.3); }
  .monal-ring { width: calc(var(--monal-u) * 7); height: calc(var(--monal-u) * 7); background: transparent; }
  .monal-ring .monal-i { width: calc(var(--monal-u) * 3.7); height: calc(var(--monal-u) * 3.7); }
}

@media (max-width: 1199px) {
  .monal-map { max-width: calc(var(--monal-u) * 64); margin-inline: auto; }
  .monal-contact-panel { max-width: calc(var(--monal-u) * 64); margin-inline: auto; }
  /* The tablet map is capped at 64u, so the markers sit proportionally closer
     together than on desktop: the labels come down a step to match, and the
     side-anchored ones tuck in tighter against their own pin. */
  .monal-pin__label { font-size: calc(var(--monal-u) * 1.02); line-height: calc(var(--monal-u) * 1.3); }
  .monal-pin[data-monal-label-pos="left"] .monal-pin__label { right: calc(100% + calc(var(--monal-u) * .35)); }
  .monal-pin[data-monal-label-pos="right"] .monal-pin__label { left: calc(100% + calc(var(--monal-u) * .35)); }
}
@media (max-width: 767px) {
  /* Figma mobile map: country spans x 10–350 → 820×685 box ≈ 358px wide from x 3 */
  .monal-map { margin: calc(var(--monal-u) * 3.7) calc(var(--monal-gutter) * -1 + calc(var(--monal-u) * 1.4)) 0 calc(var(--monal-gutter) * -1 + calc(var(--monal-u) * .3)); }
  .monal-map__zoom { top: calc(var(--monal-u) * 3); left: calc(var(--monal-u) * 2); font-size: calc(var(--monal-u) * 1.4); }
  .monal-map__zoom .monal-i { width: calc(var(--monal-u) * 3.2); height: calc(var(--monal-u) * 3.2); }
  .monal-map__word { right: calc(var(--monal-u) * .5); bottom: 0; width: 50%; height: auto; }
  .monal-pin { width: calc(var(--monal-u) * 1.4); height: calc(var(--monal-u) * 1.4); margin: calc(var(--monal-u) * -.7) 0 0 calc(var(--monal-u) * -.7); }
  /* The mobile map packs the markers ~36px apart, so the touch target is kept
     just above the 24px minimum rather than overlapping its neighbours. */
  .monal-pin::after { width: calc(var(--monal-u) * 2.8); height: calc(var(--monal-u) * 2.8); }
  .monal-pin::before { width: calc(var(--monal-u) * .5); height: calc(var(--monal-u) * .5); }
  .monal-pin { --monal-pulse-to: calc(var(--monal-u) * .42); }
  /* The mobile markers were never the crowded ones, and the original .65u
     read as 6.5px. The label anchors give enough room to go the other way
     here, so the phone map is the one place the text gets bigger. */
  .monal-pin__label { font-size: calc(var(--monal-u) * .82); line-height: 1.1; letter-spacing: 0; bottom: calc(100% + calc(var(--monal-u) * .25)); }
  .monal-pin[data-monal-label-pos="below"] .monal-pin__label { bottom: auto; top: calc(100% + calc(var(--monal-u) * .25)); }
  .monal-pin[data-monal-label-pos="left"] .monal-pin__label { right: calc(100% + calc(var(--monal-u) * .3)); }
  .monal-pin[data-monal-label-pos="right"] .monal-pin__label { left: calc(100% + calc(var(--monal-u) * .3)); }
  .monal-pin.monal-is-active:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label { bottom: calc(100% + calc(var(--monal-u) * 2.9)); }
  .monal-map--reveal .monal-pin:hover:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label,
  .monal-map--reveal .monal-pin:focus-visible:not([data-monal-label-pos="below"]):not([data-monal-label-pos="left"]):not([data-monal-label-pos="right"]) .monal-pin__label { bottom: calc(100% + calc(var(--monal-u) * 2.9)); }
  .monal-pin-card { width: calc(var(--monal-u) * 3.2); height: calc(var(--monal-u) * 3.6); margin-left: calc(var(--monal-u) * -1.6); margin-top: calc(var(--monal-u) * -3.6); padding: calc(var(--monal-u) * .35); }
  .monal-pin-card img { width: calc(var(--monal-u) * 2.5); height: calc(var(--monal-u) * 2.5); border-radius: calc(var(--monal-u) * .55); }
  .monal-pin-card--empty::before { width: calc(var(--monal-u) * 2.5); height: calc(var(--monal-u) * 2.5); border-radius: calc(var(--monal-u) * .55); }
  .monal-pin-card--empty::after { top: calc(var(--monal-u) * 1.6); width: calc(var(--monal-u) * 1.3); height: calc(var(--monal-u) * 1.3); }
  .monal-city h3 { font-size: calc(var(--monal-u) * 4.2); }
  .monal-city__icon { width: calc(var(--monal-u) * 6); height: calc(var(--monal-u) * 5); }
  .monal-place__name { font-size: calc(var(--monal-u) * 1.6); }
}

/* --------------------------------------------------------------------------
   Widget additions — real card images fill the media box like the placeholder
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   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-place__media { display: grid; position: relative; overflow: hidden; }
.monal-place__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.monal-places .monal-place[hidden] { display: none; }