/* ==========================================================================
   ISAGO ARCHITECTURE — projects grid: metadata pill overlays
   Loaded after style.css. Scoped to .masonry .m-item — no other page affected.
   ========================================================================== */

/* --- media wrapper needs a stacking context above the scrim (z-index:1) --- */
.m-item .ph-media{position:relative}

/* --- pill rail: top-left cluster over the image --- */
.m-pills{
  position:absolute;z-index:3;top:14px;left:14px;right:14px;
  display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;
}
.m-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;
  font-size:.68em;font-weight:600;line-height:1;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
  color:#fff;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
/* sector — the primary pill, brand red */
.m-pill.-sector{background:var(--accent);border-color:var(--accent);color:#fff}
/* location — neutral glass */
.m-pill.-location{}
/* client / delivery agent — quieter still */
.m-pill.-client{background:rgba(0,0,0,.3);color:rgba(255,255,255,.86);font-weight:500}
/* scope of work — inferred from the company profile; confirm with the studio */
.m-pill.-scope{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
/* status — placeholder until the studio confirms completed/current */
.m-pill.-status{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);
  border-style:dashed;font-weight:500}

/* --- "Explore project" affordance, bottom-right, on linked cards only --- */
.m-explore{
  position:absolute;z-index:3;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  font-size:.7em;font-weight:600;line-height:1;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
  color:var(--charcoal);background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  transform:translateY(6px);opacity:0;
  transition:transform var(--dur-fast) var(--ease-page),
             opacity var(--dur-fast) var(--ease-page),
             background var(--dur-fast) var(--ease-page);
  pointer-events:none;
}
.m-explore .arrow{
  display:inline-block;transition:transform var(--dur-fast) var(--ease-page);
}
/* visible by default on touch / no-hover devices so the affordance is never hidden */
@media (hover:none){
  .m-explore{opacity:1;transform:none}
}
a.m-item:hover .m-explore,
a.m-item:focus-visible .m-explore{opacity:1;transform:none}
a.m-item:hover .m-explore .arrow{transform:translateX(3px)}
a.m-item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* subtle lift on the linked cards only, so clickable vs. reference reads clearly */
a.m-item .ph-img{transition:transform var(--dur-med) var(--ease-panel)}
a.m-item:hover .ph-img{transform:scale(1.04)}
a.m-item:hover b{text-decoration:underline;text-underline-offset:3px}

/* non-linked cards: same card, no pointer, no hover promise */
div.m-item{cursor:default}

/* --- caption row beneath the image --- */
.m-item .m-meta{
  display:block;font-size:.75em;text-transform:uppercase;color:#888;
  margin-top:4px;letter-spacing:.06em;
}

@media (max-width:578px){
  .m-pills{top:10px;left:10px;right:10px;gap:5px}
  .m-pill{padding:4px 9px;font-size:.62em;letter-spacing:.06em}
  .m-explore{right:10px;bottom:10px;opacity:1;transform:none}
}

/* ==========================================================================
   Text tiles — projects without photography (REV02 update, Jul 2026)
   Shorter dark tiles: dark grey -> black on hover, white text, full detail.
   ========================================================================== */
.m-item.-text{
  position:relative;overflow:hidden;cursor:default;
  background:#2e2e2e;color:#fff;
  padding:22px 22px 28px;min-height:220px;
  transition:background var(--dur-med) var(--ease-panel),
             transform var(--dur-med) var(--ease-panel);
}
.m-item.-text:hover{background:#000;transform:translateY(-4px)}
/* animated brand accent along the top edge */
.m-item.-text::after{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;
  background:var(--accent);
  transition:width var(--dur-med) var(--ease-panel);
}
.m-item.-text:hover::after{width:100%}

/* pills sit in normal flow on text tiles (no image to overlay) */
.m-item.-text .m-pills{position:static;top:auto;left:auto;right:auto;margin:0 0 18px}
.m-item.-text .m-pill{background:rgba(255,255,255,.12)}
.m-item.-text .m-pill.-sector{background:var(--accent)}
.m-item.-text .m-pill.-status{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}

.m-item.-text b{display:block;margin-top:0;font-size:1.1em;color:#fff}
.m-item.-text .m-desc{
  margin:6px 0 0;font-size:.82em;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.82);
}
.m-item.-text .m-detail{
  margin:12px 0 0;font-size:.8em;line-height:1.65;color:rgba(255,255,255,.62);
  transition:color var(--dur-med) var(--ease-panel);
}
.m-item.-text:hover .m-detail{color:rgba(255,255,255,.8)}

/* service pill — from the REV02 list, glass/light */
.m-pill.-service{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
/* status pills now carry real statuses from the REV02 list — solid, no dash */
.m-pill.-status{border-style:solid;font-weight:500}

@media (max-width:578px){
  .m-item.-text{padding:18px 16px 22px;min-height:0}
}