/* eZephyr v2 — /clientele/ (Milestone 7B).
 * "The nameboard": the board in a Mumbai building's lobby that lists who is in the building.
 * The hero draws one; the page's own nameboard is the logo grid. Decoration stays in the hero
 * and the empty-state panel, so the logos themselves sit on quiet white tiles.
 *
 *   .cl-grid           the logo grid (2–5 columns by width; grows with every approved client)
 *   .cl-logo           one client: .cl-logo__mark (the logo, contained, never cropped or
 *                      stretched) and .cl-logo__name; .cl-logo--dark for a light logo
 *   .cl-pending        shown only while the grid is empty
 *   .cl-preview        "not for publication" notice, written only by a --preview build
 * The tiles are generated from data/clientele.json by tools/build-clientele.js; see docs/clientele.md.
 */
.cl { display: flow-root; background: var(--ez-paper); color: var(--ez-ink); }

/* ================= Hero ================= */
.cl-hero { position: relative; overflow: hidden; background: var(--ez-stone); }
.cl-hero__inner {
  display: grid;
  width: min(100% - 2 * var(--ez-gutter), var(--ez-max));
  margin-inline: auto;
  padding-top: clamp(20px, 3.5vw, 44px);
}
.cl-hero__title { margin-top: clamp(20px, 3vw, 36px); font-family: var(--ez-font-display); font-weight: 400; }
.cl-hero__line {
  display: block;
  max-width: 12ch;
  font-size: clamp(2.7rem, 6.4vw, 6rem);
  line-height: 0.93;
  text-transform: uppercase;
}
.cl-hero__lead { max-width: 34rem; margin-top: clamp(16px, 2vw, 26px); }
.cl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(20px, 2.6vw, 30px); }
.cl .ez-link { text-decoration-color: var(--ez-ink-soft); }
.cl-hero .ez-link { text-decoration-color: var(--ez-paper); }

/* The nameboard stands on the hero's street. */
.cl-board { position: relative; z-index: 1; width: min(78%, 360px); margin: clamp(28px, 6vw, 44px) auto -14px; }
.cl-board svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(49, 49, 50, 0.28)); }
.cl-street { position: relative; height: clamp(40px, 5vw, 56px); background: var(--ez-road); }
.cl-street__road { position: absolute; left: 0; right: 0; top: 50%; border-top: 4px dashed var(--ez-yellow); }
@media (min-width: 960px) {
  .cl-hero__inner { grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: end; }
  .cl-hero__copy { padding-bottom: clamp(72px, 7vw, 104px); }
  .cl-board { width: 100%; max-width: 420px; margin: 0 0 -14px auto; }
}

/* ================= The nameboard: logo grid ================= */
.cl-list { padding-block: clamp(56px, 8vw, 104px); }
.cl-list__head { display: grid; gap: 14px 48px; margin-bottom: clamp(24px, 3.2vw, 40px); }
.cl-list__intro { max-width: 32ch; font-size: var(--ez-text-lead); line-height: 1.4; }
@media (min-width: 1024px) {
  .cl-list__head { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .cl-list__intro { justify-self: end; }
}

.cl-grid {
  display: grid;
  /* 2 columns on phones, 3 on small tablets, 4 on tablets, at most 5 on desktop, so every logo
     stays large enough to read. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ez-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cl-grid:empty { display: none; }
/* The tile, its name, then (if any) the website link, stacked inside the grid cell. */
.cl-logo { display: flex; flex-direction: column; align-items: flex-start; }
.cl-logo[hidden] { display: none; } /* filtered out by the service filter */
.cl-logo figure { display: flex; flex-direction: column; align-self: stretch; margin: 0; }
/* Every tile is the same 3:2 box, whatever the logo's shape. */
.cl-logo__mark {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--ez-ink);
  border-radius: 10px;
  background: #fff;
}
/* Whole logo, own proportions: contained in the tile's inner area, never cropped or stretched. */
.cl-logo__mark img { position: absolute; inset: 16% 12%; width: 76%; height: 68%; object-fit: contain; }
/* A file with wide transparent margins is shown larger (data: logo.zoom). Uniform scale only; the
   build checks that just the empty canvas moves out of view, never the artwork. */
.cl-logo__mark img[style*="--zoom"] { transform: scale(var(--zoom)); }
.cl-logo--dark .cl-logo__mark { background: var(--ez-ink); }
/* A tile that links to the client's verified website: a hard shadow on hover, no motion. */
a.cl-logo__mark:hover { box-shadow: 0 4px 0 var(--ez-ink); }
a.cl-logo__mark:focus-visible { outline-offset: 3px; }
.cl-logo__name { margin-top: 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--ez-ink-soft); }
/* Secondary link to the client's own (verified) website; the logo itself links to the project page. */
.cl-logo__site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--ez-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cl-logo__site:hover { text-decoration-thickness: 2px; }

/* Service filter: the /work/ chips (css/prototype/work.css), placed between the heading and grid. */
.cl-filter { margin-bottom: clamp(18px, 2.4vw, 28px); }

/* Written by `build-clientele.js --preview` only: never part of the published page. */
.cl-preview {
  max-width: 62ch;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  padding: 12px 16px;
  border: 2px dashed var(--ez-ink);
  border-radius: 10px;
  background: var(--ez-yellow);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* While no logo is approved: an intentional panel, not placeholder logos. Hidden as soon as the
   grid has a logo. */
.cl-pending {
  display: grid;
  gap: 18px 28px;
  align-items: center;
  max-width: 52rem;
  padding: clamp(22px, 3vw, 36px);
  border: 2px dashed var(--ez-ink);
  border-radius: 10px;
  background: #fff;
}
.cl-grid:has(.cl-logo) ~ .cl-pending { display: none; }
.cl-pending__art { width: clamp(84px, 10vw, 112px); height: auto; }
.cl-pending__title { font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--ez-font-display); text-transform: uppercase; }
.cl-pending__text { max-width: 48ch; margin: 10px 0 14px; font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 640px) { .cl-pending { grid-template-columns: auto 1fr; } }

.cl-note { max-width: 62ch; margin-top: clamp(20px, 3vw, 32px); font-size: 0.9375rem; line-height: 1.5; color: var(--ez-ink-soft); }

/* ================= Enquiry ================= */
.cl-cta { padding-block: clamp(48px, 7vw, 88px); background: var(--ez-sky-light); }
.cl-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cl-cta__title { max-width: 16ch; font: 400 var(--ez-text-h2)/0.95 var(--ez-font-display); text-transform: uppercase; }
.cl-cta .hl { --hl: var(--ez-yellow); }

/* ================= Motion ================= */
@media (prefers-reduced-motion: no-preference) {
  .cl-hero__line { animation: cl-rise 0.8s var(--ez-ease-out) both 0.08s; }
  .cl-hero__lead, .cl-hero__actions { animation: cl-rise 0.8s var(--ez-ease-out) both 0.3s; }
  .cl-board { animation: cl-rise 0.9s var(--ez-ease-out) both 0.2s; }
  /* The ruled line waiting for paint glints once, then rests. */
  .cl-board__next { animation: cl-glint 1.6s ease-in-out 1s 2 both; }
}
@keyframes cl-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes cl-glint { 50% { opacity: 0.35; } }