/* ══════════ RESPONSIVE OVERRIDES ══════════
   Desktop (>960px) uses Varouj's original fixed layout exactly as built.
   Everything below only kicks in on smaller screens.
   ════════════════════════════════════════ */

@media (max-width: 960px) {

  /* Container: fluid instead of fixed 950px */
  #container {
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* Header: let height breathe with smaller logo */
  #header {
    height: auto;
  }

  #logo {
    padding: 16px 0 12px;
  }

  #logo a {
    font-size: 40px;
  }

  /* Sidebar: unstick from left, become a top nav bar */
  #sidebar {
    float: none;
    width: 100%;
  }

  #avmenu {
    padding: 8px 0 0;
  }

  #avmenu ul {
    display: flex;
    flex-wrap: wrap;
  }

  #avmenu li a {
    padding: 10px 18px;
  }

  /* Main content: full width, no right-float */
  #main-wrap {
    float: none;
    width: 100%;
    padding-top: 0;
  }

  /* Banner: stack the image above the text block */
  #banner {
    margin: 0;
  }

  #bannerleft {
    float: none;
    width: 100%;
    clear: both;
  }

  /* Responsive banner image — preserve original aspect ratio (323/392) */
  .wsite-header {
    width: 100%;
    height: 0;
    padding-bottom: 82.4%;
    background-size: cover;
    background-position: center center;
  }

  #bannerright {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 16px 14px 8px;
    box-sizing: border-box;
  }

  .landing-banner-mid {
    display: block;
  }

  /* Content padding tightened for small screens */
  #main {
    padding: 0 14px;
  }

  #footer {
    padding: 24px 14px;
  }

  /* Gallery: 3 columns on tablet */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (max-width: 600px) {

  #logo a {
    font-size: 28px;
  }

  /* Gallery: 2 columns on phone */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Lightbox arrows: give them more room on small screens */
  #lb-prev { left: 4px; }
  #lb-next { right: 4px; }

}