/* Blog MidjourneyArt.pl - Main Styles */

*{ box-sizing:border-box; margin:0; padding:0 }

:root{
  --pad:clamp(24px,6vw,96px);
  --shade:.45;
  --header-h:clamp(56px,6vw,72px);
}

html{ scroll-behavior:smooth; font-size:16px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff; background:#000; padding-top:var(--header-h); line-height:1.6;
}

/* ===== HEADER ===== */
header{
  position:fixed; inset:0 0 auto; height:var(--header-h); z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);
  background:rgba(0,0,0,.4);
  backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.logo{ 
  font-weight:700; letter-spacing:.02em; text-decoration:none; 
  color:#fff; opacity:.95; font-size:clamp(16px,2vw,18px);
}

nav{ display:flex; align-items:center; gap:clamp(8px,2vw,16px) }

nav a{
  color:#fff; text-decoration:none; font-weight:600; opacity:.9;
  padding:.5em .9em; border-radius:999px; transition:background .3s;
}

nav a:hover{ background:rgba(255,255,255,.12) }
nav a:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px }

/* ===== HERO SECTIONS ===== */
.hero{
  min-height:100svh; display:flex; align-items:center; padding:var(--pad);
  background:
    linear-gradient(0deg, rgba(0,0,0,var(--shade)), rgba(0,0,0,var(--shade))),
    var(--img) center / cover no-repeat;
  scroll-margin-top:calc(var(--header-h) + 8px);
  position:relative;
}

.hero .inner{ max-width:min(65ch,100%); z-index:2; position:relative }
.hero.center{ justify-content:center; text-align:center }
.hero.left{ justify-content:flex-start; text-align:left }
.hero.right{ justify-content:flex-end; text-align:right }

h1{ 
  margin:0 0 .5em; font-size:clamp(32px,6vw,68px); 
  line-height:1.1; text-wrap:balance; font-weight:800; letter-spacing:-.02em;
}

.hero p{ 
  margin:0 0 1.5em; font-size:clamp(17px,2.4vw,22px); 
  opacity:.88; text-wrap:balance; line-height:1.5;
}

.post-meta{
  font-size:clamp(14px,1.8vw,16px); opacity:.7; 
  margin-bottom:1.2em; font-weight:500;
}

.btn{
  display:inline-block; padding:.95em 1.6em; border-radius:999px;
  background:rgba(255,255,255,.15); color:#fff; text-decoration:none;
  font-weight:600; transition:all .3s; border:1px solid rgba(255,255,255,.2);
}

.btn:hover{ background:rgba(255,255,255,.25); transform:translateY(-2px) }
.btn:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:2px }

/* ===== SECTION DIVIDER ===== */
.section-divider{
  padding:clamp(40px,6vw,80px) var(--pad) clamp(20px,3vw,40px);
  text-align:center;
}

.section-divider h2{
  font-size:clamp(28px,4.5vw,48px); font-weight:800; 
  letter-spacing:-.02em; margin:0;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== FADE ANIMATIONS ===== */
.fade .inner > *{
  opacity:0; transform:translateY(50px);
  transition:opacity .9s ease, transform .9s ease;
}

.fade.in .inner > *{ opacity:1; transform:none }
.fade.in .inner > *:nth-child(2){ transition-delay:.2s }
.fade.in .inner > *:nth-child(3){ transition-delay:.4s }
.fade.in .inner > *:nth-child(4){ transition-delay:.6s }

@media (prefers-reduced-motion:reduce){
  .fade .inner > *{ opacity:1 !important; transform:none !important; transition:none }
}

/* ===== KICKER (category label above hero title) ===== */
.kicker{
  color:rgba(255,255,255,.7); letter-spacing:.3px;
  text-transform:uppercase; font-size:.9rem; margin-bottom:.8em;
}

/* ===== POST HERO (article hero sections, slightly shorter) ===== */
.post-section{ min-height:72svh }
.post-section .inner{ max-width:min(50ch,100%) }

/* ===== ARCHIVE FILTER CHIPS ===== */
.archive-filter{
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center; margin-bottom:32px;
}

.filter-btn{
  padding:7px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent; color:rgba(255,255,255,.6);
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; font-family:inherit;
  transition:background .2s, color .2s, border-color .2s;
}

.filter-btn:hover,
.filter-btn.active{
  background:rgba(255,255,255,.12);
  color:#fff; border-color:rgba(255,255,255,.35);
}

/* ===== ARCHIVE GRID ===== */
.archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(280px,100%), 1fr));
  gap:clamp(16px,2vw,24px);
}

.archive-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.archive-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
}

.archive-card > a{
  display:flex; flex-direction:column;
  height:100%; text-decoration:none; color:inherit;
}

.archive-card-img{
  width:100%; aspect-ratio:16/9;
  object-fit:cover; display:block; flex-shrink:0;
  transition:transform .4s ease;
}

.archive-card:hover .archive-card-img{ transform:scale(1.03) }

.archive-card-placeholder{ background:rgba(255,255,255,.06) }

.archive-card-body{
  padding:16px 18px 20px; flex:1;
  display:flex; flex-direction:column;
}

.archive-card-meta{
  display:flex; align-items:center;
  gap:8px; margin-bottom:10px; flex-wrap:wrap;
}

.archive-card-meta time{
  display:inline; font-size:.82rem;
  color:rgba(255,255,255,.5); margin:0;
}

.archive-card h3{
  font-size:clamp(1rem,2vw,1.12rem); font-weight:700;
  margin:0 0 10px; line-height:1.35; color:#fff;
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; letter-spacing:0;
}

.archive-card p{
  font-size:.88rem; color:rgba(255,255,255,.62);
  margin:0; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; opacity:1;
}

.archive-card[hidden]{ display:none !important }

/* ===== CAT BADGE ===== */
.cat-badge{
  display:inline-block; padding:3px 9px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  font-size:.75rem; color:rgba(255,255,255,.8);
  text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap; flex-shrink:0;
}

/* ===== OLDER POSTS SECTION ===== */
.section{ 
  padding:calc(var(--pad) * 1.5) var(--pad); 
  scroll-margin-top:calc(var(--header-h) + 8px);
}

.section .inner{ max-width:min(1200px,100%); margin:0 auto }

.section-title{
  margin:0 0 clamp(24px,4vh,48px); 
  font-size:clamp(28px,4vw,42px);
  font-weight:800; letter-spacing:-.01em; text-align:center;
}

.posts-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr));
  gap:clamp(24px,3vw,40px);
}

.post-card{
  background:rgba(255,255,255,.04); border-radius:12px; 
  overflow:hidden; transition:all .35s; 
  border:1px solid rgba(255,255,255,.08);
}

.post-card:hover{ 
  transform:translateY(-6px); 
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
}

.post-card img{ 
  width:100%; height:220px; object-fit:cover; 
  display:block; opacity:.85; transition:opacity .3s;
}

.post-card:hover img{ opacity:1 }

.post-content{ padding:clamp(20px,3vw,28px) }

.post-content h3{ 
  font-size:clamp(18px,2.2vw,22px); margin:0 0 .6em; 
  line-height:1.3; font-weight:700;
}

.post-content h3 a{ 
  color:#fff; text-decoration:none; 
  transition:opacity .3s;
}

.post-content h3 a:hover{ opacity:.8 }

.post-content time{ 
  display:block; font-size:14px; opacity:.6; margin-bottom:1em;
}

.post-content p{ 
  font-size:15px; line-height:1.6; opacity:.8; margin:0 0 1.2em;
}

.post-content .read-more{
  color:#fff; text-decoration:none; font-weight:600; 
  opacity:.9; font-size:15px; transition:opacity .3s;
}

.post-content .read-more:hover{ opacity:1 }

/* ===== AUCTION BANNER ===== */
.auction-banner{
  background:linear-gradient(135deg, #0f0c00 0%, #1d1800 60%, #0f0c00 100%);
  border:1px solid rgba(212,160,23,.35);
  box-shadow:0 0 60px rgba(212,160,23,.07);
  color:#fff; padding:clamp(28px,5vw,48px) clamp(24px,4vw,40px); text-align:center;
  border-radius:16px; margin:var(--pad) var(--pad) 0; position:relative; overflow:hidden;
}

.auction-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% -10%, rgba(212,160,23,.18) 0%, transparent 55%);
}

.auction-banner p{
  position:relative; z-index:1; margin:0 0 1em;
  font-size:clamp(18px,2.5vw,24px); font-weight:600;
  color:#f0c84a;
}

.auction-banner .btn{
  background:rgba(212,160,23,.12);
  border:1px solid rgba(212,160,23,.55);
  color:#e8b840;
  position:relative; z-index:1;
}

.auction-banner .btn:hover{
  background:rgba(212,160,23,.22);
  border-color:rgba(212,160,23,.85);
  color:#ffd04a;
  transform:translateY(-2px);
}

#archive.section{ padding-top:clamp(20px,3vw,48px) }

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher{
  display:flex; align-items:center; gap:2px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:2px; margin-left:4px; flex-shrink:0;
}

.lang-btn{
  padding:4px 10px; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-decoration:none; color:rgba(255,255,255,.55);
  transition:all .2s; cursor:pointer; background:none; border:none;
  font-family:inherit;
}

.lang-btn:hover{ color:#fff; background:rgba(255,255,255,.1) }

.lang-btn.active{
  background:rgba(255,255,255,.15); color:#fff;
}

/* ===== FOOTER ===== */
footer{
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:clamp(20px,3vw,32px); opacity:.7; 
  background:rgba(0,0,0,.5); font-size:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

footer a{ color:#667eea; text-decoration:none; transition:opacity .3s }
footer a:hover{ opacity:.8 }

/* ===== HAMBURGER MENU ===== */
.burger{
  display:none; width:42px; height:42px; 
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.4); border-radius:10px; 
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; padding:0;
}

.burger span{ 
  display:block; width:22px; height:2px; background:#fff; 
  transition:all .3s; border-radius:2px;
}

body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width:960px){
  .burger{ display:flex }
  header nav{ display:none }
  
  body.menu-open header nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:16px; gap:4px;
    background:rgba(0,0,0,.95); 
    border-bottom:1px solid rgba(255,255,255,.1); z-index:50;
  }
  
  body.menu-open header nav a{ width:100%; padding:.7em 1em }

  .hero.left, .hero.right{ justify-content:center; text-align:center }
}

@media (max-width:600px){
  .hero{ min-height:100svh }
}