/* ============================================================
   ORBITY360 — Responsive Breakpoints
   ============================================================ */

/* ── Tablet: ≤ 1024px ── */
@media (max-width: 1024px) {
  :root { --sidebar-width: 220px; }

  .section-inner       { padding: var(--space-12) var(--space-8); }
  .section-title       { font-size: var(--text-3xl); }

  .grid-3              { grid-template-columns: repeat(2, 1fr); }
  .grid-4              { grid-template-columns: repeat(2, 1fr); }
  .stat-grid           { grid-template-columns: repeat(2, 1fr); }

  /* Hero copy pulled in slightly */
  .hero-copy           { left: var(--space-8); max-width: 500px; }

  /* Two-col layouts collapse */
  .maps-layout         { grid-template-columns: 1fr; }
  .contact-layout      { grid-template-columns: 1fr; }

  /* Portfolio 2-col at tablet */
  .portfolio-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Steps connector line not visible at this width */
  .steps-grid::before  { display: none; }
  .steps-grid          { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }

  /* Benefits full-width */
  .benefits-grid       { grid-template-columns: 1fr; }

  /* Demo frame */
  .demo-frame-wrap     { max-width: 100%; }

  /* Aerial specs wrap */
  .aerial-specs        { flex-wrap: wrap; }
  .aerial-spec         { flex: 1 1 calc(50% - var(--space-2)); }

  /* Photo masonry 2 cols */
  .photo-masonry       { columns: 2; }

  /* CTA headline */
  .cta-headline        { font-size: var(--text-4xl); }

  /* Home sub-sections */
  .home-sub-section    { padding: var(--space-16) 0; }
}

/* ── Small tablet / large phone: ≤ 768px, or landscape phone (≤ 500px tall) ── */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  :root { --sidebar-width: 260px; }

  /* Sidebar becomes full-width off-canvas drawer */
  /* Solid opaque background — no backdrop-filter anywhere, prevents blur bleed on WebKit */
  .sidebar             { transform: translateX(-100%); box-shadow: none; width: 100vw; background: #0f0f19; }
  .sidebar.open        { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,0.8); }
  /* Ensure pseudo-elements don't reintroduce transparency */
  .sidebar::before     { opacity: 0.4; }
  .sidebar::after      { opacity: 1; }

  /* Overlay: completely disabled on mobile.
     Root cause of dim sidebar: .app-shell has animation:appLoad (opacity 0→1) which creates
     a temporary stacking context with z-index:auto. The overlay lives outside .app-shell at
     z-index:99 and beats any z-index:auto ancestor in the root stacking context, painting
     the dark rgba(0,0,0,0.75) over the sidebar. Since sidebar is width:100vw anyway the
     overlay is never visible to the user — safest fix is to never show it on mobile. */
  .sidebar-overlay,
  .sidebar-overlay.visible { display: none !important; pointer-events: none; }

  /* Cancel the app-shell fade-in animation on mobile — it creates the stacking context
     that causes the z-index race described above, and isn't needed on small screens. */
  .app-shell               { animation: none !important; }

  .sidebar-toggle      { display: flex; }
  .main-content        { margin-left: 0; }

  /* Nav links — large tap targets, crisp white text, gold icons */
  .nav-link            { min-height: 48px; padding: var(--space-4) var(--space-6); color: #f0f0f0; font-size: var(--text-lg); pointer-events: auto; }
  .nav-icon            { color: #c9a84c; font-size: 18px; width: 26px; height: 26px; }
  .nav-link-text       { color: #f0f0f0; font-size: var(--text-lg); }
  .nav-section-label   { font-size: 11px; color: #c9a84c; letter-spacing: 0.18em; padding: var(--space-5) var(--space-6) var(--space-2); }

  /* Logo area — clear padding so content doesn't hide under the X button */
  .sidebar-logo        { padding: var(--space-6); padding-top: 72px; }
  .logo-name           { font-size: var(--text-xl); color: #ffffff; }
  .logo-tagline        { font-size: var(--text-sm); color: #c9a84c; }
  .logo-location       { color: rgba(255,255,255,0.6); margin-top: var(--space-1); }

  /* Contact section */
  .contact-label       { color: #c9a84c; font-size: var(--text-sm); }
  .contact-item        { color: #f0f0f0; font-size: var(--text-sm); }
  .contact-phone       { color: #ffffff; font-size: var(--text-base); font-weight: 600; }

  /* Hero */
  .hero-copy {
    left: var(--space-5);
    right: var(--space-5);
    max-width: 100%;
    transform: translateY(-50%);
  }
  .hero-headline       { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .hero-sub            { font-size: var(--text-base); }
  .hero-actions        { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn   { width: 100%; justify-content: center; }

  /* Hide the trust badge on mobile — too wide for small screens */
  .hero-badge-wrap     { display: none; }

  /* Mobile veil: top-to-bottom gradient so text centered on screen stays readable */
  .hero-veil {
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.40) 50%,
      rgba(0,0,0,0.70) 100%
    );
  }

  /* Section inner */
  .section-inner       { padding: var(--space-10) var(--space-5); }
  .section-title       { font-size: var(--text-2xl); }

  /* Grids */
  .grid-2              { grid-template-columns: 1fr; }
  .grid-3              { grid-template-columns: 1fr; }
  .grid-4              { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .stat-grid           { grid-template-columns: repeat(2, 1fr); }

  /* Service cards full width */
  .service-card        { max-width: 400px; margin: 0 auto; }

  /* Steps single column */
  .steps-grid          { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  /* Benefits single column */
  .benefits-grid       { grid-template-columns: 1fr; }

  /* Portfolio single column */
  .portfolio-grid      { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* Video grid single col */
  .video-grid          { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }

  /* Photo masonry 2 cols */
  .photo-masonry       { columns: 2; column-gap: var(--space-3); }

  /* Contact stacked */
  .contact-layout      { grid-template-columns: 1fr; }
  .form-row            { grid-template-columns: 1fr; }
  .contact-trust-grid  { grid-template-columns: 1fr 1fr; }

  /* CTA */
  .cta-headline        { font-size: var(--text-3xl); }
  .cta-box             { padding: var(--space-12) var(--space-6); }
  .cta-actions         { flex-direction: column; align-items: center; }
  .btn-lg              { width: 100%; justify-content: center; }

  /* Demo frame chrome */
  .demo-chrome-label   { display: none; }

  /* Aerial */
  .aerial-hero         { height: 280px; }
  .aerial-specs        { display: none; }

  /* Home sub-sections */
  .home-sub-section    { padding: var(--space-12) 0; }

  /* ── Sidebar: force all content fully visible when open ──
     navItemIn animation uses fill-mode:both which holds opacity:0 during stagger delays;
     some mobile browsers replay it when the sidebar slides in. Override everything. */
  .sidebar.open,
  .sidebar.open *       { opacity: 1 !important; }

  .sidebar.open .nav-link,
  .sidebar.open .logo-name,
  .sidebar.open .logo-tagline,
  .sidebar.open .contact-item,
  .sidebar.open .contact-phone,
  .sidebar.open .nav-section-label { opacity: 1 !important; color: #ffffff !important; }

  .sidebar.open .nav-icon,
  .sidebar.open .contact-label     { opacity: 1 !important; color: #c9a84c !important; }

  /* Keep logo tagline and labels gold, not white */
  .sidebar.open .logo-tagline,
  .sidebar.open .nav-section-label,
  .sidebar.open .contact-label     { color: #c9a84c !important; }

  /* Cancel navItemIn stagger animation entirely on mobile — no need for it in a drawer */
  .nav-link             { animation: none !important; }

  /* Solid sidebar background — no transparency */
  .sidebar              { background: #0f0f19 !important; }

  /* ── Disable scroll-reveal animations on mobile ──
     IntersectionObserver doesn't reliably fire after display:none→block section switches.
     Force all reveal elements visible immediately; hover/filter states are unaffected
     because those use different classes (.pf-card--hidden, .photo-overlay, etc.) */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale         { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* pf-card starts visible — only .pf-card--hidden hides it (filter state).
     Do NOT override transform here — that kills the :hover lift effect. */
  .pf-card,
  .pf-card-image,
  .pf-card-body         { opacity: 1 !important; }
}

/* ── Mobile: ≤ 480px ── */
@media (max-width: 480px) {
  .section-inner       { padding: var(--space-8) var(--space-4); }
  .section-title       { font-size: var(--text-xl); }
  .section-subtitle    { font-size: var(--text-base); }

  .hero-headline       { font-size: clamp(1.6rem, 9vw, 2rem); }

  .stat-grid           { grid-template-columns: 1fr 1fr; }
  .stat-number         { font-size: var(--text-3xl); }

  .photo-masonry       { columns: 1; }

  .card                { padding: var(--space-5); }
  .benefit-item        { padding: var(--space-5); gap: var(--space-4); }

  .portfolio-grid      { grid-template-columns: 1fr; }

  .contact-trust-grid  { grid-template-columns: 1fr; }

  .cta-headline        { font-size: var(--text-2xl); }
  .cta-box             { padding: var(--space-10) var(--space-5); }

  /* Demo aspect ratio more square on small screens */
  .demo-iframe-container { aspect-ratio: 4/3; }

  .home-sub-section    { padding: var(--space-10) 0; }
}

/* ── Portfolio responsive ── */
@media (max-width: 1024px) {
  .pf-wrap          { padding: var(--space-12) var(--space-8) var(--space-16); }
  .pf-grid          { grid-template-columns: repeat(2, 1fr); }
  .pf-header        { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .pf-count-wrap    { align-items: flex-start; }
  .pf-search-wrap   { margin-left: 0; }
  .pf-search        { width: 180px; }
  .pf-search:focus  { width: 200px; }
}

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .pf-wrap          { padding: var(--space-10) var(--space-5) var(--space-12); }
  .pf-grid          { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pf-filter-row    { flex-direction: column; align-items: flex-start; }
  .pf-filter-label  { min-width: unset; }
  .pf-search-wrap   { width: 100%; max-width: unset; margin-top: 0; }
  .pf-search        { width: 100%; }
  .pf-search:focus  { width: 100%; }
  .pf-title         { font-size: var(--text-3xl); }
}

@media (max-width: 480px) {
  .pf-pill          { font-size: 11px; padding: 5px 11px; }
  .pf-card-title    { font-size: var(--text-lg); }
  .pf-title         { font-size: var(--text-2xl); }
}

/* ── Landscape phone: compact hero ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-wrap           { min-height: unset; }
  .hero-copy           { top: 50%; transform: translateY(-50%); }
  .hero-headline       { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: var(--space-3); }
  .hero-sub            { display: none; }
  .hero-actions        { flex-direction: row; }
  .hero-actions .btn   { width: auto; }
  .hero-scroll-cue     { display: none; }
  .hero-controls       { bottom: var(--space-4); left: var(--space-4); }
  .hero-tour-counter   { bottom: var(--space-4); right: var(--space-4); }

  /* Compact sidebar so all nav items fit without scrolling */
  .sidebar-logo        { padding: var(--space-3) var(--space-4); padding-top: var(--space-3); }
  .logo-name           { font-size: var(--text-base); }
  .logo-tagline        { display: none; }
  .logo-location       { display: none; }

  .nav-link            { min-height: unset; padding: var(--space-2) var(--space-6); font-size: var(--text-base); }
  .nav-link-text       { font-size: var(--text-base); }
  .nav-section-label   { padding: var(--space-2) var(--space-6) var(--space-1); }
}

/* ── Wide: ≥ 1440px ── */
@media (min-width: 1440px) {
  .section-inner       { padding: var(--space-20) var(--space-16); }
  .section-title       { font-size: var(--text-5xl); }
  .hero-copy           { left: var(--space-16); max-width: 640px; }
  .portfolio-grid      { grid-template-columns: repeat(3, 1fr); }
}