/*
 * Projects map — overlay and side panel.
 *
 * The shell stays the legacy .mapSidePop: fixed, full viewport height, sliding
 * in from the inline edge, with the site's minified script toggling .open /
 * .close and body.mapModalOpen. Only the panel's contents were rebuilt on the
 * DGA slideout and project-card classes (sk-slideout__panel, sk-project), so
 * what is left here is what those classes need that the legacy stylesheet would
 * otherwise undo, plus the two rules .sk-slideout--map carries on the reference
 * page — that modifier is not used, because it positions the panel inside the
 * map section instead of over the viewport.
 *
 * style.css is fetched by the site's async loader, so it lands in the document
 * after this file and order is no help: every rule here has to out-specify its
 * legacy counterpart rather than merely tie with it. That is what the .mapSec
 * prefixes and the [dir] pairs below are for — they mirror the selectors the
 * legacy rules use, one class heavier.
 */

/* --- Overlay ---------------------------------------------------------- */

/*
 * The section head and the picked-region block sit inside .mapContent, which
 * the legacy stylesheet still positions and resizes (40% of the map, 22% once
 * .expand lands) — that part is the map's behaviour and is left alone. What is
 * restated here is the type, because the legacy rules are element-qualified and
 * so outweigh the DGA classes: `.mapContent h2` is (0,1,1) against
 * `.sk-section__title`'s (0,1,0), and the margin rule is heavier still.
 */
.mapSec .mapContent .sk-section__title {
  margin: 0;
  font-size: 48px;
  line-height: 60px;
  font-weight: 400;
}

.mapSec .mapContent .sk-section__description {
  margin: 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 28px;
}

@media (max-width: 600px) {
  .mapSec .mapContent .sk-section__title {
    font-size: 32px;
    line-height: 40px;
  }
}

/* .sk-map__region already spaces the back button from the region name by 32px;
   legacy adds a bottom margin on top of that. Written one class heavier than
   `[dir=ltr] .markerDetail .backBtn`, which is (0,3,0). */
.mapSec .mapContent .markerDetail .backBtn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  /* dga-button's on-color icon draws in currentColor, and the <a> around it
     would otherwise hand it the default link blue. */
  color: #fff;
  line-height: 0;
}

/* --- Shell ---------------------------------------------------------- */

/* Legacy sets 25rem, which resolves to 375px against the site's fluid root
   font size. The frame's panel is 480. */
.mapSec .mapSidePop {
  width: 480px;
  max-width: 100%;
  background: var(--sk-gray-100, #f9fafb);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Legacy insets the panel's contents by 0.9rem and rounds its inline edge, both
   of which belonged to the old card. The frame's panel is square against the
   viewport edge and lets the body own its padding. Written per direction
   because that is how the legacy padding is written. */
[dir='ltr'] .mapSec .mapSidePop,
[dir='rtl'] .mapSec .mapSidePop {
  padding: 0;
  border-radius: 0;
}

.mapSidePop .sk-slideout__panel {
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
}

/* --- Header --------------------------------------------------------- */

/*
 * The panel's header is a <header>, and the site styles that element globally —
 * `[dir=ltr] header { padding: 1.5rem 0 }` is heavier than the slideout's own
 * class, so the header lost its side padding and sat flush to both panel edges.
 * The padding is restated here; border-bottom: 0 is what .sk-slideout--map
 * contributes, the map panel drawing no rule under its header.
 */
.mapSec .mapSidePop .sk-slideout__header {
  padding: 16px;
  border-bottom: 0;
}

/* Legacy hides the arrows outright; the frame shows them. */
.mapSec .mapSidePop .generalArrowsBox {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The .prev / .next wrappers exist only as hooks for the site script — the
   padding legacy gave them would push the two buttons off the 8px gap. */
.mapSec .mapSidePop .generalArrowsBox .prev,
.mapSec .mapSidePop .generalArrowsBox .next,
.mapSec .mapSidePop .closeBtn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 0;
}

/* --- Body ----------------------------------------------------------- */

/* The other half of .sk-slideout--map: room under the card so the last line
   clears the foot of a short panel. */
.mapSidePop .sk-slideout__body {
  padding: 16px 16px 80px;
}

/* The reference paints the photo as a background on a div. This one is an
   <img>, because the CMS carries alt text for it. */
.mapSidePop .sk-project__image {
  display: block;
  width: 100%;
  height: 243px;
  border-radius: 8px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .mapSec .mapSidePop {
    width: 100%;
  }

  .mapSidePop .sk-slideout__body {
    padding: 8px 8px 40px;
  }

  .mapSidePop .sk-project__body {
    padding: 24px;
  }
}