/* =======================================================================
   sense2-a1hero.css — 2026-05-03
   ISOLATED styles for the new a1-hero block ONLY.
   Every selector starts with .s2-a1- so this file CANNOT affect any
   existing site element (banner, logo, sidebar, filters, search, tabs).
   ======================================================================= */

/* ---------- A1 HERO container ---------- */
/* 2026-05-03: compacted per Nancy — reduced vertical padding and margins
   so the hero takes less space while keeping the green banner above.
   Previously: padding 40px 24px 24px, margin 0 auto 24px, font-size 56px, min-height 300px */
.s2-a1-hero {
  max-width: 1280px;
  margin: 0 auto 8px;
  padding: 18px 24px 12px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  background: #FFFCF6;
  border-radius: 12px;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1A1A1A;
}
.s2-a1-hero__copy { min-width: 0; }
.s2-a1-hero__eyebrow {
  font: 800 11px/1 'Hanken Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #F7941F;
  margin-bottom: 8px;
}
.s2-a1-hero__h1 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0 0 10px;
  color: #1A1A1A;
}
.s2-a1-hero__h1 .s2ah-green { color: #00B040; }
.s2-a1-hero__h1 .s2ah-pink  { color: #FD80DB; }
.s2-a1-hero__h1 .s2ah-verb  {
  color: #FEDD14;
  transition: color 0.35s ease;
  display: inline-block;
}
.s2-a1-hero__sub {
  color: #5C5A57;
  font: 400 15px/1.45 'Hanken Grotesk', sans-serif;
  max-width: 460px;
  margin: 0;
}
.s2-a1-hero__ctas {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.s2-a1-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font: 700 13px/1 'Hanken Grotesk', sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.s2-a1-btn--primary {
  background: #00B040;
  color: #fff;
}
.s2-a1-btn--primary:hover {
  background: #008A32;
  transform: translateY(-1px);
  color: #fff;
}
.s2-a1-btn--ghost {
  background: #fff;
  color: #1A1A1A;
  border-color: #E6E2DA;
}
.s2-a1-btn--ghost:hover {
  background: #FFFCF6;
  border-color: #FD80DB;
  color: #E15FBF;
}

/* ---------- A1 HERO art (yellow blob + heart trio) ---------- */
.s2-a1-hero__art {
  position: relative;
  aspect-ratio: 1/1;
  min-height: 200px;
  max-width: 320px;
  justify-self: center;
  width: 100%;
}
.s2-a1-hero__blob {
  position: absolute;
  inset: 0;
  background: #FEDD14;
  border-radius: 48% 52% 60% 40% / 50% 56% 44% 50%;
}
.s2-a1-hero__heart {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 18%;
  transform: rotate(-8deg);
  border-radius: 12px;
}
.s2-a1-hero__f1 {
  position: absolute;
  right: -8%;
  top: 8%;
  width: 38%;
  transform: rotate(14deg);
  border-radius: 12px;
  z-index: 2;
}
.s2-a1-hero__f2 {
  position: absolute;
  left: -6%;
  bottom: 6%;
  width: 30%;
  transform: rotate(-22deg);
  border-radius: 12px;
  z-index: 2;
}

/* ---------------------------------------------------------------
   Hide the legacy homepage text wall + link farm visually while
   keeping it in the DOM for SEO crawlers. Scoped via :has() so it
   only applies on the homepage (where the a1-hero exists).
   2026-05-03 — per Nancy: "update and hide the text wall, then
   at least the new categories below talk to the new artwork".
   --------------------------------------------------------------- */
body:has(.s2-a1-hero) #lovetab .s2-home-seo,
body:has(.s2-a1-hero) #linkstab,
body:has(.s2-a1-hero) #maincats .tabbody.ct {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .s2-a1-hero {
    grid-template-columns: 1fr;
    padding: 20px 16px 16px;
    gap: 16px;
  }
  .s2-a1-hero__h1 { font-size: 32px; }
  .s2-a1-hero__art { min-height: 180px; max-width: 260px; }
}