/* --------------------------- PROJECT TILES ---------------------------
   Home + work project grid. The tile images pick up the shared case-study
   scroll treatment (Lenis smooth-scroll + WebGL bottom-edge stretch) loaded via
   php/fluid-stretch.php — these styles just handle layout: a fixed-ratio image
   frame with the project name + category in plain text below. No overlay, no
   hover reveal. */

.tile {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 40px;
}

/* Fixed-ratio image window. Reserves its space via aspect-ratio before the
   image loads, so there is no layout shift. */
.tile .frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;              /* matches the 1000x667 tile imagery */
    overflow: hidden;
    background-color: #eee;           /* placeholder while the image loads */
}

.tile .inner {
    position: absolute;
    inset: 0;
}

.tile .inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover / focus image zoom is driven by the WebGL shader (js/fluid-stretch.js,
   uZoom) — the DOM image is hidden under the canvas, so the zoom rides the
   canvas with the warp. Nothing to do here. */

/* Name + category, always visible below the frame. */
.tile .meta {
    padding-top: 0.6em;
    padding-left: 16px;
}

/* Tile titles are h2 (for correct heading order) but keep the site's h3
   type scale so they look exactly as before across breakpoints. */
.tile .meta h2 {
    margin: 0;
    font-size: 1.375em;
    line-height: 1.13636364;
    display: inline-block;
    position: relative;
    padding-right: 1.5em;             /* reserved zone for the hover arrow */
}
@media (min-width: 768px) {
    .tile .meta h2 { font-size: 1.5em; line-height: 1.25; }
}
@media (min-width: 992px) {
    .tile .meta h2 { font-size: 1.75em; line-height: 1.25; }
}

/* Hover / focus cue: an underline wipes in under the title text, and an arrow
   slides in to its right. Fires on pointer hover and on keyboard focus of the
   tile. The .meta sits below the frame, so the WebGL canvas never covers it. */
.tile .meta h2::after {               /* underline, under the text only */
    content: "";
    position: absolute;
    left: 0;
    right: 1.5em;                     /* stop before the arrow zone */
    bottom: -1px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile .meta h2::before {              /* arrow */
    content: "\2192";
    position: absolute;
    right: 0;
    bottom: 0;
    font-weight: 400;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tile:hover .meta h2::after,
.tile:focus-visible .meta h2::after {
    transform: scaleX(1);
}

.tile:hover .meta h2::before,
.tile:focus-visible .meta h2::before {
    opacity: 1;
    transform: translateX(0);
}

/* Reduced motion: keep the cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .tile .meta h2::after,
    .tile .meta h2::before {
        transition: none;
    }
}

.tile .meta p {
    margin: 0.15em 0 0;
    font-size: 0.9em;
    line-height: 1.25;
    color: #767676;                   /* muted, AA on white */
}

/* Visible keyboard focus (mouse clicks stay clean via :focus-visible). */
.tile:focus-visible {
    outline: 2px solid #330047;
    outline-offset: 4px;
}