/* Toolspot4u Child Theme — Hero Component (Paper & Ember)
   All hero variants + supporting elements (search, pill-link, chips, proof strip).
   System B split/collage styles removed — see git history if needed. */

/* ── Base ──────────────────────────────────────────────────────────────────── */

.t4u-hero { position: relative; }

.hero-wrap {
  position: relative;
  overflow: hidden;
}

/* Decorative radial glow — centered top, ember tint */
.hero-wrap::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
  width:          1000px;
  height:         560px;
  background:     radial-gradient(ellipse at 50% 0%,
                    rgba(255,92,0,.06) 0%,
                    transparent 62%);
  pointer-events: none;
  z-index:        0;
}

.hero-wrap .wrap { position: relative; z-index: 1; }

/* ── Homepage variant — centered, search-first ─────────────────────────────── */

.t4u-hero--home {
  background:    var(--paper);
  padding-top:   clamp(72px, 10vh, 120px);
  padding-bottom: clamp(56px, 8vh, 96px);
}

.hero-home-inner { width: 100%; }

.t4u-hero--home .wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

/* Pill-link eyebrow */
.t4u-hero--home .pill-link {
  margin-bottom: 28px;
}

/* Heading */
.t4u-hero--home h1.page {
  font-size:  clamp(2.6rem, 5.2vw, 5rem);
  max-width:  820px;
  margin:     0 auto;
  line-height: 1.08;
}

/* Lede */
.t4u-hero--home .lede {
  margin:    20px auto 0;
  max-width: 600px;
  color:     var(--ink-60);
}

/* ── Hero search bar ──────────────────────────────────────────────────────── */

.hero-search {
  display:       flex;
  gap:           0;
  background:    #fff;
  border:        1.5px solid var(--ink-30);
  border-radius: var(--r-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  max-width:     640px;
  margin-top:    28px;
  transition:    border-color var(--dur-std), box-shadow var(--dur-std);
}

.hero-search:focus-within {
  border-color: var(--ember);
  box-shadow:   var(--f-focus-ring), var(--shadow-md);
}

.hero-search form { display: flex; width: 100%; }

.hero-search input[type="search"] {
  flex:        1;
  padding:     18px 22px;
  font-size:   1.05rem;
  font-family: var(--body);
  color:       var(--ink);
  background:  transparent;
  border:      0;
  outline:     none;
}

.hero-search input[type="search"]::placeholder { color: var(--ink-30); }

.hero-search button {
  padding:        12px 24px;
  margin:         8px;
  background:     var(--ink);
  color:          var(--paper);
  border:         0;
  border-radius:  var(--r-sm);
  font-family:    var(--mono);
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background var(--dur-std),
                  transform 0.18s var(--ease-out),
                  box-shadow 0.18s var(--ease-out);
}

.hero-search button:hover {
  background: var(--ember);
  transform:  translateY(-1px);
  box-shadow: 0 4px 12px -3px rgba(255,92,0,.35);
}

.hero-search button:active { transform: translateY(0); box-shadow: none; }

.hero-search button:focus-visible {
  outline:        2px solid var(--ember);
  outline-offset: 2px;
}

/* Homepage: search spans full column width */
.hero-search--home { max-width: 720px; }

/* ── Category chips row ───────────────────────────────────────────────────── */

.hero-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             8px;
  margin-top:      20px;
}

.chip {
  display:         inline-flex;
  align-items:     center;
  padding:         7px 16px;
  border-radius:   var(--r-pill);
  background:      var(--linen);
  border:          1px solid var(--ink-12);
  font-family:     var(--mono);
  font-size:       0.72rem;
  letter-spacing:  0.055em;
  text-transform:  uppercase;
  color:           var(--ink-60);
  text-decoration: none;
  transition:      background var(--dur-std),
                   color var(--dur-std),
                   border-color var(--dur-std);
  white-space:     nowrap;
}

.chip:hover {
  background:   var(--linen-deep);
  color:        var(--ink);
  border-color: var(--ink-30);
}

/* ── Proof strip ──────────────────────────────────────────────────────────── */

.hero-proof-strip {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  justify-content: center;
  gap:         6px 14px;
  margin-top:  24px;
  font-family: var(--mono);
  font-size:   0.7rem;
  letter-spacing: 0.04em;
  color:       var(--ink-40);
}

.hero-proof-strip .hdot { opacity: 0.35; }

/* ── Pill-link (eyebrow above hero h1) ────────────────────────────────────── */

.pill-link {
  border-radius:   var(--r-pill);
  padding:         9px 16px;
  font-size:       0.85rem;
  background:      var(--linen);
  border:          1px solid var(--ink-12);
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  color:           var(--ink-60);
  transition:      background var(--dur-std), color var(--dur-std);
  width:           fit-content;
  text-decoration: none;
}

.pill-link:hover { background: var(--linen-deep); color: var(--ink); }
.pill-link .ar   { transition: transform var(--dur-std); }
.pill-link:hover .ar { transform: translateX(4px); }

/* Pulse dot — live indicator */
.pill-pulse {
  display:       inline-block;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--ember);
  flex:          0 0 auto;
  animation:     ppulse 2.2s ease infinite;
}

@keyframes ppulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Other page-head variants (tools, shop, insights, page) ───────────────── */

.t4u-hero.page-head {
  padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 6vh, 72px);
  background: var(--paper);
}

.t4u-hero.page-head h1.page {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .t4u-hero--home h1.page {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }

  .hero-search--home { max-width: 100%; }
}

@media (max-width: 640px) {
  .hero-search         { max-width: 100%; }
  .hero-search input[type="search"] { padding: 14px 16px; font-size: 0.95rem; }
  .hero-search button  { padding: 10px 16px; font-size: 0.7rem; }

  .hero-proof-strip { gap: 4px 10px; font-size: 0.65rem; }
  .chip             { font-size: 0.67rem; padding: 6px 13px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pill-pulse { animation: none; opacity: 1; }

  .hero-search button,
  .hero-search button:hover,
  .hero-search button:active {
    transform:  none;
    box-shadow: none;
    transition: background var(--dur-std);
  }
}