/* /assets/dla.css – DigitalLineArt styles (Classic + fixes) */

/* Design Tokens */
:root{
  --bg: #f9f7f4;
  --card: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --brand: #7a5c3b;
  --brand-2: #c7a574;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --maxw: 1200px;
  --line: #ece7df;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}

/* A11y */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Header (sticky + Logo) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(249,247,244,0.9); backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding:16px 20px}
.topbar{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}

/* Fallback: reines Logo mittig oben */
.header-logo,
.site-logo,
.logo{display:flex;justify-content:center}
.header-logo img,
.site-logo img,
.logo img{max-width:460px;width:min(86%,460px);height:auto}

/* Menü-Pillen (falls vorhanden) */
nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
nav a{color:var(--fg);text-decoration:none;padding:10px 14px;border-radius:999px;border:1px solid #e9e3da;background:#fff;transition:.2s}
nav a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* Hero */
.hero{padding:44px 20px 28px}
.hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:0 0 18px}
.hero p{color:var(--muted);max-width:65ch;margin:0 0 8px}
.hero .hero-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e9e3da;border-radius:999px;background:#fff;box-shadow:var(--shadow);font-size:.9rem}

/* Controls / Search */
.controls{max-width:var(--maxw);margin:16px auto 6px;display:flex;flex-wrap:wrap;gap:10px;padding:0 20px}
.filter-btn{padding:10px 14px;border-radius:999px;border:1px solid #e0d7ca;background:#fff;cursor:pointer;transition:.18s}
.filter-btn[aria-pressed="true"], .filter-btn:hover{background:var(--brand);color:#fff;border-color:transparent}

.search{flex:1;min-width:220px}
.search input,
input[type="search"],
.search-input{
  width:100%;padding:12px 16px;border-radius:999px;border:1px solid #e0d7ca;background:#fff;
  box-shadow:var(--shadow);outline:none
}

/* Gallery Grid */
.gallery{max-width:var(--maxw);margin:0 auto;padding:10px 20px 64px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s}
.card:hover{transform:translateY(-2px)}

/* Quadratisches, zentriertes Thumb mit Innenabstand */
.card figure{
  aspect-ratio:1/1; /* quadratisch */
  margin:0; padding:10px; /* Abstand, damit die Ecken nicht „stoßen“ */
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; border-radius:calc(var(--radius) - 2px);
}
.card figure img{
  width:100%; height:100%;
  object-fit:contain; /* vollständig sichtbar */
  background:#f6f5f4; border-radius:12px;
}

.card figcaption{padding:14px 16px}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.95rem;margin-top:6px}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #eee;background:#faf7f2;font-size:.8rem}

/* Buy-a-Print Button (Pille, rechts in der Karte) */
.btn-print{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;border:1px solid #e9e3da;
  background:var(--brand);color:#fff;box-shadow:var(--shadow);transition:.18s;white-space:nowrap
}
.btn-print:hover{filter:brightness(.95);transform:translateY(-1px)}

/* Pagination (horizontale Leiste, keine Bullets) */
.pagination,
ul.pagination{list-style:none;margin:24px auto 12px;padding:0;display:flex;gap:8px;justify-content:center;align-items:center}
.pagination li{margin:0}
.pagination a,
.pagination .current{
  display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;
  border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--fg);text-decoration:none;
  box-shadow:var(--shadow);font-size:.95rem
}
.pagination .current,
.pagination a[aria-current="page"]{background:#111;color:#fff;border-color:#111}

/* Work Detail */
.work-detail{max-width:950px;margin:0 auto 40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.work-detail figure{margin:0;border-radius:14px;overflow:hidden;background:#fff}
.work-detail img{width:100%;height:auto;display:block}
.work-detail video{width:100%;display:block;border-radius:14px}

/* Mockups/Videos Grids */
.work-detail .grid-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.work-detail .grid-m figure{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#fafafa;box-shadow:var(--shadow);margin:0}
.work-detail .grid-m img{width:100%;height:100%;object-fit:cover}

/* Similar Section */
.similar{background:#fff;border-top:1px solid var(--line);padding:32px 16px}
.similar h2{text-align:center;font-size:1.2rem;margin:0 0 20px}
.similar .items{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.similar figure{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f8f8f8;box-shadow:var(--shadow);margin:0}
.similar img{width:100%;height:100%;object-fit:cover}
.similar p{font-size:.9rem;text-align:center;margin:6px 0 0}

/* Footer */
footer, .site-footer{border-top:1px solid var(--line);background:#fff}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:26px 20px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted)}
.site-footer a{color:var(--fg);text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid #e9e3da;background:#fff;box-shadow:var(--shadow);transition:.18s}
.site-footer a:hover{transform:translateY(-1px)}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .card{grid-column:span 6}
}
@media (max-width: 640px){
  nav{display:none}
  .card{grid-column:span 12}
  .header-logo img,
  .site-logo img,
  .logo img{width:min(92%,420px)}
}