/* ================================================================
   MANCARE-LANDING.CSS — pagina /mancare: hero, informatii, dialog, baze comune
   Prefix `mc-`. Doar tokenii din design-system.css (Inter, un singur accent: primary).
   Partea de meniu (chips, carduri, popup produs) e in mancare-menu.css.
   ================================================================ */

.mc-page {
  --mc-gut: clamp(16px, 4vw, 48px);
  --mc-max: calc(1320px + 2 * var(--mc-gut)); /* aliniat cu bara de navigare */
  --mc-head: 72px;
  padding-top: var(--mc-head);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
}
.mc-page h1, .mc-page h2, .mc-page h3, .mc-page p, .mc-page ul { margin: 0; padding: 0; }
.mc-page ul { list-style: none; }
.mc-page h2, .mc-page h3 { padding: 0; }

.mc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Butoane: baza vine din .btn (design-system); aici doar tinta tactila ── */
.mc-btn { min-height: 48px; padding-inline: 24px; font-size: 1rem; text-decoration: none; }
.mc-btn--ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border-strong); }
.mc-btn:disabled { background: var(--c-border); color: var(--c-text-secondary); cursor: not-allowed; box-shadow: none; }
@media (hover: hover) { .mc-btn--ghost:hover { background: var(--c-surface-hover); } }
.mc-btn:active:not(:disabled) { transform: scale(0.98); }

.mc-btn:focus-visible, .mc-icon-btn:focus-visible, .mc-link-btn:focus-visible,
.mc-page a:focus-visible, .mc-chip:focus-visible, .mc-pill:focus-visible,
.mc-add:focus-visible, .mc-step:focus-visible, .mc-opt input:focus-visible,
.mc-search input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.mc-icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); cursor: pointer; transition: background-color var(--duration-fast) var(--ease);
}
.mc-icon-btn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) { .mc-icon-btn:hover:not(:disabled) { background: var(--c-surface-hover); } }

.mc-link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0;
  background: none; font: inherit; font-size: 1rem; font-weight: 500; color: var(--c-primary);
  cursor: pointer;
}
@media (hover: hover) { .mc-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; } }
[data-theme="dark"] .mc-link-btn { color: var(--c-primary-light); }

/* ── Hero: text + slot de poza (placeholder pana vin pozele reale) ─── */
.mc-hero-in {
  max-width: var(--mc-max); margin-inline: auto; padding: clamp(24px, 3vw, 40px) var(--mc-gut) clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) min(46%, 560px); gap: clamp(28px, 4vw, 56px); align-items: center;
  min-height: min(620px, calc(100svh - var(--mc-head) - 120px));
}
.mc-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; color: var(--c-primary); }
[data-theme="dark"] .mc-eyebrow { color: var(--c-primary-light); }
.mc-hero h1 { font-size: clamp(3.052rem, 6.4vw, 5.96rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.mc-h1-line { display: block; white-space: nowrap; }
.mc-h1-accent { color: var(--c-primary); }
[data-theme="dark"] .mc-h1-accent { color: var(--c-primary-light); }
.mc-lead { margin-top: var(--sp-6) !important; max-width: 44ch; font-size: 1rem; line-height: 1.65; color: var(--c-text-secondary); }
.mc-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.mc-rating {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: var(--sp-4);
  padding: 8px 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-border); font-size: 0.8rem;
  background: var(--c-surface); color: var(--c-text-secondary); font-size: 0.8rem; text-decoration: none;
}
.mc-stars { display: inline-flex; gap: 2px; color: var(--c-sand); }
.mc-rating strong { color: var(--c-text); font-weight: 500; }
@media (hover: hover) { .mc-rating:hover { color: var(--c-text); } }

.mc-hero-art { position: relative; justify-self: end; width: min(100%, 560px); }
.mc-hero-art::before {
  content: ''; position: absolute; inset: -6%; border-radius: 50%; background: var(--c-primary-pale); z-index: 0;
}
.mc-hero-disc {
  position: relative; z-index: 1; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: var(--s-lg), 0 0 0 8px var(--c-surface);
}
.mc-hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--c-primary-pale); }
.mc-page .mc-chip {
  position: absolute; z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 16px;
  border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--s-md), inset 0 0 0 1px var(--c-border);
  font-size: 0.8rem; line-height: 1.3; color: var(--c-text-secondary);
}
.mc-chip svg { flex: none; color: var(--c-primary); }
[data-theme="dark"] .mc-chip svg { color: var(--c-primary-light); }
.mc-chip strong { display: block; font-size: 1rem; font-weight: 500; color: var(--c-text); }
.mc-chip--ship { top: 8%; left: -6%; }
.mc-chip--eta { top: 46%; right: -4%; }
.mc-hero-photo--ph {
  display: grid; place-items: center; color: var(--c-primary);
  background:
    radial-gradient(60% 60% at 70% 30%, var(--c-sand-pale), transparent 70%),
    radial-gradient(70% 70% at 25% 80%, var(--c-primary-pale), transparent 70%),
    var(--c-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.mc-hero-photo--ph svg { opacity: 0.35; }
[data-theme="dark"] .mc-hero-photo--ph { color: var(--c-primary-light); }
.mc-page .mc-badge-live {
  position: absolute; z-index: 2; left: 50%; bottom: -16px; transform: translateX(-50%); margin: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 0.8rem; line-height: 1.3; color: var(--c-text);
  background: var(--c-surface); box-shadow: var(--s-md), inset 0 0 0 1px var(--c-border);
}
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-tertiary); flex: none; }
.mc-dot--open { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent); }
.mc-dot--closed { background: var(--c-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-error) 18%, transparent); }
@media (max-width: 860px) {
  .mc-hero h1 { font-size: clamp(3.052rem, 15vw, 3.815rem); }
  .mc-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-5); min-height: 0; }
  .mc-hero-art { justify-self: center; width: min(92%, 440px); margin: var(--sp-6) 0 var(--sp-6); }
  .mc-chip--ship { top: 2%; left: -6%; }
  .mc-chip--eta { top: auto; bottom: 14%; right: -6%; }
}
@media (max-width: 420px) { .mc-cta .mc-btn { flex: 1 1 100%; } }

/* ── Informatii: un singur rand cu separatoare fine ───────── */
.mc-facts { margin: var(--sp-6) 0 0; padding: 0; }
.mc-facts-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--r-lg); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border);
}
.mc-fact { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5); color: var(--c-primary); }
.mc-fact + .mc-fact { border-left: 1px solid var(--c-border); }
.mc-fact svg { flex: none; margin-top: 2px; }
[data-theme="dark"] .mc-fact { color: var(--c-primary-light); }
.mc-fact h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--c-text); }
.mc-fact p { margin-top: 2px; font-size: 0.8rem; line-height: 1.5; color: var(--c-text-secondary); }
@media (max-width: 1000px) {
  .mc-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-fact:nth-child(3) { border-left: 0; }
  .mc-fact:nth-child(n+3) { border-top: 1px solid var(--c-border); }
}
@media (max-width: 520px) {
  .mc-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-fact + .mc-fact { border-left: 0; border-top: 1px solid var(--c-border); }
  .mc-fact { padding: var(--sp-4); }
}

/* ── Imagine produs: farfurie placeholder, inlocuibila 1:1 cu poza ─ */
.mc-plate { position: relative; display: block; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: var(--c-primary-pale); }
.mc-plate[data-tone="1"] { background: var(--c-sand-pale); }
.mc-plate--round { border-radius: 50%; box-shadow: var(--s-sm); }
.mc-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-plate-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-primary); opacity: 0.75; }
[data-theme="dark"] .mc-plate-art { color: var(--c-primary-light); }

/* ── Dialog comun (Informatii utile + popup produs) ───────── */
.mc-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: var(--c-overlay);
}
.mc-dialog {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(88svh, 760px);
  background: var(--c-bg-elevated); color: var(--c-text);
  border-radius: var(--r-lg); box-shadow: var(--s-lg); outline: none;
  animation: mc-pop var(--duration) var(--ease-out);
}
@keyframes mc-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mc-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mc-dialog, .mc-toast { animation: none !important; } }

.mc-info { max-width: 520px; }
.mc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2) var(--sp-6); }
.mc-dialog-head h2 { font-size: 1.25rem; letter-spacing: -0.005em; }
.mc-dialog-body { padding: 0 var(--sp-6) var(--sp-6); overflow-y: auto; overscroll-behavior: contain; }
.mc-info-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); color: var(--c-primary); }
[data-theme="dark"] .mc-info-row { color: var(--c-primary-light); }
.mc-info-ico { padding-top: 2px; }
.mc-info-row h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--c-text); }
.mc-info-row p { margin-top: 2px; font-size: 1rem; line-height: 1.6; color: var(--c-text-secondary); }
.mc-info-row a { color: var(--c-primary); text-underline-offset: 3px; }
[data-theme="dark"] .mc-info-row a { color: var(--c-primary-light); }
.mc-page .mc-doc-title { margin: var(--sp-5) 0 var(--sp-1); font-size: 0.8rem; font-weight: 500; color: var(--c-text-secondary); }
.mc-doc-list { border-top: 1px solid var(--c-border); }
.mc-doc-list li + li { border-top: 1px solid var(--c-border); }
.mc-doc-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; font-size: 1rem; color: var(--c-text); text-decoration: none; }
.mc-doc-list a svg { flex: none; color: var(--c-text-secondary); }
@media (hover: hover) { .mc-doc-list a:hover { color: var(--c-primary); } }

@media (max-width: 640px) {
  .mc-overlay { align-items: flex-end; padding: 0; }
  .mc-info { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92svh; animation-name: mc-rise; }
  .mc-dialog-body { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
}

/* ── Miscare: intrare discreta, doar transform + opacity ──── */
@keyframes mc-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mc-fade-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .mc-hero-copy > * { animation: mc-fade-up 0.6s var(--ease-out) both; }
  .mc-hero-copy > :nth-child(2) { animation-delay: 0.07s; }
  .mc-hero-copy > :nth-child(3) { animation-delay: 0.14s; }
  .mc-hero-copy > :nth-child(4) { animation-delay: 0.21s; }
  .mc-hero-art { animation: mc-fade-in 0.8s var(--ease-out) 0.1s both; }
  .mc-fact { animation: mc-fade-up 0.55s var(--ease-out) both; }
  .mc-fact:nth-child(2) { animation-delay: 0.06s; }
  .mc-fact:nth-child(3) { animation-delay: 0.12s; }
  .mc-fact:nth-child(4) { animation-delay: 0.18s; }
  @supports (animation-timeline: view()) {
    .mc-sec, .mc-rev-in { animation: mc-fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .mc-hero-copy > *, .mc-hero-art, .mc-fact { animation-timeline: auto; }
  }
}

.mc-badge-ico { flex: none; }
.mc-badge-ico--open { color: var(--c-success); }
.mc-badge-ico--closed { color: var(--c-error); }
.mc-badge-ico--unknown { color: var(--c-text-secondary); }

/* ── Conventii: grila de 8px (4->8, 12->16, 20->24) si scala x1.25 (16 / 20 / 25 / 31 / 39 / 49 / 61) ── */
.mc-page, .mc-overlay { --sp-1: 8px; --sp-3: 16px; --sp-5: 24px; }