/*
Theme Name: Deviant Rebel Portfolio (Clean)
Author: RoBerta Elizabeth / Deviant Rebel
Version: 1.2.0
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root{
  --bg:#0c0c0c; --card:#111; --text:#eaeaea; --muted:#b7b7b7; --accent:#e62b2b;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:var(--text);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92vw);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,12,12,.8);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.nav .menu-items{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav .menu-items a{display:inline-block;padding:10px 12px;border-radius:999px}

/* Hero */
.hero{padding:48px 0 12px}
.hero h1{font-size:clamp(28px,4.4vw,54px);line-height:1.1;margin:0 0 10px}
.hero p{max-width:760px;color:var(--muted);margin:6px 0 0}

/* Cards / grids (used by list pages) */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:14px 0 16px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:18px}
.card .meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--muted)}

/* ==== Project auto-gallery (attachments) ==== */
.project-gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin:16px 0 32px;
}
.project-gallery figure{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.project-gallery img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:inherit;
  cursor:zoom-in;
}
@media (max-width:1200px){ .project-gallery{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px) { .project-gallery{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px) { .project-gallery{ grid-template-columns:1fr } }

/* Optional: Gutenberg Gallery block style “DR Grid (4-up)” */
.wp-block-gallery.is-style-dr-four{
  display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px !important; margin-top:16px;
}
.wp-block-gallery.is-style-dr-four .wp-block-image{margin:0 !important; overflow:hidden; border-radius:var(--radius)}
.wp-block-gallery.is-style-dr-four img{border-radius:var(--radius)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .nav{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.lightbox .btn{pointer-events:auto;font:700 22px/1 Inter, sans-serif;background:rgba(255,255,255,.1);padding:12px 14px;border-radius:999px;margin:0 12px;color:#fff;text-decoration:none}
.lightbox .close{position:absolute;top:18px;right:18px;font:700 20px/1 Inter, sans-serif;background:rgba(255,255,255,.12);padding:10px 12px;border-radius:999px;color:#fff;text-decoration:none}
.lightbox .btn:hover,.lightbox .close:hover{background:rgba(255,255,255,.18)}
.lightbox .counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#ccc;font:600 14px/1 Inter, sans-serif;letter-spacing:.04em}