/*
 * Notes Generator page — premium hero.
 * Scoped to .qsn-* so it never leaks into other templates.
 */

.qsn-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60% 130% at 85% -10%, rgba(139, 92, 246, 0.38) 0%, transparent 55%),
    radial-gradient(55% 130% at 8% 115%, rgba(37, 99, 235, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
  padding: 76px 0 92px;
}

.qsn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(90% 90% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

.qsn-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.qsn-hero-copy { flex: 1 1 auto; min-width: 0; }

.qsn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qsn-badge svg { width: 14px; height: 14px; color: #fbbf24; }

.qsn-title {
  margin: 20px 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.qsn-subtitle {
  margin: 0;
  max-width: 620px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

.qsn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.qsn-chip {
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.qsn-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #34d399;
  vertical-align: 2px;
}

.qsn-art {
  flex-shrink: 0;
  width: 320px;
  height: auto;
  opacity: 0.95;
}
.qsn-art svg { width: 100%; height: auto; display: block; }

/* Overlap the generator card over the hero seam. */
.qsn-wrap {
  position: relative;
  z-index: 2;
  margin: -44px 0 48px;
}

/* The theme hero replaces the plugin's internal welcome header. */
.qsn-wrap .ng-hero { display: none; }

@media (max-width: 900px) {
  .qsn-hero { padding: 56px 0 72px; }
  .qsn-art { width: 240px; }
}

@media (max-width: 768px) {
  .qsn-hero-inner { flex-direction: column; text-align: center; }
  .qsn-art { display: none; }
  .qsn-subtitle { margin: 0 auto; }
  .qsn-chips { justify-content: center; }
  .qsn-wrap { margin: -28px 0 40px; }
}