/* ==========================================================================
   GoldenComics — Main CSS (Golden + Warm Neutrals + Burgundy)
   Fix: border-box + image-only blur overlay + max 4 cols
   ========================================================================== */

/* 01) TOKENS */
:root{
  --bg: #0C0B0E;
  --bg-2: #120F13;
  --surface: #141215;
  --surface-2: #1A171C;
  --border: #2B262C;

  --text: #F3F2F5;
  --muted: #C7C2CC;
  --muted-2: #9F98A6;

  --brand: #F5D90A;
  --brand-hover: #FFD34D;
  --brand-deep: #D4AF37;

  --accent: #8E2E38;                 /* Burgundy */
  --accent-weak: rgba(142,46,56,.20);

  --radius: 16px;
  --radius-sm: 12px;
  --gap: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);

  --gutter: clamp(16px, 4vw, 64px);  /* боковые отступы */

  --container-narrow: 960px;

  --dur: 190ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* 02) BASE */
*, *::before, *::after { box-sizing: border-box; } /* ключ к симметричным отступам без оверфлоу */

html, body { background: var(--bg); color: var(--text); }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, #141015 0%, transparent 60%),
    radial-gradient(900px 420px at 100% 0%, #1A1318 0%, transparent 65%),
    radial-gradient(900px 420px at 0% 0%, #120F13 0%, transparent 65%);
  background-attachment: fixed, fixed, fixed;
}
img { max-width: 100%; height: auto; display: block; }

:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(245,217,10,.18);
}

/* Skip link */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff;
  padding:8px 12px; border-radius:8px; z-index:1000;
}

/* 03) LAYOUT — wide container (без горизонтального скролла) */
.container{
  width: 100%;                 /* с border-box паддинги не создают overflow */
  margin: 0 auto;
  padding: 12px var(--gutter);
}
.container--wide{ /* совместимость, без ограничений */ }
.container--narrow{
  max-width: var(--container-narrow);
  padding-left: 24px; padding-right: 24px;
  margin-left: auto; margin-right: auto;
}
.site-content{ padding-bottom:56px; }

/* 04) HEADER */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(26,23,28,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header::after{
  content:""; display:block; height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,217,10,.22), transparent);
}
.header-bar{ display:flex; align-items:center; gap:12px; }

.site-branding{ display:flex; align-items:center; }
.brand-text{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-word{ font-weight:900; letter-spacing:.02em; color:var(--text); font-size:20px; }
.brand-accent{ color: var(--brand); }

.nav-toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface-2);
  padding:8px 10px; border-radius:12px; color:var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover{ background:#221d23; border-color:#3a3239; }
.nav-toggle .nav-toggle-box{
  width:18px; height:12px; position:relative; opacity:.85;
  background: linear-gradient(#d6d0da,#d6d0da) 0 0/100% 2px no-repeat,
              linear-gradient(#d6d0da,#d6d0da) 0 50%/100% 2px no-repeat,
              linear-gradient(#d6d0da,#d6d0da) 0 100%/100% 2px no-repeat;
  border-radius:2px;
}
.nav-toggle-label{ font-size:12px; opacity:.8; }
@media (min-width:960px){ .nav-toggle{ display:none; } }

/* 05) NAVIGATION */
.primary-nav{ margin-left:auto; }
.menu{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.menu a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  color:var(--text); text-decoration:none; border:1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.menu a:hover{ background:#201c21; border-color:var(--border); }
.menu .current-menu-item > a,
.menu .current_page_item > a{
  background: rgba(245,217,10,.10);
  border-color: rgba(245,217,10,.45);
  box-shadow: 0 0 0 2px rgba(245,217,10,.08) inset;
}
@media (max-width:959px){ .primary-nav{ display:none; } }

/* 06) SEARCH FORM */
.header-actions{ margin-left:12px; }
.search-form{
  position:relative; display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:4px 6px 4px 10px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.search-form:focus-within{
  border-color: rgba(245,217,10,.55);
  box-shadow: 0 0 0 3px rgba(245,217,10,.14);
  background:#171417;
}
.search-form .search-field{
  background:transparent; border:0; color:var(--text);
  width:200px; outline:none; padding:6px 6px 6px 0; font-size:14px;
}
.search-form .search-submit{
  border:1px solid var(--border); background:#1A171B; color:#e7e3ea;
  border-radius:10px; padding:6px 8px; display:inline-flex; align-items:center; justify-content:center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.search-form .search-submit:hover{ background:#221d23; border-color:#3a3239; }
@media (max-width:959px){ .header-actions{ display:none; } }

/* 07) MOBILE PANEL */
.mobile-panel{ border-top:1px solid var(--border); background:var(--bg-2); box-shadow: var(--shadow); }
.mobile-panel-inner{ padding:12px var(--gutter) 18px; }
.menu--mobile{ flex-direction:column; gap:8px; }
.menu--mobile a{ border:1px solid var(--border); background:#171318; }
.menu--mobile a:hover{ background:#1f1a20; }
.mobile-search{ margin-top:12px; }
.mobile-search .search-field{ width:100%; }
body.nav-open{ overflow:hidden; }

/* 08) PANELS (hero/archive/search heads) */
.gc-hero__title, .gc-archive__title{ font-size:28px; line-height:1.2; margin:0 0 6px; }
.gc-hero__sub, .gc-archive__desc{ color: var(--muted); }

.gc-panel{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.gc-panel:focus-within{ box-shadow: 0 0 0 3px var(--accent-weak); }

.gc-hero-panel{ align-items:center; }
.gc-sort{ display:flex; gap:8px; }
.gc-chip{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#1b171b; border:1px solid var(--border); color:#efeaf2;
  text-decoration:none; display:inline-block;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gc-chip:hover{ background:#231f23; border-color:#3a3239; }
.gc-chip.is-active{
  background: rgba(142,46,56,.14);
  border-color: rgba(142,46,56,.45);
  color:#FFEDEF;
}

/* 09) GRID — max 4 columns (4→3→2→1) */
.gc-grid{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1200px){
  .gc-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  .gc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:480px){
  .gc-grid{ grid-template-columns: 1fr; }
}

/* 10) CARD — 5:7, BLUR overlay on image, Updated:, categories */
.gc-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display:flex; flex-direction:column;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gc-card:hover{ border-color:#3a3239; }

.gc-thumb{ position:relative; display:block; background:#171418; }
.gc-thumb img{ width:100%; height:auto; display:block; aspect-ratio: 5 / 7; object-fit: cover; }
.gc-thumb__ph{ display:block; width:100%; aspect-ratio: 5 / 7;
  background: linear-gradient(135deg, #3a3136, #4a3b43);
}
.gc-thumb__grad{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
  pointer-events:none;
}

/* overlay READ (📖) — БЛЮР ТОЛЬКО ПРИ ХОВЕРЕ НА ИЗОБРАЖЕНИИ */
.gc-thumb__overlay{
  position:absolute; inset:0;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity var(--dur) var(--ease);
  pointer-events:none;
}
.gc-thumb:hover .gc-thumb__overlay,
.gc-thumb:focus-visible .gc-thumb__overlay{ opacity:1; }

.gc-thumb__overlay .gc-emoji{ font-size:38px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }

/* badge */
.gc-badge{
  position:absolute; left:8px; top:8px;
  font-weight:800; font-size:11px; letter-spacing:.02em;
  padding:4px 8px; border-radius:999px; color:#111; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.gc-badge--brand{ background: var(--brand); }

.gc-body{ padding: 10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.gc-title{
  margin:0; font-size:16px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gc-title a{ color:var(--text); text-decoration:none; }
.gc-title a:hover{ text-decoration:underline; }

/* meta: "📅 Updated: September 10, 2025" */
.gc-meta{ font-size:12px; color:#E9E2EC; display:flex; flex-wrap:wrap; gap:8px; align-items:center; opacity:.95; }
.gc-meta__item{ display:inline-flex; gap:6px; align-items:center; }
.gc-meta__item strong{ font-weight:600; }

/* categories row at bottom */
.gc-cats{
  margin-top:6px;
  display:flex; align-items:center; gap:8px;
}
.gc-cats__label{ font-size:14px; opacity:.95; }
.gc-cats__list{ display:flex; flex-wrap:wrap; gap:6px; }
.gc-cat{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#1b171b; border:1px solid var(--border); color:#efeaf2; text-decoration:none;
  font-size:12px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gc-cat:hover{ background:#231f23; border-color:#3a3239; }

/* 11) PAGINATION */
.gc-pagi{ display:flex; justify-content:center; margin:20px auto 28px; }
.gc-pagi .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.gc-pagi a, .gc-pagi span{
  padding:8px 12px; border:1px solid var(--border);
  border-radius:10px; text-decoration:none; color:var(--text);
  background:#1b181c; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gc-pagi .current{ background:#221e23; border-color:#3a3239; box-shadow: 0 0 0 2px var(--accent-weak) inset; }
.gc-pagi a:hover{ background:#231f23; }

/* 12) SINGLE (basic; ридер позже) */
.gc-single{ margin-top:18px; }
.gc-single-title{ font-size:28px; line-height:1.2; margin:0 0 8px; }
.gc-meta--single{ gap:12px; color:#E9E2EC; }
.gc-dot::before{ content:"•"; margin:0 8px; color:#7b6f7b; }
.entry-content img{ border-radius:12px; }

/* 13) FOOTER */
.site-footer{ border-top:1px solid var(--border); background: rgba(22,19,23,.9); }
.site-footer::before{
  content:""; display:block; height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,217,10,.18), transparent);
}
.footer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px var(--gutter);
}
.foot-copy{ color:var(--muted); font-size:13px; }
.menu--footer{ display:flex; gap:10px; }
.menu--footer a{ color:#F0EAF3; opacity:.85; }
.menu--footer a:hover{ opacity:1; text-decoration:underline; }

/* 14) UTILITIES */
.visually-hidden{
  position:absolute!important; height:1px;width:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
.text-muted{ color: var(--muted); }

/* Buttons (helpers) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; border-radius:12px; padding:10px 14px; text-decoration:none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary{ background: var(--brand); color:#111; border:1px solid #debe09; }
.btn--primary:hover{ background: var(--brand-hover); transform: translateY(-1px); }
.btn--outline{ background: transparent; color: var(--text); border:1px solid rgba(245,217,10,.55); }
.btn--outline:hover{ background: rgba(245,217,10,.08); }
a.accent{ color: var(--accent); } a.accent:hover{ text-decoration: underline; }