/* ============================================================
   RmaisD Arquitetura — estilos específicos da página: portfolio
   Carregar depois de css/base.css.
   ============================================================ */

.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.tag-row span{font-family:'Space Grotesk',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--line);padding:6px 14px;border-radius:20px;}
.proj-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.proj-filters button{
    font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;
    color:var(--ink-soft);background:transparent;border:1px solid var(--line);padding:9px 18px;border-radius:20px;
    cursor:pointer;transition:color .25s ease,border-color .25s ease,background-color .25s ease;
  }
.proj-filters button:hover{color:var(--ink);}
.proj-filters button[aria-pressed="true"]{color:var(--orange-ink);border-color:var(--orange);background:rgba(240,125,0,.09);}
.proj-filters button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.proj-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
@media (max-width:860px) { .proj-photo-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px) { .proj-photo-grid{grid-template-columns:1fr;} }
.proj-tile{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:none;padding:0;margin:0;cursor:pointer;text-align:left;}
.proj-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.02);transition:transform .6s ease,filter .5s ease;}
.proj-tile:hover img,.proj-tile:focus-visible img{transform:scale(1.045);filter:grayscale(0) contrast(1.05);}
.proj-tile .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;
    background:linear-gradient(180deg,rgba(10,9,7,0) 45%,rgba(10,9,7,.78) 100%);opacity:0;transition:opacity .35s ease;}
.proj-tile:hover .ov,.proj-tile:focus-visible .ov{opacity:1;}
.proj-tile .ov .name{font-family:'Fraunces',serif;font-size:19px;color:#fff;}
.proj-tile .ov .meta{font-family:'Space Grotesk',sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.78);margin-top:4px;}
.proj-tile:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;}
.proj-tile[hidden]{display:none;}
/* ===== Painel de detalhe do projeto (galeria em tela cheia, dentro da própria página) ===== */
  .proj-detail{position:fixed;inset:0;z-index:70;background:var(--paper);opacity:0;visibility:hidden;overflow-y:auto;
    transition:opacity .3s ease;}
.proj-detail.is-open{opacity:1;visibility:visible;}
.proj-detail-inner{max-width:1100px;margin:0 auto;padding:88px clamp(20px,4vw,48px) 90px;}
.proj-detail-back{
    display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:0;margin-bottom:26px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-soft);
  }
.proj-detail-back:hover{color:var(--orange-ink);}
.proj-detail-close{
    position:fixed;top:16px;right:clamp(16px,4vw,40px);z-index:71;width:42px;height:42px;border-radius:50%;
    background:var(--paper);border:1px solid var(--line);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  }
.proj-detail-close:hover{border-color:var(--orange);color:var(--orange-ink);}
.proj-stage{position:relative;background:var(--paper-2);aspect-ratio:16/10;overflow:hidden;}
.proj-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(10,9,7,.5);color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;
    opacity:.85;transition:opacity .2s ease,background-color .2s ease;
  }
.proj-nav:hover{opacity:1;background:rgba(10,9,7,.75);}
.proj-nav.prev{left:14px;}
.proj-nav.next{right:14px;}
.proj-nav:focus-visible{outline:2px solid var(--orange);}
/* Setas sempre visíveis (não só no hover): no site de referência elas só aparecem
     ao passar o mouse, mas em celular/tablet não existe "hover" — deixamos visíveis
     e discretas o tempo todo para não esconder a navegação em telas de toque. */

  .proj-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:2px 2px 6px;}
.proj-thumbs button{flex:0 0 auto;width:82px;height:60px;padding:0;border:2px solid transparent;border-radius:2px;
    background:none;cursor:pointer;overflow:hidden;}
.proj-thumbs button img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.55);transition:filter .25s ease;}
.proj-thumbs button:hover img{filter:grayscale(0);}
.proj-thumbs button[aria-current="true"]{border-color:var(--orange);}
.proj-thumbs button[aria-current="true"] img{filter:grayscale(0);}
.proj-thumbs button:focus-visible{outline:2px solid var(--orange);}
.proj-info{margin-top:40px;max-width:64ch;}
.proj-info .cat{font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--orange-ink);}
.proj-info h2{font-size:clamp(24px,3.4vw,32px);font-weight:400;margin-top:10px;}
.proj-info dl{margin:24px 0 0;display:grid;gap:11px;}
.proj-info dl div{display:flex;flex-wrap:wrap;gap:4px 10px;}
.proj-info dl dt{font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--gray);min-width:120px;margin:0;}
.proj-info dl dd{margin:0;color:var(--ink-soft);font-size:14.5px;flex:1;min-width:220px;}
@media (prefers-reduced-motion:reduce) { .proj-tile img, .proj-tile .ov, .proj-detail{transition:none !important;} }
.cta-solid{
    display:inline-block;margin-top:34px;padding:14px 28px;background:var(--orange);color:#241300;text-decoration:none;
    font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;
    transition:background .25s ease;
  }
.page-banner p.lead{color:var(--ink-soft);font-size:16px;max-width:58ch;margin:16px 0 0;}
.section-head p{color:var(--ink-soft);font-size:14.5px;margin:10px 0 0;max-width:56ch;}