@charset "UTF-8";
/* ==========================================================================
   C&C SRL High-Tech — clienti.css
   The Clienti page template: ~150 client names from the company profile
   (p.10-12) grouped into 19 sectors.

   Enqueue handle: ccsrl-clienti. Depends on ccsrl-base.
   Scope: .cc-clients* only. The page hero reuses .cc-page-hero (pages.css).

   Blocks defined here (CONTRACT.md §4):
     .cc-clients          grid of sector groups
     .cc-clients__lead    introductory line above the groups
     .cc-clients__group   one sector card  (--wide: full width, more columns)
     .cc-clients__sector  the sector heading
     .cc-clients__list    the names of one sector
     .cc-clients__item    one name

   Readability rules for a list this long: small but generous type, one card
   per sector so groups never blur into each other, and multi-column lists
   with a hairline rule so the eye keeps its place across a wide row.

   Rule: no raw hex colour — tokens from base.css :root only.
   ========================================================================== */

/* ==========================================================================
   1. GRID OF SECTOR GROUPS
   ========================================================================== */

/*
 * One sector per full-width band, stacked in source order.
 *
 * This deliberately replaces a two-column grid, which had two faults that a
 * list of nineteen wildly uneven groups makes unavoidable:
 *
 *   - `grid-auto-flow: dense` backfilled gaps by pulling later groups
 *     forward, so "Energie rinnovabili" rendered above "Ceramico". On an
 *     alphabetical directory that destroys the reader's ability to scan.
 *   - Each row was as tall as its taller card, so a one-name sector beside a
 *     five-name sector left a large hole.
 *
 * Full-width bands cannot gap — the next sector starts where the previous
 * ends — and the order is exactly the order PHP emitted. Density is solved
 * instead inside each group, by flowing the names into columns.
 */
.cc-clients{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cc-clients__lead{
  max-width: 780px;
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cc-text-muted);
}

/* ==========================================================================
   2. ONE SECTOR
   ========================================================================== */

.cc-clients__group{
  min-width: 0;
  padding: 26px 28px 24px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
}

/*
 * Every group is already full width, so --wide no longer changes the layout.
 * The class is still emitted by the template as a marker for "many names";
 * it is kept as a hook rather than removed so the markup and this file do not
 * have to change together.
 */

.cc-clients__sector{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-border);
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cc-navy);
}

.cc-clients__sector::before{
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--cc-yellow);
}

/* ==========================================================================
   3. THE NAMES
   ========================================================================== */

/*
 * Column WIDTH, not a fixed count: the browser fits as many ~19em columns as
 * the band allows, so Cartotecnico's thirty-seven names become four short
 * columns while Vetro's single name stays a single line. One rule covers
 * every group size, and it reflows on its own at any viewport — no media
 * query has to guess the count.
 */
.cc-clients__list{
  margin: 0;
  padding: 0;
  list-style: none;
  /* px, not em: `em` here resolves against the inherited 16px body size, not
     the 14px of the names, which made the columns ~300px and fitted only two
     of them into the band. */
  columns: 260px;
  column-gap: 32px;
  column-rule: 1px solid var(--cc-border);
}

.cc-clients__item{
  /* Never split a company name across two columns. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cc-text);
}

/* ==========================================================================
   4. RESPONSIVE — the three contract breakpoints
   ========================================================================== */

@media (max-width: 1100px){

  .cc-clients{ gap: 16px; }

  .cc-clients__lead{ font-size: 16px; }

  .cc-clients__group{ padding: 22px 22px 20px; }

  .cc-clients__list{ column-gap: 30px; }
}

@media (max-width: 900px){

  .cc-clients{ gap: 14px; }

  .cc-clients__lead{ margin-bottom: 2px; }

  /* Narrower columns so a tablet still fits two of them. */
  .cc-clients__list{ columns: 16em; }
}

@media (max-width: 640px){

  .cc-clients__group{ padding: 20px 18px 18px; }

  .cc-clients__sector{
    margin-bottom: 14px;
    font-size: 13px;
    letter-spacing: 1.4px;
  }

  /* Single column: on a phone a second column leaves ~40 characters
     per line and every name wraps three times. */
  .cc-clients__list{
    columns: 1;
    column-rule: none;
  }

  .cc-clients__lead{ font-size: 15px; }

  .cc-clients__item{ padding: 6px 0; }
}