/**
 * OTOGO 9 AM — Desktop Specific Stylesheet (>= 1024px)
 * Responsive CSS Architecture — Device & Responsibility Separation
 * 
 * Target viewports: 1024px, 1280px, 1440px, 1920px+.
 * Focus: Full desktop horizontal navigation, multi-column grids (3–4 columns),
 * split two-column hero photography layout, refined hover interactions,
 * and high-resolution desktop presentation.
 */

@media (min-width: 1024px) {
  /* --- 1. Desktop Containers --- */
  .page-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px 64px;
  }

  .dash-mobile-wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px 64px;
  }

  /* --- 2. Desktop Navigation & Header --- */
  .topbar {
    padding: 12px clamp(20px, 2.5vw, 34px);
    min-height: 74px;
  }

  .topbar .logo img {
    width: 164px;
    max-width: 164px;
    height: auto;
    aspect-ratio: 1536 / 517;
    object-fit: contain;
  }

  .topbar .menu-toggle {
    display: none !important;
  }

  .topbar nav {
    display: flex !important;
    align-items: center;
    gap: clamp(12px, 1.3vw, 20px);
    margin-left: auto;
  }

  /* Hide mobile bottom navigation bar and mobile app controls on desktop */
  .dash-nav-bar,
  .topbar-app-controls {
    display: none !important;
  }

  body.portal-account,
  body.portal-staff {
    padding-bottom: 0 !important;
  }

  /* --- 3. Multi-Column Grids --- */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
  }

  .grid-4,
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
  }

  .dash-quick-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px;
  }

  /* --- 4. Refined Hover Interactions --- */
  .card:hover,
  .dash-card:hover,
  .card-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  /* --- 5. Rich Multi-Column Desktop Footer --- */
  .site-footer-rich .footer-grid {
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
    gap: 36px;
  }

  /* --- 6. Phase 9 Desktop Subscription Car & Team Photo Presentation --- */
  .ref-plan-car-side {
    width: clamp(154px, 13.2vw, 168px);
    max-width: 58%;
    max-height: 88px;
    object-fit: contain;
    object-position: right bottom;
  }

  .ref-plan-car {
    width: clamp(164px, 14vw, 178px);
    max-width: 72%;
    max-height: 80px;
    object-fit: contain;
    object-position: right bottom;
  }

  .ref-team-photo-item img {
    height: 210px;
    object-fit: cover;
    object-position: center 22%;
  }

  .ref-team-photo-item:last-child img {
    object-position: center center;
  }
}