/* 
   Responsive behaviour
    */

/* Laptop: 3-column gallery */
@media (max-width: 1200px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (min-width:1026px){
	.hero-slider{
		padding:20px;
	}
}

/* Tablet: sidebar collapses into a top bar + hamburger */
@media (max-width: 1024px) {
	.image-caption{
		display: none;
	}
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .sidebar__top { width: 100%; margin-bottom: 0; }

  .sidebar__scroll {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    padding: 24px 28px;
    transform: translateX(-100%);
    transition: transform var(--transition);
    overflow-y: auto;
    border: none;
    margin: 0;
    z-index: 90;
    display: none;
  }

  .sidebar.is-nav-open .sidebar__scroll {
    transform: none;
    display: block;
  }

  /* Slider controls move out of the hamburger drawer entirely and become
     a slim fixed toolbar pinned under the image — always reachable
     without opening the menu, like the desktop sidebar's bottom controls. */
  .sidebar__controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--color-border);
    z-index: 95;
  }
	.sidebar__controls button.sidebar__thumb-toggle {
		order: 1;
	}

	.sidebar__controls .sidebar__slider-nav {
        margin-bottom: 0;
        gap: 18px;
        order: 2;
    }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px 4px;
    z-index: 101;
  }
	.hero-slider-wrap .hero-slider {
			height: 100%;
			overflow: hidden;
		padding-bottom: 70px;
	}
  .nav-toggle span {
	  
    width: 22px;
    height: 1.5px;
    background: var(--color-ink);
    transition: transform var(--transition), opacity var(--transition);
  }

  .sidebar.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .sidebar.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .sidebar.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .site-content  { 
	  margin-left: 0; 
	  padding-top: 64px; 
	  height: 100vh;
	  height: 100svh;
	}

	.hero-slider-wrap {
		height: 100%;
	}

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: 1fr; }
  .thumb-grid { grid-template-columns: repeat(3, 1fr); padding-bottom: 70px; }

  .hero-info-card { bottom: 76px; }

  .contact { grid-template-columns: 1fr; gap: 40px; }
	.site-content{
		 
	}
	.hero-slider-wrap .hero-slider {
/* 		height: calc(100vh - 64px); */
		overflow: hidden;
		padding-bottom: 75px;
	}
}

/* Mobile refinements */
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }

  .page-header { padding: 40px 20px 20px; }
  .page-header__title { font-size: 26px; }

  .about, .contact { padding: 40px 20px 72px; }

  .hero-info-card {
    right: 16px;
    left: 16px;
    bottom: 72px;
    max-width: none;
  }

  .thumb-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 64px; }

  .sidebar__controls { padding: 12px 16px; }
  .sidebar__slider-nav button,
  .sidebar__thumb-toggle { font-size: 11px; }

  .splide__arrow--prev { left: 10px !important; }
  .splide__arrow--next { right: 10px !important; }

  .lightbox__prev { left: 12px; }
  .lightbox__next { right: 12px; }
  .lightbox__close { top: 16px; right: 16px; }

  .video-modal__stage { width: 92vw; }
  .video-modal__prev { left: 12px; }
  .video-modal__next { right: 12px; }
  .video-modal__close { top: 16px; right: 16px; }
  .video-modal__caption { bottom: 52px; }

  .about__clients { grid-template-columns: repeat(2, 1fr); }
	.about-page-content{
		padding: 40px 20px;
	}
	
}