/* Dion's Complete — Mapbox GL containers.
   .dc-mapbox fills whatever sized wrapper the capture already gave it
   (h-96 / md:h-full / etc. from Tailwind); this file only styles the
   map internals Mapbox GL itself doesn't theme. */

.dc-mapbox {
  width: 100%;
  height: 100%;
  min-height: 260px;
}

/* #dc-projects-map deliberately carries no z-index of its own (see build-theme.mjs)
   so it doesn't trap its own popups in a stacking context below .dc-projects-list
   (z-10) — lift the popup above that list explicitly instead. */
#dc-projects-map .mapboxgl-popup {
  z-index: 20;
}

.dc-mapbox .mapboxgl-popup-content {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--derivative-900, 23, 23, 23));
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

/* rich photo+title popup — a project pin, or a project card's photo, both open this */
.dc-mapbox .mapboxgl-popup-content:has(.dc-project-popup) {
  padding: 0.5rem;
  border-radius: 0.75rem;
}
.dc-project-popup-shot {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.dc-project-popup img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

/* carousel controls — only present when a project has more than one photo */
.dc-project-popup-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.45);
  color: #fff;
  cursor: pointer;
  font-size: 0;
  transition: background 0.15s ease;
}
.dc-project-popup-nav:hover,
.dc-project-popup-nav:focus-visible {
  background: rgba(23, 23, 23, 0.7);
}
.dc-project-popup-nav::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.dc-project-popup-nav--prev {
  left: 0.375rem;
}
.dc-project-popup-nav--prev::before {
  transform: rotate(-135deg) translate(1px, -1px);
}
.dc-project-popup-nav--next {
  right: 0.375rem;
}
.dc-project-popup-nav--next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.dc-project-popup-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}
.dc-project-popup-dot {
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.dc-project-popup-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.dc-project-popup a {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(23 23 23);
  text-decoration: none;
}
.dc-project-popup a:hover {
  color: rgb(var(--primary-color, 18, 117, 177));
}

/* homepage "Explore the diverse range of projects..." on mobile — the capture
   only ever produced the desktop map+overlay-list layout (the client site's real
   mobile view swaps in a List view/Map view toggle instead), so this rebuilds
   that toggle purely in CSS/JS against the same card markup the desktop view
   already uses; nothing here touches md-and-up. */
.dc-projects-toggle {
  /* `flex` (block-level) + `width: max-content`, not `inline-flex` — auto
     margins only center block-level boxes, so `inline-flex` + `margin: 0 auto`
     silently resolved to 0 and never actually centered this on mobile (the
     only width this is ever visible at — see the `min-width: 768px` rule
     below that hides it entirely on desktop). */
  display: flex;
  width: max-content;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 auto;
  border-radius: 999px;
  background: rgb(244 244 245);
}
.dc-projects-toggle-btn {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: none;
  color: rgb(113 113 122);
  cursor: pointer;
}
.dc-projects-toggle-btn.is-active {
  background: #fff;
  border-color: rgb(var(--primary-color, 18, 117, 177));
  color: rgb(var(--primary-color, 18, 117, 177));
}

@media (max-width: 767.98px) {
  .dc-projects-panel {
    height: auto !important;
  }
  #dc-projects-map {
    display: none;
  }
  .dc-projects-list {
    position: static !important;
    z-index: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    gap: 1.25rem !important;
  }
  .dc-projects-list > div {
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.75rem;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* "Map view" mode: swap which of the two panes is visible and give the map
     a real height now that it's no longer sharing the desktop's 700px canvas. */
  .dc-mode-map #dc-projects-map {
    display: block;
    position: static;
    height: 420px;
  }
  .dc-mode-map .dc-projects-list {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .dc-projects-toggle {
    display: none;
  }
}

/* /services/<slug>/ "Recent <Service> Projects" picker — same map+card-list+popup
   interaction as the homepage's project picker, filtered to whichever projects tag
   this service, but built entirely client-side (initServiceProjectsPicker() in
   dc-map.js) with its own self-contained classes: most of these pages' own minimal
   per-page Tailwind build never compiled the homepage's card/list utilities, so
   this can't reuse that markup the way the homepage's own picker does. */
.dc-svc-toggle {
  display: none;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 auto 1rem;
  width: max-content;
  border-radius: 999px;
  background: rgb(244 244 245);
}
.dc-svc-toggle-btn {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: none;
  color: rgb(113 113 122);
  cursor: pointer;
}
.dc-svc-toggle-btn.is-active {
  background: #fff;
  border-color: rgb(var(--primary-color, 18, 117, 177));
  color: rgb(var(--primary-color, 18, 117, 177));
}

.dc-svc-panel {
  position: relative;
  width: 100%;
  height: 560px;
  border-radius: var(--roundedness, 8px);
  overflow: hidden;
}
.dc-svc-map {
  position: absolute;
  inset: 0;
}
.dc-svc-list {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  z-index: 10;
  transform: translateY(-50%);
  width: min(380px, calc(100% - 3rem));
  max-height: 90%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: #fff;
  border: 1px solid rgb(228 228 231);
  border-radius: var(--roundedness, 8px);
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.dc-svc-picker .mapboxgl-popup {
  z-index: 20;
}

.dc-svc-card {
  display: flex;
  gap: 0.875rem;
  padding: 0.375rem;
  border-radius: var(--roundedness, 8px);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dc-svc-card:hover {
  background: rgba(18, 117, 177, 0.06);
}
.dc-svc-card.dc-area-active {
  background: rgba(18, 117, 177, 0.08);
  outline: 2px solid rgb(var(--primary-color, 18, 117, 177));
  outline-offset: -2px;
}
.dc-svc-card-img {
  flex: 0 0 88px;
  height: 88px;
  border-radius: var(--roundedness, 8px);
  overflow: hidden;
}
.dc-svc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dc-svc-card-body {
  flex: 1;
  min-width: 0;
}
.dc-svc-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.dc-svc-card-title a {
  color: rgb(23 23 23);
  text-decoration: none;
}
.dc-svc-card-title a:hover {
  color: rgb(var(--primary-color, 18, 117, 177));
}
.dc-svc-card-excerpt {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgb(113 113 122);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* a service nothing is tagged with yet keeps the plain single-pin fallback */
.dc-svc-picker.dc-svc-fallback {
  height: 320px;
  border-radius: var(--roundedness, 8px);
  overflow: hidden;
}

@media (max-width: 767.98px) {
  /* `flex` (block-level), not `inline-flex` — auto margins only center
     block-level boxes, so `inline-flex` + `margin: 0 auto` above silently
     resolves to 0 and never actually centers this. */
  .dc-svc-toggle {
    display: flex;
  }
  .dc-svc-panel {
    height: auto;
  }
  .dc-svc-map {
    display: none;
  }
  .dc-svc-list {
    position: static;
    transform: none;
    width: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .dc-svc-card {
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    padding: 0.75rem;
  }
  .dc-mode-map .dc-svc-map {
    display: block;
    position: static;
    height: 380px;
  }
  .dc-mode-map .dc-svc-list {
    display: none;
  }
}
@media (min-width: 768px) {
  .dc-svc-toggle {
    display: none;
  }
}

/* homepage service-area picker */
.dc-service-pin {
  width: 28px;
  height: 28px;
  border-radius: 999px 999px 999px 2px;
  background: rgb(var(--primary-color, 18, 117, 177));
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
}
.dc-service-pin > * {
  transform: rotate(45deg);
}

.dc-pin-active {
  background: rgb(var(--secondary-color, 204, 2, 2));
  transform: rotate(-45deg) scale(1.2);
  z-index: 5;
}

.grab-service-area-item.dc-area-active {
  background-color: rgba(18, 117, 177, 0.08);
  outline: 2px solid rgb(var(--primary-color, 18, 117, 177));
  outline-offset: -2px;
}

/* homepage "Explore the diverse range of projects..." — the card list, its photos
   and its first two tag pills are all the capture's own Tailwind classes and need
   no CSS here. Only the active-card highlight and the "+N more" popover are ours. */
[data-project-slug].dc-area-active {
  outline: 2px solid rgb(var(--primary-color, 18, 117, 177));
  outline-offset: -2px;
}

/* "+N more" — hover (or tap, for touch) opens a drop-up panel of the remaining
   tags, each a real link to its /services/<slug>/ page. Opens upward since the
   trigger usually sits near the bottom of a card in a scrollable list, where a
   drop-down would spill under the next card or get clipped by the list. */
.dc-project-tags-more-wrap {
  position: relative;
}
.dc-project-tags-more {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgb(113 113 122);
  background: none;
  border: none;
  padding: 0.125rem 0.25rem;
  cursor: pointer;
}
.dc-project-tags-more:hover,
.dc-project-tags-more:focus-visible {
  color: rgb(var(--primary-color, 18, 117, 177));
}

.dc-project-tags-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
  padding: 0.5rem;
  border-radius: 0.625rem;
  background: #fff;
  border: 1px solid rgb(228 228 231);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.dc-project-tags-more-wrap.dc-open .dc-project-tags-popover {
  display: flex;
}
.dc-project-tags-popover a {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--primary-color, 18, 117, 177));
  text-decoration: none;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  white-space: nowrap;
}
.dc-project-tags-popover a:hover {
  background: rgba(18, 117, 177, 0.08);
}