/* ==========================================================================
   MY YEAR 2026 — responsive.css
   Desktop adaptations: sidebar nav, multi-column layouts, larger surfaces.
   Mobile is the default in base/layout/components; this file adapts upward.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile defaults — placed FIRST so desktop media queries below override
   them correctly. Without this ordering, late-defined defaults would win
   over the media-query rules and the sidebar would never appear.
   -------------------------------------------------------------------------- */
.app-sidebar { display: none; }
.app-content-col { display: contents; }
.app-content-bar { display: none; }

/* --------------------------------------------------------------------------
   Breakpoint strategy
   - < 640px  : phone (default)
   - 640-959  : large phone / small tablet
   - 960+     : desktop with sidebar
   - 1200+    : max shell width
   -------------------------------------------------------------------------- */

/* Desktop: hide bottom nav, show sidebar */
@media (min-width: 960px) {
  .app-shell {
    flex-direction: row;
  }
  .bottom-nav { display: none; }

  /* Sidebar */
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-4);
  }
  .app-sidebar .brand {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
  }
  .app-sidebar .nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
  }
  .app-sidebar .nav-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    min-height: 44px;
  }
  .app-sidebar .nav-list a:hover { background: var(--color-surface-sunken); color: var(--color-primary); }
  .app-sidebar .nav-list a.active { background: var(--color-primary); color: #fff; }
  .app-sidebar .nav-list a svg { width: 20px; height: 20px; flex-shrink: 0; }
  .app-sidebar .sidebar-footer {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* App bar becomes content-area top bar (no brand on right column) */
  .app-bar { display: none; }

  /* Content column */
  .app-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .app-content-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(248, 247, 244, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
  }
  .app-content-bar .app-bar-inner {
    padding: 0;
    height: auto;
    max-width: none;
  }
  .app-main {
    padding: var(--space-8) var(--space-6) var(--space-12);
    max-width: var(--shell-max);
  }

  /* Larger page headers on desktop */
  .page-header h1 { font-size: var(--fs-3xl); }
  .page-header p { font-size: var(--fs-md); }

  /* Editorial cover bigger */
  .editorial-cover {
    min-height: 560px;
    padding: var(--space-16) var(--space-10);
  }
  .editorial-cover h1 { font-size: 5rem; }

  /* Editorial narrative wider */
  .editorial-section .narrative { font-size: var(--fs-md); }

  /* Photo grids denser */
  .photo-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Hide sidebar by default — already declared at the top of this file.
   Re-declaring here would override the desktop media queries above. */

/* Phone-only: show app bar, hide desktop sidebar parts */
@media (max-width: 959px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 960px) {
  .mobile-only { display: none !important; }
}

/* Small phone adjustments */
@media (max-width: 380px) {
  :root {
    --fs-2xl: 1.875rem;
    --fs-xl: 1.5rem;
  }
  .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
  .editorial-cover h1 { font-size: var(--fs-3xl); }
}

/* Tablet tweaks */
@media (min-width: 640px) and (max-width: 959px) {
  .app-main { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* Print-only: hide shell chrome, show only the report */
.print-only { display: none; }
@media print {
  .print-only { display: block; }
  .no-print { display: none !important; }
  .app-shell { display: block; }
  .editorial-cover {
    min-height: auto;
    page-break-after: always;
    border-radius: 0;
  }
}