/* ═══════════════════════════════════════════════════════════════
   DIZarchitects — Mobile Responsive Overrides
   Loaded after each page's inline <style> block so same-
   specificity rules cascade correctly; !important used only
   where inline JS styles or very specific rules require it.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav toggle button (injected by mobile.js) ──
   Always in the DOM but invisible on desktop.         */
.nav-toggle {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   768 px — tablet / mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Header ─────────────────────────────────────────────── */
  header {
    padding: 16px 24px !important;
  }

  /* ── Header-height compensation ─────────────────────────────
     Desktop header = 26px + 26px padding + 42px logo = 94px.
     Mobile  header = 16px + 16px padding + 32px logo = 64px.
     All pages hard-code 94px as the top offset for their first
     content block; reduce to 64px so there is no dead gap.    */
  .page-wrapper {
    top:        64px !important;   /* design.html (position:fixed) */
    margin-top: 64px !important;   /* about.html  (position:static) */
  }
  .page-banner {
    margin-top: 64px !important;   /* projects.html, contact.html   */
  }

  .logo-wrap img {
    height: 32px !important;
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 600;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #ffffff;
    transition: transform 0.28s ease, opacity 0.28s ease;
    transform-origin: center;
  }

  /* Animate to × when open */
  .nav-toggle.open span:nth-child(1) { transform: translateY(6.25px)  rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

  /* Full-screen nav overlay
     WHY position:absolute and NOT position:fixed:
     Pages other than index have backdrop-filter:blur() on the
     header. The CSS spec makes backdrop-filter a containing block
     for position:fixed descendants, so inset:0 would clip the nav
     to the header's ~64px height instead of the viewport.
     position:absolute inside a position:fixed parent is NOT
     affected by this rule — it is still positioned relative to
     the header (which is itself fixed at top:0), so top:0 +
     height:100vh visually covers the full viewport correctly.  */
  header nav {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 100vh !important;
    width: 100% !important;
    background: rgba(8, 8, 8, 0.98) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 36px !important;
    z-index: 450 !important;
    backdrop-filter: blur(16px) !important;
  }

  header nav.nav-open {
    display: flex !important;
  }

  header nav a {
    font-size: 1rem !important;
    letter-spacing: 0.28em !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }

  header nav a.active,
  header nav a:hover {
    color: #ffffff !important;
  }

  header nav a::after {
    display: none !important;
  }

  /* ── Footer ─────────────────────────────────────────────── */
  footer {
    padding: 16px 24px !important;
  }

  /* ── Contact page — email address overflow ──────────────────
     .ct-val holds "contact@dizarchitects.com" — a 24-char word
     that overflows the ~270px table-cell without word-break.   */
  .ct-val {
    overflow-wrap: break-word !important;
    word-break:    break-word !important;
  }

  /* ── Lightbox nav buttons — push to edges ───────────────────
     At 390px the 88vw image is centred at x=23px; left:36px /
     left:32px (desktop) places buttons inside the image area.
     Move to absolute edges and compact the padding so they stay
     touchable without covering the image content.              */
  .lb-prev { left:  4px !important; }
  .lb-next { right: 4px !important; }
  .lb-nav  { padding: 10px 10px !important; font-size: 0.5rem !important; }

  /* ── Page banners (projects / design / about / contact) ─── */
  .page-banner {
    padding: 22px 24px 16px !important;
  }


  /* ════════════════════════════════════════════════════════
     INDEX PAGE
     ════════════════════════════════════════════════════════ */

  /* Left hero panel — full width at bottom */
  .hero-panel {
    left: 24px !important;
    right: 24px !important;
    bottom: 40px !important;
    max-width: none !important;
  }

  /* Right text block — too long for mobile, hide it */
  .hero-panel-right {
    display: none !important;
  }


  /* ════════════════════════════════════════════════════════
     PROJECTS PAGE
     ════════════════════════════════════════════════════════ */

  /* Title + filter pills — stack vertically */
  .banner-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .filter-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .fpill {
    font-size: 0.65rem !important;
    padding: 5px 8px !important;
  }

  /* Slider — narrower tiles, tighter padding */
  .slider {
    padding: 20px 24px 40px !important;
    scroll-padding-left: 24px !important;
  }

  .slider-region {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .slider-region::before,
  .slider-region::after {
    width: 32px !important;
  }

  .tile {
    flex: 0 0 260px !important;
  }

  .tile-img {
    height: 180px !important;
  }

  .key-hint {
    padding: 0 24px 32px !important;
  }


  /* ════════════════════════════════════════════════════════
     DESIGN PAGE
     ════════════════════════════════════════════════════════ */

  .gallery-wrapper {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gallery-region::before,
  .gallery-region::after {
    width: 32px !important;
  }

  .gallery-grid {
    grid-auto-columns: 160px !important;
  }


  /* ════════════════════════════════════════════════════════
     ABOUT PAGE
     ════════════════════════════════════════════════════════ */

  /* Stack text column above image column */
  .about-content {
    flex-direction: column !important;
  }

  /* Text column — full width, normal left margin */
  .about-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 28px 24px 44px !important;
  }

  /* Hide image panel on mobile */
  .about-image {
    display: none !important;
  }


  /* ════════════════════════════════════════════════════════
     CONTACT PAGE
     ════════════════════════════════════════════════════════ */

  /* Info row — override 993 px fixed width, stack vertically */
  .info-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 24px !important;
    gap: 0 !important;
  }

  .address-col {
    border-right: none !important;
    padding: 0 0 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
  }

  .map-col {
    min-height: 220px !important;
    height: 240px !important;
    padding-top: 24px;
    width: 100%;
  }

  /* Clients section */
  .clients {
    padding-top: 28px !important;
  }

  .clients-heading {
    max-width: 100% !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .clients-grid {
    max-width: 100% !important;
    padding: 0 24px !important;
  }

  /* Stack name above URL */
  .client-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .client-url {
    white-space: normal !important;
    word-break: break-all !important;
    font-size: 0.74rem !important;
  }

  /* Consultants section — horizontal scroll is simplest for a
     4-column reference table with rowspan cells              */
  .consultants {
    padding-top: 28px !important;
    padding-bottom: 48px !important;
  }

  .cons-heading {
    max-width: 100% !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .cons-table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
    -webkit-overflow-scrolling: touch;
  }


  /* ════════════════════════════════════════════════════════
     PROJECT DETAIL PAGES
     ════════════════════════════════════════════════════════ */

  /* Background overlay — fade from bottom instead of right */
  .bg-overlay {
    background: linear-gradient(
      to top,
      rgba(8, 8, 8, 0.88) 0%,
      rgba(8, 8, 8, 0.35) 45%,
      rgba(8, 8, 8, 0.0)  100%
    ) !important;
  }

  /* Info panel — full-width bottom sheet */
  .info-panel {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 55vh !important;
    padding: 24px 24px 150px !important;
    background: rgba(8, 8, 8, 0.95) !important;
    backdrop-filter: blur(14px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Gallery bar — full width at bottom, with background */
  .gallery-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 24px 18px !important;
    background: rgba(8, 8, 8, 0.92) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* Hide fixed footer on project pages (no room) */
  .site-footer {
    display: none !important;
  }

  /* Prev / next navigation compact */
  .proj-nav {
    margin-top: 18px !important;
    padding-top: 14px !important;
  }

  /* ── Gallery bar — restore pointer events ───────────────────
     On desktop pointer-events:none lets clicks pass through to
     the background image.  On mobile the bar has a solid
     background so the dead-zone is confusing — restore events. */
  .gallery-bar {
    pointer-events: auto !important;
  }

  /* ── About page — left-align body text on narrow columns ────
     justify creates large word gaps on a ~342px mobile column. */
  .about-body {
    text-align: left !important;
  }

} /* end 768px */


/* ═══════════════════════════════════════════════════════════════
   480 px — small phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .fpill {
    font-size: 0.60rem !important;
    padding: 4px 7px !important;
  }

  .tile {
    flex: 0 0 230px !important;
  }

  .tile-img {
    height: 160px !important;
  }

  .gallery-grid {
    grid-auto-columns: 140px !important;
  }

  .hero-title {
    font-size: 1.3rem !important;
  }

  .proj-name {
    font-size: 1.1rem !important;
  }

} /* end 480px */