/* Randul "Recomandate" (19.10.2026). Designul din Google Stitch, proiectul hdsatelit 1847295513344505604:
   ecranele "Acasa, cu sina Recomandate" (fff75ca1...), "Acasa (Dark Theme), cu sina Recomandate"
   (c6e1c10f...) si "Acasa pe telefon, cu sina Recomandate" (6e96004c...), in design-sit-stitch/.
   Fontul ramane al sitului (Open Sans). Marimile sunt fixe (card, poza 16:9, titlul pe doua randuri),
   ca randul sa nu miste pagina cand se incarca pozele sau scriptul.
   Tema intunecata: regulile cu html.hds-intunecat de la sfarsit (paleta Stitch a temei intunecate). */

.hds-rec { position: relative; margin: 4px 0 16px; padding: 0; clear: both; }
.hds-rec-jos { margin: 26px 0 18px; }

.hds-rec-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 38px; box-sizing: border-box; margin: 0 0 12px; padding: 0 0 8px;
  border-bottom: 1px solid rgba(198, 198, 205, .6);
}
.hds-rec-titlu {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 0 10px;
  border-left: 4px solid #0b1c30;
  font: 700 17px/1.2 'Open Sans', sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #0b1c30;
}
.hds-rec-stea { width: 18px; height: 18px; flex: none; color: #2f6388; }
.hds-rec-sageti { display: flex; gap: 6px; }
.hds-rec:not(.hds-rec-viu) .hds-rec-sageti, .hds-rec-fara-sageti .hds-rec-sageti { visibility: hidden; }
.hds-rec-sageata {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid #c6c6cd; background: #ffffff; color: #45464d; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hds-rec-sageata:hover { border-color: #76777d; background: #e5eeff; color: #0b1c30; }
.hds-rec-sageata:focus-visible { outline: 2px solid #2f6388; outline-offset: 2px; }
.hds-rec-sageata svg { display: block; width: 16px; height: 16px; }

.hds-rec-corp { position: relative; }
.hds-rec-corp::before, .hds-rec-corp::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 22px; pointer-events: none;
}
.hds-rec-corp::before { left: 0; background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); }
.hds-rec-corp::after { right: 0; background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)); }

.hds-rec-fereastra {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hds-rec-fereastra::-webkit-scrollbar { display: none; }
.hds-rec ul.hds-rec-banda {
  display: flex; gap: 16px; width: max-content; margin: 0; padding: 0 0 4px; list-style: none;
}
.hds-rec ul.hds-rec-banda > li.hds-rec-card {
  position: relative; flex: 0 0 260px; width: 260px; box-sizing: border-box; margin: 0; padding: 10px;
  list-style: none; background: #ffffff; border: 1px solid rgba(198, 198, 205, .6); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06); transition: border-color .2s ease;
}
.hds-rec ul.hds-rec-banda > li.hds-rec-card::before, .hds-rec ul.hds-rec-banda > li.hds-rec-card::marker { content: none; }
.hds-rec ul.hds-rec-banda > li.hds-rec-card:hover { border-color: #76777d; }
.hds-rec a.hds-rec-leg { display: block; color: inherit; text-decoration: none; border: 0; }
.hds-rec a.hds-rec-leg:focus-visible { outline: 2px solid #2f6388; outline-offset: 3px; border-radius: 8px; }
.hds-rec-media {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; background: #e5eeff;
}
.hds-rec .hds-rec-media img {
  display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; object-fit: cover; transition: transform .3s ease;
}
.hds-rec-card:hover .hds-rec-media img { transform: scale(1.05); }
.hds-rec-titlu-card {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  height: 2.7em; margin: 10px 0 0; font: 700 13.5px/1.35 'Open Sans', sans-serif; color: #0b1c30;
}
.hds-rec a.hds-rec-leg:hover .hds-rec-titlu-card { color: #2f6388; }

.hds-rec-etichete {
  position: absolute; top: 18px; left: 18px; z-index: 1; display: flex; align-items: center; gap: 4px;
  max-width: calc(100% - 36px); pointer-events: none;
}
.hds-rec-eticheta, .hds-rec a.hds-rec-en {
  display: inline-block; padding: 4px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font: 700 10px/1.2 'Open Sans', sans-serif; letter-spacing: .04em;
  text-transform: uppercase; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.hds-rec-eticheta { background: #2f6388; color: #ffffff; }
.hds-rec a.hds-rec-en { flex: none; padding: 4px 6px; background: #dce9ff; color: #275c81; text-decoration: none; pointer-events: auto; }
.hds-rec a.hds-rec-en:hover { background: #2f6388; color: #ffffff; }

@media (max-width: 899px) {
  .hds-rec { margin: 2px 0 14px; }
  .hds-rec-jos { margin: 22px 0 16px; }
  .hds-rec-titlu { font-size: 16px; }
  .hds-rec-sageata { width: 34px; height: 34px; }
  .hds-rec-cap { height: 42px; margin-bottom: 10px; }
  .hds-rec ul.hds-rec-banda { gap: 12px; }
  .hds-rec ul.hds-rec-banda > li.hds-rec-card { flex-basis: 220px; width: 220px; padding: 8px; }
  .hds-rec-titlu-card { margin-top: 8px; font-size: 12.5px; }
  .hds-rec-etichete { top: 14px; left: 14px; max-width: calc(100% - 28px); }
  .hds-rec-corp::before, .hds-rec-corp::after { width: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hds-rec .hds-rec-media img, .hds-rec ul.hds-rec-banda > li.hds-rec-card { transition: none; }
  .hds-rec-card:hover .hds-rec-media img { transform: none; }
}

/* ---- tema intunecata (paleta Stitch: fond #0f131a, carduri #171c26, margini #2a3140) ---- */
html.hds-intunecat .hds-rec-cap { border-bottom-color: #232a38; }
html.hds-intunecat .hds-rec-titlu { color: #e8ecf3; border-left-color: #5b74d6; }
html.hds-intunecat .hds-rec-stea { color: #8fa8ff; }
html.hds-intunecat .hds-rec-sageata { background: #1e2533; border-color: #343f54; color: #c3cad6; }
html.hds-intunecat .hds-rec-sageata:hover { background: #262f40; border-color: #4a5873; color: #ffffff; }
html.hds-intunecat .hds-rec-sageata:focus-visible, html.hds-intunecat .hds-rec a.hds-rec-leg:focus-visible { outline-color: #8fa8ff; }
html.hds-intunecat .hds-rec-corp::before { background: linear-gradient(to right, #0f131a, rgba(15, 19, 26, 0)); }
html.hds-intunecat .hds-rec-corp::after { background: linear-gradient(to left, #0f131a, rgba(15, 19, 26, 0)); }
html.hds-intunecat .hds-rec ul.hds-rec-banda > li.hds-rec-card { background: #171c26; border-color: #2a3140; box-shadow: none; }
html.hds-intunecat .hds-rec ul.hds-rec-banda > li.hds-rec-card:hover { border-color: #3d4b63; }
html.hds-intunecat .hds-rec-media { background: #12161f; }
html.hds-intunecat .hds-rec-titlu-card { color: #e8ecf3; }
html.hds-intunecat .hds-rec a.hds-rec-leg:hover .hds-rec-titlu-card { color: #8fa8ff; }
html.hds-intunecat .hds-rec-eticheta { background: #2f56c8; color: #ffffff; }
html.hds-intunecat .hds-rec a.hds-rec-en { background: #1e2a44; color: #bcd0ff; }
html.hds-intunecat .hds-rec a.hds-rec-en:hover { background: #5b74d6; color: #ffffff; }