/* ==========================================================================
   LAYOUT — cvprojekt.pl
   Page structure: header, hero, generator grid, footer, responsive.
   ========================================================================== */

/* ── Header ── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 60px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  padding: 0 var(--sp-6);
}
.main-nav {
  max-width: 1320px; margin:0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary);
  text-decoration: none; flex-shrink:0;
}
.nav-logo .logo-icon { color: var(--accent); width:24px; height:24px; }
.nav-logo strong { color: var(--accent); }
.nav-links {
  display: flex; gap: var(--sp-5); align-items: center;
}
.nav-link {
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight:500;
  padding: var(--sp-1) 0; position:relative;
  transition: color var(--t-fast);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--accent); border-radius:var(--r-full);
}
.nav-toggle {
  display:none; background:none; border:none;
  font-size:22px; color:var(--text-primary); cursor:pointer; padding:var(--sp-2);
}

/* ── Hero ── */
.hero-section {
  text-align:center;
  padding: calc(60px + var(--sp-12)) var(--sp-6) var(--sp-10);
  background: linear-gradient(180deg, #fff 0%, var(--bg-body) 100%);
}
.hero-content { max-width:620px; margin:0 auto; }
.hero-title {
  font-size: var(--fs-3xl); font-weight:700; color:var(--text-primary);
  margin-bottom:var(--sp-3); line-height:1.15;
  animation: slideUp .5s var(--ease) both;
}
.gradient-text { color:var(--accent); }
.hero-subtitle {
  color:var(--text-secondary); font-size:var(--fs-md); line-height:1.6;
  margin-bottom:var(--sp-5);
  animation: slideUp .5s var(--ease) .08s both;
}
.hero-badges {
  display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center;
  margin-bottom:var(--sp-6);
  animation: slideUp .5s var(--ease) .16s both;
}
.badge {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent-soft); color:var(--accent);
  font-size:var(--fs-xs); font-weight:600;
  padding:6px 14px; border-radius:var(--r-full);
  letter-spacing:.01em;
}
.hero-section .btn { animation: slideUp .5s var(--ease) .24s both; }

/* ── Ad slots ── */
.ad-slot {
  display:flex; align-items:center; justify-content:center;
  max-width:768px; margin:var(--sp-4) auto;
  background:var(--bg-inset); border:1px dashed var(--border);
  border-radius:var(--r-md); color:var(--text-muted); font-size:var(--fs-xs);
  overflow:hidden;
}
.ad-slot--header { min-height:90px; max-width:728px; }
.ad-slot--pdf    { min-height:250px; max-width:336px; }
.ad-slot--article{ min-height:250px; max-width:640px; margin:var(--sp-10) auto; }

/* ── Generator two-column grid ── */
.generator-section { /* just a wrapper */ }
.generator-container {
  display:grid;
  grid-template-columns: minmax(0,520px) 1fr;
  max-width:1400px; margin:0 auto;
  min-height:calc(100vh - 60px);
}

/* ── Form panel (left) ── */
.form-panel {
  overflow-y:auto;
  padding: var(--sp-6) var(--sp-6) 120px;
  max-height:calc(100vh - 60px);
  background: var(--bg-body);
  border-right: 1px solid var(--border-light);
}
.form-panel::-webkit-scrollbar { width:4px; }
.form-panel::-webkit-scrollbar-thumb { background:#d2d5de; border-radius:var(--r-full); }

/* ── Preview panel (right, sticky) ── */
.preview-panel {
  position:sticky; top:60px;
  height:calc(100vh - 60px);
  overflow-y:auto;
  padding:var(--sp-6);
  background:#eceef4;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.preview-panel::-webkit-scrollbar { width:4px; }
.preview-panel::-webkit-scrollbar-thumb { background:#c8cad5; border-radius:var(--r-full); }

.preview-controls {
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.control-label {
  font-size:var(--fs-xs); font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ── CV Preview container ── */
#cvPreviewContainer {
  aspect-ratio:210/297; overflow:hidden;
  background:#fff; box-shadow:var(--sh-xl);
  border-radius:var(--r-md);
  width:100%; position:relative; flex-shrink:0;
}
#cvPreview {
  width:100%; height:100%;
  padding:32px 36px; overflow:hidden;
  font-family:var(--font-cv); color:#1a1a1a;
  font-size:9px; line-height:1.5;
}
.cv-preview-placeholder {
  display:flex; align-items:center; justify-content:center;
  height:100%; color:var(--text-muted); font-size:var(--fs-sm);
  text-align:center; padding:var(--sp-8);
}

/* ── Form actions (sticky bottom bar) ── */
.form-actions {
  position:sticky; bottom:0;
  z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border-light);
  padding:var(--sp-4) var(--sp-6);
  margin: 0 calc(-1 * var(--sp-6));
  margin-bottom: calc(-1 * 120px);
  display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  box-shadow:0 -4px 16px rgba(30,35,48,.05);
}
.form-actions .btn { flex:1; min-width:0; }
.save-indicator {
  width:100%; text-align:center;
  font-size:var(--fs-xs); color:var(--text-muted);
}

/* ── Mobile preview toggle ── */
.mobile-preview-toggle {
  display:none;
  position:fixed; bottom:88px; right:var(--sp-4); z-index:45;
  border-radius:var(--r-full); box-shadow:var(--sh-lg);
  padding:var(--sp-3) var(--sp-6);
}

/* ── Footer ── */
.site-footer {
  background:#fff; border-top:1px solid var(--border-light);
  padding:var(--sp-10) var(--sp-6); text-align:center;
}
.footer-content { max-width:600px; margin:0 auto; }
.footer-brand { margin-bottom:var(--sp-4); }
.footer-brand span { font-size:var(--fs-lg); font-weight:700; color:var(--text-primary); }
.footer-brand strong { color:var(--accent); }
.footer-brand p { margin-top:var(--sp-1); color:var(--text-secondary); font-size:var(--fs-sm); }
.footer-links {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-5);
}
.footer-links a {
  color:var(--text-secondary); font-size:var(--fs-sm); font-weight:500;
  transition:color var(--t-fast);
}
.footer-links a:hover { color:var(--accent); }
.footer-copy p { font-size:var(--fs-xs); color:var(--text-muted); }
.footer-note { color:var(--text-muted); font-size:var(--fs-xs); margin-top:var(--sp-1); }

/* ━━━━━ Responsive: Tablet ≤1080 ━━━━━ */
@media(max-width:1080px){
  .generator-container { grid-template-columns:1fr; }
  .form-panel { max-height:none; border-right:none; padding-bottom:100px; }
  .preview-panel { position:relative; top:auto; height:auto; min-height:500px; }
}

/* ━━━━━ Responsive: Mobile ≤720 ━━━━━ */
@media(max-width:720px){
  .site-header { height:54px; padding:0 var(--sp-4); }
  .nav-links { display:none; }
  .nav-links.is-visible {
    display:flex; flex-direction:column;
    position:absolute; top:54px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:var(--sh-md); padding:var(--sp-4); gap:var(--sp-3); z-index:99;
  }
  .nav-toggle { display:flex; align-items:center; justify-content:center; }
  .hero-section { padding:calc(54px + var(--sp-8)) var(--sp-4) var(--sp-6); }
  .hero-title { font-size:var(--fs-2xl); }
  .hero-badges { gap:var(--sp-1); }
  .badge { font-size:11px; padding:5px 10px; }
  .form-panel { padding:var(--sp-4) var(--sp-4) 140px; }
  .preview-panel {
    position:fixed; bottom:0; left:0; right:0;
    height:75vh; z-index:50;
    transform:translateY(100%); transition:transform var(--t-slow);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:var(--sh-xl);
  }
  .preview-panel.is-visible { transform:translateY(0); }
  .form-actions { margin:0 calc(-1 * var(--sp-4)); padding:var(--sp-3) var(--sp-4); }
  .mobile-preview-toggle { display:flex; }
  .site-footer { padding:var(--sp-8) var(--sp-4); }
}