/* ============================================================
   Build 1286 - Hubul "Azi" in aplicatie
   Salutul dupa ora, pastila de cristale, randul de sub ritual,
   caruselul de Scurtaturi si noua poza de la Audio.
   ============================================================ */

/* ---------- salutul, doar pe hub ---------- */
.hubHello{display:none}
body.onHub header .brand{display:none}
body.onHub header .hubHello{display:block; position:absolute; left:20px; right:132px; top:calc(50% + 12px);
  transform:translateY(-50%); font-family:'Montserrat',var(--font-body),sans-serif; font-weight:600; font-size:16px; letter-spacing:0;
  line-height:1.1; color:var(--white,#fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  transition:opacity .16s ease, transform .18s cubic-bezier(.3,.7,.3,1)}
body.onHub.hdOff header .hubHello{opacity:0; transform:translateY(calc(-50% - 5px))}
/* 1288 [stated]: putin aer deasupra salutului si a pastilei, sa nu stea lipite de marginea de sus */
body.onHub header .coBadgeHost{top:calc(50% + 12px)}

/* ---------- pastila de cristale ---------- */
.coBadge.coCry{gap:0; padding:5px 12px 5px 6px; border-radius:999px}
.coBadge.coCry .coRing{margin-right:7px}
.coBadge.coCry .coN{font-weight:700}
body:not(.onHub) .coBadge.coCry .coW{display:none}
body:not(.onHub) .coBadge.coCry{padding-right:11px}
.coBadge .coRing{--p:0; width:18px; height:18px; flex:0 0 auto; border-radius:50%; position:relative;
  background:conic-gradient(#f2c744 calc(var(--p)*360deg), rgba(240,232,214,.22) 0)}
.coBadge .coRing:after{content:""; position:absolute; inset:3.5px; border-radius:50%;
  background:rgba(20,18,40,.72)}
.coBadge .coRing:before{content:""; position:absolute; z-index:1; left:50%; top:50%; width:5px; height:5px;
  transform:translate(-50%,-50%) rotate(45deg); background:#f2c744; border-radius:1px}

/* ---------- sub butonul de ritual ----------
   1288 [stated]: trei insigne separate (pasi, minute, cristale), pe un singur rand. */
.ritMeta{display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:7px;
  margin:0 auto 6px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.ritMeta:empty{display:none}
.ritMeta .rmPill{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 9px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) , rgba(12,14,30,.30);
  box-shadow:inset 0 0 0 1px rgba(240,232,214,.22), 0 3px 10px rgba(0,0,0,.18);
  position:relative; white-space:nowrap;
  color:rgba(247,242,232,.95); font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.01em}
.ritMeta .rmPill:after{content:""; position:absolute; inset:3px; border-radius:999px; border:1px dashed rgba(240,232,214,.22); pointer-events:none}
.ritMeta .rmIc{width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(240,232,214,.16); color:#f4ead6}
.ritMeta .rmIc svg{width:11px; height:11px}
.ritMeta .rmCry{color:#f8dc84}
.ritMeta .rmCry .rmIc{background:rgba(242,199,68,.18)}
.ritMeta .rmGem{width:7px; height:7px; transform:rotate(45deg); background:#f2c744; border-radius:1.5px; box-shadow:0 0 6px rgba(242,199,68,.65)}
.ritMeta .rmOk .rmIc{background:rgba(140,220,170,.22); color:#c9f2d6}
@media (max-width:350px){ .ritMeta{gap:5px} .ritMeta .rmPill{padding:0 9px 0 7px; font-size:11.5px} }

/* ---------- Scurtaturi: carusel de placute cu poza intreaga ----------
   1288 [stated]: fara bordura crem; voal inchis subtil jos si doar titlul, cu alb. */
.hubShort{display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  margin:0 -22px 8px; padding:2px 22px 10px; scroll-padding:0 22px; touch-action:pan-x pan-y;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.hubShort::-webkit-scrollbar{display:none}
.hubShort .hzTile{flex:0 0 128px; height:150px; scroll-snap-align:start; position:relative; overflow:hidden;
  border:0; padding:0; margin:0; border-radius:var(--r-chip,18px); cursor:pointer; touch-action:pan-x pan-y;
  background-color:#1d2236; background-size:cover; background-position:center 30%; background-repeat:no-repeat;
  box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; align-items:flex-end; text-align:left; -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease}
.hubShort .hzTile:before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,22,0) 42%, rgba(8,10,22,.38) 66%, rgba(8,10,22,.78) 100%)}
.hubShort .hzTile:active{transform:scale(.97)}
.hubShort .hzTile .hzT{position:relative; display:block; width:100%; padding:0 11px 11px;
  font-family:var(--font-title); font-weight:700; font-size:14.5px; line-height:1.15; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
.hubShort .hzTile .hl{color:inherit !important; font-weight:inherit; background:none !important; text-shadow:inherit !important}

/* ---------- Audio: poza V4, cate una pentru fiecare tab ----------
   [stated] verde pe Corp, albastru pe Minte, mov pe Suflet. Textul scurt si
   butonul "Ascultă" sub el, ca in mockup. */
.hubAuArt{height:118px; --auBg:url(../img/hub-audio-2.webp?v=1286); --auFill:rgb(44,78,54); --auSh:12,34,24;
  background:var(--auFill) var(--auBg) 100% 50%/auto 156% no-repeat}
body[data-cat="mind"] .hubAuArt{--auBg:url(../img/hub-audio-mind.webp?v=1287); --auFill:rgb(38,52,66); --auSh:16,24,36}
body[data-cat="soul"] .hubAuArt{--auBg:url(../img/hub-audio-soul.webp?v=1287); --auFill:rgb(40,24,74); --auSh:26,14,54}
.hubAuArt:before{background:linear-gradient(90deg, rgba(var(--auSh),.92) 0%, rgba(var(--auSh),.74) 44%, rgba(var(--auSh),0) 76%)}
.hubAuTx{right:auto; width:62%; justify-content:center}
.hubAuTx b{margin-bottom:4px}
.hubAuTx span{max-width:160px; font-size:12px; line-height:1.35; opacity:.88}
.hubAuArr{display:none}
.hubAuPlay{align-self:flex-start; margin-top:9px; height:28px; padding:0 13px 0 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; background:#efe7da; color:#141022;
  font-style:normal; font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* ---------- 1288 [stated]: la capatul hubului, 15px intre link si meniul de jos ----------
   Doua lucruri lasau loc gol: rezerva fundalului (bottom:-320px) si padding-ul de 168px al
   paginii. Fundalul urca cel mult 142px la paralaxa, deci rezerva de 150px ajunge. */
#hubBody:before{bottom:-150px}
body.onHub .phone{padding-bottom:calc(var(--hzBot, 91px) + env(safe-area-inset-bottom, 0px))}
#s-hub .siteFoot{margin-bottom:0}

/* ---------- mesajul de la Back pe Acasa ---------- */
.hzToast{position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); z-index:500;
  transform:translate(-50%, 10px); opacity:0; pointer-events:none;
  padding:10px 16px; border-radius:999px; background:rgba(16,14,32,.92); color:#f5efe4;
  font-family:var(--font-body); font-size:13px; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:opacity .2s ease, transform .2s ease}
.hzToast.on{opacity:1; transform:translate(-50%, 0)}