/**
 * Shared frontend styles for AKF Plugin shortcodes.
 */
.property-description {
  position: relative;
  max-width: 900px;

  p {
    margin-bottom: 1.2em;

    &:first-child {
      strong {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.16;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.property-description__content {
  transition: max-height 0.3s ease;
}

.property-description.is-collapsed .property-description__content {
  max-height: 15rem;
  overflow: hidden;
  position: relative;
}

.property-description.is-collapsed.has-overflow .property-description__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

.property-description__toggle {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* The class-based rule above has higher specificity than the user-agent
 * `[hidden] { display: none }` declaration, so the toggle remains visible
 * even when JS sets its `hidden` attribute (short descriptions that don't
 * overflow). Restore `display: none` for the hidden state. */
.property-description__toggle[hidden] {
  display: none;
}

.property-description__toggle:hover {
  text-decoration: none;
}

.prop4-right {
  position: relative;
  min-height: 400px;
}

.prop4-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e5e7eb;
}

.prop4-map .leaflet-container {
  width: 100%;
  height: 100%;
}

/* When the prop4 map slot is filled by the interactive-map shortcode,
   size the map to its native 2560:1770 ratio so the underlying image
   isn't cropped (object-fit: cover would slice the edges, leaving
   authored markers floating in the wrong place). The map is centred
   in the slot and the overflowing axis is clipped by overflow: hidden
   — corners stay reachable via the existing pan/zoom. */
.prop4-map--interactive {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Split the slot vertically: map fills the top, bar pins to the
     bottom. The flex column keeps the bar at fixed height while the
     map area flex-grows. When `--has-unit-bar` isn't present (no
     bottom bar variant) the map area still fills the whole slot. */
  display: flex;
  flex-direction: column;
}

.prop4-map--interactive .akf-unit-map-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.prop4-map--interactive .interactive-map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 2560 / 1770;
  margin: 0;
}

/* Dark-blue unit info bar pinned to the bottom of the prop4 map slot.
   Title + address on the left, Rutevejledning CTA on the right.
   Replaces the legacy marker-anchored blue popover: stays put across
   drill / pan / zoom and the user can't dismiss it. */
.akf-unit-bottom-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 40px;
  background: #2b2d6b;
  color: #fff;
}

.akf-unit-bottom-bar__info {
  min-width: 0;
}

.akf-unit-bottom-bar__title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.akf-unit-bottom-bar__address {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}

.akf-unit-bottom-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.akf-unit-bottom-bar__cta:hover,
.akf-unit-bottom-bar__cta:focus-visible {
  color: #fff;
  outline: none;
}

.akf-unit-bottom-bar__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  /* Default colour — overridden by the per-kind modifier on the bar
     (`--residential` / `--commercial`). The fallback below matches
     the legacy popover's green so any future variant that forgets
     to set a kind still renders something sensible. */
  color: var(--_main---grøn-sekundær, #62b773);
}

.akf-unit-bottom-bar--residential .akf-unit-bottom-bar__cta-icon {
  /* Matches the section-4-prop4 residential CTA arrow fill (#EA5549). */
  color: #EA5549;
}

.akf-unit-bottom-bar--commercial .akf-unit-bottom-bar__cta-icon {
  /* Matches the section-4-prop4 commercial (is-blue) CTA arrow fill. */
  color: var(--_main---grøn-sekundær, #62b773);
}

.akf-unit-bottom-bar__cta-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .akf-unit-bottom-bar {
    padding: 20px 24px;
    gap: 16px;
  }
  .akf-unit-bottom-bar__title { font-size: 18px; }
  .akf-unit-bottom-bar__address { font-size: 14px; }
  .akf-unit-bottom-bar__cta { font-size: 14px; }
}

/* In single-property mode the dark blue card content moves into the
   bottom bar (server-rendered as a sibling of the map). Hide the
   Webflow `.prop4-right-info-wrap` card so the same data doesn't
   appear twice. */
.prop4-right:has(.prop4-map--has-unit-popover) .prop4-right-info-wrap {
  display: none;
}

.prop4-right-info-wrap {
  position: relative;
  z-index: 1;
}

.prop-featured-unit-image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.prop-featured-unit-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Webflow layout fallbacks.
 *
 * Webflow's shared CSS does not contain rules for many of the layout classes
 * used on the property detail template (`.prop1-left`, `.prop1-right`,
 * `.prop3-content-wrap`, etc.) — those live in a page-specific CSS file
 * generated only for the full Webflow export. Inside our WP shortcode only
 * the shared stylesheet is loaded, so children of `._12-col-grid` collapse
 * into a single column and the section content squashes.
 *
 * Rules below replicate the missing grid spans. Use class selectors (not
 * the page-specific `#w-node-*` IDs) so the fix travels with the plugin.
 * --------------------------------------------------------------------------- */

.prop1 ._12-col-grid,
.prop2 ._12-col-grid,
.prop3 ._12-col-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

._12-col-grid.with-spacing {
  column-gap: 96px;
  row-gap: 32px;
}

.prop1 ._12-col-grid > .prop1-left {
  grid-column: span 8;
}

.prop1 ._12-col-grid > .prop1-right {
  grid-column: span 4;
  align-self: start;
}

/* Gallery toggle pills (Billeder / Plantegning) sit on top of the swiper
 * image; on white/light photos they blend into the background, so add a
 * faint outline for separation. Applies to both commercial and residential. */
.prop1-controls-bottom {
  border: 1px solid rgba(46, 51, 100, 0.12);
}

.prop2 ._12-col-grid > :first-child {
  grid-column: span 8;
}

.prop2 ._12-col-grid > .prop2-right {
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.prop3 ._12-col-grid > .prop3-content-wrap {
  grid-column: span 4;
}

/* Properties highlights grid (._12-col-grid.is-prop-featured) inherits
 * `grid-column: span N` rules keyed on specific `#w-node-*` IDs from Webflow's
 * shared CSS. Webflow republishes drop those ID-keyed rules from time to time,
 * which collapses the grid into eight 1-track auto columns. Pin the spans here
 * by class so the layout survives any future Webflow CSS regen.
 *
 * Default tile: 4 cols × 1 row. Residential's feature-building card (the only
 * `.prop-featured-property` element on the page) is twice as wide — 8 cols —
 * matching Webflow's design intent. Commercial highlights have no
 * `.prop-featured-property`, so that selector is a residential-only override. */
._12-col-grid.is-prop-featured > * {
  grid-column: span 4;
  grid-row: span 1;
}
._12-col-grid.is-prop-featured > .prop-featured-property {
  grid-column: span 8;
}

@media (max-width: 767px) {
  .prop1 ._12-col-grid,
  .prop2 ._12-col-grid,
  .prop3 ._12-col-grid,
  ._12-col-grid.is-prop-featured {
    grid-template-columns: 1fr;
  }

  .prop1 ._12-col-grid > *,
  .prop2 ._12-col-grid > *,
  .prop3 ._12-col-grid > *,
  ._12-col-grid.is-prop-featured > * {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
 * [akf-residential-properties-map] / [akf-commercial-properties-map] shortcodes.
 *
 * Both shortcodes now delegate to [interactive-map]; the inner element is
 * just a container the Webflow templates target. Height is determined by the
 * interactive-map's own `aspect-ratio: 2560/1770` — no fixed pixel height,
 * no overflow:hidden (the interactive-map self-clips via its viewport).
 * --------------------------------------------------------------------------- */

.akf-residential-properties-map-wrap,
.akf-commercial-properties-map-wrap {
  position: relative;
  width: 100%;
}

.akf-residential-properties-map,
.akf-commercial-properties-map {
  width: 100%;
}

.akf-residential-properties-map-data,
.akf-commercial-properties-map-data {
  display: none;
}

/* When dropped inside a Webflow flex section, the generic wrapper div
 * around the shortcode output (.w-embed on the listing pages,
 * .padding-section-large > .padding-global > .container-large on others)
 * picks up `flex: 0 1 auto` and collapses to 0 width (taking the map
 * with it). Force the DIRECT parent of our wrap to grow to fill the
 * flex row — universal, covers any embed depth. */
*:has(> .akf-residential-properties-map-wrap),
*:has(> .akf-commercial-properties-map-wrap),
:has(> .padding-section-large > .padding-global > .container-large > .akf-residential-properties-map-wrap),
:has(> .padding-section-large > .padding-global > .container-large > .akf-commercial-properties-map-wrap) {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Fill a tall portrait Webflow `.map-container` slot on mobile (aspect-ratio
 * flips to ~1000/2000 there) while the map keeps its native 2560:1770
 * landscape ratio — otherwise it only fills a short strip at the top and
 * leaves the slot half empty. The shortcode nests the map two wrappers deep,
 * so cascade the slot's height down through them and make the innermost
 * wrapper the crop frame; the overflowing width is clipped and panned
 * sideways at scale 1 (same cover-in-a-slot trick as the single-property and
 * homepage maps — see interactive-map.js `_getVisibleBounds`/`_hasPanSlack`).
 * On desktop `.map-container` is already 2560:1770, so these rules resolve to
 * a no-op. */
.map-container > .w-embed:has(.akf-residential-properties-map-wrap),
.map-container > .w-embed:has(.akf-commercial-properties-map-wrap),
.map-container .akf-residential-properties-map-wrap,
.map-container .akf-commercial-properties-map-wrap,
.map-container .akf-residential-properties-map,
.map-container .akf-commercial-properties-map {
  height: 100%;
}

.map-container .akf-residential-properties-map,
.map-container .akf-commercial-properties-map {
  position: relative;
  overflow: hidden;
}

.map-container .akf-residential-properties-map > .interactive-map,
.map-container .akf-commercial-properties-map > .interactive-map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 2560 / 1770;
  margin: 0;
}

/* Marker pin (Leaflet divIcon contents). */
.akf-residential-properties-map .leaflet-marker-icon.akf-marker-wrapper,
.akf-commercial-properties-map .leaflet-marker-icon.akf-marker-wrapper,
.akf-marker-wrapper {
  background: transparent;
  border: 0;
}

.akf-marker {
  width: 44px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.akf-marker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  background: #ea5549;
  border-radius: 50% 50% 50% 0;
  transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}

.akf-marker.is-available::before {
  background: #4ecdc4;
}

.akf-marker svg {
  position: relative;
  z-index: 1;
  color: #fff;
  margin-top: -8px;
}

.akf-marker:hover::before {
  transform: translateX(-50%) rotate(-45deg) scale(1.1);
}

/* Cluster bubble. */
.akf-residential-properties-map-wrap .marker-cluster,
.akf-commercial-properties-map-wrap .marker-cluster {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.akf-residential-properties-map-wrap .marker-cluster div,
.akf-commercial-properties-map-wrap .marker-cluster div {
  width: 36px;
  height: 36px;
  margin: 4px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #111;
}

/* Popup. */
.akf-marker-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 0;
}

.akf-marker-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}

.akf-marker-popup-content {
  display: flex;
  flex-direction: column;
  width: 260px;
}

.akf-marker-popup-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}

.akf-marker-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.akf-marker-popup-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.akf-marker-popup-status {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fde8e7;
  color: #b03a30;
}

.akf-marker-popup-status.is-available {
  background: #dff6f4;
  color: #1e8278;
}

.akf-marker-popup-title {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
}

.akf-marker-popup-address {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.akf-marker-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.akf-marker-popup-btn:hover {
  background: #333;
  color: #fff;
}