/* ============================================================
   HUDDLE — Clienți: povești mari (poză, firma, viziunea, sfatul),
   mărturii scurte cu logo, apoi un perete de logo-uri.
   ============================================================ */

.page-clienti { --bg-page: #fafbf7; background: var(--bg-page); }
.cl-page { padding: 0 var(--gutter); overflow-x: clip; }
.cl-page > section { max-width: 1120px; margin-left: auto; margin-right: auto; }
.cl-page .eyebrow { color: var(--accent-ink); }
.cl-page h1 em, .cl-page h2 em { color: #3f7424; }

/* text de completat: vizibil, dar discret */
.tbd { color: #93a58b !important; font-style: normal; }

/* ---------- deschiderea ---------- */
.cl-hero { padding-top: calc(var(--header-h) + clamp(48px, 9vh, 96px)); text-align: center; max-width: 820px !important; }
.cl-hero h1 { margin-top: 14px; font-size: clamp(40px, 5.4vw, 76px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
.cl-hero p { margin: 22px auto 0; max-width: 600px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text-secondary); }

/* ---------- 1. poveștile ---------- */
.stories { margin-top: clamp(64px, 11vh, 120px); display: grid; gap: clamp(72px, 12vh, 140px); }
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.story:nth-child(even) .story-photo { order: 2; }

.story-photo {
  margin: 0; justify-self: center; width: min(100%, 380px);
  padding: 14px 14px 52px; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 44, 36, .1), 0 30px 50px -32px rgba(20, 44, 36, .5);
  transform: rotate(-2deg);
}
.story:nth-child(even) .story-photo { transform: rotate(1.8deg); }
.story-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: #1a1d1b; }
.story-img.is-empty {
  background: #f3f7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238eaa81' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 21c1-4.4 4.2-6.5 8-6.5s7 2.1 8 6.5'/%3E%3C/svg%3E") center / 56px no-repeat;
  border: 1.5px dashed rgba(38, 61, 40, .25);
}

.story-logo { display: block; width: auto; height: 26px; }
.story-logo.is-tall { height: 52px; }
.story-text h3 { margin-top: 22px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.story-role { margin-top: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--text-secondary); }
.story-label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.story-blocks { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.story-blocks p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.story-advice { margin: 28px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--green-800); }
.story-advice .story-label { color: var(--lime-300); }
.story-advice p { margin-top: 10px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; color: #f0f7ea; }
.story-advice p.tbd { color: #9fb79a !important; }

/* ---------- logo-uri lipsă ---------- */
.logo-slot {
  display: inline-grid; place-items: center; min-width: 120px; height: 36px; padding: 0 14px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; color: #93a58b; border: 1px dashed rgba(38, 61, 40, .25);
}

/* ---------- 2. mărturii scurte: un index curat, ca peretele de logo-uri ---------- */
.quotes-wrap { margin-top: clamp(96px, 15vh, 170px); }
.quotes-wrap h2 { text-align: center; font-size: clamp(30px, 3.6vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.quotes { list-style: none; max-width: 980px; margin: clamp(36px, 6vh, 64px) auto 0; padding: 0; border-top: 1px solid var(--rule); }
.quote {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; column-gap: clamp(36px, 6vw, 96px);
  padding: clamp(32px, 5vh, 48px) 0; border-bottom: 1px solid var(--rule);
}
/* cartea de vizită */
.quote-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: 250px; aspect-ratio: 85 / 55; padding: 18px 20px 16px; border-radius: 5px;
  /* hârtie caldă, aproape albă: tonul crem foarte deschis se așază pe fundalul paginii */
  background: linear-gradient(160deg, #fdfcf7 0%, #f6f3ea 100%); border: 1px solid rgba(92, 78, 40, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 1px rgba(60, 50, 20, .08), 0 14px 28px -18px rgba(60, 50, 20, .4);
  transform: rotate(-1.4deg); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.quote:nth-child(even) .quote-card { transform: rotate(1.1deg); }
.quote:hover .quote-card { transform: rotate(0) translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 1px rgba(60, 50, 20, .08), 0 22px 36px -20px rgba(60, 50, 20, .5); }
.quote-logo { display: block; height: var(--h, 32px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.card-foot { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(92, 78, 40, .16); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.35; color: var(--text-secondary); }
.card-name { color: var(--text-primary); }
.card-site { justify-self: start; color: var(--accent-ink); text-decoration: none; }
a.card-site:hover { text-decoration: underline; text-underline-offset: 3px; }
.quote p { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.42; letter-spacing: -.015em; color: var(--text-primary); text-wrap: pretty; }

/* ---------- 3. doar logo-uri ---------- */
.logos-wrap { margin-top: clamp(80px, 12vh, 130px); text-align: center; }
.logos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; }
.logos li { display: grid; place-items: center; height: 104px; background: var(--bg-page); }
.logos img { height: var(--h, 40px); width: auto; max-width: 84%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos li:hover img { filter: none; opacity: 1; }
.logos .logo-slot { min-width: 0; border: 0; }

/* ---------- finalul ---------- */
.cl-page > .cl-final {
  margin-top: clamp(96px, 14vh, 150px); margin-bottom: clamp(48px, 8vh, 80px);
  padding: clamp(48px, 8vw, 96px) var(--gutter); border-radius: 28px; text-align: center;
  background: var(--green-800); color: #f0f7ea;
}
.cl-final h2 { font-size: clamp(32px, 4.2vw, 58px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 32px; }
.cl-page .cl-final h2 em { color: var(--lime-300); }

/* ---------- apariție la scroll ---------- */
.js .story, .js .quote { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .7s var(--ease-out); }
.js .quote { transition-delay: calc(var(--k) * .06s); }
.js .story.is-in, .js .quote.is-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 36px; }
  .story:nth-child(even) .story-photo { order: 0; }
  .story-photo { width: min(78%, 320px); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote { grid-template-columns: 1fr; row-gap: 26px; }
}
@media (max-width: 560px) {
  .story-blocks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .story, .js .quote { opacity: 1; transform: none; }
}