/* ==========================================================================
   Homepage (index.php, fără ?tab=/?tag=/?search=) — S1-06 / S1-06B / S1-06E
   Stiluri dedicate hero-ului, feedului mixt și rail-urilor contextuale
   intercalate. Același feed este reutilizat pe mobil, tabletă și desktop.
   Scop: body.homepage-view.
   ========================================================================== */

/* Variabile pentru dimensiunile aprobate ale familiilor de carduri
   (secțiunea 6 din task S1-06E) — nu se calculează niciodată din count(). */
body.homepage-view {
  --home-gutter: var(--mobile-page-gutter, 12px);
  --home-rail-gap: var(--mobile-standard-gap, 12px);
  --home-card-standard-w: 158px;
  --home-card-promo-w: 178px;
}

/* Railurile contextuale sunt reutilizate și în liste (F7.1e: „Unde ieșim"),
   unde body nu are clasa homepage-view. Blocul își poartă aceleași variabile,
   astfel încât tile-urile nu ajung cu width/flex-basis invalide în afara home. */
.home-feed-rail {
  --home-gutter: 12px;
  --home-rail-gap: 12px;
  --home-card-standard-w: 158px;
  --home-card-promo-w: 178px;
}

/* --------------------------------------------------------------------------
   A. Hero cu imagine provizorie
   S1-06E: <992px primește un bloc text nou (.home-hero-text), absolut
   poziționat, într-un hero de înălțime fixă 240-260px (vezi override-ul de
   mai jos). >=992px păstrează exact comportamentul S1-06/S1-06B original
   (.hero-section-wrapper, flow-based, centrat) — nicio regulă din acest
   fișier care se aplică la >=992px nu a fost modificată.
   -------------------------------------------------------------------------- */

.home-hero-photo-wrapper {
  /* Suprascrie gradientul din .header-hero-wrapper (folosit și de pagina de
     listă) — fotografia + overlay-ul propriu preiau rolul de fundal. */
  background: #1a1030 !important;
  position: relative;
  overflow: hidden;
}

.home-hero-bg-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 55%;
  display: block;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(158deg, rgba(36, 26, 70, 0.88) 0%, rgba(90, 42, 94, 0.76) 52%, rgba(140, 60, 80, 0.6) 100%);
}

.home-hero-photo-wrapper .hero-section-wrapper {
  position: relative;
  z-index: 2;
  padding: 22px 0 52px 0;
}

.home-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .home-hero-bg-img {
    object-position: 60% 50%;
  }
  .home-hero-photo-wrapper .hero-section-wrapper {
    padding: 28px 0 68px 0;
  }
}

@media (min-width: 992px) {
  .home-hero-bg-img {
    object-position: center 45%;
  }
  .home-hero-photo-wrapper .hero-section-wrapper {
    padding: 34px 0 84px 0;
  }
  .home-hero-subtitle {
    font-size: 1.1rem;
  }
}

/* Mobil/tabletă (<992px): hero compact 250px (interval aprobat 240-260px),
   text ancorat jos-stânga. Specificitatea (body.homepage-view + 2 clase)
   depășește regula de bază .header-hero-wrapper din style.css fără
   !important, iar blocul de mai sus (>=992px) rămâne intact. */
@media (max-width: 991.98px) {
  .home-hero-photo-wrapper {
    height: 170px;
    margin-top: -72px;
    padding-top: 0;
    border-radius: 0;
  }

  .home-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 2;
    text-align: left;
  }

  .home-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 4px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  }

  .home-hero-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: #f8fafc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  /* Glassmorphism for Search button on mobile (high contrast). Inspiră-mă
     folosește acum același stil glassmorphic la orice rezoluție — vezi
     blocul necondiționat de mai jos, în afara acestui media query. */
  #btn-global-search {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
  #btn-global-search:hover,
  #btn-global-search:focus,
  #btn-global-search:active {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important;
    outline: none !important;
  }
  #btn-global-search {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  .header-account-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  #btn-global-search .lucide {
    color: #000000 !important;
    stroke: #000000 !important;
  }
  #btn-global-search .lucide {
    width: 18px;
    height: 18px;
  }
}

/* Stilul glass istoric aparține exclusiv shellului mobil/tabletă. Pe desktop
   headerul comun își controlează singur hamburgerul, căutarea și acțiunile. */
@media (max-width: 991.98px) {
#btn-dice-randomizer {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px !important;
}
#btn-dice-randomizer:hover,
#btn-dice-randomizer:focus,
#btn-dice-randomizer:active {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #000000 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important;
  outline: none !important;
}
#btn-dice-randomizer span {
  color: #000000 !important;
}
#btn-dice-randomizer .lucide {
  color: #000000 !important;
  stroke: #000000 !important;
}
/* Specificitate egală cu regulile :hover/:focus/:active .lucide/span din style.css,
   necesară fiindcă la revenirea din story (homepage-feed.js) primim focus programatic
   pe acest buton, iar altfel varianta alb/mov din style.css câștiga la egalitate de
   !important prin specificitate mai mare. */
#btn-dice-randomizer:hover span,
#btn-dice-randomizer:focus span,
#btn-dice-randomizer:active span {
  color: #000000 !important;
}
#btn-dice-randomizer:hover .lucide,
#btn-dice-randomizer:focus .lucide,
#btn-dice-randomizer:active .lucide {
  color: #000000 !important;
  stroke: #000000 !important;
}
}

/* --------------------------------------------------------------------------
   B. Cele patru destinații — vizibil exclusiv de la 992px. S1-06G: panoul face
      parte din blocul desktop (.d-none.d-lg-block din index.php), deci e ascuns
      sub 992px de acel wrapper; regula mobilă redundantă `display:none` a fost
      eliminată (curățare CSS înlocuit).
   -------------------------------------------------------------------------- */

.home-quick-links-wrapper {
  position: relative;
  z-index: 110;
  margin-top: -34px;
  margin-bottom: 28px;
}

.home-quick-links-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #ffffff;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.home-quick-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 16px 8px;
  text-decoration: none;
  color: var(--color-text-primary, #1e293b);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  border-right: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
  border-bottom: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
}

.home-quick-link-item:nth-child(2n) {
  border-right: none;
}

.home-quick-link-item:nth-child(n+3) {
  border-bottom: none;
}

.home-quick-link-item:hover,
.home-quick-link-item:focus-visible {
  color: var(--primary-color, #6366f1);
  background: var(--color-surface-soft, #f8fafc);
}

.home-quick-link-item:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: -2px;
  z-index: 1;
}

.home-quick-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color, #6366f1);
}

.home-quick-link-icon .lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2.2px;
}

.home-quick-link-icon-events,
.home-quick-link-icon-shopping,
.home-quick-link-icon-promo {
  background: rgba(244, 63, 94, 0.1);
  color: var(--secondary-color, #f43f5e);
}

.home-quick-link-label {
  line-height: 1.2;
}

/* 576–767.98px: panoul rămâne 2×2 compact (textul complet "Shopping &
   Lifestyle" nu încape confortabil pe un singur rând de 4). */

@media (min-width: 768px) and (max-width: 991.98px) {
  .home-quick-links-panel {
    grid-template-columns: repeat(4, 1fr);
  }
  .home-quick-link-item {
    border-bottom: none;
    border-right: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
  }
  .home-quick-link-item:nth-child(4n) {
    border-right: none;
  }
}

@media (min-width: 992px) {
  /* S1-06C: carduri suprapuse mai joase (~80px), layout orizontal icon+text,
     nu mai cresc odată cu cantitatea de text — dimensiune fixă. */
  .home-quick-links-wrapper {
    margin-top: -44px;
  }
  .home-quick-links-panel {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .home-quick-link-item {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    height: 80px;
    padding: 0 14px;
    background: #ffffff;
    border: none;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 16px 32px -14px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.04);
    font-size: 0.86rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .home-quick-link-icon {
    width: 34px;
    height: 34px;
  }
  .home-quick-link-icon .lucide {
    width: 18px;
    height: 18px;
  }
  .home-quick-link-item:hover,
  .home-quick-link-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px -10px rgba(99, 102, 241, 0.28);
    background: #ffffff;
  }
}

/* --------------------------------------------------------------------------
   C. Ritm, tipografie, suprafețe
   -------------------------------------------------------------------------- */

body.homepage-view {
  background: var(--color-surface-soft, #f8fafc);
  background-attachment: scroll;
}

.home-section {
  margin-bottom: 26px !important;
}

@media (min-width: 992px) {
  .home-section {
    margin-bottom: 40px !important;
  }
}

.home-empty-note {
  color: var(--color-text-secondary, #475569);
  font-style: italic;
  padding-left: var(--home-gutter);
  padding-right: var(--home-gutter);
}

@media (min-width: 992px) {
  .home-empty-note {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Sub 992px, secțiunile mobile (antet + rail) ignoră padding-ul implicit
   Bootstrap al lui main.container (12px) și își gestionează singure inset-ul
   de 20px, pentru ca rail-urile să poată curge până la marginea reală a
   viewportului (necesar pentru scroll orizontal + efectul de "peek"). La
   >=992px main.container își păstrează padding-ul original neschimbat. */
@media (max-width: 991.98px) {
  main.container {
    padding-left: 0;
    padding-right: 0;
    /* Ritmul de 14px dintre hero și primul card continuă spațierea feedului.
       Bootstrap .py-2 este !important, deci trebuie egalat aici. */
    padding-top: 14px !important;
  }

  /* F0.1: full-bleed-ul de mai sus e gândit pentru homepage (rail-uri proprii
     cu inset de 20px). Paginile „Salvate"/„Mai multe" nu au rail-uri — randează
     carduri normale direct în main.container — deci au nevoie de gutter-ul
     standard (12px), altfel cardurile ating marginile ecranului. */
  body.saved-page main.container,
  body.more-page main.container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Cardurile auxiliare de după feed folosesc exact același gutter de 12px ca
     .home-feed și .home-feed-loadmore-wrap. Secțiunile rămân full-width aici;
     max-width-ul lor este sincronizat cu feedul în breakpointurile de tabletă. */
  body.homepage-view main.container > .app-install-promo--home,
  body.homepage-view main.container > .newsletter-banner,
  body.event-listing-page main.container > .newsletter-banner,
  body.public-surface--places main.container > .newsletter-banner {
    box-sizing: border-box;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Corecție QA vizual: Bootstrap dă lui .container un max-width fix +
     centrare de la 576px (540px) și 768px (720px) în sus. Hero-text-ul și
     rail-urile sunt full-bleed (ancorate la marginea reală a viewportului,
     20px gutter), dar header-ul (.navbar-glass .container) folosea
     max-width-ul Bootstrap implicit — de aceea la 576-991px conținutul
     header-ului (hamburger/wordmark/acțiuni) se centra tot mai spre mijloc
     pe măsură ce viewportul creștea, ieșind din linie cu titlul hero-ului
     ancorat la 20px de marginea reală. Se elimină max-width-ul Bootstrap,
     păstrând un gutter de 20px, consecvent cu restul homepage-ului. */
  .navbar-glass .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 44px minim pentru butonul de căutare din header, cerut de secțiunea 4.2
     a taskului — scopat strict la homepage, ca să nu afecteze alte pagini.
     Corecție QA vizual: regula de bază din style.css
     (@media(min-width:768px) #btn-global-search{width:auto;padding:0 14px;
     border-radius:50rem}) rămânea activă pe homepage la 768-991px pentru
     padding/border-radius (doar width/height erau suprascrise mai jos),
     iar eticheta text "Caută" (d-md-inline) devenea vizibilă — rezultatul
     era un cerc de dimensiune fixă cu padding orizontal nepotrivit și text
     care nu încăpea. Căutarea trebuie să rămână circulară, icon-only, pe tot
     intervalul mobil/tabletă (secțiunea 4.2 din task), deci eticheta text se
     ascunde explicit pe homepage sub 992px. */
  #btn-global-search {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #btn-global-search span {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Header la 320px (S1-06F, secțiunea 4.2): hamburger + ghidBR.ro + Inspiră-mă
   + căutare trebuie să rămână toate vizibile, fără coliziuni/tăieri. Singurele
   ajustări permise de task sunt fluide și moderate — wordmark, gapuri,
   padding orizontal — fără eliminarea vreunei etichete și fără a coborî sub
   44px țintele tactile deja conforme (hamburger/căutare/Inspiră-mă).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .navbar-glass .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header-actions {
    gap: 6px !important;
  }

  /* Bootstrap's default .navbar-brand{margin-right:1rem} (16px) was the
     missing piece: measured live, it pushed the search button ~11px past
     the 320px viewport edge even with every other adjustment above applied. */
  .navbar-glass .navbar-brand {
    margin-right: 4px !important;
  }
}

/* --------------------------------------------------------------------------
   D. Antet comun de secțiune — icon tinted + h2 + buton circular chevron,
   identic pentru toate cele 5 rail-uri (secțiunea 5 din task). Titlul și
   butonul sunt linkuri reale către pagina completă a categoriei; fără text
   separat "Vezi toate".
   -------------------------------------------------------------------------- */

.home-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--home-gutter);
  margin: 0 0 14px;
}

@media (min-width: 992px) {
  .home-section-header {
    padding: 0;
    margin: 0 0 16px;
  }
}

.home-section-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-section-icon .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2.1px;
}

.home-accent-inspire { background: #f1f5f9; color: #000000; }
.home-accent-events  { background: #ffe9ef; color: #ec4b6e; }
.home-accent-places  { background: #e3f6f2; color: #12a394; }
.home-accent-shopping{ background: #e6f7ee; color: #14a866; }
.home-accent-promo   { background: #ffe9f1; color: #ec4b7e; }

.home-section-title-v2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* S1-06F, secțiunea 6.3: ~16px la 320px, maximum 18px, pe mobil. */
  font-size: clamp(1rem, 4.4vw, 1.125rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary, #1e293b);
}

@media (min-width: 992px) {
  .home-section-title-v2 {
    font-size: 1.4rem;
  }
}

.home-section-title-link {
  color: inherit;
  text-decoration: none;
  white-space: normal;
}

.home-section-title-link:hover,
.home-section-title-link:focus-visible {
  text-decoration: underline;
}

.home-section-chevron {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #8a86a0;
  box-shadow: 0 2px 8px rgba(20, 16, 40, 0.09);
  border: none;
  text-decoration: none;
}

.home-section-chevron .lucide {
  width: 16px;
  height: 16px;
}

.home-section-chevron:hover,
.home-section-chevron:focus-visible {
  color: var(--primary-color, #6366f1);
}

.home-section-chevron:focus-visible,
.home-section-title-link:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   E. Rail orizontal comun — overflow-x:auto, scroll-snap, scrollbar ascunsă,
   padding lateral 20px / gap 12px (secțiunea 5 din task). Focusul rămâne
   vizibil pe carduri; scroll funcțional prin touch/trackpad/tastatură.
   -------------------------------------------------------------------------- */

.home-rail {
  display: flex;
  gap: var(--home-rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--home-gutter);
  -webkit-overflow-scrolling: touch;
  padding: 2px var(--home-gutter) 6px;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-rail::-webkit-scrollbar {
  display: none;
}

.home-rail > * {
  flex-shrink: 0;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 992px) {
  .home-rail {
    padding: 2px 0 6px;
  }
}

/* --------------------------------------------------------------------------
   G. Familia standard (Evenimente / Unde ieșim / Shopping & Lifestyle) —
   158px lățime comună (secțiunea 6.2). Diferă doar raportul media/înălțimea:
   evenimente = poster portrait 158×210; locații = landscape 158×104.
   -------------------------------------------------------------------------- */

.home-rail-card {
  position: relative;
  display: block;
  width: var(--home-card-standard-w);
  flex-basis: var(--home-card-standard-w);
  background: #ffffff;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 6px 22px rgba(20, 16, 40, 0.07);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-rail-card .home-feed-promoted-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 3px 6px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: rgba(255, 247, 237, 0.94);
  color: #b45309;
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.home-rail-card-media > .home-feed-promoted-label {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
}

.home-rail-card .home-feed-promoted-label .lucide {
  width: 10px;
  height: 10px;
  stroke-width: 2.2px;
}

.home-rail-card:hover,
.home-rail-card:focus-visible {
  box-shadow: 0 10px 26px rgba(20, 16, 40, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .home-rail-card:hover {
    transform: translateY(-3px);
  }
  .home-rail-card:hover .home-rail-card-media img {
    transform: scale(1.04);
  }
}

.home-rail-card:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
}

.home-rail-card-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-soft, #f8fafc);
}

.home-rail-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.home-rail-card-media-tall {
  height: 210px;
}

.home-rail-card-media-short {
  height: 104px;
}

.home-rail-chip {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rail-chip-generic {
  background: rgba(22, 163, 74, 0.92);
}

.home-rail-place-types {
  display: flex;
  align-items: center;
  gap: 7px;
}

.home-rail-place-type-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.home-rail-place-type-item .lucide {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

.home-rail-card-body {
  padding: 10px 6px 4px;
}

.home-rail-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 35px;
  margin: 0 0 8px;
  color: #1b1730;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-rail-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  color: #8a86a0;
}

.home-rail-card-meta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-rail-card-meta-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.2px;
  flex-shrink: 0;
}

.home-rail-card-event .home-rail-card-meta-icon {
  color: #ec4b6e;
}

.home-rail-card-place .home-rail-card-meta-icon {
  color: #12a394;
}

/* F7.1e — Cinema City: aceeași familie de tile-uri, cu accent propriu și
   fallback vizual dacă un poster lipsește temporar din cache. */
.home-accent-cinema {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.home-rail-chip-cinema {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.96), rgba(219, 39, 119, 0.94));
}

.home-rail-card-cinema .home-rail-card-meta-icon {
  color: #7c3aed;
}

.home-rail-cinema-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
  background:
    radial-gradient(circle at 75% 20%, rgba(236, 72, 153, 0.20), transparent 38%),
    linear-gradient(145deg, #ede9fe, #faf5ff);
}

.home-rail-cinema-placeholder .lucide {
  width: 42px;
  height: 42px;
  stroke-width: 1.5;
}

/* F7.2c — teatrul folosește aceeași geometrie, dar o paletă caldă și clar
   distinctă de programul Cinema City. */
.home-rail-chip-theatre {
  background: linear-gradient(135deg, rgba(126, 53, 24, 0.96), rgba(194, 105, 41, 0.94));
}

.home-rail-card-theatre .home-rail-card-meta-icon {
  color: #9b4f20;
}

.home-rail-card-theatre .home-rail-cinema-placeholder {
  color: #9b4f20;
  background:
    radial-gradient(circle at 75% 20%, rgba(214, 146, 79, 0.24), transparent 38%),
    linear-gradient(145deg, #f5eadd, #fff8ef);
}

/* --------------------------------------------------------------------------
   G2. CTA final de rail (S1-06F, secțiunea 7) — element suplimentar după
   ultimul rezultat real (nu se numără în limita de 5), cerc 52-56px + săgeată,
   centrat vertical pe înălțimea rândului (align-items:stretch implicit al
   .home-rail îi dă exact înălțimea familiei de carduri din secțiunea curentă).
   -------------------------------------------------------------------------- */

.home-rail-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  flex-basis: 84px;
  text-decoration: none;
}

.home-rail-more-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary-color, #6366f1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-rail-more-circle .lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2.2px;
}

@media (hover: hover) {
  .home-rail-more:hover .home-rail-more-circle {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.24);
  }
}

.home-rail-more:focus-visible {
  outline: 2px solid var(--primary-color, #6366f1);
  outline-offset: 2px;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   H. Familia "Promoții" — 178px, fundal pastel, fără fotografie (secțiunea
   6.3). Promoția moștenește eligibilitatea comercială a locației, dar poartă
   eticheta numai când ocupă efectiv slotul rezervat al railului.
   -------------------------------------------------------------------------- */

.home-rail-card-promo {
  width: var(--home-card-promo-w);
  flex-basis: var(--home-card-promo-w);
  border-radius: 18px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: none;
}

.home-promo-tint-0 { background-color: #fdeaf1; --promo-card-bg: #fdeaf1; }
.home-promo-tint-1 { background-color: #ece9fd; --promo-card-bg: #ece9fd; }
.home-promo-tint-2 { background-color: #fdf1e3; --promo-card-bg: #fdf1e3; }
.home-promo-tint-3 { background-color: #e6f7ee; --promo-card-bg: #e6f7ee; }

.home-feed-promo-card.is-promoted,
.home-rail-card-promo.is-promoted {
  border: 2px solid transparent !important;
  background-image: linear-gradient(var(--promo-card-bg, #ffffff), var(--promo-card-bg, #ffffff)), linear-gradient(135deg, rgba(253, 230, 138, 0.75), rgba(245, 166, 35, 0.55), rgba(217, 119, 6, 0.45), rgba(245, 166, 35, 0.55)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 0 16px rgba(245, 166, 35, 0.22), 0 0 2px rgba(245, 166, 35, 0.35), 0 8px 24px rgba(20, 16, 40, 0.08) !important;
}

.home-promo-tint-0 .home-promo-icon-circle { color: #ec4b7e; }
.home-promo-tint-1 .home-promo-icon-circle { color: #6b3df5; }
.home-promo-tint-2 .home-promo-icon-circle { color: #e8862e; }
.home-promo-tint-3 .home-promo-icon-circle { color: #14a866; }

.home-promo-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-promo-icon-circle .lucide {
  width: 19px;
  height: 19px;
  stroke-width: 2px;
}

.home-promo-benefit {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #2a2340;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-promo-business {
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b6580;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-promo-expiry-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #9a8aa0;
}

.home-promo-expiry-row .home-rail-card-meta-icon {
  color: inherit;
}

/* --------------------------------------------------------------------------
   I. CTA de contribuție ("Ai ceva de propus?") — card gradient, buton alb
   (secțiunea 9 din task).
   -------------------------------------------------------------------------- */

.home-cta-band {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--home-gutter);
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6b3df5, #a23ba8);
  box-shadow: 0 12px 28px rgba(107, 61, 245, 0.28);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 992px) {
  .home-cta-band {
    margin: 0;
  }
}

.home-cta-band:hover,
.home-cta-band:focus-visible {
  box-shadow: 0 16px 32px rgba(107, 61, 245, 0.34);
}

@media (hover: hover) {
  .home-cta-band:hover {
    transform: translateY(-2px);
  }
}

.home-cta-band:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.home-cta-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.home-cta-icon .lucide {
  width: 20px;
  height: 20px;
}

.home-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-cta-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
}

.home-cta-desc {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-cta-button {
  flex: 0 0 auto;
  background: #ffffff;
  color: #6b3df5;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   D5. Reviewuri ghidBR — slot editorial separat de inventarul organic și de
   pozițiile comerciale. Pe mobil apare înaintea feedului; pe desktop imediat
   după primul rail. Materialul din slot se rotește stabil o dată pe zi.
   -------------------------------------------------------------------------- */

.editorial-review-spotlight {
  margin: 0 0 24px;
}

.editorial-review-spotlight__link {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(91, 79, 233, 0.18);
  border-radius: 26px;
  background: #ffffff;
  color: #171529;
  text-decoration: none;
  box-shadow: 0 16px 42px rgba(31, 27, 55, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.editorial-review-spotlight__link:hover {
  border-color: rgba(91, 79, 233, 0.38);
  color: #171529;
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(31, 27, 55, 0.12);
}

.editorial-review-spotlight__link:focus-visible {
  outline: 3px solid rgba(91, 79, 233, 0.32);
  outline-offset: 3px;
}

.editorial-review-spotlight__media {
  min-height: 230px;
  overflow: hidden;
  background: #ebe9f3;
}

.editorial-review-spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-review-spotlight__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(22px, 4vw, 38px);
}

.editorial-review-spotlight__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #5b4fe9;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editorial-review-spotlight--home .editorial-review-spotlight__kicker {
  text-transform: none;
}

.editorial-review-spotlight__kicker svg,
.editorial-review-spotlight__action svg {
  width: 16px;
  height: 16px;
}

.editorial-review-spotlight__body > strong {
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.editorial-review-spotlight__intro {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 12px;
  color: #666379;
  font-family: var(--content-snippet-font-family);
  font-size: var(--content-snippet-font-size);
  font-weight: var(--content-snippet-font-weight);
  letter-spacing: var(--content-snippet-letter-spacing);
  line-height: var(--content-snippet-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.editorial-review-spotlight__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: #5b4fe9;
  font-size: 0.84rem;
  font-weight: 800;
}

.editorial-review-listing-slot {
  width: min(100%, 980px);
  margin: 8px auto 26px;
}

.editorial-review-listing-slot--feed {
  width: 100%;
  margin: 0;
}

.editorial-review-listing-slot--feed .editorial-review-spotlight {
  margin: 0;
}

@media (max-width: 767.98px) {
  .editorial-review-spotlight {
    margin: 14px 0 22px;
  }

  /* Pe Acasă, main are 8px sus, iar feedul 6px sus. Marginile de 6px/8px
     completează aceste inset-uri până la ritmul vertical comun de 14px. */
  .editorial-review-spotlight--home {
    margin: 6px 0 8px;
  }

  .editorial-review-spotlight__link {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 158px;
    border-radius: var(--mobile-card-radius, 22px);
  }

  .editorial-review-spotlight__media {
    min-height: 158px;
  }

  .editorial-review-spotlight__body {
    padding: 17px 16px;
  }

  .editorial-review-spotlight__kicker {
    margin-bottom: 8px;
    font-size: 0.63rem;
  }

  .editorial-review-spotlight__body > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .editorial-review-spotlight__intro {
    display: none;
  }

  .editorial-review-spotlight__action {
    margin-top: 12px;
    font-size: 0.75rem;
  }
}

/* Tableta și desktopul folosesc teaserul lat; telefonul păstrează geometria
   compactă aprobată din blocul mobil de mai sus. */
@media (min-width: 768px) {
  .editorial-review-spotlight--home {
    margin: 6px 0 8px;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__link {
    grid-template-columns: min(190px, 42%) minmax(0, 1fr);
    min-height: 190px;
    border-radius: 22px;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__media {
    min-height: 190px;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__body {
    padding: 18px 22px;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__kicker {
    margin-bottom: 6px;
    font-size: 0.66rem;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__body > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.14;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__action {
    margin-top: 10px;
    font-size: 0.78rem;
  }

  .editorial-review-spotlight--home .editorial-review-spotlight__intro {
    display: -webkit-box;
    margin-top: 8px;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 992px) {
  /* Afișele verticale umplu cardul fără să-i impună înălțimea naturală. */
  .editorial-review-spotlight__media {
    position: relative;
    min-width: 0;
  }

  .editorial-review-spotlight__media img {
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 767.98px) {
  /* Cerință editorială explicită: snippetul rămâne vizibil pe două rânduri,
     fără să schimbe coloanele, imaginea sau scara titlului de telefon. */
  .editorial-review-spotlight--home .editorial-review-spotlight__intro {
    display: -webkit-box;
    margin-top: 6px;
    -webkit-line-clamp: 2;
  }
}

.home-reviews-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--color-border, rgba(226, 232, 240, 0.8));
  border-radius: var(--radius-lg, 12px);
  padding: 14px 16px;
}

a.home-reviews-teaser {
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

a.home-reviews-teaser:hover {
  border-color: rgba(99, 102, 241, 0.42);
  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.08);
  transform: translateY(-1px);
}

a.home-reviews-teaser:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.32);
  outline-offset: 3px;
}

.home-reviews-teaser-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary-color, #6366f1);
  flex-shrink: 0;
}

.home-reviews-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-reviews-teaser-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-primary, #1e293b);
}

.home-reviews-teaser-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary, #475569);
}

/* S1-06G: teaserul face parte din blocul desktop (.d-none.d-lg-block din
   index.php), ascuns sub 992px de acel wrapper; regula mobilă redundantă
   `display:none` a fost eliminată (curățare CSS înlocuit). */

/* Secțiunea E (Footer dedicat) mutată neschimbată în assets/css/mobile-footer.css
   — footer comun tuturor paginilor mobile (index/event/place/more/saved), nu
   doar homepage-ului; vezi includes/layout/mobile-aware-footer.php. */

/* --------------------------------------------------------------------------
   Interacțiuni: prefers-reduced-motion (S1-06C, secțiunea 10; actualizat la
   S1-06E cu numele noilor clase de card)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home-quick-link-item,
  .home-rail-card,
  .home-cta-band,
  .home-rail-more-circle,
  .home-rail-card-media img,
  .event-card-img {
    transition: none !important;
  }
  .home-quick-link-item:hover,
  .home-rail-card:hover,
  .home-cta-band:hover,
  .home-rail-more:hover .home-rail-more-circle {
    transform: none !important;
  }
}

/* ==========================================================================
   S1-06G — Homepage mobil: stories + feed vertical mixt (<992px).
   Desktop (>=992px) rămâne neschimbat: totul e scopat în
   @media(max-width:991.98px) și/sau sub .home-mobile-feed.
   ========================================================================== */
@media (max-width: 991.98px) {

  /* --- Header transparent peste hero (secț. 4), cu scrim pentru lizibilitate.
     Restilizare pur vizuală, scopată la homepage; markup partajat neschimbat. --- */
  .navbar-glass {
    background: linear-gradient(180deg, rgba(18, 10, 38, 0.5) 0%, rgba(18, 10, 38, 0.16) 62%, rgba(18, 10, 38, 0) 100%);
    box-shadow: none;
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .navbar-glass .brand-text {
    color: #ffffff;
  }
  .header-hamburger-btn {
    color: #ffffff;
  }


  /* --- Container feed mobil: gutter lateral 16px (secț. 3). --- */
  .home-mobile-feed {
    padding-bottom: 8px;
  }
  .home-mobile-feed .home-section-header {
    padding: 0 12px;
    margin: 0 0 12px;
  }

  /* --- Feed vertical --- */
  .home-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px var(--mobile-page-gutter, 12px) 0;
  }

  /* FA.2: rail contextual intercalat printre cardurile feedului („Diseară în
     Brăila", „Deschis acum" etc.). Iese din gutter-ul de 12px al feedului ca
     tile-urile să curgă până la marginea ecranului (efectul „peek" al
     rail-urilor); antetul își recapătă gutter-ul prin .home-section-header,
     care are deja padding lateral propriu. */
  .home-feed-rail {
    margin-left: -12px;
    margin-right: -12px;
    padding: 2px 0 4px;
  }
  .home-feed-rail .home-section-header {
    margin-bottom: 10px;
  }

  /* .home-feed-card, .home-feed-card-main, .home-feed-title,
     .home-feed-actions*, .home-feed-action, .home-save-btn, .home-participate-btn,
     .home-feed-cardhead, .home-feed-pillar, .home-feed-event-*, .home-feed-poster*,
     .home-feed-meta-row, .home-feed-mi: extracted to assets/css/mobile-feed-card.css
     (MOB-EVT-01) so the events list can reuse the same card language. Loaded on
     this page via mobile-feed-card.css alongside homepage.css — no visual change. */
  /* Promoții — două pe rând (secț. 9) */
  .home-feed-promo-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
    min-height: 128px;
    text-decoration: none;
    color: inherit;
  }
  .home-feed-promo-card.is-static { cursor: default; }
  .home-feed-promo-card:focus-visible {
    outline: 2px solid var(--primary-color, #6366f1);
    outline-offset: 2px;
  }
  .home-feed-promo-benefit {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
    color: #2a2340;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-feed-promo-biz {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5d5776;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-feed-promo-biz .lucide { width: 13px; height: 13px; flex: 0 0 auto; color: #8a86a0; }
  .home-feed-promo-valid {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #9a93ab;
  }
  .home-feed-promo-valid .lucide { width: 13px; height: 13px; flex: 0 0 auto; }

  /* .home-feed-loadmore-wrap / .home-feed-loadmore: extracted to
     assets/css/mobile-feed-card.css (MOB-EVT-01), same reasoning as above. */
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .home-feed-open.is-open .home-feed-open-dot::after {
    animation: none !important;
    display: none;
  }
}

/* Tablet & Landscape responsive adjustments for mobile layout (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* .home-save-label / .home-calendar-label / .home-feed-actions-group rules:
     extracted to assets/css/mobile-feed-card.css (MOB-EVT-01). */
  .navbar-glass .container,
  .home-hero-text .container,
  .events-list-mobile,
  .places-list-mobile,
  .home-mobile-feed,
  body.homepage-view .home-footer > .container,
  body.homepage-view main.container > .app-install-promo--home,
  body.homepage-view main.container > .newsletter-banner,
  body.event-listing-page main.container > .newsletter-banner,
  body.public-surface--places main.container > .newsletter-banner {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* În coloana homepage de 640px, formularul nu trebuie să comprime textul
     newsletterului într-o primă coloană îngustă. */
  body.homepage-view .newsletter-promo-layout,
  body.event-listing-page .newsletter-banner .newsletter-promo-layout,
  body.public-surface--places main.container > .newsletter-banner .newsletter-promo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.homepage-view .newsletter-promo-action,
  body.event-listing-page .newsletter-banner .newsletter-promo-action,
  body.public-surface--places main.container > .newsletter-banner .newsletter-promo-action {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-glass .container,
  .home-hero-text .container,
  .events-list-mobile,
  .places-list-mobile,
  .home-mobile-feed,
  body.homepage-view .home-footer > .container,
  body.homepage-view main.container > .app-install-promo--home,
  body.homepage-view main.container > .newsletter-banner,
  body.event-listing-page main.container > .newsletter-banner,
  body.public-surface--places main.container > .newsletter-banner {
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 991.98px) {
  /* Pe hero, acțiunile păstrează zona tactilă de 44px, dar folosesc același
     glass întunecat ca Save/Share din paginile individuale. După scroll,
     headerul alb revine la stilul luminos existent. */
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-dice-randomizer,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-global-search,
  body.has-mobile-nav .navbar-glass:not(.scrolled) .header-account-btn {
    background: rgba(15, 23, 42, 0.52) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32) !important;
  }
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-dice-randomizer .lucide,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-global-search .lucide,
  body.has-mobile-nav .navbar-glass:not(.scrolled) .header-account-btn .lucide {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
  /* Avatarul contului își păstrează cercul de brand peste glass-ul închis, dar
     primește un inel subțire ca să nu se lipească de fundal. */
  body.has-mobile-nav .navbar-glass:not(.scrolled) .header-account-avatar {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  }
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-dice-randomizer span,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-global-search span {
    color: #ffffff !important;
  }
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-dice-randomizer:hover,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-dice-randomizer:focus,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-global-search:hover,
  body.has-mobile-nav .navbar-glass:not(.scrolled) #btn-global-search:focus,
  body.has-mobile-nav .navbar-glass:not(.scrolled) .header-account-btn:hover,
  body.has-mobile-nav .navbar-glass:not(.scrolled) .header-account-btn:focus {
    background: rgba(15, 23, 42, 0.68) !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 4px 14px rgba(15, 23, 42, 0.32) !important;
  }
}

/* ==========================================================================
   FC.2 — Blocul „Nu uita": lucrurile tale care sunt pe cale să se întâmple.
   Randat de saves.js după primul card al feedului. Apare DOAR cât timp ceva e
   iminent, deci nu are stare „goală" — dacă nu-i nimic, blocul nu există.
   ========================================================================== */

.home-personal {
  min-width: 0;
  margin: 0;
  padding: 14px 14px 6px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 6% 0%, rgba(129, 140, 248, 0.13), transparent 42%),
    linear-gradient(135deg, #fbfbff 0%, #f1f3ff 100%);
  /* Blocul sosește după sincronizare, deci ar „apărea" brusc. Animația scurtă
     îl face să citească intenționat, nu ca o eroare de randare. */
  animation: home-personal-in 0.22s ease-out both;
}

@keyframes home-personal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-personal { animation: none; }
}

.home-personal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #3730a3;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-personal-title .lucide {
  width: 16px;
  height: 16px;
  stroke-width: 2.4px;
}

.home-personal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-personal-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 13px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.home-personal-row:hover,
.home-personal-row:focus-visible {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.home-personal-thumb {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 11px;
  background: #eef2ff;
  color: #4f46e5;
}

.home-personal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-personal-thumb .lucide {
  width: 19px;
  height: 19px;
}

/* Participarea e o confirmare, salvarea doar un interes — se văd diferit. */
.home-personal-thumb--participation { background: #fff1f2; color: #e11d48; }
.home-personal-thumb--saved_promo   { background: #fffbeb; color: #b45309; }

.home-personal-body {
  flex: 1 1 auto;
  min-width: 0;
}

.home-personal-item-title {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-personal-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.76rem;
}

.home-personal-meta .lucide {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.home-personal-meta strong {
  color: #4f46e5;
  font-weight: 700;
}

.home-personal-sep { opacity: 0.6; }

.home-personal-chev {
  flex: 0 0 auto;
  color: #94a3b8;
}

.home-personal-chev .lucide {
  width: 17px;
  height: 17px;
}

.home-personal-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 2px 8px;
  color: #4f46e5;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.home-personal-all .lucide {
  width: 14px;
  height: 14px;
}

.home-personal-all:hover { text-decoration: underline; }

[data-bs-theme="dark"] .home-personal {
  border-color: rgba(129, 140, 248, 0.32);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 27, 75, 0.9) 100%);
}

[data-bs-theme="dark"] .home-personal-title { color: #a5b4fc; }

[data-bs-theme="dark"] .home-personal-row {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.6);
}

[data-bs-theme="dark"] .home-personal-item-title { color: #e2e8f0; }

/* ==========================================================================
   F6.2 — Recomandări explicabile din alegeri explicite.
   Bloc separat de railurile feedului: nu consumă capacitatea lor și nu acceptă
   sloturi comerciale. Mounturile goale nu ocupă spațiu înainte de sincronizare.
   ========================================================================== */

.personal-recommendations-mount:empty { display: none; }

.personal-recommendations-mount[data-personal-recommendations-layout="desktop"] {
  margin: 0 0 2rem;
}

.personal-recommendations {
  padding: 14px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 95% 0%, rgba(14, 165, 233, 0.12), transparent 38%),
    linear-gradient(145deg, #f8fdff 0%, #f5f7ff 100%);
  animation: home-personal-in 0.22s ease-out both;
}

.personal-recommendations-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.personal-recommendations-icon {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #e0f2fe;
  color: #0369a1;
}

.personal-recommendations-icon .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 2.3px;
}

.personal-recommendations-head strong,
.personal-recommendations-head small {
  display: block;
}

.personal-recommendations-head strong {
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.25;
}

.personal-recommendations-head small {
  max-width: 680px;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.personal-recommendations-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.personal-recommendation-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.personal-recommendation-row:hover,
.personal-recommendation-row:focus-visible {
  border-color: rgba(14, 165, 233, 0.56);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.personal-recommendation-thumb {
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: #e0f2fe;
  color: #0369a1;
}

.personal-recommendation-thumb--event { background: #eef2ff; color: #4f46e5; }
.personal-recommendation-thumb--promo { background: #fffbeb; color: #b45309; }

.personal-recommendation-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-recommendation-thumb .lucide {
  width: 21px;
  height: 21px;
}

.personal-recommendation-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.personal-recommendation-copy strong,
.personal-recommendation-meta,
.personal-recommendation-reason {
  display: block;
}

.personal-recommendation-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.89rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-recommendation-meta {
  overflow: hidden;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-recommendation-reason {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  margin-top: 4px;
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-recommendation-reason .lucide {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.personal-recommendation-chevron {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #94a3b8;
}

@media (max-width: 767.98px) {
  /* Motivul recomandării este informație, nu etichetă decorativă: pe mobil se
     afișează integral, pe câte rânduri sunt necesare. */
  .personal-recommendation-reason {
    align-items: flex-start;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .personal-recommendation-reason .lucide {
    margin-top: 1px;
  }
}

@media (min-width: 768px) {
  .personal-recommendations-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .personal-recommendations { animation: none; }
}

[data-bs-theme="dark"] .personal-recommendations {
  border-color: rgba(56, 189, 248, 0.27);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9));
}

[data-bs-theme="dark"] .personal-recommendations-head strong,
[data-bs-theme="dark"] .personal-recommendation-copy strong { color: #e2e8f0; }

[data-bs-theme="dark"] .personal-recommendation-row {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
}

[data-bs-theme="dark"] .personal-recommendations-head small,
[data-bs-theme="dark"] .personal-recommendation-meta { color: #94a3b8; }

[data-bs-theme="dark"] .personal-recommendation-reason { color: #7dd3fc; }

/* =======================================================================
   Shell mobil 2026 — suprafețe content-first și navigare stabilă pe iOS.
   Introdus pe Acasă și extins pe cele patru listări principale.
   ======================================================================= */
@media (max-width: 991.98px) {
  body.mobile-feed-app-shell {
    --home-header-height: calc(60px + env(safe-area-inset-top, 0px));
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding-top: 0 !important;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--color-surface-soft, #f8fafc);
  }

  body.mobile-feed-app-shell .home-browser-scroll-surface {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    padding-top: var(--home-header-height, 76px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-padding-bottom: calc(var(--mobile-nav-height, 56px) + var(--mobile-nav-float-gap, 10px) + var(--mobile-safe-bottom, 0px) + 24px);
  }

  body.mobile-feed-app-shell.modal-open .home-browser-scroll-surface {
    overflow: hidden;
  }

  body.mobile-feed-app-shell main.container {
    padding-top: 8px !important;
  }

  /* Antet editorial compact cu iconiță de pilon/meniu */
  body.mobile-feed-app-shell main.container {
    padding-top: 8px !important;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 8px auto 14px;
    padding: 0 12px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro-inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.12);
    border: 1.5px solid rgba(99, 102, 241, 0.25);
    color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro-icon .lucide,
  body.mobile-feed-app-shell .mobile-feed-page-intro-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2px;
    color: currentColor;
    stroke: currentColor;
  }

  /* Teme cromatice distincte pentru fiecare pilon/meniu */
  body.mobile-feed-app-shell .mobile-feed-page-intro--home .mobile-feed-page-intro-icon {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: #4f46e5;
  }
  body.mobile-feed-app-shell .mobile-feed-page-intro--events .mobile-feed-page-intro-icon {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: #7c3aed;
  }
  body.mobile-feed-app-shell .mobile-feed-page-intro--places .mobile-feed-page-intro-icon {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
    color: #059669;
  }
  body.mobile-feed-app-shell .mobile-feed-page-intro--shopping .mobile-feed-page-intro-icon {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.25);
    color: #db2777;
  }
  body.mobile-feed-app-shell .mobile-feed-page-intro--promotions .mobile-feed-page-intro-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: #d97706;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.15rem, 4vw, 1.3rem);
    font-weight: 750;
    letter-spacing: -.028em;
    line-height: 1.15;
  }

  body.mobile-feed-app-shell .mobile-feed-page-intro p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
  }

  body.has-mobile-nav .navbar-glass.home-app-shell,
  body.has-mobile-nav .navbar-glass.home-app-shell.scrolled {
    position: fixed !important;
    inset: 0 0 auto 0;
    display: block;
    padding-top: calc(env(safe-area-inset-top, 0px) + .5rem) !important;
    padding-bottom: .5rem !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 0 #e8e8ef, 0 8px 24px rgba(35, 28, 68, .07) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    /* Dropdownul contului depășește intenționat înălțimea de 76px a barei.
       `hidden` îl tăia la marginea headerului, deși headerul are deja z-index
       1050 peste scrollport. Fundalul barei nu are nevoie de clipping. */
    overflow: visible;
  }

  body.mobile-feed-app-shell .navbar-glass.home-app-shell.is-feed-header-hidden,
  body.mobile-feed-app-shell .navbar-glass.home-app-shell.scrolled.is-feed-header-hidden {
    transform: translate3d(0, calc(-100% - 2px), 0) !important;
    pointer-events: none;
  }

  body.has-mobile-nav .home-app-shell > .container {
    box-sizing: border-box;
    width: 100%;
    background: transparent;
  }

  body.mobile-feed-app-shell .home-app-shell .brand-text,
  body.mobile-feed-app-shell .home-app-shell.scrolled .brand-text {
    color: transparent !important;
    background: linear-gradient(90deg, #4338ca 0%, #7c3aed 52%, #db3fa4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  body.mobile-feed-app-shell .home-app-shell .header-hamburger-btn,
  body.mobile-feed-app-shell .home-app-shell.scrolled .header-hamburger-btn { color: #312e45; }

  body.mobile-feed-app-shell .home-app-shell #btn-dice-randomizer,
  body.mobile-feed-app-shell .home-app-shell #btn-global-search,
  body.mobile-feed-app-shell .home-app-shell .header-account-btn,
  body.mobile-feed-app-shell .home-app-shell.scrolled #btn-dice-randomizer,
  body.mobile-feed-app-shell .home-app-shell.scrolled #btn-global-search,
  body.mobile-feed-app-shell .home-app-shell.scrolled .header-account-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(226, 224, 234, .72) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 6px 18px rgba(30, 35, 55, .11) !important;
    color: #182033 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.mobile-feed-app-shell .home-app-shell #btn-dice-randomizer svg,
  body.mobile-feed-app-shell .home-app-shell #btn-global-search svg,
  body.mobile-feed-app-shell .home-app-shell .header-account-btn .lucide,
  body.mobile-feed-app-shell .home-app-shell.scrolled #btn-dice-randomizer svg,
  body.mobile-feed-app-shell .home-app-shell.scrolled #btn-global-search svg,
  body.mobile-feed-app-shell .home-app-shell.scrolled .header-account-btn .lucide {
    width: 20px !important;
    height: 20px !important;
    color: #182033 !important;
    stroke: #182033 !important;
  }

  /* Pastila globală rămâne vizibilă și în browser, identic cu modul instalat. */
  body.mobile-feed-app-shell .mobile-nav-bar { display: flex; }

  .home-editorial-slot--top { padding: 0 var(--mobile-page-gutter, 12px); }
  .home-editorial-slot--top .home-section { margin-bottom: 18px !important; }

}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  body.mobile-feed-app-shell .navbar-glass.home-app-shell {
    transition: none !important;
  }
}

/* Contrast final pentru shellul alb. Selectorul include starea legacy
   `has-mobile-nav`, ca regulile vechi pentru acțiuni peste hero să nu câștige. */
@media (max-width: 991.98px) {
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell .header-hamburger-btn svg,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled .header-hamburger-btn svg {
    color: #312e45 !important;
    stroke: #312e45 !important;
  }

  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-global-search,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell .header-account-btn,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-global-search,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled .header-account-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-color: rgba(226, 224, 234, .72) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 6px 18px rgba(30, 35, 55, .11) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer svg,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-global-search svg,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell .header-account-btn .lucide {
    width: 20px !important;
    height: 20px !important;
    color: #182033 !important;
    stroke: #182033 !important;
  }

  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer span,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer span {
    display: none !important;
  }
}

/* De la 576px bara are loc pentru denumirea acțiunii. Butonul trebuie să-și
   recapete lățimea automată împreună cu textul; simpla afișare a etichetei
   într-un cerc de 44px ar tăia textul. */
@media (min-width: 576px) and (max-width: 991.98px) {
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer {
    width: auto !important;
    min-width: 44px !important;
    flex: 0 0 auto !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
  }

  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer span,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer span {
    display: inline !important;
    color: #182033 !important;
  }
}

/* Acțiunile mobile sunt separate suficient pentru apăsare rapidă. La lățimea
   uzuală de 390px există loc și pentru denumirea „Inspiră-mă”; sub acest prag
   păstrăm varianta compactă, cu trei ținte tactile complete de 44px. */
@media (max-width: 991.98px) {
  body.has-mobile-nav .navbar-glass.public-header--homepage .header-actions {
    gap: 8px !important;
  }
}

@media (min-width: 390px) and (max-width: 991.98px) {
  body.has-mobile-nav .navbar-glass.public-header--homepage .header-actions {
    gap: 10px !important;
  }

  body.has-mobile-nav .navbar-glass.public-header--homepage #btn-dice-randomizer,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer {
    width: auto !important;
    min-width: 44px !important;
    flex: 0 0 auto !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
  }

  body.has-mobile-nav .navbar-glass.public-header--homepage #btn-dice-randomizer .header-action-label,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell #btn-dice-randomizer .header-action-label,
  body.mobile-feed-app-shell.has-mobile-nav .navbar-glass.home-app-shell.scrolled #btn-dice-randomizer .header-action-label {
    display: inline-block !important;
    width: 58px !important;
    min-width: 58px !important;
    margin-left: 5px !important;
    color: #182033 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-kerning: none !important;
    font-variant-ligatures: none !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }
}

/* One ordinary personalized card in mobile position four. */
.personal-feed-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 7px;
  color: var(--primary-color, #6d4eea);
  font-size: .78rem;
  font-weight: 700;
}
.personal-feed-label .lucide { width: 15px; height: 15px; }
[data-bs-theme="dark"] .personal-feed-label { color: #c4b5fd; }
@media (max-width: 991.98px) {
  #home-feed [data-personal-feed-duplicate] { display: none !important; }
}