/* ─────────────────────────────────────────────────────────────────────
   Owoche — large / TV layout (pure CSS, no viewport hacks).

   Smart TVs report a CSS viewport under 1000px, so the site fell to its MOBILE
   layout (hamburger nav, full-bleed content) on a huge panel. Rather than force
   the viewport (unreliable — TVs ignore dynamic changes), we bring the DESKTOP
   layout down to a lower breakpoint so a TV gets it at its real width, and lay
   the content out in percentages:

     • full-bleed backgrounds → 100%  (already, via .hero-bg / .photo-block)
     • top nav bar content    → 90%   (5% gutter each side)
     • page content container → 70%   (15% gutter each side, capped for readability)

   From 900px up: horizontal nav + the percentage container. Phones (< 900px)
   are untouched. Real desktops just get the same, tidy, percentage layout.
   ──────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  /* ── Desktop nav (override the mobile hamburger panel) ── */
  .nav-toggle { display: none !important; }
  .nav .nav-panel {
    position: static; inset: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; flex-direction: row; align-items: center; padding: 0; gap: 4px;
    transform: none; opacity: 1; pointer-events: auto;
  }
  .nav .nav-panel a {
    font-family: var(--sans); font-size: 14.5px; color: var(--tx-muted);
    padding: 9px 11px; border: 0; font-weight: 500; white-space: nowrap;
  }
  .nav .nav-panel a.nav-cta { margin: 0 0 0 8px; padding: 11px 22px; font-size: 14px; color: #fff; white-space: nowrap; }

  /* ── Percentage layout ── */
  /* Page content: 70% wide, 15% gutter each side (capped so text isn't too wide). */
  .container { max-width: min(70%, 1500px); padding-inline: 0; }
  /* Top nav bar content: a touch wider — 90%, 5% gutter each side. */
  .nav .nav-inner { max-width: 90%; }
}