/* ============================================================
   Listings Page — Tab Switcher + Iframe Display
   ============================================================ */

/* ---- Page Header ---- */
.listings-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ---- Tab Switcher ---- */
.listings-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.listings-tab {
  font-family: var(--font-accent);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: 2px;
  color: var(--color-dark-gray);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.listings-tab:hover {
  border-color: var(--color-mid-gray);
  color: var(--color-primary);
}

.listings-tab:active {
  transform: scale(0.97);
}

.listings-tab--active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.listings-tab--active:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Iframe Container ---- */
.listings-iframe-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 750px;
  border-radius: 0;
  background: transparent;
}


.listings-iframe {
  display: none;
  width: calc(100% + 20px);
  margin-left: 5px;
  height: 1500px;
  border: none;
  background: transparent;
  color-scheme: normal;
}

.listings-iframe--active {
  display: block;
}


.listings-iframe--map {
  height: 600px;
}

.listings-iframe-wrapper--full {
  max-height: none;
  overflow: visible;
}

.listings-iframe-wrapper--full .listings-iframe {
  height: 70vh;
}

.listings-iframe-wrapper:has(.listings-iframe--map.listings-iframe--active) {
  max-height: 600px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .listings-tabs {
    flex-wrap: wrap;
  }

  .listings-tab {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0.625rem 1rem;
  }

  .listings-iframe-wrapper {
    max-height: 750px;
  }

  .listings-iframe--map {
    height: 500px;
  }

  .listings-iframe-wrapper:has(.listings-iframe--map.listings-iframe--active) {
    max-height: 500px;
  }
}

@media (max-width: 576px) {
  .listings-iframe-wrapper {
    max-height: 750px;
  }

  .listings-iframe--map {
    height: 400px;
  }

  .listings-iframe-wrapper:has(.listings-iframe--map.listings-iframe--active) {
    max-height: 400px;
  }
}