/*
Theme Name: Sanja Creation Marble & Gold (Multi-pages)
Theme URI: https://sanjacreation.com
Author: Sanja Creation
Description: Thème premium noir marbre & doré chaud, pages auto + photos.
Version: 2.1.0
Text Domain: sanja
*/

:root{
  --card:rgba(16,18,24,.72);
  --text:#eef2fb;
  --muted:#b7c0d1;
  --gold:#D4AF37;
  --gold2:#B8891B;
  --border: rgba(255,255,255,.08);
  --shadow: 0 16px 55px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1120px;
  --pad: 20px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.6;
  background:
    radial-gradient(900px 500px at 12% 6%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(900px 500px at 86% 10%, rgba(184,137,27,.14), transparent 55%),
    radial-gradient(1200px 700px at 40% 120%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, #07090d, #0b0f14 55%, #07090d);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; border-radius:14px; }
.container{ width: min(100% - 2*var(--pad), var(--max)); margin:0 auto; }

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,9,13,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.2px; }
.brand .logo img{ border-radius:10px; max-height:44px; width:auto; }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.nav a{ color:var(--muted); font-weight:800; padding:10px 10px; border-radius:12px; }
.nav a:hover{ color:var(--text); background: rgba(255,255,255,.06); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,.28);
  background: rgba(212,175,55,.08);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  font-weight:900;
  transition: transform .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(212,175,55,.45); }
.btn.primary{ border:none; color:#12100a; background: linear-gradient(135deg, var(--gold), var(--gold2)); }

.section{ padding: 60px 0; }
.section-title{ font-size: clamp(22px, 2.3vw, 34px); margin:0 0 10px 0; }
.section-sub{ color:var(--muted); margin:0 0 24px 0; max-width: 70ch; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  position: relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  padding:1px;
  background: linear-gradient(135deg, rgba(212,175,55,.55), rgba(255,255,255,0), rgba(184,137,27,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.35;
}

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-12{ grid-column: span 12; }

.hero{ padding: 58px 0 28px; }
.hero .wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items: stretch; }
.hero h1{ font-size: clamp(32px, 3.2vw, 54px); line-height:1.08; margin:0 0 14px; }
.hero p{ color:var(--muted); margin:0 0 18px; max-width: 70ch; }
.hero-media{ min-height: 360px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit: cover; border-radius: 0; display:block; }

.badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 0; }
.badge{ font-size: 13px; color: var(--muted); border: 1px solid rgba(212,175,55,.22); padding: 8px 10px; border-radius: 999px; background: rgba(212,175,55,.06); }

.portfolio-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.portfolio-item{ overflow:hidden; }
.portfolio-item .meta{ margin-top:12px; }
.meta .title{ font-weight:950; margin:0 0 4px; }
.meta .desc{ margin:0; color:var(--muted); font-size:14px; }

.site-footer{ border-top: 1px solid rgba(212,175,55,.12); padding: 28px 0; color: var(--muted); }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .col-6,.col-4{ grid-column: span 12; }
}