/* ==========================================================================
   Projects page: mobile treatment
   Loads last on projects.html so it wins the cascade.

   The tiles were built for a mouse. style.css:2711 puts .project-info at
   `opacity: 0; transform: translateY(80px)` and only reveals it on
   `.project-tile:hover`. There is no hover on a touch screen, so every tile
   on a phone was an unlabeled photo: no project name, no location, and no
   signal that it was even tappable.

   Fix: the label is always visible below 768px. Because it no longer has to
   animate in, the hover choreography built around it (image blur, scale,
   lift) is dropped here too. The scrim moves onto the image so white text
   stays legible over a bright photo without dimming the whole tile.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* ---- Always-visible labels -------------------------------------------- */
  .project-tile .project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Was translateY(80px) + opacity 0, waiting on a hover that never comes. */
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    padding: 52px 16px 16px;
    /* Taller and darker at the base than the desktop scrim: the label sits on
       the photo permanently now, so it has to hold up over a bright image
       rather than over an already-dimmed one.

       The gradient is sized in px from the bottom rather than in percentages,
       so a three-line title (Westlake Village) gets the same solid backing
       under its top line as a one-line title does. With percentage stops the
       fade scaled with the box and left tall labels sitting on bare photo. */
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.90) 0px,
      rgba(0, 0, 0, 0.86) 34px,
      rgba(0, 0, 0, 0.72) 64px,
      rgba(0, 0, 0, 0.42) 96px,
      rgba(0, 0, 0, 0.12) 128px,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
  }

  /* Long titles are common here ("Westlake Village Soft-Modern Kitchen +
     Entertainer's Bar"). Cap at three lines so a single tile can't push its
     label over the whole image. */
  .project-tile .project-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Hover states are unreachable on touch, but a tap still fires :hover on
     most mobile browsers and would re-trigger the blur/zoom mid-navigation.
     Neutralise them so tapping a tile just follows the link. */
  .project-tile:hover {
    transform: none !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
  }

  .project-tile:hover .project-image {
    filter: none !important;
    transform: none !important;
  }

  .project-tile:hover .project-info {
    transform: none !important;
    opacity: 1 !important;
  }

  /* ---- Type ------------------------------------------------------------- */
  /* 1.6rem titles wrapped to four lines inside a 16px gutter. */
  .project-tile .project-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 3px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  }

  .project-tile .project-location {
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.92;
    margin: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  }

  /* ---- Grid -------------------------------------------------------------
     400px tiles at one per row meant roughly one project per screen. Shorter
     tiles put two in view at a time, which is what makes a gallery scannable.
     --------------------------------------------------------------------- */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 24px 0;
  }

  .project-tile {
    height: 260px;
    border-radius: 4px;
  }

  .projects-section-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .projects-intro {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* Narrow phones: a touch shorter again so two tiles still fit the fold. */
@media screen and (max-width: 390px) {
  .project-tile { height: 232px; }
  .project-tile .project-title { font-size: 1rem; }
  .project-tile .project-info { padding: 40px 14px 14px; }
}