/* ============================================================
 *  Location: /pages/home/sections/hero/home.hero.css
 *  File:     home.hero.css
 *  Function: Style sekcji Hero - editorial brutalism light
 *  Version:  1.0.0
 *  Build:    2026-05-06.1
 * ============================================================ */

.section--hero { padding-block: clamp(4rem, 10vw, 8rem); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mu-accent);
  margin-bottom: 1.5rem;
}

.hero__eyebrow::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--mu-accent);
}

.hero__headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  color: var(--mu-primary);
}

.hero__subheadline {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--mu-mute);
  max-width: 38rem;
  margin-bottom: 2rem;
}

.hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ----- Buttons ----- */
.btn-mu-primary,
.btn-mu-ghost {
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-mu-primary {
  background: var(--mu-primary);
  color: var(--mu-paper);
}
.btn-mu-primary:hover {
  background: var(--mu-accent);
  color: var(--mu-paper);
  transform: translateY(-1px);
}
.btn-mu-ghost {
  border-color: var(--mu-primary);
  color: var(--mu-primary);
  background: transparent;
}
.btn-mu-ghost:hover {
  background: var(--mu-primary);
  color: var(--mu-paper);
}

/* ----- Media / placeholder ----- */
.hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--mu-radius);
  box-shadow: var(--mu-shadow);
}

.hero__placeholder {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--mu-radius);
  background: linear-gradient(135deg, var(--mu-warm), #fff);
  overflow: hidden;
}
.hero__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
}
.hero__shape--1 {
  inset: -10% -20% auto auto;
  width: 60%; aspect-ratio: 1;
  background: var(--mu-accent);
}
.hero__shape--2 {
  bottom: -10%; left: -10%;
  width: 70%; aspect-ratio: 1;
  background: var(--mu-primary);
  opacity: .35;
}
.hero__shape--3 {
  top: 40%; left: 30%;
  width: 30%; aspect-ratio: 1;
  background: #FFD23F;
  opacity: .35;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .btn-mu-primary, .btn-mu-ghost { transition: none; }
}