@charset "UTF-8";
/* ==========================================================================
   C&C SRL High-Tech — pages.css
   Shared stylesheet for the page templates that are not the homepage:
   R-Evolution (template-r-evolution.php), CC Coffee (template-cc-coffee.php),
   Qualità (template-qualita.php) and Azienda (template-azienda.php).

   Enqueue handle: ccsrl-pages · depends on ccsrl-base.

   Blocks defined here (CONTRACT.md §4):
     .cc-page-hero  .cc-page-hero__copy  .cc-page-hero__panel
     .cc-split      .cc-split--reverse   .cc-split--photo  .cc-split--full
                    .cc-split__media     .cc-split__body
                    .cc-split__title     .cc-split__meta
     .cc-reasons    .cc-reason           .cc-reason__num
                    .cc-reason__title    .cc-reason__text
     .cc-devices    .cc-device           .cc-device--tall
     .cc-compat     .cc-compat__item
     .cc-statement  .cc-statement__text  .cc-crosslinks
     .cc-careers__roles  .cc-careers__tags  .cc-careers__tag
     .cc-careers__listings  .cc-careers__email   (Lavora con noi)

   Rule: no raw hex colour here — every colour comes from a base.css token.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HERO  (navy, two columns: copy + translucent logo panel)
   ========================================================================== */

.cc-page-hero{
  position: relative;
  overflow: hidden;
  background: var(--cc-navy);
  color: var(--cc-on-navy-soft);
}

/* The faint yellow blueprint grid from the design (--cc-yellow at 6%). */
.cc-page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252,211,77,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252,211,77,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.cc-page-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 70px;
}

/* --- Copy column --------------------------------------------------------- */

.cc-page-hero__copy{
  min-width: 0;
}

.cc-page-hero__eyebrow{
  margin: 0 0 18px;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cc-yellow);
}

.cc-page-hero__title{
  margin: 0 0 18px;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 66px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cc-surface);
  text-wrap: balance;
}

.cc-page-hero__rule{
  display: block;
  width: 110px;
  height: 4px;
  margin: 0 0 22px;
  background: var(--cc-yellow);
}

.cc-page-hero__sub{
  max-width: 560px;
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-on-navy-soft);
}

.cc-page-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/*
 * A secondary button inside the navy hero. base.css only re-colours ghost
 * buttons inside .cc-section--navy and the footer, and the default navy label
 * would be invisible here — same treatment, applied to the page hero.
 */
.cc-page-hero .cc-btn--ghost{
  border-color: var(--cc-navy-line);
  color: var(--cc-on-navy);
}

.cc-page-hero .cc-btn--ghost:hover,
.cc-page-hero .cc-btn--ghost:focus-visible{
  background: transparent;
  border-color: var(--cc-yellow);
  color: var(--cc-surface);
}

/* --- Translucent logo panel ---------------------------------------------- */

.cc-page-hero__panel{
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}

.cc-page-hero__panel img{
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * --mark: the brand logo standing in for a photo (Azienda without a featured
 * image). A photograph should fill the panel; the logo filling it came out
 * 437x448px beside a text column 289px tall, made the hero 679px high and was
 * the largest thing on the page. Capped below the text instead, so the copy
 * sets the height of the hero the way it does on the sector pages, and the
 * translucent plate hugs the mark rather than spanning an empty column.
 *
 * The img selector repeats the panel class on purpose: the responsive blocks
 * further down set `.cc-page-hero__panel img` again, and at equal specificity
 * the later rule would win.
 */
.cc-page-hero__panel--mark{
  justify-self: center;
  align-self: center;
}

/*
 * On navy the emblem lost its navy ring and gear, so the translucent square
 * became the brand plate (.cc-plate in base.css): flat white, one 45-degree
 * cut with the yellow band, as in the header. The padding is 3px lighter at
 * the top and left: the cut takes weight off the lower right, and the emblem
 * looks centred only when it sits that little bit up and left.
 */
.cc-page-hero__panel.cc-page-hero__panel--mark{
  --plate-optic: 3px;
  padding:
    calc(32px - var(--plate-optic))
    calc(32px + var(--plate-optic))
    calc(32px + var(--plate-optic))
    calc(32px - var(--plate-optic));
  background: none;
  border: 0;
}

.cc-page-hero__panel.cc-page-hero__panel--mark img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 190px;
}

@media (max-width: 900px){
  .cc-page-hero__panel.cc-page-hero__panel--mark{ --plate-cut: 76px; }

  .cc-page-hero__panel.cc-page-hero__panel--mark img{ max-height: 156px; }
}

@media (max-width: 640px){
  .cc-page-hero__panel.cc-page-hero__panel--mark{
    --plate-cut: 62px;
    --plate-gap: 8px;
    --plate-band: 10px;
    padding: 22px 26px 26px 22px;
  }

  .cc-page-hero__panel.cc-page-hero__panel--mark img{ max-height: 128px; }
}

/*
 * Tablets. Stacked under the buttons, the plate floated alone in a field of
 * empty navy. Beside the heading it fills the top of the hero and balances
 * it: next to eyebrow, title, rule and intro, buttons underneath. The copy's
 * own box is dissolved (display: contents) so its children and the plate
 * share one grid. Phones get their own layout below. Without :has() the hero
 * simply stays stacked, as before.
 */
@media (max-width: 900px){

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark){
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow mark"
      "title   mark"
      "rule    mark"
      "sub     mark"
      "actions actions";
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) > .cc-page-hero__copy{ display: contents; }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__eyebrow{ grid-area: eyebrow; }
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__title{ grid-area: title; }
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__rule{ grid-area: rule; }
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__sub{ grid-area: sub; }
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__actions{ grid-area: actions; }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) > .cc-page-hero__panel--mark{
    grid-area: mark;
    justify-self: end;
    align-self: start;
  }

  .cc-page-hero__panel.cc-page-hero__panel--mark img{ max-height: 124px; }
}

/*
 * Phones: one centred column, chosen by the owner over the plate beside the
 * title. The brand plate opens the hero on the centre axis (100px emblem),
 * then eyebrow, title, rule and intro, centred; the buttons stay full width.
 * The tablet grid above is undone first: one track, no named areas, the
 * copy back in its own box.
 */
@media (max-width: 640px){

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark){
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    row-gap: 26px;
  }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) > .cc-page-hero__copy{
    display: block;
    text-align: center;
  }

  /* The plate leads the column, on the centre axis. */
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) > .cc-page-hero__panel--mark{
    grid-area: auto;
    order: -1;
    justify-self: center;
  }

  /* Letter-spacing trails the last glyph: an equal indent re-centres it. */
  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__eyebrow{
    text-indent: 2px;
  }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__rule{
    margin-left: auto;
    margin-right: auto;
  }

  .cc-page-hero__inner:has(> .cc-page-hero__panel--mark) .cc-page-hero__sub{
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }

  /* The plate's proportions, scaled to a 100px emblem; 2px lighter at the
     top and left for the optical centring against the cut. */
  .cc-page-hero__panel.cc-page-hero__panel--mark{
    --plate-cut: 48px;
    --plate-gap: 6px;
    --plate-band: 8px;
    padding: 17px 21px 21px 17px;
  }

  .cc-page-hero__panel.cc-page-hero__panel--mark img{ max-height: 100px; }
}

/* ==========================================================================
   2. SPLIT  (image beside text; --reverse puts the copy first)
   ========================================================================== */

.cc-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.cc-split__media{
  display: block;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
}

.cc-split__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--cc-ease);
}

.cc-split__media:hover img,
.cc-split__media:focus-within img{
  transform: scale(1.04);
}

.cc-split__body{
  min-width: 0;
}

/* The section head inside a split sits tighter than a standalone one. */
.cc-split__body .cc-section-head{
  gap: 12px;
  margin-bottom: 18px;
}

.cc-split__title{
  margin: 0 0 16px;
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.25;
  color: var(--cc-navy);
}

.cc-split__body p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--cc-text-muted);
}

.cc-split__body p + p{
  margin-top: 12px;
}

/* A second heading inside the same column (Azienda §08) needs air above it. */
.cc-split__body p + .cc-split__title{
  margin-top: 30px;
}

/*
 * Mono label sitting under a .cc-split__title — on the company page it carries
 * the role under the name of the Amministratore Unico.
 */
.cc-split__body .cc-split__meta{
  margin: -8px 0 16px;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-orange);
}

/*
 * Photo split: a fixed 4:3 media box. The company page runs eight of these in a
 * row with photographs of every aspect ratio, so the box — not the file — sets
 * the rhythm, and the reserved space stops the lazy image from shifting the
 * layout as it arrives.
 */
.cc-split--photo .cc-split__media{
  aspect-ratio: 4 / 3;
}

/*
 * Copy-only split: one full-width column. Used when a section has no photo to
 * put beside the text (the company page falls back to it when the bundled
 * gallery folder is empty).
 */
.cc-split--full{
  grid-template-columns: 1fr;
}

/* ==========================================================================
   3. REASONS
   Default: the four "buoni motivi" cards (icon + title + text).
   --hairline: the S.01–S.06 service grid (1px seam grid, flat cells).
   ========================================================================== */

.cc-reasons{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cc-reason{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-top: 4px solid var(--cc-navy);
  transition:
    transform .3s var(--cc-ease),
    box-shadow .3s var(--cc-ease);
}

.cc-reason:hover,
.cc-reason:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(14,34,64,.12);
}

.cc-reason__icon{
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex: 0 0 auto;
}

.cc-reason__num{
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cc-orange);
}

.cc-reason__title{
  margin: 0;
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cc-navy);
}

.cc-reason__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-text-muted);
}

/* --- Hairline variant ---------------------------------------------------- */

.cc-reasons--hairline{
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cc-border);
  border: 1px solid var(--cc-border);
}

.cc-reasons--hairline .cc-reason{
  gap: 10px;
  border: 0;
  transition: background-color .25s var(--cc-ease);
}

.cc-reasons--hairline .cc-reason:hover,
.cc-reasons--hairline .cc-reason:focus-within{
  background: var(--cc-bg);
  transform: none;
  box-shadow: none;
}

.cc-reasons--hairline .cc-reason__title{
  font-size: clamp(18px, 2.1vw, 22px);
}

/* ==========================================================================
   4. DEVICES  (image mosaic; the first cell is two rows tall)
   ========================================================================== */

.cc-devices{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}

.cc-device{
  display: block;
  overflow: hidden;
  min-width: 0;
}

.cc-device--tall{
  grid-row: span 2;
}

.cc-device img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--cc-ease);
}

.cc-device:hover img,
.cc-device:focus-within img{
  transform: scale(1.05);
}

/* ==========================================================================
   5. COMPAT  (pod / capsule compatibility logo grid)
   ========================================================================== */

.cc-compat__heading{
  margin: 0 0 36px;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cc-navy);
}

.cc-compat{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-compat__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}

.cc-compat__item img{
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 1px solid var(--cc-border);
}

.cc-compat__item span{
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cc-navy);
}

/* ==========================================================================
   6. STATEMENT + CROSSLINKS  (Azienda page)
   .cc-statement    the mission quote, centred on a navy section
   .cc-crosslinks   the row of ghost links that closes the page
   ========================================================================== */

/*
 * Left-aligned behind a yellow bar — the same treatment as the homepage
 * mission, so the statement reads the same way in both places.
 *
 * It used to be a centred five-line paragraph inside a bordered panel. A
 * centred block of running text gives the eye no fixed left edge to return
 * to at each line, which is what made it tiring; the panel around it added
 * a frame the sentence did not need.
 */
.cc-statement{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0 4px 30px;
  border-left: 4px solid var(--cc-yellow);
  text-align: left;
}

.cc-statement__text{
  margin: 0;
  /* In em, so the line length follows this element's own size. 30em lands
     around fifty characters a line at the top of the clamp — inside the
     comfortable range, where 21em had squeezed it down to thirty-five. */
  max-width: 30em;
  font-family: var(--cc-font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.45;
  color: var(--cc-surface);
  text-wrap: pretty;
}

.cc-crosslinks{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================================
   7. RESPONSIVE — max-width 1100px
   ========================================================================== */

@media (max-width: 1100px){

  .cc-page-hero__inner{
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .cc-page-hero__panel{ padding: 30px; }

  .cc-split{ gap: 40px; }

  /* 4 → 2 cards, 3 → 2 service cells. */
  .cc-reasons{ grid-template-columns: repeat(2, 1fr); }

  .cc-reasons--hairline{ grid-template-columns: repeat(2, 1fr); }

  .cc-devices{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }

  /* 5 → 3 compatibility cells. */
  .cc-compat{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   8. RESPONSIVE — max-width 900px  (tablet portrait: everything stacks)
   ========================================================================== */

@media (max-width: 900px){

  /* --- Hero becomes a single column, panel below the copy ---------------- */

  .cc-page-hero__inner{
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 52px;
    padding-bottom: 48px;
  }

  .cc-page-hero__sub{
    max-width: none;
    margin-bottom: 28px;
    font-size: 16px;
  }

  .cc-page-hero__panel{
    padding: 26px;
  }

  .cc-page-hero__panel img{
    max-width: 320px;
  }

  /* --- Splits stack; the image always leads ------------------------------ */

  .cc-split{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cc-split--reverse .cc-split__media{
    order: -1;
  }

  .cc-split__media img{
    height: auto;
    max-height: 420px;
  }

  /* Stacked, the fixed-ratio photo box goes wide instead of tall. */
  .cc-split--photo .cc-split__media{
    aspect-ratio: 16 / 9;
  }

  .cc-split--photo .cc-split__media img{
    height: 100%;
    max-height: none;
  }

  .cc-split__body .cc-section-head{
    margin-bottom: 14px;
  }

  /* --- Devices lose the row span ----------------------------------------- */

  .cc-devices{
    grid-auto-rows: 200px;
    gap: 12px;
  }

  .cc-device--tall{
    grid-row: auto;
  }

  /* --- Compat ------------------------------------------------------------ */

  .cc-compat{ gap: 16px; }

  .cc-compat__item img{ height: 110px; }

  .cc-compat__heading{ margin-bottom: 26px; }

  .cc-reasons{ gap: 16px; }

  .cc-reason{ padding: 24px; }

  /* --- Statement / crosslinks -------------------------------------------- */

  .cc-statement{ padding: 30px 32px; }

  .cc-crosslinks{ gap: 14px; }
}

/* ==========================================================================
   9. RESPONSIVE — max-width 640px  (phone)
   ========================================================================== */

@media (max-width: 640px){

  .cc-page-hero__inner{
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .cc-page-hero__eyebrow{
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  .cc-page-hero__rule{
    width: 84px;
    margin-bottom: 18px;
  }

  .cc-page-hero__sub{
    margin-bottom: 24px;
    font-size: 15px;
  }

  .cc-page-hero__actions{
    display: block;
  }

  .cc-page-hero__panel{
    padding: 22px;
  }

  .cc-page-hero__panel img{
    max-width: 240px;
  }

  /* --- Single column everywhere ------------------------------------------ */

  .cc-split{ gap: 22px; }

  .cc-split__body p{ font-size: 15px; }

  .cc-reasons,
  .cc-reasons--hairline{
    grid-template-columns: 1fr;
  }

  .cc-reason{
    gap: 12px;
    padding: 22px;
  }

  .cc-reason__icon{
    width: 60px;
    height: 60px;
  }

  .cc-devices{
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
    gap: 10px;
  }

  /* 3 → 2 compatibility cells. */
  .cc-compat{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .cc-compat__item img{ height: 96px; }

  .cc-compat__item span{ letter-spacing: 0; }

  /* --- Statement / crosslinks -------------------------------------------- */

  .cc-statement{ padding: 24px 22px; }

  .cc-split__body .cc-split__meta{
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 1.6px;
  }

  .cc-split__body p + .cc-split__title{ margin-top: 24px; }

  /* The buttons already go full width here, so the row becomes a stack. */
  .cc-crosslinks{
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
   10. INNOVAZIONI — progetti finanziati  (template-innovazioni.php)

   Un progetto = una riga: il manifesto a sinistra, la trascrizione a destra.
   I manifesti sono adempimenti di pubblicità di fondi europei: vanno mostrati
   interi, mai ritagliati, e i quattro file hanno proporzioni diverse
   (tre A4 verticali 1:1,41 e uno quasi quadrato). Il riquadro è quindi una
   cornice a sfondo chiaro con l'immagine in `object-fit: contain`: quando la
   proporzione non riempie la cornice avanza sfondo, non si taglia carta.

   Blocchi definiti qui:
     .cc-projects  .cc-project  .cc-project__poster  .cc-project__img
     .cc-project__body   .cc-project__title   .cc-project__period
     .cc-project__meta   .cc-project__meta-row
     .cc-project__meta-label  .cc-project__meta-value
     .cc-project__summary  .cc-project__detail  .cc-project__cup

   Nessun esadecimale: tutti i colori vengono dai token di base.css.
   ========================================================================== */

/* --- Elenco -------------------------------------------------------------- */

.cc-projects{
  display: grid;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Ogni progetto dopo il primo è separato da una linea sottile: sono quattro
 * schede lunghe e senza una divisione netta scorrerebbero in un blocco unico.
 */
.cc-project + .cc-project{
  padding-top: 56px;
  border-top: 1px solid var(--cc-border);
}

/* --- Riga a due colonne -------------------------------------------------- */

/*
 * `minmax(0, …)` su entrambe le colonne: senza il minimo a zero una riga di
 * testo lunga (l'azione del bando supera i 150 caratteri) allargherebbe la
 * traccia della griglia oltre il contenitore.
 */
.cc-project{
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* --- Cornice del manifesto ----------------------------------------------- */

.cc-project__poster{
  /*
   * Tetto all'altezza del manifesto. È qui, su una proprietà, perché cambia a
   * ogni breakpoint: a piena larghezza un A4 sarebbe alto quanto lo schermo.
   */
  --cc-poster-cap: 520px;

  display: grid;
  place-items: center;
  min-width: 0;
  padding: 16px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  transition: border-color .25s var(--cc-ease);
}

a.cc-project__poster:hover,
a.cc-project__poster:focus-visible{
  border-color: var(--cc-navy);
}

/*
 * width:100% + height:auto dà al riquadro l'altezza naturale del file;
 * max-height la taglia quando il file è troppo verticale. A quel punto
 * `object-fit: contain` rimpicciolisce il manifesto dentro il riquadro invece
 * di ritagliarlo, e lo spazio che avanza ai lati resta il fondo chiaro della
 * cornice. Nessuna delle due proporzioni perde un millimetro di carta.
 */
.cc-project__img{
  width: 100%;
  height: auto;
  max-height: var(--cc-poster-cap);
  object-fit: contain;
  object-position: center;
  display: block;
}

/* --- Colonna di testo ---------------------------------------------------- */

/*
 * Colonna in flex: la spaziatura fra titolo, righe del bando, sintesi e
 * dettagli viene dal `gap`, così l'ordine scelto dal template non lascia
 * margini doppi o mancanti.
 */
.cc-project__body{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.cc-project__title{
  margin: 0;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cc-navy);
  text-wrap: balance;
}

/*
 * Non arancione. --cc-orange su --cc-bg dà 2,68:1, sotto il 4,5:1 che WCAG AA
 * chiede a un testo di 12px, e qui non è un fregio come l'occhiello di sezione:
 * è l'unica resa visibile del periodo del progetto. --cc-text-muted misura
 * 5,50:1 sullo stesso fondo ed è il token che il CONTRACT §10 garantisce.
 */
.cc-project__period{
  margin: 0;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

/* Periodo e titolo sono una cosa sola: si stringono, in qualsiasi ordine. */
.cc-project__title + .cc-project__period,
.cc-project__period + .cc-project__title{
  margin-top: -10px;
}

/* --- Coppie etichetta / valore (programma, azione, finanziamento) -------- */

/*
 * Reggono anche un <dl> con i <div> di riga: base.css azzera già i margini di
 * dl e dd. Etichetta sopra, valore sotto, a ogni larghezza — il valore più
 * lungo è una riga di oltre 150 caratteri e in due colonne resterebbe
 * schiacciato in una colonnina.
 */
.cc-project__meta{
  margin: 0;
  border-top: 1px solid var(--cc-border);
}

.cc-project__meta-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--cc-border);
}

/*
 * Stesso motivo del periodo: a 11px l'etichetta è l'unica cosa che dice se il
 * valore accanto è il Programma, l'Azione, il Finanziamento o il CUP. Su una
 * pagina che assolve un obbligo di pubblicità sono proprio i dati che devono
 * risultare leggibili, quindi il token del testo secondario, non l'arancione.
 */
.cc-project__meta-label{
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-project__meta-value{
  margin: 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--cc-navy);
  /* Va a capo da sola, e se una parola non ci sta comunque non sfonda. */
  overflow-wrap: break-word;
}

/* --- Sintesi e dettagli -------------------------------------------------- */

.cc-project__summary{
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--cc-text);
}

.cc-project__detail{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cc-text-muted);
}

/* --- CUP ----------------------------------------------------------------- */

/*
 * È un codice, non una parola: monospaziato e mai spezzato a metà. Alla
 * dimensione qui sotto il CUP più lungo del gruppo (24 caratteri) sta dentro
 * la colonna anche su un telefono da 320px, quindi il divieto di andare a capo
 * non produce overflow.
 */
.cc-project__cup{
  align-self: start;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .5px;
  line-height: 1.4;
  color: var(--cc-text);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-left: 3px solid var(--cc-yellow);
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* ==========================================================================
   10.1 INNOVAZIONI — max-width 1100px
   ========================================================================== */

@media (max-width: 1100px){

  .cc-projects{ gap: 44px; }

  .cc-project{
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 36px;
  }

  .cc-project + .cc-project{ padding-top: 44px; }

  .cc-project__poster{ --cc-poster-cap: 460px; }
}

/* ==========================================================================
   10.2 INNOVAZIONI — max-width 900px  (una colonna, manifesto sopra)
   ========================================================================== */

@media (max-width: 900px){

  /*
   * Colonna unica. Il manifesto precede il testo già nel markup, quindi resta
   * in alto senza toccare l'ordine.
   */
  .cc-project{
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .cc-projects{ gap: 36px; }

  .cc-project + .cc-project{ padding-top: 36px; }

  /*
   * A piena larghezza un A4 sarebbe alto oltre 1100px. Il tetto lo riporta a
   * un'altezza leggibile in una schermata e `contain` lo rimpicciolisce tutto
   * intero, centrato sul fondo chiaro della cornice.
   *
   * La cornice si ferma prima del bordo della colonna: un A4 alto al massimo
   * 540px è largo 382px, e in un riquadro da 800 lascerebbe metà larghezza di
   * fondo vuoto. Sotto i 640px la colonna è già più stretta di così e il
   * limite non morde.
   */
  .cc-project__poster{
    --cc-poster-cap: min(62vh, 540px);
    max-width: 520px;
    margin-inline: auto;
    padding: 14px;
  }

  .cc-project__body{ gap: 16px; }

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

/* ==========================================================================
   10.3 INNOVAZIONI — max-width 640px  (telefono)
   ========================================================================== */

@media (max-width: 640px){

  .cc-projects{ gap: 30px; }

  .cc-project{ gap: 20px; }

  .cc-project + .cc-project{ padding-top: 30px; }

  .cc-project__poster{
    --cc-poster-cap: min(66vh, 460px);
    padding: 12px;
  }

  .cc-project__period{
    font-size: 11px;
    letter-spacing: 1.6px;
  }

  .cc-project__meta-row{ padding: 12px 0; }

  .cc-project__meta-value{ font-size: 15px; }

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

  .cc-project__detail{ font-size: 14px; }

  /* Più piccolo di così il codice non serve: a 12px i 24 caratteri del CUP
     più lungo stanno in poco più di 170px, dentro qualunque schermo. */
  .cc-project__cup{
    padding: 7px 10px;
    font-size: 12px;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   10.4 INNOVAZIONI — reduced motion
   base.css azzera già ogni durata; qui la transizione viene proprio tolta.
   Il colore del bordo al passaggio del mouse resta: è un'indicazione che il
   manifesto è cliccabile, non un'animazione, e togliendolo si perderebbe.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

  .cc-project__poster{
    transition: none;
  }
}

/* --- Marchio Innovazioni nell'hero ---------------------------------------
   Sta nel pannello dell'hero, dove le pagine sorelle mettono la loro
   immagine. Su fondo navy il marchio — che contiene una bandiera UE e del
   testo scuro — sparirebbe, quindi va su una piastra chiara, come già fa il
   marchio istituzionale nel footer.
   ------------------------------------------------------------------------ */

.cc-innov-mark{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 30px;
  background: var(--cc-surface);
}

/*
 * Ripete la classe del contenitore perché .cc-page-hero__panel img, poco più
 * sopra, è più specifica e imporrebbe max-width: 100%: il marchio si
 * stiracchierebbe a tutta la piastra.
 */
.cc-innov-mark .cc-innov-mark__img{
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* --- Emblemi di finanziamento --------------------------------------------
   Chiudono la sezione dei progetti, occupando la riga per intero: due
   colonne uguali, non due targhette appoggiate a sinistra con mezza riga
   vuota accanto. Le due immagini hanno proporzioni diverse (2560x662 e
   2480x958), quindi le piastre si distendono alla stessa altezza e ogni
   emblema ci sta dentro grande quanto puo senza deformarsi.
   ------------------------------------------------------------------------ */

.cc-emblems{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--cc-border);
}

.cc-emblem{
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 22px 26px;
  background: var(--cc-surface);
}

/*
 * `width: 100%` non serve a stirare l'emblema: serve a dare al browser una
 * dimensione definita. Da quella, con le proporzioni dichiarate negli
 * attributi width/height, calcola l'altezza e prenota il riquadro prima che
 * l'immagine pigra arrivi — con entrambe le dimensioni `auto` misurava zero e
 * la sezione sobbalzava quando comparivano.
 *
 * Il tetto in altezza resta, ma ora e un massimo e non una misura fissa:
 * morde solo sull'emblema piu tozzo, che alla larghezza della piastra sarebbe
 * alto il 50% piu dell'altro. `contain` lo rimpicciolisce tutto intero invece
 * di schiacciarlo, e quel che avanza resta fondo chiaro della piastra.
 */
.cc-emblem__img{
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 640px){
  .cc-innov-mark{ padding: 20px 22px; }

  /*
   * Una colonna sola: affiancati su un telefono i due emblemi starebbero su
   * 150px di larghezza a testa e il testo dentro non si leggerebbe piu.
   */
  .cc-emblems{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
  }

  .cc-emblem{ padding: 16px 18px; }

  .cc-emblem__img{ max-height: 120px; }
}

/* ==========================================================================
   10.4 INNOVAZIONI — due colonne allineate (da 901px in su)
   Finché le due colonne partivano dall'alto e finivano dove capitava, la
   cornice del manifesto si fermava alla sua altezza naturale e il testo
   proseguiva da solo: due blocchi che iniziano insieme e finiscono a quote
   diverse. Ora la riga si distende e la cornice arriva in fondo al testo.

   Il manifesto dentro resta `contain`: sono documenti, ritagliarli vorrebbe
   dire tagliare via righe di testo, e deformarli non se ne parla. Quindi il
   foglio cresce quanto la cornice gli permette e il resto e fondo chiaro.
   Per farlo crescere davvero la colonna del manifesto si allarga sopra i
   1100px: un A4 largo 366px e alto 519, contro i 306x433 di prima.
   ========================================================================== */

@media (min-width: 901px){

  .cc-project{
    align-items: stretch;
  }

  .cc-project__poster{
    height: 100%;
  }

  /*
   * Il tetto non serve piu: adesso e la cornice a limitare il manifesto, e
   * la cornice non supera mai l'altezza del testo accanto.
   */
  .cc-project__img{
    height: 100%;
    max-height: none;
  }
}

@media (min-width: 1101px){

  .cc-project{
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  }
}

/* ==========================================================================
   11. LAVORA CON NOI  (template-lavora-con-noi.php)
   The page is built from existing parts: the page hero, the .cc-reasons
   cards for the four profiles, and the contact layout of contatti.css
   (.cc-contact, .cc-contact__field) with the career form beside the job
   listings. What is left here is the glue.
   ========================================================================== */

/* The profiles are a list: drop the list chrome, keep the card grid. */
.cc-careers__roles{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Number and name only, no body text: the cards would otherwise sit tall
   and empty. */
.cc-careers__roles .cc-reason{
  gap: 10px;
  justify-content: flex-start;
}

/* Job categories as tags. */
.cc-careers__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.cc-careers__tag{
  padding: 7px 14px;
  border: 1px solid var(--cc-navy);
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-navy);
}

/* Listings written in the page editor. */
.cc-careers__listings{
  font-size: 16px;
  line-height: 1.7;
  color: var(--cc-text);
}

.cc-careers__listings > :first-child{ margin-top: 0; }
.cc-careers__listings > :last-child{ margin-bottom: 0; }

.cc-careers__listings h2,
.cc-careers__listings h3{
  margin: 1em 0 .3em;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--cc-navy);
}

.cc-careers__email{
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--cc-text-muted);
}

.cc-careers__email a{
  font-weight: 600;
  color: var(--cc-navy);
}

.cc-careers__email a:hover,
.cc-careers__email a:focus-visible{
  color: var(--cc-orange);
}