/* Numbered card carousel. Builds on .palladio-story (type, .palladio-rail, .palladio-controls) from
   palladio-patterns.css; loaded only on pages that contain .palladio-numbered and in the editor.
   Colors: direction A (README, "Regola dei colori"); the shared ink and scrollbar are redefined here so that
   "Cosa offriamo" on the Home keeps its own. Focus: palladio-focus.css of the child theme.
   Titles (1.18.0): heading font of theme.json; tracking -0.03em, -0.02em under 24px. */
.palladio-story.palladio-numbered {
  --palladio-ink: var(--wp--preset--color--palladio-ink-warm, #2a211c);
  --pn-heading-font: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  --pn-heading-tracking: clamp(-.03em, calc(-.02em - (1em - 23.9px) * 2.4), -.02em);
  font-family: var(--wp--preset--font-family--manrope, sans-serif);
}
.palladio-numbered { padding-block: 84px 100px; }
/* Two card groups in a row (page 131): no block gap (white strip) between them. */
.palladio-numbered + .palladio-numbered.palladio-numbered { margin-block-start: 0; }
.palladio-numbered .palladio-numbered-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items: start; gap: 56px; }
.palladio-numbered .palladio-numbered-intro { min-width: 0; }
.palladio-numbered .palladio-numbered-intro .palladio-eyebrow { color: var(--wp--preset--color--palladio-red, #a8342a); margin-bottom: 18px; }
.palladio-numbered .palladio-numbered-intro :is(h1,h2) { font-family: var(--pn-heading-font); font-size: clamp(2.07rem,4.14vw,3.763rem); font-weight: 700; line-height: 1.08; letter-spacing: var(--pn-heading-tracking); overflow-wrap: break-word; hyphens: auto; }
/* Area cards of the Aziende pages 130, 131, 133 (their only intro H2): long titles in the narrow column, so no
   hyphenation or split words, balanced lines and a type about 18% smaller from 1024px up (three lines at most). */
body:is(.page-id-130, .page-id-131, .page-id-133) .palladio-numbered .palladio-numbered-intro h2 {
  font-size: clamp(2.07rem, 3.4vw, 3.085rem); -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: normal; text-wrap: balance;
}
.palladio-numbered .palladio-numbered-intro > p:not(.palladio-eyebrow) { max-width: 340px; margin-top: 24px; color: var(--wp--preset--color--palladio-text-secondary, #5a4a3f); }
.palladio-numbered .palladio-controls { justify-content: flex-start; margin-top: 32px; }
.palladio-numbered .palladio-rail { min-width: 0; padding: 6px 2px 20px; scroll-padding-inline: 2px; scrollbar-color: var(--wp--preset--color--palladio-red, #a8342a) var(--wp--preset--color--palladio-line, #e7ded2); }
.palladio-numbered .palladio-numbered-card {
  flex: 0 0 clamp(260px,24vw,320px); min-height: 400px; padding: 28px; gap: 0;
  border-radius: 22px; transition: transform .25s ease;
}
/* Three surfaces, repeated by position: a duplicated card takes the next one. Cards differ by lightness, not hue:
   white with a thin line, bordeaux gradient with cream text, stone with a gold bar on top (contrast in the README). */
.palladio-numbered .palladio-numbered-card:nth-child(3n+1) {
  background: var(--wp--preset--color--base, #ffffff);
  color: var(--palladio-ink);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--palladio-line, #e7ded2);
}
.palladio-numbered .palladio-numbered-card:nth-child(3n+2) {
  background: linear-gradient(150deg, var(--wp--preset--color--palladio-bordeaux, #6b1d23), var(--wp--preset--color--palladio-bordeaux-deep, #4a141b));
  color: var(--wp--preset--color--palladio-cream, #faf7f2);
  /* Keyboard focus on the bordeaux card: light gold (red stays under 3:1 there). */
  --palladio-focus-text: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  --palladio-focus-fill: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  --palladio-focus-on-fill: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
}
.palladio-numbered .palladio-numbered-card:nth-child(3n) {
  background: var(--wp--preset--color--palladio-stone, #f1e9de);
  color: var(--palladio-ink);
  box-shadow: inset 0 4px 0 var(--wp--preset--color--palladio-gold-antique, #c99a3a);
}
.palladio-numbered .palladio-numbered-index { font-size: .85rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
/* Icon circle: red on the light cards, light gold on the bordeaux one. The drawing keeps the text color. */
.palladio-numbered .palladio-numbered-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: 28px; border: 1px solid var(--wp--preset--color--palladio-red, #a8342a); border-radius: 50%; }
.palladio-numbered .palladio-numbered-card:nth-child(3n+2) .palladio-numbered-icon { border-color: var(--wp--preset--color--palladio-gold-light, #e6c98a); }
.palladio-numbered .palladio-numbered-icon svg, .palladio-numbered .palladio-numbered-icon img { display: block; width: 28px; height: 28px; }
.palladio-numbered .palladio-numbered-card :is(h2,h3) { margin-top: auto; padding-top: 40px; font-family: var(--pn-heading-font); font-size: clamp(1.317rem,1.788vw,1.646rem); font-weight: 700; line-height: 1.1; letter-spacing: var(--pn-heading-tracking); overflow-wrap: break-word; }
.palladio-numbered .palladio-numbered-card :is(h2,h3) + p { margin-top: 12px; }
/* Small labels under the text (page 131, apprenticeship card): a List block, one pill per item, on a faint tint of the
   text color, so they read on every surface. */
.palladio-numbered .palladio-numbered-etichette { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.palladio-numbered .palladio-numbered-etichette > li {
  margin: 0; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.4;
  background: color-mix(in srgb, currentColor 9%, transparent);
}
/* Course hub (1.19.0): the icon is a class on the index paragraph (palladio-icona-<name>, masks in
   includes/corsi-regionali.php), drawn below the number, same circle as the icon group of the generic pattern. */
.palladio-numbered .palladio-numbered-index[class*="palladio-icona-"] { padding-bottom: 84px; }
.palladio-numbered .palladio-numbered-index[class*="palladio-icona-"]::before,
.palladio-numbered .palladio-numbered-index[class*="palladio-icona-"]::after { content: ""; position: absolute; left: 0; bottom: 0; }
.palladio-numbered .palladio-numbered-index[class*="palladio-icona-"]::before { width: 56px; height: 56px; border: 1px solid var(--wp--preset--color--palladio-red, #a8342a); border-radius: 50%; }
.palladio-numbered .palladio-numbered-card:nth-child(3n+2) .palladio-numbered-index::before { border-color: var(--wp--preset--color--palladio-gold-light, #e6c98a); }
.palladio-numbered .palladio-numbered-index[class*="palladio-icona-"]::after { width: 28px; height: 28px; margin: 14px; background: currentColor; mask: var(--palladio-numbered-icon) center / contain no-repeat; }
/* Badge icons (22/10/2026, hubs listed in ICONE_CARD_COLORI, corsi-regionali.php): a filled drawing as inline SVG in
   place of the mask, in three tones (--ic-1/2/3), on a full circle with the course gradient (--ib-1 to --ib-2) and a
   soft shadow of its hue (--ib-ombra). Same box as the ring: the 1px border stays, transparent on the white and stone
   cards, light gold on the bordeaux one (rule above). Hover: the badge grows 4%, not with reduced motion. */
.palladio-numbered .palladio-numbered-index.palladio-icona-badge::before {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ib-1), var(--ib-2)) border-box;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ib-ombra) 35%, transparent);
}
.palladio-numbered .palladio-numbered-index.palladio-icona-badge::after { content: none; }
.palladio-numbered .palladio-numbered-index .palladio-icona-disegno { position: absolute; left: 14px; bottom: 14px; width: 28px; height: 28px; }
.palladio-numbered .palladio-icona-disegno .ic-1 { color: var(--ic-1); }
.palladio-numbered .palladio-icona-disegno .ic-2 { color: var(--ic-2); }
.palladio-numbered .palladio-icona-disegno .ic-3 { color: var(--ic-3); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .palladio-numbered .palladio-icona-badge::before, .palladio-numbered .palladio-icona-badge .palladio-icona-disegno { transition: scale .25s ease; }
  .palladio-numbered .palladio-numbered-card:hover .palladio-icona-badge::before,
  .palladio-numbered .palladio-numbered-card:hover .palladio-icona-badge .palladio-icona-disegno { scale: 1.04; }
}
/* "Scopri il corso": text link with an arrow, none for the external card (opens a new tab, 1.37.22). With the
   palladio-card-cta classes (1.36.0) it is the shared button instead (palladio-card-cta.css). */
.palladio-numbered .palladio-numbered-link { margin-top: 20px; font-weight: 600; }
/* The small card button (palladio-card-cta--sm, 40px) at 44px here (R-14): size and padding of the text stay small. */
.palladio-numbered .palladio-numbered-link.palladio-card-cta { --palladio-card-cta-height: 44px; }
.palladio-numbered .palladio-numbered-link:not(.palladio-card-cta) a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.palladio-numbered .palladio-numbered-link:not(.palladio-card-cta) a::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.palladio-numbered .palladio-numbered-link:not(.palladio-card-cta) a[target="_blank"]::after { content: none; }
/* Button on the bordeaux card: a cream fill (the bordeaux one would vanish), same gold hover; light gold ring. */
.palladio-numbered .palladio-numbered-card:nth-child(3n+2) .palladio-card-cta {
  --palladio-card-cta-bg: var(--wp--preset--color--palladio-cream, #faf7f2);
  --palladio-card-cta-fg: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  --palladio-card-cta-ring: var(--wp--preset--color--palladio-gold-light, #e6c98a);
}
/* Photo cards (1.37.48, page 57): with the class `palladio-card-foto` and an Image block as the first block, the photo
   fills the card under the shared veil (palladio-card-foto.css) and replaces the three surfaces. Everything is light,
   as on the bordeaux card. Extra veil only where the text is: a corner behind the number, a dark fill in the icon
   circle, and a low gradient from the top of the title to the bottom of the card (h3::before, clipped by the card),
   so the photo stays clear between icon and title. --palladio-card-velo-basso is its strength (contrast in the
   README). The order of the cards no longer changes their colors. */
.palladio-numbered .palladio-numbered-card.palladio-card-foto:has(> figure.wp-block-image:first-child img[src]) {
  --palladio-card-velo-basso: .5;
  --palladio-card-foto-velo: radial-gradient(ellipse 240px 200px at 0 0, color-mix(in srgb, var(--wp--preset--color--palladio-bordeaux-deep, #4a141b) 50%, transparent), transparent);
  --palladio-focus-text: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  --palladio-focus-fill: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  --palladio-focus-on-fill: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  color: var(--wp--preset--color--palladio-cream, #faf7f2);
  box-shadow: none;
}
.palladio-numbered .palladio-numbered-card.palladio-card-foto:has(> figure.wp-block-image:first-child img[src]) .palladio-card-cta {
  --palladio-card-cta-bg: var(--wp--preset--color--palladio-cream, #faf7f2);
  --palladio-card-cta-fg: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  --palladio-card-cta-ring: var(--wp--preset--color--palladio-gold-light, #e6c98a);
}
.palladio-numbered .palladio-numbered-card.palladio-card-foto:has(> figure.wp-block-image:first-child img[src]) .palladio-numbered-index::before {
  border-color: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  background: color-mix(in srgb, var(--wp--preset--color--palladio-bordeaux-deep, #4a141b) 72%, transparent);
}
.palladio-numbered .palladio-numbered-card.palladio-card-foto:has(> figure.wp-block-image:first-child img[src]) h3::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -28px -100vh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(74, 20, 27, 0), rgba(74, 20, 27, var(--palladio-card-velo-basso)) 40px);
}
@media (hover:hover) { .palladio-numbered .palladio-numbered-card:hover { transform: translateY(-4px); } }
@media (max-width:960px) {
  .palladio-numbered .palladio-numbered-layout { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .palladio-numbered .palladio-numbered-intro > p:not(.palladio-eyebrow) { max-width: 560px; }
  .palladio-numbered .palladio-numbered-card { flex-basis: clamp(260px,40vw,320px); }
}
@media (max-width:720px) {
  .palladio-numbered { padding-block: 60px 76px; }
  .palladio-numbered .palladio-controls { margin-top: 24px; }
  .palladio-numbered .palladio-numbered-card { flex-basis: 80%; min-height: 360px; padding: 24px; }
  /* 1.37.47: two px less above the title, so the course cards with three-line title and description (page 57,
     SAB and Operatore amministrativo) stay within the height set by card 008. */
  .palladio-numbered .palladio-numbered-card :is(h2,h3) { padding-top: 38px; }
}
/* One or two cards: they share the rail width instead of leaving it half empty (page 131). On a phone only a single
   card fills the row; two keep the 80% scrolling basis. */
@media (min-width:721px) {
  .palladio-numbered .palladio-rail:not(:has(> .palladio-numbered-card:nth-child(3))) > .palladio-numbered-card { flex: 1 1 0; }
}
.palladio-numbered .palladio-rail > .palladio-numbered-card:only-child { flex: 1 1 100%; }
/* Editor: cards in a grid, each block directly selectable (same approach as "Cosa offriamo"). */
.editor-styles-wrapper .palladio-numbered .palladio-rail { padding-inline: 2px; }
.editor-styles-wrapper .palladio-numbered .palladio-numbered-card { min-height: 360px; }
@media (prefers-reduced-motion:reduce) {
  .palladio-numbered .palladio-numbered-card, .palladio-numbered .palladio-numbered-card:hover { transform: none; transition: none; }
}