/* v1.18 — final cumulative Hero/category corrections */
.hero{
  background-image:var(--hero-overlay),url('images/hero-garden.webp')!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
/* Main Hero card: keep the new wide image visible through the glass. */
.hero-copy{
  background:color-mix(in srgb,var(--surface) 42%,transparent)!important;
  backdrop-filter:blur(5px) saturate(1.02)!important;
}
/* Upper identity card stays light gray. Its main text is yellow in this release. */
.hero-side-glass{
  background:linear-gradient(145deg,rgba(239,238,241,.88),rgba(214,211,219,.82))!important;
  border-color:rgba(255,255,255,.76)!important;
  box-shadow:0 16px 34px rgba(39,30,49,.14),0 0 28px rgba(110,63,215,.08),inset 0 1px 0 rgba(255,255,255,.74)!important;
}
.hero-side-glass strong{
  color:#e7b11f!important;
  text-shadow:0 2px 10px rgba(255,255,255,.42),0 5px 14px rgba(210,154,20,.13)!important;
}
.hero-side-glass small{color:#5d5663!important}
html[data-theme="dark"] .hero-side-glass strong{color:#f2c13d!important}
/* Lower quote card stays the dark gray card on desktop. */
.hero-side-stack .hero-quote{
  background:linear-gradient(145deg,rgba(61,56,64,.94),rgba(37,33,40,.92))!important;
  color:#fff!important;
}
@media(min-width:1051px){
  /* Slightly farther left than v1.17, without moving the dark card independently. */
  .hero-side-identity{transform:translateX(-176px)!important}
  .hero-side-glass{transform:translate(0,42%)!important}
  .hero-side-stack .hero-quote{transform:none!important}
}
@media(max-width:1050px) and (min-width:821px){
  .hero-side-glass{transform:translate(-26px,24%)!important}
}
@media(max-width:820px){
  .hero{background-size:cover!important;background-position:34% center!important}
  .hero-side-glass strong{color:#e7b11f!important}
  /* User request: the lower gray/dark quote card must NOT appear on mobile. */
  .hero-side-stack .hero-quote{display:none!important}
}

/* Premium category/root page — one non-duplicated title, richer but still compact. */
.category-page-hero{
  background:
    radial-gradient(440px 190px at 4% 0%,rgba(112,64,224,.13),transparent 72%),
    radial-gradient(430px 190px at 96% 6%,rgba(255,160,31,.13),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--purple) 7%,var(--bg)),var(--bg))!important;
}
.category-hero-card{
  position:relative!important;
  isolation:isolate!important;
  min-height:205px!important;
  padding:34px 38px!important;
  border-radius:30px!important;
  border:1px solid transparent!important;
  background:
    radial-gradient(250px 160px at 0% 0%,rgba(117,67,227,.11),transparent 72%) padding-box,
    radial-gradient(280px 170px at 100% 100%,rgba(255,165,36,.12),transparent 74%) padding-box,
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 98%,#fff),color-mix(in srgb,var(--surface) 96%,#fff7eb)) padding-box,
    linear-gradient(130deg,rgba(113,63,224,.44),rgba(255,154,31,.48),rgba(244,196,52,.46)) border-box!important;
  box-shadow:0 26px 72px rgba(98,55,197,.12),0 12px 30px rgba(255,151,31,.07),inset 0 1px 0 rgba(255,255,255,.70)!important;
  overflow:hidden!important;
}
.category-hero-card:before{opacity:.85!important}
.category-hero-card:after{opacity:.9!important}
.category-hero-kicker{position:relative;z-index:2}
.category-premium-title{position:relative;z-index:2;margin-top:10px!important}
.category-hero-card>p{position:relative;z-index:2;max-width:900px!important;font-size:13px!important}
.category-hero-stats{position:relative;z-index:2;display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.category-hero-stats span{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:13px;background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid color-mix(in srgb,var(--purple) 11%,var(--line));backdrop-filter:blur(6px)}
.category-hero-stats b{font-size:15px;color:var(--purple)}
.category-hero-stats small{font-size:10.5px;color:var(--muted)}
.category-poems-premium{position:relative}
.category-poems-premium:before{content:"";position:absolute;inset:40px 0 auto;height:250px;pointer-events:none;background:radial-gradient(ellipse at 12% 50%,rgba(112,62,222,.06),transparent 55%),radial-gradient(ellipse at 88% 50%,rgba(255,158,31,.055),transparent 55%)}
html[data-theme="dark"] .category-hero-card{background:radial-gradient(250px 160px at 0% 0%,rgba(135,82,245,.16),transparent 72%) padding-box,radial-gradient(280px 170px at 100% 100%,rgba(255,165,36,.08),transparent 74%) padding-box,linear-gradient(145deg,#21162f,#171020 72%,#1d1427) padding-box,linear-gradient(130deg,rgba(139,84,245,.56),rgba(255,154,31,.42),rgba(244,196,52,.40)) border-box!important}
@media(max-width:620px){
  .category-hero-card{min-height:155px!important;padding:22px 18px!important;border-radius:23px!important}
  .category-hero-stats{margin-top:12px}
  .category-hero-stats span{padding:6px 9px}
  .category-hero-card>p{font-size:12.5px!important;line-height:1.9!important}
}

/* v1.19 — category hero hierarchy + performance-safe visual cleanup */
.category-page-hero{
  background:
    radial-gradient(520px 230px at 3% 0%,rgba(111,61,229,.22),transparent 70%),
    radial-gradient(500px 230px at 98% 2%,rgba(255,143,23,.20),transparent 70%),
    radial-gradient(420px 180px at 50% 0%,rgba(246,199,45,.13),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--purple) 8%,var(--bg)),var(--bg))!important;
}
.category-hero-card{
  min-height:176px!important;
  padding:28px 34px!important;
  background:
    radial-gradient(330px 200px at 2% 5%,rgba(117,67,227,.18),transparent 70%) padding-box,
    radial-gradient(360px 210px at 98% 96%,rgba(255,151,27,.18),transparent 72%) padding-box,
    radial-gradient(260px 160px at 55% 0%,rgba(246,198,48,.10),transparent 72%) padding-box,
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 97%,#fff),color-mix(in srgb,var(--surface) 95%,#fff7eb)) padding-box,
    linear-gradient(125deg,rgba(112,61,226,.66),rgba(255,142,25,.62),rgba(241,194,44,.58)) border-box!important;
  box-shadow:0 30px 78px rgba(95,49,199,.17),0 14px 34px rgba(255,143,24,.10),0 0 48px rgba(121,73,231,.08),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.category-premium-title{display:flex!important;gap:10px!important;align-items:baseline!important;flex-wrap:wrap!important;margin:7px 0 5px!important;font-size:clamp(30px,2.7vw,42px)!important;line-height:1.45!important}
.category-premium-title .category-type-effect{
  font:inherit!important;font-weight:900!important;
  background:linear-gradient(95deg,#7544e8,#a45de2 38%,#ff8617 72%,#e7b62e)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.category-premium-title .category-poet-name{
  font:inherit!important;font-weight:900!important;color:#17131d!important;background:none!important;-webkit-text-fill-color:initial!important;
}
.category-description,.category-hero-card>p.category-description{
  margin:3px 0 0!important;max-width:820px!important;font-family:'Vazirmatn',Tahoma,sans-serif!important;
  font-size:11.5px!important;line-height:2.05!important;font-weight:400!important;color:#77707f!important;
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:initial!important;text-shadow:none!important;
}
html[data-theme="dark"] .category-premium-title .category-poet-name{color:#f6f1fb!important}
html[data-theme="dark"] .category-description{color:#bdb4c8!important}
@media(max-width:620px){
  .category-hero-card{min-height:142px!important;padding:20px 17px!important}
  .category-premium-title{font-size:27px!important;gap:7px!important}
  .category-description,.category-hero-card>p.category-description{font-size:11.5px!important;line-height:1.9!important}
}