/*
 * 户型 360 横屏适配：横屏手机、平板、桌面 WebView 共用。
 */

@media (orientation: landscape) {
  html,
  body.house-360-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f7f0e5 !important;
  }

  .house-360-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    place-items: stretch !important;
    overflow: hidden !important;
    background: #f7f0e5 !important;
    backdrop-filter: none !important;
  }

  .house-360-dialog {
    --house-360-fit-scale: 1 !important;
    --house-360-control-scale: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: clamp(5px, 1dvh, 12px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .house-360-copy {
    min-width: 0 !important;
    padding: 0 52px 0 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: clamp(8px, 1.2vw, 16px) !important;
  }

  .house-360-kicker {
    flex: 0 0 auto !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .house-360-copy h2 {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(18px, 3.2dvh, 28px) !important;
    white-space: nowrap !important;
  }

  .house-360-copy p {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(73, 61, 49, 0.68) !important;
    font-size: clamp(10px, 1.9dvh, 13px) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .house-360-showcase {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(130px, 21vw, 250px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(6px, 1vw, 12px) !important;
    padding: clamp(4px, 0.8vw, 8px) !important;
    overflow: hidden !important;
  }

  .house-360-stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .house-360-view-strip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(5px, 0.8vw, 9px) !important;
    padding: clamp(5px, 0.8vw, 9px) !important;
    overflow: hidden !important;
  }

  .house-360-view {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .house-360-view-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .house-360-view-label {
    margin: 0 !important;
    padding-right: 3px !important;
    font-size: clamp(10px, 1.8dvh, 13px) !important;
    white-space: nowrap !important;
  }

  .house-360-highlights {
    min-width: 0 !important;
    padding: 0 8px !important;
  }

  .house-360-highlights h3 {
    margin: 0 0 2px !important;
    font-size: clamp(10px, 1.8dvh, 13px) !important;
  }

  .house-360-highlight-list > span {
    font-size: clamp(8px, 1.5dvh, 11px) !important;
  }

  .house-360-actions {
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  .house-360-actions button {
    width: min(260px, 46vw) !important;
    min-height: 42px !important;
    margin: 0 auto !important;
    font-size: clamp(13px, 2dvh, 16px) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .house-360-dialog {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .house-360-highlights {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-width: 700px) {
  .house-360-copy {
    gap: 7px !important;
  }

  .house-360-kicker {
    display: none !important;
  }

  .house-360-copy h2 {
    font-size: clamp(17px, 3.2dvh, 23px) !important;
  }

  .house-360-copy p {
    font-size: 10px !important;
  }

  .house-360-showcase {
    grid-template-columns: minmax(0, 1fr) clamp(110px, 23vw, 155px) !important;
  }

  .house-360-view {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 2px !important;
  }

  .house-360-view-label {
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .house-360-actions button {
    width: min(220px, 54vw) !important;
    min-height: 40px !important;
  }
}