/* ========= Air Quality Landing page only ========= */

/* Quadrant grid */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Axis crosslines */
.axis {
  position: absolute;
  background: #555;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
.x-axis {
  top: 50%;
  left: 0;
  height: 2px;
  width: 100%;
}
.y-axis {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
}

/* Quadrant tiles */
.quadrant {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 2rem;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--transition-speed),
    filter var(--transition-speed);
}
.quadrant:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* BG media */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Per-quadrant overlay tints (landing only) */
.q1 .overlay {
  background: rgba(160, 92, 78, 0.6);
}
.q2 .overlay {
  background: rgba(93, 115, 139, 0.6);
}
.q3 .overlay {
  background: rgba(159, 184, 163, 0.6);
}
.q4 .overlay {
  background: rgba(198, 164, 88, 0.45);
}

/* Hover behavior */
.quadrant:hover .overlay {
  opacity: 0;
}
.quadrant:hover .bg-video,
.quadrant:hover img {
  filter: brightness(1.1);
  transition: filter 0.6s ease-in-out;
}

/* Tile text block */
.content {
  position: relative;
  z-index: 2;
  color: #091d7e;
}

.content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.content p {
  font-size: 1rem;
  opacity: 0.9;
}

/* Quadrant 4 hover label (landing tile) */
.hover-label {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.q4:hover .hover-label {
  opacity: 1;
}

/* Touch devices: don’t depend on hover for “finished” look */
@media (hover: none) and (pointer: coarse) {
  .quadrant {
    transform: none;
    filter: none;
  }
  .overlay {
    opacity: 0.22;
  }
}

/* Reduced motion: avoid hover motion feel */
@media (prefers-reduced-motion: reduce) {
  .quadrant {
    transition: none;
  }
  .quadrant:hover {
    transform: none;
    filter: none;
  }
  .quadrant:hover .bg-video,
  .quadrant:hover img {
    transition: none;
    filter: none;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(50vh, 1fr));
    height: auto;
    min-height: 100vh;
  }
  .quadrant {
    min-height: 50vh;
  }
  .content {
    bottom: 1.5rem;
    left: 1.25rem;
    right: 1.25rem;
  }
  .content h2 {
    font-size: 1.4rem;
  }
}

@media (max-width: 900px) {
  .quadrant {
    padding: 1.25rem;
  }
}