/* Zendejas final UI stability / interaction fixes */

/* Project cards: clickable + B/W to color hover everywhere */
a.project-card,
.projects-grid > a.project-card,
.client-design-projects > a.project-card {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  isolation: isolate;
}

a.project-card > img,
a.project-card > video,
a.project-card picture,
a.project-card picture img,
a.project-card .project-caption {
  pointer-events: none !important;
}

.projects-grid a.project-card > img,
.projects-grid a.project-card > video,
.projects-grid a.project-card picture img,
.client-design-projects a.project-card > img,
.client-design-projects a.project-card > video {
  filter: grayscale(1) !important;
  transition: filter .34s ease, transform .42s ease !important;
  transform: scale(1.001);
}

.projects-grid a.project-card:hover > img,
.projects-grid a.project-card:focus-visible > img,
.projects-grid a.project-card:hover > video,
.projects-grid a.project-card:focus-visible > video,
.projects-grid a.project-card:hover picture img,
.projects-grid a.project-card:focus-visible picture img,
.client-design-projects a.project-card:hover > img,
.client-design-projects a.project-card:focus-visible > img,
.client-design-projects a.project-card:hover > video,
.client-design-projects a.project-card:focus-visible > video {
  filter: grayscale(0) !important;
  transform: scale(1.012) !important;
}

/* Keep project title/year readable while preserving the original hover feel */
.projects-grid a.project-card .project-caption,
.client-design-projects a.project-card .project-caption {
  z-index: 6 !important;
  pointer-events: none !important;
}

/* Home retains its existing original media/hover behavior */
a.home-band { pointer-events: auto !important; cursor:pointer !important; }
a.home-band > img,
a.home-band > video,
a.home-band .band-name { pointer-events:none !important; }

/* Contact: explicit map left / information right */
@media (min-width: 951px) {
  .contact-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(400px, .85fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    min-height: calc(100svh - 118px) !important;
    padding: 0 !important;
    background: #111 !important;
    overflow: hidden !important;
  }
  .contact-page .contact-map {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 650px !important;
    height: auto !important;
    order: 1 !important;
    background: #151515 !important;
    overflow: hidden !important;
  }
  .contact-page .contact-map iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    filter: grayscale(1) contrast(1.08) brightness(.86) !important;
  }
  .contact-page .contact-card {
    position: relative !important;
    z-index: 3 !important;
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 650px !important;
    padding: clamp(42px, 5vw, 82px) clamp(34px, 4vw, 68px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: #050505 !important;
  }
  .contact-page .contact-card h1 img {
    width: min(360px, 90%) !important;
  }
  .contact-page .contact-columns {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .contact-page .contact-columns > div {
    padding-top: 0 !important;
    gap: 20px !important;
  }
  .contact-page .client-location-arrow,
  .contact-page .map-region-label {
    position: absolute !important;
    left: 24px !important;
    bottom: 24px !important;
    z-index: 4 !important;
    color: #fff !important;
    background: rgba(0,0,0,.82) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    padding: 11px 14px !important;
    font-size: 11px !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
  }
  .contact-page .map-region-label { display:none !important; }
}

@media (max-width: 950px) {
  .contact-page {
    display:flex !important;
    flex-direction:column !important;
    padding:0 !important;
  }
  .contact-page .contact-map {
    order:1 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:48svh !important;
    min-height:330px !important;
  }
  .contact-page .contact-card {
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    padding:36px 24px 50px !important;
  }
}

/* Light mode contact contrast */
html.za-theme-light .contact-page { background:#efefed !important; }
html.za-theme-light .contact-page .contact-card { background:#fff !important; color:#111 !important; }
html.za-theme-light .contact-page .contact-card address,
html.za-theme-light .contact-page .contact-card a,
html.za-theme-light .contact-page .contact-card p { color:#111 !important; }
html.za-theme-light .contact-page .contact-wa { border-color:#555 !important; }