/* Acasă (revamp 2026-10-29, schița aprobată „Main” / „Mobil”). Mobile-first: totul stivuit, apoi coloane de la
   601px / 961px. Culorile vin doar din variabilele RelevantMark (shared/style.css) — aceleași pentru toți utilizatorii. */

.home { display: flex; flex-direction: column; gap: 22px; max-width: 1240px; }

/* --- Antet: data, salutul, cât timp îți cere azi --- */
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.home-hello { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-date { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.home-title {
  margin: 0; font-family: 'Newsreader', serif; font-weight: 600; line-height: 1.08; color: var(--accent-strong);
  font-size: clamp(30px, 4vw, 46px); overflow-wrap: anywhere;
}
.home-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 620px; }
.home-lead strong { color: var(--ink); }
.home-cta {
  display: none; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px;
  background: var(--accent-strong); color: #FFFFFF; font-weight: 700; font-size: 16px; text-decoration: none;
}
.home-cta:hover { color: #FFFFFF; background: var(--sidebar-bg); }
.home-cta svg { width: 18px; height: 18px; color: var(--cyan); }

/* Ce urmează în ciclul de generare + semnalul agentului QA (preluate de pe fostul ecran Welcome). */
.home-alert {
  display: block; padding: 12px 16px; border-radius: var(--radius-inner); font-size: 13.5px; line-height: 1.5;
  background: var(--accent-soft); color: var(--ink); text-decoration: none; border: 1px solid var(--border);
}
.home-alert + .home-alert { margin-top: 10px; }
.home-alert:hover { border-color: var(--accent); color: var(--ink); }
.home-alert.warn { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.home-alert.warn:hover { border-color: var(--danger); color: var(--danger); }

/* --- Cardurile --- */
.hcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 20px;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.hcard .sec-head { margin: 0; }
.hcard-dark { background: var(--accent-strong); border-color: var(--accent-strong); color: #F4EEE1; }
.hcard-dark .loading { color: #C9D6D7; margin: 0; }
.hkicker {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hcard-dark .hkicker { color: var(--cyan); }
.hkicker svg { width: 16px; height: 16px; flex-shrink: 0; }
.hnum-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.hnum {
  font-family: 'Newsreader', serif; font-weight: 600; line-height: 1; color: var(--accent-strong);
  font-size: clamp(40px, 9vw, 64px); font-variant-numeric: lining-nums;
}
.hcard-dark .hnum { color: #FFFFFF; }
.hnum.is-empty { color: var(--border-strong); }
.hnum-unit { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hcard-dark .hnum-unit { color: #C9D6D7; }
.htext { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.hcard-dark .htext { color: #C9D6D7; }
.htext strong { color: var(--ink); }
.hcard-dark .htext strong { color: #FFFFFF; }
.hlink { font-weight: 700; font-size: 14px; color: var(--accent); }
.hcard-dark .hlink { color: var(--cyan); }

.pill-change { font-size: 14px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill-change.up { color: var(--accent); background: var(--accent-soft); }
.pill-change.down { color: var(--amber); background: var(--amber-soft); }
.pill-change.flat { color: var(--ink-soft); background: var(--surface-alt); }

/* Bara pe canale din „Te așteaptă” (lățimea = câte postări are fiecare canal). */
.seg-bar { display: flex; gap: 6px; margin-top: 2px; }
.seg-bar span { height: 8px; border-radius: 999px; min-width: 8px; }
/* Pe fundalul bleumarin, X (aproape negru) și LinkedIn s-ar pierde — un contur fin le ține vizibile. */
.hcard-dark .seg-bar span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.home-cta-inline {
  display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px;
  background: var(--cyan); color: var(--sidebar-bg); font-weight: 800; font-size: 16px; text-decoration: none;
}
.home-cta-inline:hover { color: var(--sidebar-bg); background: #34D3DC; }

/* Mini-bara pe zile din „Oameni ajunși”. */
.mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; }
.mini-bars span { flex: 1; min-height: 4px; border-radius: 6px; background: var(--border); }
.mini-bars span.today { background: var(--accent); }
.mini-days { display: flex; gap: 8px; margin-top: -6px; }
.mini-days span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }

/* Pe telefon: „Te așteaptă” pe toată lățimea, ajunși / interesați câte două, fără detaliile lungi (schița „Mobil”). */
.home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-stats > #card-pending { grid-column: 1 / -1; }
.home-stats > .hcard:not(#card-pending) { padding: 16px; gap: 6px; border-radius: 18px; }
.home-stats > .hcard:not(#card-pending) .hnum { font-size: 34px; }
.home-stats > .hcard:not(#card-pending) .hkicker { letter-spacing: 0; text-transform: none; font-size: 12px; }
.home-stats .hide-sm { display: none; }

/* --- Următoarele 7 zile --- */
.hsec-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.week-grid { display: flex; flex-direction: column; gap: 10px; }
.wday { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wday-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.wday.is-today .wday-label { color: var(--accent); }
.wday.is-empty { flex-direction: row; align-items: center; justify-content: space-between; }
.wday-free {
  border-radius: var(--radius-inner); border: 1.5px dashed var(--border-strong); color: var(--ink-soft);
  font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 12px;
}
/* Miniatura unei postări: pe telefon un rând (pătrat colorat + titlu), pe ecran mare o „carte” verticală. */
.wpost {
  display: flex; align-items: center; gap: 12px; border-radius: var(--radius-inner); text-decoration: none; color: var(--ink);
  min-width: 0;
}
.wthumb {
  flex: none; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: flex-end; padding: 6px;
  box-sizing: border-box; color: #FFFFFF;
}
.wchip {
  font-size: 10.5px; font-weight: 800; color: #FFFFFF; background: rgba(11, 37, 48, .55); padding: 3px 8px;
  border-radius: 999px; white-space: nowrap; display: none;
}
.wbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wtitle { font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.wmeta { font-size: 12.5px; font-weight: 700; }

/* Fundalul = culoarea de brand a canalului (shared/style.css). */
.bg-linkedin { background: var(--ch-linkedin); }
.bg-facebook { background: var(--ch-facebook); }
.bg-instagram { background: var(--ch-instagram); }
.bg-x { background: var(--ch-x); }
.bg-email { background: var(--ch-email); }
.bg-blog { background: var(--ch-blog); }
.fg-linkedin { color: var(--ch-linkedin); }
.fg-facebook { color: var(--ch-facebook); }
.fg-instagram { color: var(--ch-instagram-solid); }
.fg-x { color: var(--ch-x); }
.fg-email, .fg-blog { color: var(--accent-strong); }

/* --- Ce a învățat platforma / Postarea săptămânii --- */
.home-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.learn { display: flex; gap: 14px; align-items: flex-start; }
.learn + .learn { margin-top: 6px; }
.learn-badge {
  flex: none; min-width: 44px; height: 40px; padding: 0 6px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 13.5px; box-sizing: border-box;
}
.learn-badge.up { background: var(--accent-soft); color: var(--accent); }
.learn-badge.down { background: var(--amber-soft); color: var(--amber); }
.learn-badge.neutral { background: var(--review-soft); color: var(--review); }
.learn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.learn-body strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.learn-body span { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

.plan-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); background: var(--accent-soft); border-radius: var(--radius-inner); padding: 12px 14px; }
.plan-note a { font-weight: 700; }

.best { display: flex; flex-wrap: wrap; gap: 18px; }
.best-thumb {
  flex: none; width: 150px; height: 188px; border-radius: 16px; color: #FFFFFF; padding: 16px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; overflow: hidden;
}
.best-chip {
  align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sidebar-bg); background: var(--cyan); padding: 3px 8px; border-radius: 999px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.best-title { font-family: 'Newsreader', serif; font-size: 18px; line-height: 1.18; overflow-wrap: anywhere; }
.best-info { flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.best-meta { font-size: 13px; font-weight: 700; }
.best-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.best-nums div { display: flex; flex-direction: column; }
.best-nums b { font-family: 'Newsreader', serif; font-size: 30px; font-weight: 600; color: var(--accent-strong); line-height: 1.1; }
.best-nums span { font-size: 13px; color: var(--ink-soft); }
.best-info .hlink { margin-top: auto; }

/* --- Canalele tale --- */
.home-channels { display: flex; flex-direction: column; gap: 12px; }
.home-channels .sec-head { margin: 0; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ch-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: flex;
  align-items: center; gap: 12px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-card); min-width: 0;
}
.ch-tile:hover { border-color: var(--accent); color: var(--ink); }
.ch-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; color: #FFFFFF; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 14px;
}
.ch-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-txt strong { font-size: 15px; }
.ch-state { font-size: 13px; font-weight: 600; }
.ch-state.connected { color: var(--accent); }
.ch-state.paused { color: var(--amber); }
.ch-state.disconnected { color: var(--danger); }

.home-error { margin: 0; color: var(--danger); font-size: 14px; }

/* --- Tabletă și mai mare --- */
@media (min-width: 601px) {
  .home { gap: 28px; }
  .home-cta { display: inline-flex; }
  .home-cta-inline { display: none; }
  .home-lead { font-size: 17px; }
  .hcard { padding: 26px; gap: 14px; }
  .home-stats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
  .home-stats > #card-pending { grid-column: auto; }
  .home-stats > .hcard:not(#card-pending) { padding: 26px; gap: 14px; border-radius: 22px; }
  .home-stats > .hcard:not(#card-pending) .hnum { font-size: clamp(40px, 5vw, 64px); }
  .home-stats > .hcard:not(#card-pending) .hkicker { letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
  .home-stats .hide-sm { display: revert; }
  .home-stats .mini-bars.hide-sm, .home-stats .mini-days.hide-sm { display: flex; }
  .ch-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .hcard .sec-head { font-size: 24px; }
}

@media (min-width: 961px) {
  .home-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* Săptămâna ca în schiță: 7 coloane, câte o „carte” pe postare. Derularea orizontală rămâne în card, nu pe pagină. */
  .week-grid { display: grid; grid-template-columns: repeat(7, minmax(116px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
  .wday.is-empty { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .wday-free { height: 112px; }
  .wpost { flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--border); background: #FBF8F2; overflow: hidden; }
  .wthumb { width: auto; height: 76px; border-radius: 0; padding: 8px; }
  .wchip { display: inline-block; }
  .wbody { padding: 8px 10px; }
  .wtitle { font-size: 12.5px; font-weight: 600; }
  .wmeta { display: none; }
  .hcard .sec-head { font-size: 28px; }
}