/**
 * mycloudshop.ro — foaia de stil a studiilor de caz (`/studii-de-caz`).
 *
 * DE CE UN FISIER SEPARAT, si nu inca doua sute de linii in `mycloudshop.css`:
 *   foaia principala e incarcata de FIECARE pagina a platformei, inclusiv de wizardul de
 *   creare, unde fiecare kilooctet e timp pana la primul ecran. Studiile de caz sunt doua
 *   pagini din tot situl — stilurile lor pleaca doar cu ele, prin `$pageCss`.
 *
 * ⚠️ TOATE clasele de aici incep cu `mcc-`. Nimic din fisierul asta nu are voie sa atinga
 *    un element generic (`h2`, `a`, `.w-*`): pagina imprumuta scheletul comun al sitului,
 *    iar o regula nescopata de aici s-ar vedea in antet si in subsol, pe tot situl.
 *
 * ⚠️ CULORILE NU SE SCRIU DE MANA. Vin din tokenii din `mycloudshop.css` (`--ink-*`,
 *    `--iris`, `--mint`, `--t1..--t4`). Un `#ffffff` scris aici ar iesi din tema la prima
 *    schimbare de paleta si ar trebui vanat prin doua fisiere.
 *
 * ⚠️ ZERO derulare pe orizontala. Latimile sunt in procente si `minmax()`, nu in `vw`:
 *    `vw` include bara de derulare si scoate cateva pixeli in plus pe Windows.
 *
 * Ultima modificare: 2026-09-04 20:55
 * Modificari:
 *   2026-09-04 20:55 — Capturile magazinelor: banda din capul cartonasului (cu apropiere
 *                      usoara la trecerea cu mausul) si poza mare din capul studiului.
 *   2026-09-04 19:20 — Creare (lista de studii, pagina unui studiu, banda de fapte,
 *                      lista de functii, intrebari, banda de conversie).
 */

/* ============================================================
   1. ACCENTELE
   Fiecare studiu are o culoare, aleasa in fisierul lui (`accent`). Se traduce intr-o
   singura variabila, `--acc`, folosita apoi peste tot in cartonas si in pagina.
   ============================================================ */
.mcc-a-iris  { --acc:#6D5AF6; --acc-soft:#A99CFF; --acc-dim:rgba(109,90,246,.15); }
.mcc-a-mint  { --acc:#3BEAB2; --acc-soft:#8BF3D3; --acc-dim:rgba(59,234,178,.13); }
.mcc-a-amber { --acc:#FBBF24; --acc-soft:#FCD667; --acc-dim:rgba(251,191,36,.13); }
.mcc-a-cyan  { --acc:#3BC9D8; --acc-soft:#84E1EB; --acc-dim:rgba(59,201,216,.13); }
.mcc-a-rose  { --acc:#FB7185; --acc-soft:#FDA4AF; --acc-dim:rgba(251,113,133,.13); }

/* ============================================================
   2. ERoUL LISTEI
   ============================================================ */
.mcc-hero{padding:26px 0 34px}
.mcc-hero-in{max-width:760px}

.mcc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-850);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);margin-bottom:var(--sp-4);
}
.mcc-eyebrow i{font-size:14px;color:var(--iris-soft)}

.mcc-hero h1{margin:0 0 var(--sp-4)}
.mcc-lead{font-size:var(--fs-lead);line-height:1.55;color:var(--t2);margin:0}
.mcc-lead b{color:var(--t1);font-weight:650}

/* Cifrele de sub erou. Sunt fapte numarate in bazele magazinelor, nu promisiuni. */
.mcc-tally{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.mcc-tally-item{
  flex:1 1 150px;min-width:0;
  padding:var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-800);box-shadow:var(--glint);
}
.mcc-tally-n{display:block;font-size:26px;font-weight:800;color:var(--t1);line-height:1.1;letter-spacing:-.02em}
.mcc-tally-k{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--t3)}

/* ============================================================
   3. GRILA DE CARTONASE
   ============================================================ */
.mcc-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  padding-bottom:var(--sp-7);
}

.mcc-card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--sp-5);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--ink-800);box-shadow:var(--glint);
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.mcc-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}

/* Firul de culoare de sus — singurul loc unde accentul e mare pe cartonas. */
.mcc-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--acc),transparent 78%);
  opacity:.85;
}

/* Captura magazinului, in capul cartonasului.
   ⚠️ IESE din padding-ul cartonasului cu margini negative. O poza lasata in padding arata a
      poza lipita pe un card; una care atinge marginile arata a fereastra deschisa in card.
   ⚠️ `aspect-ratio` + `object-fit` tin toate cartonasele la aceeasi inaltime chiar daca o
      captura e refacuta candva cu alt decupaj — altfel grila iese cu randuri strambe.
   ⚠️ Raza e 19px, nu `--r-lg` (20px): coltul interior al unui chenar de 1px e cu 1px mai mic.
      Cu 20px ramane un fir de fundal vizibil in coltul de sus. */
.mcc-shot{
  position:relative;overflow:hidden;
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius:19px 19px 0 0;
  border-bottom:1px solid var(--line);
  background:var(--ink-900);
}
.mcc-shot img{
  display:block;width:100%;height:auto;
  aspect-ratio:1200 / 770;object-fit:cover;object-position:top center;
  transition:transform .4s var(--ease);
}
.mcc-card:hover .mcc-shot img{transform:scale(1.03)}

/* Firul de culoare al cartonasului trebuie sa treaca PESTE poza, nu pe sub ea. */
.mcc-has-shot::before{z-index:2}

.mcc-card-top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.mcc-ico{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);background:var(--acc-dim);
}
.mcc-ico i{font-size:20px;color:var(--acc-soft)}

.mcc-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-850);
  font-size:var(--fs-micro);font-weight:600;color:var(--t2);
}
.mcc-chip i{font-size:13px;color:var(--acc-soft)}

.mcc-card h2,
.mcc-card h3{font-size:var(--fs-h3);line-height:1.2;margin:0 0 6px}
.mcc-card h2 a,
.mcc-card h3 a{color:var(--t1);text-decoration:none}
.mcc-card h2 a:hover,
.mcc-card h3 a:hover{color:var(--acc-soft);text-decoration:none}

.mcc-where{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:var(--fs-meta);color:var(--t3);margin-bottom:var(--sp-3);
}
.mcc-where span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.mcc-where i{font-size:14px;color:var(--t4)}

.mcc-card p{font-size:var(--fs-sm);color:var(--t2);margin:0 0 var(--sp-4)}

/* Faptele scurte de pe cartonas: doua coloane, cifra deasupra etichetei. */
.mcc-mini{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-4);padding:var(--sp-3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.mcc-mini div{min-width:0}
.mcc-mini b{display:block;font-size:var(--fs-md);font-weight:700;color:var(--t1);line-height:1.2}
.mcc-mini em{display:block;font-style:normal;font-size:var(--fs-micro);color:var(--t3);
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mcc-card-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}

.mcc-read{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:650;color:var(--acc-soft);
}
.mcc-read:hover{text-decoration:none;color:var(--t1)}
.mcc-read i{font-size:16px;transition:transform .18s var(--ease)}
.mcc-read:hover i{transform:translateX(3px)}

.mcc-site{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-meta);color:var(--t3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.mcc-site:hover{color:var(--t1);text-decoration:none}
.mcc-site i{font-size:14px;flex:none}

/* Toata suprafata cartonasului duce la studiu, dar linkul adevarat ramane TITLUL —
   asa functioneaza si tastatura, si „deschide in fila noua", si cititorul de ecran.
   ⚠️ Suprafata se intinde dintr-un `::after`, NU din linkul insusi: un `<a>` facut
   `position:absolute` isi ia si TEXTUL cu el in coltul cartonasului, peste tot restul. */
.mcc-card-link::after{content:'';position:absolute;inset:0;border-radius:var(--r-lg)}
.mcc-card-foot,
.mcc-card .mcc-site{position:relative;z-index:1}

/* ============================================================
   4. PAGINA UNUI STUDIU
   ============================================================ */
.mcc-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0 0;font-size:var(--fs-meta);color:var(--t3);
}
.mcc-crumbs a{color:var(--t3)}
.mcc-crumbs a:hover{color:var(--t1);text-decoration:none}
.mcc-crumbs i{font-size:13px;color:var(--t4)}
.mcc-crumbs [aria-current]{color:var(--t2)}

.mcc-head{padding:22px 0 var(--sp-6);border-bottom:1px solid var(--line)}
.mcc-head-top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.mcc-head h1{margin:0 0 var(--sp-4);max-width:900px}
.mcc-head .mcc-lead{max-width:820px}

.mcc-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--sp-5);
  font-size:var(--fs-meta);color:var(--t3);
}
.mcc-meta span{display:inline-flex;align-items:center;gap:7px}
.mcc-meta i{font-size:14px;color:var(--t4)}

/* Captura mare din capul studiului — primul lucru care se vede dupa titlu si oras.
   ⚠️ `figure` vine cu margine de la browser; se scrie `margin` explicit, altfel poza se
      departeaza de antet cu 40px pe care nimeni nu i-a cerut. */
.mcc-hero-shot{
  margin:var(--sp-6) 0 0;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--ink-800);box-shadow:var(--glint);
  transition:border-color .22s var(--ease);
}
.mcc-hero-shot a{display:block}
.mcc-hero-shot img{display:block;width:100%;height:auto}
.mcc-hero-shot figcaption{
  padding:11px var(--sp-4) 13px;border-top:1px solid var(--line);
  font-size:var(--fs-meta);color:var(--t3);
}
/* Chenarul se lumineaza doar cand poza chiar duce undeva (magazin cu adresa publicata). */
.mcc-hero-shot:has(a):hover{border-color:var(--line-strong)}

/* Banda de fapte. Cifrele sunt numarate in baza magazinului la data scrisa in studiu. */
.mcc-facts{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin:var(--sp-6) 0;
}
.mcc-fact{
  padding:var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-800);box-shadow:var(--glint);
}
.mcc-fact b{display:block;font-size:24px;font-weight:800;color:var(--t1);line-height:1.15;letter-spacing:-.02em}
.mcc-fact span{display:block;margin-top:5px;font-size:var(--fs-meta);color:var(--t3)}

/* ── Corpul studiului ─────────────────────────────────────── */
.mcc-body{max-width:760px;padding:var(--sp-5) 0 0;font-size:var(--fs-md);line-height:1.72;color:var(--t2)}
.mcc-body h2{
  margin:var(--sp-7) 0 var(--sp-4);padding-top:var(--sp-2);
  font-size:clamp(21px,2.2vw,26px);scroll-margin-top:24px;
}
.mcc-body h2:first-child{margin-top:var(--sp-4)}
.mcc-body h3{margin:var(--sp-5) 0 var(--sp-3);font-size:var(--fs-h4);color:var(--t1)}
.mcc-body p{margin:0 0 var(--sp-4)}
.mcc-body ul,
.mcc-body ol{margin:0 0 var(--sp-4);padding-left:22px}
.mcc-body li{margin-bottom:10px}
.mcc-body li::marker{color:var(--acc-soft)}
.mcc-body strong{color:var(--t1);font-weight:650}
.mcc-body a{color:var(--acc-soft)}

/* Citat scurt din ce s-a construit — nu marturie de client, ci nota de lucru. */
.mcc-body blockquote{
  margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);
  border-left:3px solid var(--acc);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--ink-800);color:var(--t2);font-size:var(--fs-base);
}
.mcc-body blockquote p:last-child{margin-bottom:0}

/* ── Cuprinsul ────────────────────────────────────────────── */
.mcc-toc{
  margin:var(--sp-5) 0 var(--sp-6);padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900);
}
.mcc-toc-t{
  display:flex;align-items:center;gap:8px;margin-bottom:var(--sp-3);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
}
.mcc-toc-t i{font-size:14px;color:var(--acc-soft)}
.mcc-toc ol{margin:0;padding-left:20px;font-size:var(--fs-sm)}
.mcc-toc li{margin-bottom:7px}
.mcc-toc li::marker{color:var(--t4)}
.mcc-toc a{color:var(--t2)}
.mcc-toc a:hover{color:var(--t1);text-decoration:none}

/* ── Ce foloseste magazinul azi ───────────────────────────── */
.mcc-stack{margin:var(--sp-6) 0 0;max-width:900px}
.mcc-stack-t{display:flex;align-items:center;gap:9px;margin:0 0 var(--sp-4);font-size:var(--fs-h3);color:var(--t1)}
.mcc-stack-t i{font-size:20px;color:var(--acc-soft)}
.mcc-stack ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);
              grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mcc-stack li{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink-800);
  font-size:var(--fs-sm);color:var(--t2);line-height:1.45;
}
.mcc-stack li i{flex:none;font-size:16px;color:var(--mint);margin-top:2px}

/* ── Legatura catre magazinul clientului ──────────────────── */
.mcc-visit{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin:var(--sp-6) 0 0;padding:var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink-800);box-shadow:var(--glint);
}
.mcc-visit-in{flex:1 1 260px;min-width:0}
.mcc-visit-in b{display:block;font-size:var(--fs-md);color:var(--t1);font-weight:700}
.mcc-visit-in span{display:block;margin-top:3px;font-size:var(--fs-meta);color:var(--t3)}
.mcc-visit-go{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--acc-dim);
  color:var(--t1);font-weight:650;font-size:var(--fs-sm);
}
.mcc-visit-go:hover{background:var(--ink-700);border-color:var(--acc);text-decoration:none}
.mcc-visit-go i{font-size:16px;color:var(--acc-soft)}

/* ── Intrebari ────────────────────────────────────────────── */
.mcc-faq{margin:var(--sp-7) 0 0;max-width:820px}
.mcc-faq h2{margin:0 0 var(--sp-4)}
.mcc-q{
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);
}
.mcc-q b{display:block;color:var(--t1);font-size:var(--fs-base);font-weight:700;margin-bottom:7px}
.mcc-q p{margin:0;font-size:var(--fs-sm);color:var(--t2)}

/* ── Vezi si / navigare intre studii ──────────────────────── */
.mcc-more{margin:var(--sp-7) 0 0}
.mcc-more h2{margin:0 0 var(--sp-4)}

.mcc-prevnext{
  display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.mcc-pn{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-800);
}
.mcc-pn:hover{border-color:var(--line-strong);text-decoration:none}
.mcc-pn i{flex:none;font-size:18px;color:var(--t3)}
.mcc-pn span{min-width:0}
.mcc-pn em{display:block;font-style:normal;font-size:var(--fs-micro);color:var(--t3);margin-bottom:2px}
.mcc-pn b{display:block;font-size:var(--fs-sm);color:var(--t1);font-weight:650;line-height:1.35}
.mcc-pn-next{justify-content:flex-end;text-align:right}
.mcc-pn-next i{order:2}

/* ============================================================
   5. BANDA DE CONVERSIE
   Aceeasi la finalul listei si la finalul studiului: un singur drum inainte.
   ============================================================ */
.mcc-cta{
  margin:var(--sp-7) 0 var(--sp-8);padding:var(--sp-6) var(--sp-5);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--ink-800);box-shadow:var(--glint);text-align:center;
}
.mcc-cta h2{margin:0 0 var(--sp-3)}
.mcc-cta p{max-width:560px;margin:0 auto var(--sp-5);color:var(--t2)}
.mcc-cta-go{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  background:var(--grad);color:#0B0B15;font-weight:750;font-size:var(--fs-base);
  border:0;
}
.mcc-cta-go:hover{text-decoration:none;filter:brightness(1.06)}
.mcc-cta-go i{font-size:18px}
.mcc-cta-note{margin:var(--sp-4) 0 0;font-size:var(--fs-meta);color:var(--t3)}

/* ============================================================
   6. PAGINA CARE NU EXISTA
   ============================================================ */
.mcc-empty{
  max-width:620px;margin:var(--sp-8) auto;padding:var(--sp-6) var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-800);text-align:center;
}
.mcc-empty i{font-size:32px;color:var(--t4)}
.mcc-empty h1{margin:var(--sp-4) 0 var(--sp-3)}
.mcc-empty p{color:var(--t2)}
.mcc-empty a{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-3);font-weight:650}

/* ============================================================
   7. ECRANE MICI
   ============================================================ */
@media(max-width:640px){
  .mcc-grid{grid-template-columns:1fr}
  .mcc-tally-item{flex:1 1 100%}
  .mcc-tally-n{font-size:23px}
  .mcc-fact b{font-size:21px}
  .mcc-body{font-size:var(--fs-base)}
  .mcc-visit{flex-direction:column;align-items:stretch}
  .mcc-visit-go{justify-content:center}
  .mcc-pn-next{justify-content:flex-start;text-align:left}
  .mcc-pn-next i{order:0}
  .mcc-cta{padding:var(--sp-5) var(--sp-4)}
}

/* Cine a cerut mai putina miscare nu primeste deloc. */
@media(prefers-reduced-motion:reduce){
  .mcc-card,.mcc-read i,.mcc-shot img{transition:none}
  .mcc-card:hover{transform:none}
  .mcc-card:hover .mcc-shot img{transform:none}
  .mcc-read:hover i{transform:none}
}