/*
Theme Name: Warface Art Vault
Theme URI: https://fatherbonus.ru/
Author: Father Bonus / ChatGPT
Author URI: https://fatherbonus.ru/
Description: Dark tactical sci-fi gallery theme for high-resolution fan art, remote cloud images and cinematic art archives.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warface-art-vault
Tags: custom-background, custom-colors, custom-logo, custom-menu, featured-images, grid-layout, dark, portfolio, photography
*/

:root {
  --fav-bg: #070b10;
  --fav-bg-2: #0c121a;
  --fav-panel: rgba(13, 19, 28, .82);
  --fav-panel-2: rgba(20, 28, 39, .76);
  --fav-border: rgba(255,255,255,.10);
  --fav-border-strong: rgba(255,255,255,.18);
  --fav-text: #eff4f8;
  --fav-muted: #8f9bab;
  --fav-muted-2: #667384;
  --fav-accent: #f0642a;
  --fav-accent-2: #17d5ff;
  --fav-danger: #ff3f44;
  --fav-radius: 10px;
  --fav-radius-lg: 18px;
  --fav-shadow: 0 18px 70px rgba(0,0,0,.45);
  --fav-content: 1280px;
  --fav-header-logo-scale: 100%;
  --fav-header-pad: 18px;
  --fav-base-font-size: 16px;
  --fav-heading-scale: 100%;
  --fav-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fav-heading-font: Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
}

body.scheme-cyan { --fav-accent: #16d9ff; --fav-accent-2: #6cf8ff; }
body.scheme-violet { --fav-accent: #a84cff; --fav-accent-2: #1ed4ff; }
body.scheme-emerald { --fav-accent: #2de39a; --fav-accent-2: #4dd6ff; }
body.scheme-red { --fav-accent: #ff3f44; --fav-accent-2: #ffb02e; }
body.scheme-gold { --fav-accent: #ffb02e; --fav-accent-2: #ff5f2e; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--fav-accent) 15%, transparent), transparent 34rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--fav-accent-2) 12%, transparent), transparent 30rem),
    linear-gradient(180deg, #080d13 0%, #05080d 100%);
  color: var(--fav-text);
  font-family: var(--fav-font);
  font-size: var(--fav-base-font-size);
  line-height: 1.6;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fav-accent); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute!important; width: 1px; word-wrap: normal!important;
}
.fav-container { width: min(var(--fav-content), calc(100% - 40px)); margin-inline: auto; }
.fav-main { min-height: 62vh; padding: 34px 0 70px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 8, 13, .84);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--fav-border);
  transition: background .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { background: rgba(5,8,13,.94); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.header-inner {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding-block: var(--fav-header-pad);
}
.site-branding { display:flex; align-items:center; gap: 12px; min-width: 205px; }
.custom-logo-link { display:block; width: calc(138px * var(--fav-header-logo-scale) / 100%); max-width: 220px; }
.custom-logo { width: 100%; height: auto; object-fit: contain; }
.default-logo { display: flex; align-items: center; gap: 10px; font-family: var(--fav-heading-font); font-weight: 900; letter-spacing: .035em; line-height: .92; text-transform: uppercase; }
.default-logo-mark { width: 34px; height: 34px; display:grid; place-items:center; border: 1px solid var(--fav-border-strong); background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); clip-path: polygon(8% 0,100% 0,92% 100%,0 100%); color: var(--fav-accent); }
.default-logo-text { font-size: 16px; }
.main-navigation { justify-self: end; }
.menu-toggle { display:none; width: 42px; height: 42px; border: 1px solid var(--fav-border); background: rgba(255,255,255,.03); color: var(--fav-text); border-radius: 8px; cursor:pointer; }
.menu-toggle span { display:block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; }
.primary-menu { display:flex; gap: 4px; align-items:center; justify-content:flex-end; list-style:none; margin:0; padding:0; }
.primary-menu a { display:block; padding: 10px 14px; color: var(--fav-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .075em; border-radius: 8px; }
.primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu .current_page_item > a { color: var(--fav-text); background: rgba(255,255,255,.045); }
.primary-menu .current-menu-item > a::after, .primary-menu .current_page_item > a::after { content:""; display:block; height: 2px; margin-top: 6px; background: var(--fav-accent); box-shadow: 0 0 16px var(--fav-accent); }
.header-actions { display:flex; gap: 10px; align-items:center; justify-content:flex-end; }
.header-search-link { width: 40px; height: 40px; display:grid; place-items:center; border: 1px solid var(--fav-border); border-radius: 8px; color: var(--fav-muted); }

/* Hero */
.fav-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--fav-border); }
.fav-hero::before, .fav-section-frame::before {
  content:""; position:absolute; inset: 18px; pointer-events:none;
  background:
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) left top/38px 1px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) left top/1px 38px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) right top/38px 1px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) right top/1px 38px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) left bottom/38px 1px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) left bottom/1px 38px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) right bottom/38px 1px no-repeat,
    linear-gradient(var(--fav-border-strong), var(--fav-border-strong)) right bottom/1px 38px no-repeat;
  opacity: .65;
}
.fav-hero-bg { position:absolute; inset:0; background-size: cover; background-position: center; opacity: .62; transform: scale(1.02); }
.fav-hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, #070b10 0%, rgba(7,11,16,.88) 31%, rgba(7,11,16,.37) 68%, rgba(7,11,16,.9) 100%); }
.fav-hero-content { position:relative; min-height: clamp(520px, 66vh, 760px); display:grid; align-items:center; padding: 86px 0 122px; }
.hero-kicker { color: var(--fav-accent); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; margin-bottom: 18px; }
.hero-title { font-family: var(--fav-heading-font); margin:0; max-width: 700px; font-size: calc(clamp(50px, 8vw, 110px) * var(--fav-heading-scale) / 100%); line-height: .9; text-transform: uppercase; letter-spacing: -.045em; }
.hero-title strong, .accent-text { color: var(--fav-accent); text-shadow: 0 0 28px color-mix(in srgb, var(--fav-accent) 45%, transparent); }
.hero-subtitle { max-width: 540px; color: #b7c0cc; margin: 24px 0 0; font-size: 18px; }
.hero-actions { display:flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.fav-button, .wp-block-button__link, input[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  min-height: 48px; padding: 14px 22px; border-radius: 7px;
  background: var(--fav-accent); color: #fff; border: 1px solid color-mix(in srgb, var(--fav-accent) 85%, white);
  text-transform: uppercase; letter-spacing:.075em; font-size: 12px; font-weight: 900; cursor:pointer;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--fav-accent) 28%, transparent);
}
.fav-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { color:#fff; filter: brightness(1.08); transform: translateY(-1px); }
.fav-button.secondary { background: rgba(255,255,255,.055); color: var(--fav-text); border-color: var(--fav-border-strong); box-shadow:none; }
.hero-stats { position:absolute; left:0; right:0; bottom: 32px; }
.hero-stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--fav-border); background: rgba(9,14,20,.68); backdrop-filter: blur(14px); box-shadow: var(--fav-shadow); }
.hero-stat { padding: 24px 30px; border-right:1px solid var(--fav-border); }
.hero-stat:last-child { border-right:0; }
.hero-stat-num { display:block; font-family: var(--fav-heading-font); font-size: 28px; line-height:1; font-weight:900; }
.hero-stat-label { display:block; color: var(--fav-accent); font-size: 11px; text-transform: uppercase; letter-spacing:.09em; margin-top: 8px; }

/* Sections */
.section-head { display:flex; align-items:end; justify-content:space-between; gap: 20px; margin: 0 0 22px; }
.section-kicker { color: var(--fav-accent); font-size: 12px; text-transform:uppercase; letter-spacing:.16em; font-weight:900; }
.section-title { margin: 0; font-family: var(--fav-heading-font); font-size: calc(clamp(30px, 4.2vw, 56px) * var(--fav-heading-scale) / 100%); line-height: .95; text-transform: uppercase; letter-spacing: -.03em; }
.section-desc { color: var(--fav-muted); max-width: 650px; margin: 8px 0 0; }
.fav-section { padding: 64px 0; position:relative; }
.fav-panel { border: 1px solid var(--fav-border); background: var(--fav-panel); border-radius: var(--fav-radius-lg); box-shadow: var(--fav-shadow); overflow:hidden; }

/* Filters */
.archive-header { padding: 42px 0 20px; }
.breadcrumbs { color: var(--fav-muted-2); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap: 18px; margin: 26px 0 28px; flex-wrap: wrap; }
.filter-pills { display:flex; flex-wrap:wrap; gap: 8px; }
.filter-pill { display:inline-flex; align-items:center; min-height: 34px; padding: 8px 14px; border:1px solid var(--fav-border); background: rgba(255,255,255,.025); color: var(--fav-muted); border-radius: 7px; font-size: 11px; font-weight:900; text-transform: uppercase; letter-spacing:.06em; }
.filter-pill:hover, .filter-pill.is-active { color: var(--fav-text); border-color: color-mix(in srgb, var(--fav-accent) 55%, var(--fav-border)); background: color-mix(in srgb, var(--fav-accent) 12%, transparent); }
.archive-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search-mini { display:flex; gap:8px; align-items:center; }
.search-mini input[type="search"], .archive-tools select, .comment-form input, .comment-form textarea, .wpcf7 input, .wpcf7 textarea {
  min-height: 38px; border:1px solid var(--fav-border); border-radius: 7px; color: var(--fav-text); background: rgba(255,255,255,.035); padding: 8px 12px; outline: none;
}
.archive-tools select { color: var(--fav-muted); text-transform:uppercase; font-size:12px; font-weight:800; }

/* Gallery grid */
.art-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
body.grid-comfortable .art-grid { gap: 12px; }
body.grid-wide .art-grid { gap: 18px; }
.art-card { position:relative; min-height: 280px; grid-column: span 4; overflow:hidden; border:1px solid var(--fav-border); background:#101720; border-radius: var(--fav-radius); transform: translateZ(0); }
.art-card:nth-child(7n+1) { grid-row: span 2; min-height: 580px; }
.art-card:nth-child(7n+4) { grid-column: span 5; }
.art-card:nth-child(7n+5) { grid-column: span 3; }
.art-card:nth-child(7n+6) { grid-column: span 5; }
.art-card:nth-child(7n+7) { grid-column: span 3; }
.art-card-image, .art-card-image a, .art-card-image img { width:100%; height:100%; }
.art-card-image img { object-fit:cover; transition: transform .5s ease, filter .5s ease; }
.art-card:hover .art-card-image img { transform: scale(1.055); filter: saturate(1.08) contrast(1.05); }
.art-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.88)); opacity:.85; pointer-events:none; }
.art-card-content { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 18px; transform: translateY(24px); transition: transform .25s ease; }
.art-card:hover .art-card-content { transform: translateY(0); }
.art-card-title { margin:0; font-family: var(--fav-heading-font); font-size: 22px; text-transform: uppercase; line-height:1.05; }
.art-card-meta { display:flex; flex-wrap:wrap; gap:8px; color: var(--fav-muted); font-size: 11px; text-transform: uppercase; letter-spacing:.06em; margin-top: 9px; }
.card-actions { display:flex; gap:10px; margin-top: 14px; opacity:0; transition: opacity .25s ease; }
.art-card:hover .card-actions { opacity:1; }
.icon-link { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--fav-border); background: rgba(255,255,255,.08); border-radius:7px; color: var(--fav-text); cursor:pointer; }
.icon-link:hover { background: var(--fav-accent); color:#fff; }
.art-placeholder { display:grid; place-items:center; width:100%; height:100%; min-height:280px; color:var(--fav-muted); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); }

/* Single dossier */
.single-art-layout { display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items:start; }
.dossier-media { padding: 12px; }
.dossier-media img { width:100%; max-height: 78vh; object-fit: contain; background:#05080d; border-radius: calc(var(--fav-radius-lg) - 8px); }
.dossier-side { position: sticky; top: 104px; padding: 28px; }
.dossier-label { color: var(--fav-muted); font-size: 12px; font-weight:900; letter-spacing:.1em; text-transform: uppercase; }
.dossier-title { font-family: var(--fav-heading-font); margin: 8px 0 12px; font-size: calc(34px * var(--fav-heading-scale) / 100%); line-height: .98; text-transform: uppercase; }
.dossier-title span { color: var(--fav-accent); }
.dossier-desc { color:#b9c3cf; }
.meta-list { border-top:1px solid var(--fav-border); margin-top: 22px; padding-top: 10px; }
.meta-row { display:grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 10px 0; border-bottom:1px solid rgba(255,255,255,.055); font-size: 13px; }
.meta-row strong { color: var(--fav-muted); text-transform: uppercase; letter-spacing:.05em; font-size:11px; }
.meta-row span { color: var(--fav-text); }
.single-actions { display:grid; gap: 10px; margin-top: 24px; }
.related-strip { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.related-mini { border:1px solid var(--fav-border); border-radius: var(--fav-radius); overflow:hidden; background:var(--fav-panel); }
.related-mini img { aspect-ratio: 16/9; width:100%; object-fit:cover; }
.related-mini span { display:block; padding: 10px; font-size: 12px; font-weight:800; }

/* Content */
.entry-content, .page-content { color: #cad2dc; }
.entry-content a { color: var(--fav-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-title { font-family: var(--fav-heading-font); line-height:1.05; text-transform: uppercase; letter-spacing:-.02em; color: var(--fav-text); }
.entry-content p { margin: 0 0 1.2em; }
.wp-block-image img { border-radius: var(--fav-radius); }
.post-card { padding: 24px; }
.post-card + .post-card { margin-top: 16px; }
.post-card .entry-title { margin:0 0 10px; }
.pagination, .nav-links { display:flex; gap:8px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.page-numbers { display:grid; place-items:center; min-width:42px; height:42px; border:1px solid var(--fav-border); border-radius:7px; color:var(--fav-muted); background:rgba(255,255,255,.025); }
.page-numbers.current, .page-numbers:hover { color:#fff; background:var(--fav-accent); }

/* Ads */
.fav-ad { border:1px dashed rgba(255,255,255,.2); background: rgba(255,255,255,.025); color: var(--fav-muted); border-radius: var(--fav-radius); padding: 14px; text-align:center; margin: 20px 0; overflow:hidden; }
.fav-ad img, .fav-ad iframe { margin-inline:auto; max-width:100%; }
.fav-ad-label { display:block; color:var(--fav-muted-2); font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; }

/* Footer */
.site-footer { border-top:1px solid var(--fav-border); background: rgba(3,5,8,.62); padding: 38px 0; color: var(--fav-muted); }
.footer-grid { display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center; }
.footer-title { font-family:var(--fav-heading-font); color:var(--fav-text); font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.footer-menu { list-style:none; padding:0; margin:0; display:flex; gap:16px; flex-wrap:wrap; }
.footer-menu a { color: var(--fav-muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }

/* Lightbox */
.fav-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:32px; background: rgba(1,3,6,.92); backdrop-filter: blur(14px); }
.fav-lightbox.is-open { display:flex; }
.fav-lightbox img { max-width:96vw; max-height:92vh; object-fit:contain; border:1px solid var(--fav-border); box-shadow: var(--fav-shadow); }
.fav-lightbox-close { position:absolute; top:18px; right:18px; width:46px; height:46px; border:1px solid var(--fav-border); background:rgba(255,255,255,.06); color:#fff; border-radius:10px; cursor:pointer; font-size:26px; }

/* Responsive */
@media (max-width: 1080px) {
  .header-inner { grid-template-columns: auto auto; }
  .main-navigation { position: fixed; left: 16px; right:16px; top: 78px; display:none; justify-self: stretch; background: rgba(8,12,18,.98); border:1px solid var(--fav-border); border-radius: 14px; padding: 14px; box-shadow:var(--fav-shadow); }
  .main-navigation.is-open { display:block; }
  .menu-toggle { display:block; justify-self:end; }
  .primary-menu { flex-direction:column; align-items:stretch; }
  .primary-menu a { padding: 14px; }
  .header-actions { display:none; }
  .art-card, .art-card:nth-child(n) { grid-column: span 6; min-height: 330px; grid-row: auto; }
  .single-art-layout { grid-template-columns: 1fr; }
  .dossier-side { position: static; }
}
@media (max-width: 760px) {
  :root { --fav-content: 100%; }
  .fav-container { width: min(100% - 26px, var(--fav-content)); }
  .hero-title { font-size: calc(clamp(43px, 16vw, 74px) * var(--fav-heading-scale) / 100%); }
  .fav-hero-content { min-height: 590px; padding-top: 70px; padding-bottom: 170px; }
  .hero-subtitle { font-size: 16px; }
  .hero-stats { bottom: 18px; }
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stat { padding: 16px; border-bottom:1px solid var(--fav-border); }
  .art-grid { grid-template-columns: 1fr; }
  .art-card, .art-card:nth-child(n) { grid-column: auto; min-height: 360px; }
  .filter-bar, .section-head { align-items:flex-start; flex-direction:column; }
  .archive-tools { width:100%; }
  .search-mini, .archive-tools select { width:100%; }
  .search-mini input { width:100%; }
  .related-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .hero-stats-grid { grid-template-columns: 1fr; }
  .hero-stat { border-right:0; }
  .fav-hero-content { min-height: 690px; padding-bottom: 250px; }
  .related-strip { grid-template-columns: 1fr; }
  .meta-row { grid-template-columns: 1fr; gap:2px; }
}

/* v1.2 cloud-first gallery cards and advanced lightbox */
.art-card-image, .art-card-image a, .art-card-image button, .art-card-image img { width:100%; height:100%; }
.art-card-open { display:block; padding:0; margin:0; border:0; background:transparent; cursor:zoom-in; text-align:inherit; color:inherit; }
.art-card-open img { object-fit:cover; }
.art-card-title { color: var(--fav-text); }
.card-actions { align-items:center; }
.card-action-btn { min-height:32px; display:inline-flex; align-items:center; justify-content:center; padding:7px 11px; border:1px solid var(--fav-border); background: rgba(255,255,255,.08); border-radius:7px; color: var(--fav-text); cursor:pointer; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; line-height:1; }
.card-action-btn:hover { background: var(--fav-accent); color:#fff; border-color: var(--fav-accent); }
.card-action-btn.ghost { background: rgba(255,255,255,.035); color: var(--fav-muted); }

.fav-lightbox { align-items:stretch; justify-content:center; padding:28px; background: rgba(1,3,6,.94); }
.fav-lightbox-shell { display:grid; grid-template-columns:minmax(0, 1fr) 380px; width:min(1680px, 100%); max-height:calc(100vh - 56px); border:1px solid var(--fav-border); background: rgba(8,12,18,.78); border-radius: var(--fav-radius-lg); overflow:hidden; box-shadow: var(--fav-shadow); }
.fav-lightbox-stage { min-width:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.22) 45%, rgba(0,0,0,.5)); padding:18px; }
.fav-lightbox .fav-lightbox-stage img { max-width:100%; max-height:calc(100vh - 94px); object-fit:contain; border:1px solid var(--fav-border); box-shadow: var(--fav-shadow); background:#05080d; }
.fav-lightbox-info { overflow:auto; padding:26px; border-left:1px solid var(--fav-border); background: linear-gradient(180deg, rgba(13,19,28,.96), rgba(6,9,14,.96)); }
.fav-lightbox-title { margin:8px 0 12px; color:var(--fav-text); font-family:var(--fav-heading-font); font-size: calc(32px * var(--fav-heading-scale) / 100%); line-height:1; text-transform:uppercase; letter-spacing:-.02em; }
.fav-lightbox-desc { color:#b9c3cf; margin:14px 0 18px; }
.fav-lightbox-tags { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 16px; }
.fav-lightbox-tags span { display:inline-flex; padding:5px 8px; border:1px solid var(--fav-border); border-radius:999px; color:var(--fav-accent); background:rgba(255,255,255,.035); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.fav-lightbox-meta { border-top:1px solid var(--fav-border); margin-top:14px; padding-top:8px; }
.fav-lightbox-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.fav-lightbox-actions .fav-button:first-child { grid-column:1 / -1; }
.fav-lightbox-close { z-index:10001; }
.fav-lightbox-nav { position:absolute; z-index:10000; top:50%; transform:translateY(-50%); width:46px; height:58px; border:1px solid var(--fav-border); border-radius:12px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-size:42px; line-height:1; display:grid; place-items:center; backdrop-filter:blur(8px); }
.fav-lightbox-nav:hover { background:var(--fav-accent); border-color:var(--fav-accent); }
.fav-lightbox-prev { left:18px; }
.fav-lightbox-next { right:18px; }

@media (max-width: 980px) {
  .fav-lightbox { padding:12px; align-items:center; }
  .fav-lightbox-shell { grid-template-columns:1fr; max-height:calc(100vh - 24px); overflow:auto; }
  .fav-lightbox-stage { min-height:52vh; padding:12px; }
  .fav-lightbox .fav-lightbox-stage img { max-height:72vh; }
  .fav-lightbox-info { border-left:0; border-top:1px solid var(--fav-border); padding:18px; }
  .fav-lightbox-nav { width:38px; height:48px; font-size:34px; }
  .fav-lightbox-prev { left:8px; }
  .fav-lightbox-next { right:8px; }
  .fav-lightbox-actions { grid-template-columns:1fr; }
  .fav-lightbox-actions .fav-button:first-child { grid-column:auto; }
}