/* PROJECT TILES — flexible grid using column/row spans instead of fixed
   named areas, so it scales to any number of completed projects (the
   previous version was hard-locked to exactly 6, one per named area,
   which silently broke -- two tiles stacking invisibly on top of each
   other -- the moment two projects shared a size or a 7th was added).
   grid-auto-flow:dense packs tiles in DOM order (i.e. the admin's own
   drag-to-reorder order) and fills gaps automatically, so any mix of
   sizes and any count looks tidy with no empty holes. A 6-column base
   means Square and Tall (each 2 columns) fit exactly 3 to a row. Every
   tile still shows the same full detail as before -- the case-stats
   plaque and case-timeline-v -- only its span size changes.
*/
  .project-tiles{margin:0 48px 10px;display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:300px;
    grid-auto-flow:dense;
    gap:16px;}

.proj-tile{position:relative;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;
    text-decoration:none;isolation:isolate;}

.proj-tile::before{content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(0deg, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.3) 55%, rgba(10,8,6,0.05) 100%);}

.proj-tile--feature{grid-column:span 4;grid-row:span 2;}

.proj-tile--tall{grid-column:span 2;grid-row:span 2;}

.proj-tile--wide{grid-column:span 4;grid-row:span 1;}

.proj-tile--square{grid-column:span 2;grid-row:span 1;}

/* Half-left / half-right are their own size, not just Square by another
   name -- a 3-column tile, meant to be used as a pair filling one row
   together (3+3=6), sitting between Square (2 cols) and Wide (4 cols). */
.proj-tile--half-left,
.proj-tile--half-right{grid-column:span 3;grid-row:span 1;}

.pt-photo{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;
    z-index:0;transition:transform 1.2s ease;}

.proj-tile:hover .pt-photo{transform:scale(1.08);}

/* STATS PLAQUE — same top-right corner treatment used everywhere else on
   the site, reused as-is on every tile size. */
  .case-stats{position:absolute;top:16px;right:16px;z-index:2;background:rgba(10,8,6,0.6);backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,0.14);padding:12px 16px;
    display:grid;grid-template-columns:repeat(2,1fr);gap:9px 20px;border-radius:2px;}

.case-stat .k{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:1px;color:rgba(255,255,255,0.5);
    text-transform:uppercase;margin-bottom:2px;white-space:nowrap;}

.case-stat .v{font-family:'Fraunces',serif;font-size:12.5px;color:#fff;white-space:nowrap;}

/* CONTENT — .case-content/.case-text/.case-index/.case-link/.case-timeline-v
   are the exact classes the homepage's case cards already use (see
   components.css); reused verbatim here, just placed in a smaller box, so
   every tile — big or small — carries the same specs and timeline detail.
   A named-area grid (rather than flex) is used specifically so the link's
   position can be moved independently of the text/timeline on mobile,
   without duplicating markup per breakpoint. */
  .proj-tile .case-content{position:relative;z-index:2;width:100%;padding:20px 22px;
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"text timeline" "link timeline";
    align-items:end;column-gap:20px;row-gap:6px;}

.proj-tile--feature .case-content,.proj-tile--tall .case-content{padding:22px 24px 24px;}

.proj-tile .case-text{grid-area:text;min-width:0;}

.proj-tile .case-timeline-v{grid-area:timeline;flex-shrink:0;align-self:end;}

.proj-tile .case-link{grid-area:link;justify-self:start;}

.proj-tile h3{font-family:'Fraunces',serif;font-weight:500;line-height:1.15;margin-bottom:6px;font-size:19px;}

.proj-tile--feature h3{font-size:clamp(26px,2.6vw,36px);margin-bottom:10px;}

.proj-tile--tall h3,.proj-tile--wide h3{font-size:21px;margin-bottom:8px;}

.proj-tile p{font-size:12px;color:rgba(255,255,255,0.75);line-height:1.6;margin-bottom:10px;}

.proj-tile--feature p{font-size:13.5px;margin-bottom:16px;}

.proj-tile .case-index{font-size:10px;margin-bottom:6px;}

.proj-tile .case-link{font-size:10px;padding-bottom:3px;}

.pt-link--soon{opacity:0.55;cursor:default;border-bottom-color:rgba(255,255,255,0.25) !important;}

.proj-tile:hover .case-link:not(.pt-link--soon){color:var(--gold);border-bottom-color:var(--gold);}

@media(max-width:900px){
    .project-tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:320px;margin:0 48px 10px;gap:14px;}
    .proj-tile--feature{grid-column:span 2;grid-row:span 2;}
    .proj-tile--wide{grid-column:span 2;grid-row:span 1;}
    .proj-tile--tall{grid-column:span 1;grid-row:span 2;}
    .proj-tile--square,
    .proj-tile--half-left,
    .proj-tile--half-right{grid-column:span 1;grid-row:span 1;}
  }

@media(max-width:760px){.project-tiles{margin:0 24px 10px;}}

@media(max-width:560px){
    .project-tiles{grid-template-columns:1fr;grid-auto-rows:minmax(440px,auto);gap:14px;margin:0 24px 10px;}
    .proj-tile{grid-column:span 1 !important;grid-row:span 1 !important;flex-direction:column;align-items:stretch;}
    .proj-tile .case-stats{position:static;align-self:stretch;margin:16px 16px 0;
      grid-template-columns:repeat(4,1fr);gap:4px 8px;padding:10px 12px;}
    .proj-tile .case-stat .k{font-size:6px;}
    .proj-tile .case-stat .v{font-size:11px;}
    .proj-tile .case-content{display:grid;grid-template-columns:1fr;
      grid-template-areas:"text" "timeline" "link";row-gap:14px;align-items:start;flex:1;}
    .proj-tile .case-timeline-v{align-self:start;}
    .proj-tile h3,.proj-tile--feature h3,.proj-tile--tall h3,.proj-tile--wide h3{font-size:22px;}
  }