/* ==========================================================================
   CrossAIHub · PORTRAIT REFINEMENT · v1.0 · 2026-07-18
   ==========================================================================
   Goal: "Landscape Feeling inside Portrait Layout."

   Problem: On portrait phones (390×844 typical), the LANDSCAPE-shaped hero
   image (1440×803, ratio 1.79) is stretched with object-fit:cover across a
   full 100vh viewport. Result: only a narrow vertical strip of the middle
   of the house is visible; the visitor never sees the whole house.

   Fix: On portrait mobile, the .house-scene becomes a LANDSCAPE-RATIO
   card centered inside the portrait viewport with cream breathing space
   above and below. The whole house is visible, the camera feels farther
   away, and the composition breathes — matching the cinematic feel of
   landscape orientation without forcing device rotation.

   Scope: Portrait mobile only. Landscape mobile, tablet, desktop all
   keep their current behavior — no visual change on any other viewport.
   ========================================================================== */

/* --- Portrait mobile: house-scene as a cinematic landscape band --- */
@media (max-width: 899px) and (orientation: portrait) {
  .house-scene {
    /* Was: height:100vh (whole viewport, forced landscape image into portrait crop)
       Now: landscape aspect-ratio inside portrait viewport, whole house visible */
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    max-height: 62dvh;
    max-height: 62vh;
    /* Cream gradient behind so the letterbox above/below feels intentional */
    background: linear-gradient(180deg,
      var(--ch-parchment-1) 0%,
      var(--ch-parchment-2) 100%);
    /* Small margin-top so the scene sits slightly down from the very top edge —
       gives the wordmark room to breathe against the cream background */
    margin-top: clamp(48px, 12dvh, 96px);
  }

  /* Image now fits its landscape container properly — no more heavy crop */
  .house-scene__image {
    object-position: 50% 50% !important;
    transform-origin: 50% 50%;
  }

  /* Dolly (zoom-in animation) starts and ends smaller so the whole house
     stays in frame — the "camera farther away" feeling the brief asks for. */
  .reel-active .house-scene__image {
    animation: ch-dolly-portrait 5000ms var(--ease-door) forwards;
  }

  /* Wordmark sits above the scene on the cream background, not overlapping the image.
     Sizes locked per header brand law (34px cross / 22px word desktop, 29/18 mobile). */
  .wordmark {
    position: absolute;
    top: clamp(12px, 3dvh, 20px);
    left: clamp(12px, 4vw, 24px);
    z-index: 20;
  }
  .wordmark__cross { font-size: 29px !important; width: auto !important; height: auto !important; }
  .wordmark__name  { font-size: 1.1rem !important; }
  .wordmark__tag   { font-size: 0.78rem !important; }

  /* Welcome caption sits BELOW the house scene, in the breathing space,
     centered on the cream — reads as a quiet inscription under the photograph. */
  .welcome-caption {
    position: static;
    display: block;
    margin: clamp(20px, 5dvh, 40px) auto 0;
    transform: none !important;
    left: auto;
    bottom: auto;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.35;
    max-width: 88vw;
    padding: 0 var(--s-4);
  }
  .reel-active .welcome-caption {
    animation: ch-welcome-appear-portrait 900ms var(--ease-door) 15000ms forwards;
  }

  /* Stop halo (interactive orb): centered under the house image now.
     Positioned within .house-scene, not fixed relative to viewport. */
  .stop--1 {
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
  }
  .stop__halo {
    width: 38px;
    height: 38px;
  }

  /* Door glow: sized relative to the smaller hero band, not the viewport */
  .door-glow {
    width: 40vw !important;
    height: 40vw !important;
    max-width: 260px;
    max-height: 260px;
  }
}

/* --- Small portrait phones (≤ 480px): tighten a bit more --- */
@media (max-width: 480px) and (orientation: portrait) {
  .house-scene {
    max-height: 56dvh;
    max-height: 56vh;
    aspect-ratio: 16 / 10;
    margin-top: clamp(40px, 10dvh, 72px);
  }
  .wordmark__name { font-size: 1rem !important; }
  .wordmark__tag  { font-size: 0.72rem !important; }
  .welcome-caption {
    font-size: 1.05rem;
    max-width: 92vw;
  }
  .stop__halo { width: 36px; height: 36px; }
}

/* --- Landscape phone / tablet portrait / desktop: NO CHANGES --- */
/* (No rules — the base CSS handles these viewports unchanged.) */

/* --- Refined dolly animation for portrait: gentler zoom keeps whole house in frame --- */
@keyframes ch-dolly-portrait {
  0%   { transform: scale(1.000); }
  60%  { transform: scale(1.000); }
  100% { transform: scale(1.025); }  /* was 1.055 — now more restrained */
}

/* --- Refined welcome-caption animation (no translate — already in flow) --- */
@keyframes ch-welcome-appear-portrait {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Rooms grid: give portrait mobile a bit more air between cards --- */
@media (max-width: 899px) and (orientation: portrait) {
  .rooms-grid {
    gap: clamp(14px, 3.5vw, 22px) !important;
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }
  .room-card,
  .rooms-grid > a,
  .rooms-grid > li {
    padding: clamp(16px, 4vw, 22px);
  }
}

/* --- Ensure touch targets stay >= 44×44 (Apple HIG / Android Material) --- */
@media (max-width: 899px) and (orientation: portrait) {
  .lk-nav a,
  .lk-nav summary,
  .lk-brand,
  button,
  a.btn {
    min-height: 44px;
  }
}