/* Google Fonts — Urbanist (replaces Century Gothic site-wide).
   @import must be the first rule in the file.               */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&display=swap');

/* ── Global font override ───────────────────────────────────────
   mobile.css loads after every page's inline <style>, so this
   :root wins the cascade and switches --font to Urbanist on all
   pages without touching 39 individual HTML files.            */
:root {
  --font: 'Urbanist', 'Century Gothic', 'Futura', 'Trebuchet MS', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   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
     ════════════════════════════════════════════════════════ */

  /* Allow scroll so both stacked panels are fully reachable.
     body:has(#hero) targets only index.html, which sets
     overflow:hidden on html/body to prevent scrolling on
     desktop — we undo that on mobile.                       */
  body:has(#hero) {
    overflow-y: auto !important;
  }

  /* Hero section: flex column so panels stack naturally.
     padding-top clears the 64 px fixed header.
     The slideshow background and veil are switched to
     position:fixed below so they stay full-screen even
     when the stacked panels push #hero taller than 100vh.  */
  #hero {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 96px 24px 56px !important;
    gap: 32px !important;
  }

  /* Fix background and veil to viewport while page scrolls  */
  .hero-bg,
  .hero-veil {
    position: fixed !important;
  }

  /* Left panel — join the flex flow, no longer absolute     */
  .hero-panel {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    max-width: none !important;
  }

  /* Right text block — show below left panel in flex flow   */
  .hero-panel-right {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    max-width: none !important;
    text-align: left !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 — reflow 4-column table into stacked
     cards. rowspan cells (td-cat) appear only on the first
     row of each group; subsequent rows in the group naturally
     show just name / address / contact, acting as a visual
     continuation under that category label.                  */
  .consultants {
    padding-top: 28px !important;
    padding-bottom: 48px !important;
  }

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

  /* Switch table, tbody and every row to block layout */
  .cons-table,
  .cons-table tbody,
  .cons-table tr {
    display: block !important;
  }

  .cons-table {
    overflow-x: visible !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 24px !important;
  }

  /* Each row = one card, separated by a hairline */
  .cons-table tr {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .cons-table tr:last-child {
    border-bottom: none !important;
  }

  /* All cells stack as full-width blocks */
  .cons-table td {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    font-size: 0.82rem !important;
  }

  /* Category label — prominent header above the firm details */
  .cons-table td.td-cat {
    width: 100% !important;
    padding: 0 0 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }

  /* Address — slightly dimmed to create visual hierarchy */
  .cons-table .td-addr {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.7) !important;
    margin-top: 2px !important;
  }

  /* Contact — same scale as address, with a touch of top space */
  .cons-table .td-contact {
    width: 100% !important;
    font-size: 0.78rem !important;
    margin-top: 6px !important;
  }


  /* ════════════════════════════════════════════════════════
     PROJECT DETAIL PAGES
     Stacked layout: full-width image → 5 mm gap → text
     ════════════════════════════════════════════════════════ */

  /* Allow the page to scroll so the text block sits below
     the image rather than overlapping it. Only project pages
     carry a .bg element so this selector is safely specific. */
  html:has(.bg) {
    overflow-y: auto !important;
    height:     auto !important;
  }
  body:has(.bg) {
    overflow-y: auto !important;
    height:     auto !important;
    position:   relative !important; /* positioning context for overlay */
  }

  /* Image: full-width block that sits just below the header */
  .bg {
    position:   relative !important;
    left:       0 !important;
    right:      0 !important;
    top:        0 !important;
    bottom:     auto !important;
    margin-top: 64px !important;
    width:      100% !important;
    height:     56vw !important;
    min-height: 200px !important;
    background-position: center center !important;
    background-size:     cover !important;
    z-index:    0 !important;
  }

  /* Overlay: absolute over the image only (body is the
     positioning context set above) */
  .bg-overlay {
    position:   absolute !important;
    top:        64px !important;
    left:       0 !important;
    right:      0 !important;
    height:     56vw !important;
    min-height: 200px !important;
    background: linear-gradient(
      to bottom,
      transparent 35%,
      rgba(8, 8, 8, 0.5) 100%
    ) !important;
  }

  /* Info panel: flows in the page, 5 mm below the image.
     Bottom padding clears the fixed gallery bar. */
  .info-panel {
    position:       static !important;
    top:            auto !important;
    right:          auto !important;
    bottom:         auto !important;
    left:           auto !important;
    width:          100% !important;
    height:         auto !important;
    max-height:     none !important;
    padding:        5mm 24px 110px !important;
    background:     var(--black) !important;
    backdrop-filter: none !important;
    overflow-y:     visible !important;
  }

  /* Gallery bar: stays fixed at the bottom */
  .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;
    pointer-events: auto !important;
  }

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

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

  /* ── About page — match index page body text style ─────────
     Same size and justification as .hpr-body on the index page */
  .about-body {
    font-size: 0.78rem !important;
    text-align: justify !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;
  }

  /* Slightly tighter body text for the right panel on small phones */
  .hpr-body {
    font-size: 0.75rem !important;
    line-height: 1.8 !important;
  }

} /* end 480px */