/* Regional course page (framework E, patterns/scheda-corso.php). Loaded only where the pattern is, and in the editor.
   Colors: direction A (README, "Regola dei colori"); bordeaux opening as on Docenti e ATA. Focus: palladio-focus.css of
   the child theme; the dark surfaces only set its three colors. Icons: classes, masks in includes/corsi-regionali.php. */
.palladio-corso {
  --pc-cream: var(--wp--preset--color--palladio-cream, #faf7f2);
  --pc-stone: var(--wp--preset--color--palladio-stone, #f1e9de);
  --pc-white: var(--wp--preset--color--base, #ffffff);
  --pc-ink: var(--wp--preset--color--palladio-ink-warm, #2a211c);
  --pc-secondary: var(--wp--preset--color--palladio-text-secondary, #5a4a3f);
  --pc-bordeaux: var(--wp--preset--color--palladio-bordeaux, #6b1d23);
  --pc-deep: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  --pc-red: var(--wp--preset--color--palladio-red, #a8342a);
  --pc-gold: var(--wp--preset--color--palladio-gold-light, #e6c98a);
  --pc-line: var(--wp--preset--color--palladio-line, #e7ded2);
  --pc-heading-font: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  --pc-heading-tracking: clamp(-.03em, calc(-.02em - (1em - 23.9px) * 2.4), -.02em);
  --pc-arrow-left: 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='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  --pc-gap: clamp(16px, 4vw, 32px);
  background: var(--pc-cream);
  color: var(--pc-ink);
  font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif);
  font-size: 1rem;
  line-height: 1.55;
}
.palladio-corso, .palladio-corso *, .palladio-corso *::before, .palladio-corso *::after { box-sizing: border-box; }
.palladio-corso.palladio-corso :where(h1,h2,h3,p,ul,.wp-block-group,.wp-block-buttons,.wp-block-button) { margin-block: 0; }
.palladio-corso :where(h1,h2,h3) { color: inherit; font-family: var(--pc-heading-font); font-weight: 700; line-height: 1.1; letter-spacing: var(--pc-heading-tracking); overflow-wrap: break-word; hyphens: auto; }
.palladio-corso [id] { scroll-margin-top: calc(var(--palladio-header-offset, 65px) + 16px); }
.palladio-corso .palladio-corso-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--pc-gap); }

/* Opening: bordeaux bar with the way back to the hub, the page title (Post Title, the only H1) and the CTA. */
.palladio-corso .palladio-corso-apertura {
  padding-block: 40px 48px; background: linear-gradient(145deg, var(--pc-bordeaux), var(--pc-deep)); color: var(--pc-cream);
  --palladio-focus-text: var(--pc-gold); --palladio-focus-fill: var(--pc-gold); --palladio-focus-on-fill: var(--pc-deep);
}
.palladio-corso .palladio-corso-indietro { font-size: .875rem; font-weight: 600; }
.palladio-corso .palladio-corso-indietro a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.palladio-corso .palladio-corso-indietro a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; mask: var(--pc-arrow-left) center / contain no-repeat; }
.palladio-corso .palladio-corso-indietro a:hover { text-decoration: underline; text-underline-offset: 5px; }
.palladio-corso .palladio-corso-eyebrow { margin-top: 20px; color: var(--pc-gold); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.palladio-corso.palladio-corso .palladio-corso-titolo { max-width: 860px; margin-top: 12px; font-size: clamp(1.875rem, 5.2vw, 3.25rem); hyphens: manual; }
.palladio-corso.palladio-corso .palladio-corso-azioni { margin-top: 28px; }
.palladio-corso .palladio-corso-button .wp-block-button__link { padding: 13px 20px; border-radius: 8px; background: var(--pc-cream); color: var(--pc-deep); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.palladio-corso .palladio-corso-button .wp-block-button__link:hover { background: var(--pc-white); color: var(--pc-deep); }

/* Body: one column of sections; the data box is a grid that falls to one column on phones. */
.palladio-corso .palladio-corso-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 56px 80px; }
.palladio-corso .palladio-corso-sezione { max-width: 760px; }
.palladio-corso .palladio-corso-sezione--dati { max-width: none; }
.palladio-corso .palladio-corso-sezione h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.palladio-corso.palladio-corso .palladio-corso-sezione > h2 + * { margin-top: 18px; }
.palladio-corso.palladio-corso .palladio-corso-sotto { margin-top: 28px; }
.palladio-corso .palladio-corso-sotto h3 { font-size: 1.25rem; }
.palladio-corso.palladio-corso .palladio-corso-sotto h3 + * { margin-top: 10px; }
.palladio-corso .palladio-corso-segnaposto { color: var(--pc-secondary); font-style: italic; }
.palladio-corso .palladio-corso-elenco { padding-left: 1.2em; }
.palladio-corso .palladio-corso-elenco li + li { margin-top: 6px; }
/* Consecutive paragraphs of a section (not the subsections, the cards or the data cells). */
.palladio-corso.palladio-corso .palladio-corso-sezione > p + p { margin-top: 12px; }
/* Line length (R-17): about 68 characters from tablets up, left aligned as before. */
@media (min-width: 768px) {
  .palladio-corso .palladio-corso-sezione > p { max-width: 68ch; }
}

/* "Domande frequenti": native Details blocks with the classes of Docenti e ATA (palladio-da-*), drawn here as white
   cards (border and radius of the data panel): bold question, red "+" that becomes "−" when open, answer below.
   Keyboard focus: the site underline (palladio-focus.css) plus a 2px ring around the question. */
.palladio-corso .palladio-da-info-list { display: grid; gap: 10px; }
.palladio-corso.palladio-corso .palladio-da-info-list > .palladio-da-details { margin: 0; }
.palladio-corso .palladio-da-details {
  --pc-plus: 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 5v14'/%3E%3C/svg%3E");
  --pc-minus: 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%3C/svg%3E");
  border: 1px solid var(--pc-line); border-radius: 18px; background: var(--pc-white);
}
.palladio-corso .palladio-da-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px;
  border-radius: 17px; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; transition: color .15s ease;
}
.palladio-corso .palladio-da-details > summary::-webkit-details-marker { display: none; }
.palladio-corso .palladio-da-details > summary::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--pc-red); mask: var(--pc-plus) center / contain no-repeat; }
.palladio-corso .palladio-da-details[open] > summary::after { mask-image: var(--pc-minus); }
.palladio-corso .palladio-da-details > summary:hover { color: var(--pc-bordeaux); }
.palladio-corso .palladio-da-details > summary:focus-visible { box-shadow: 0 0 0 2px var(--palladio-focus-text); }
.palladio-corso.palladio-corso .palladio-da-details > p { padding: 4px 20px 18px; color: var(--pc-secondary); }
@media (max-width: 720px) {
  .palladio-corso .palladio-da-details > summary { padding-inline: 16px; }
  .palladio-corso.palladio-corso .palladio-da-details > p { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .palladio-corso .palladio-da-details > summary { transition: none; }
}

/* "Dati del corso": one low white panel (border and radius of the hub cards), equal cells divided by thin lines: the
   1px gaps show the line color of the panel behind the white cells. Each cell is a row: cream circle with the icon on
   the left, label / value / detail on the right, vertically centered. One row on desktop (2–4 cells, content aligned
   left), two by two on tablets, one column of compact rows on phones. The H2 stays an H2, styled as an eyebrow. */
.palladio-corso .palladio-corso-sezione--dati h2 { color: var(--pc-secondary); font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif); font-size: .75rem; font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.palladio-corso.palladio-corso .palladio-corso-sezione--dati > h2 + * { margin-top: 14px; }
.palladio-corso .palladio-corso-dati {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; overflow: hidden;
  border: 1px solid var(--pc-line); border-radius: 22px; background: var(--pc-line);
}
.palladio-corso .palladio-corso-dato {
  --pc-cell-pad: 20px; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: center;
  min-width: 0; padding: 18px var(--pc-cell-pad); background: var(--pc-white);
}
.palladio-corso.palladio-corso .palladio-corso-dato > p { grid-column: 2; margin: 0; }
/* Lucide icon in red (::after) on a soft cream circle (::before), both centered on the cell's height. */
.palladio-corso .palladio-corso-dato::before { content: ""; grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pc-stone); }
.palladio-corso .palladio-corso-dato::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--pc-cell-pad) + 11px); width: 18px; height: 18px; transform: translateY(-50%);
  background: var(--pc-red); mask: var(--palladio-corso-icon) center / contain no-repeat;
}
.palladio-corso .palladio-corso-etichetta { overflow: hidden; color: var(--pc-secondary); font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.palladio-corso .palladio-corso-valore { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.palladio-corso.palladio-corso .palladio-corso-valore { margin-top: 2px; -webkit-line-clamp: 2; line-clamp: 2; font-family: var(--pc-heading-font); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.palladio-corso .palladio-corso-valore.palladio-corso-segnaposto { color: var(--pc-secondary); font-weight: 600; }
/* Detail at body size (R-15), never cut: the whole text shows, the cells of a row grow together. */
.palladio-corso.palladio-corso .palladio-corso-dettaglio { margin-top: 2px; color: var(--pc-secondary); font-size: 1rem; line-height: 1.35; }
/* Four cells in one row: tighter cell and an 18px value, so the values stay on one line. */
@media (min-width: 901px) {
  .palladio-corso .palladio-corso-dati:has(> :nth-child(4)) .palladio-corso-dato { --pc-cell-pad: 16px; column-gap: 12px; }
  .palladio-corso.palladio-corso .palladio-corso-dati:has(> :nth-child(4)) .palladio-corso-valore { font-size: 1.125rem; }
}
@media (max-width: 900px) {
  .palladio-corso .palladio-corso-dati { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three cells: the last one takes the whole row, so no empty slot shows the line color. */
  .palladio-corso .palladio-corso-dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .palladio-corso .palladio-corso-dati { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .palladio-corso .palladio-corso-dato { --pc-cell-pad: 16px; padding-block: 14px; }
}
/* Very narrow for the text (page zoomed on a phone, browser text at 150-200%): under 20em, narrower than any phone
   with the standard 16px, each cell is one column, icon above the text, and label, value and detail wrap in full
   instead of being cut. */
@media (max-width: 19.99em) {
  .palladio-corso .palladio-corso-dato { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 14px; }
  .palladio-corso .palladio-corso-dato::before { grid-row: auto; }
  .palladio-corso .palladio-corso-dato::after { top: 25px; transform: none; }
  .palladio-corso.palladio-corso .palladio-corso-dato > p { grid-column: 1; }
  .palladio-corso .palladio-corso-etichetta { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .palladio-corso.palladio-corso :is(.palladio-corso-valore, .palladio-corso-dettaglio) { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; overflow-wrap: anywhere; }
}

/* Closing: request for information, bordeaux band. */
.palladio-corso .palladio-corso-cta {
  padding: clamp(28px, 5vw, 48px); border-radius: 22px; background: linear-gradient(145deg, var(--pc-bordeaux), var(--pc-deep)); color: var(--pc-cream);
  --palladio-focus-text: var(--pc-gold); --palladio-focus-fill: var(--pc-gold); --palladio-focus-on-fill: var(--pc-deep);
}
.palladio-corso .palladio-corso-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.palladio-corso.palladio-corso .palladio-corso-cta p { max-width: 560px; margin-top: 12px; }
/* Light logo above the title, as on the Home card "Il prossimo passo?" (40px tall, 16px below, 34px on phones), and a
   gold speech bubble with rings in the bottom right corner (--pc-cta-disegno, cta_contatto_css() in
   includes/corsi-regionali.php). Both decorative pseudo-elements: no text, fixed sizes (no layout shift), the drawing
   behind the content (z-index -1 in the isolated band) and outside the text column, no pointer events. */
.palladio-corso .palladio-corso-cta { position: relative; isolation: isolate; }
.palladio-corso .palladio-corso-cta::before {
  content: ""; display: block; width: calc(40px * 350 / 182.8); height: 40px; margin-bottom: 16px;
  background: url("images/scuola-palladio-logo-chiaro.svg") left center / contain no-repeat;
}
.palladio-corso .palladio-corso-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--pc-gold); opacity: .16;
  mask: var(--pc-cta-disegno) right -90px bottom -150px / 440px 440px no-repeat;
}
@media (max-width: 1023px) {
  /* Narrower band, the text column would reach the rings: the drawing only in the corner beside the button (the
     button row is the last, 48px tall, at the bottom padding), smaller and cut by the band's edge. */
  .palladio-corso .palladio-corso-cta::after {
    inset: auto 0 0 auto; width: calc(100% - 248px); height: calc(clamp(28px, 5vw, 48px) + 64px);
    border-radius: 0; border-bottom-right-radius: inherit;
    mask-position: right -56px bottom -64px; mask-size: 210px 210px;
  }
}
@media (max-width: 760px) {
  .palladio-corso .palladio-corso-cta::before { width: calc(34px * 350 / 182.8); height: 34px; }
}

/* Per le aziende (includes/aziende-pagine.php): the same base, plus step cards and icon cards in wide sections.
   White cards with the border and radius of the data panel; auto-fit grid, one column on phones. */
.palladio-corso .palladio-corso-sezione--largo { max-width: none; }
.palladio-corso .palladio-corso-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.palladio-corso .palladio-corso-passo, .palladio-corso .palladio-corso-scheda {
  position: relative; min-width: 0; padding: 24px; border: 1px solid var(--pc-line); border-radius: 22px; background: var(--pc-white);
}
.palladio-corso .palladio-corso-passo h3, .palladio-corso .palladio-corso-scheda h3 { font-size: 1.1875rem; }
.palladio-corso.palladio-corso :is(.palladio-corso-passo, .palladio-corso-scheda) h3 + p { margin-top: 8px; }
.palladio-corso .palladio-corso-passo-numero { color: var(--pc-red); font-family: var(--pc-heading-font); font-size: .9375rem; font-weight: 700; letter-spacing: .04em; }
.palladio-corso.palladio-corso .palladio-corso-passo-numero + h3 { margin-top: 14px; }
/* Icon card: cream circle (::before) and red icon (::after) above the title, as in the data cells. */
.palladio-corso .palladio-corso-scheda::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--pc-stone); }
.palladio-corso .palladio-corso-scheda::after {
  content: ""; position: absolute; top: 37px; left: 37px; width: 18px; height: 18px;
  background: var(--pc-red); mask: var(--palladio-corso-icon) center / contain no-repeat;
}
@media (max-width: 720px) {
  .palladio-corso .palladio-corso-passo, .palladio-corso .palladio-corso-scheda { padding: 20px; border-radius: 18px; }
  .palladio-corso .palladio-corso-scheda::after { top: 33px; left: 33px; }
}
/* Page 131 (Formazione finanziata): help cards and steps in one column below 768px (the auto-fit grid keeps two
   down to about 500px). */
@media (max-width: 767px) {
  body.page-id-131 .palladio-corso .palladio-corso-griglia { grid-template-columns: minmax(0, 1fr); }
}

/* Specializzazioni (includes/specializzazioni.php): level cards reuse the step card; the category hub closes with the
   request band right after the card carousel, so that band drops the top padding of the body. */
.palladio-corso.palladio-corso .palladio-corso-livello p + p { margin-top: 4px; }
.palladio-corso--chiusura .palladio-corso-corpo { padding-top: 0; }
/* The three hub groups sit edge to edge: no block gap (white strip) between them. */
.palladio-corso + .palladio-numbered.palladio-numbered, .palladio-numbered + .palladio-corso--chiusura.palladio-corso--chiusura { margin-block-start: 0; }
/* Text section on Specializzazioni (51, 28/10/2026): a course page section (H2 and paragraphs, 760px) between the deck and
   «Corsi in tendenza», edge to edge with both, its text aligned with the «Corsi in tendenza» title (1180px wrap), with
   room under its last line (72px at 1440, 40px on phones). */
.palladio-corso--testo.palladio-corso--testo { margin-block: 0; }
.palladio-corso--testo .palladio-corso-wrap { max-width: calc(1180px + 2 * var(--pc-gap)); }
.palladio-corso--testo .palladio-corso-corpo { padding-bottom: clamp(40px, 5vw, 72px); }
.palladio-corso--testo .palladio-corso-sezione h2 { hyphens: manual; }

/* Opening image (apertura_media(), includes/corsi-regionali.php): a 3:2 Image block in the "palladio-hero-media" group.
   With an image: two columns from 768px (image about 39% wide, up to 520px, centered on the text), below it on
   phones (container width, up to 560px). Without one the group is hidden and a faint portico sits bottom right. */
.palladio-corso .palladio-corso-apertura { position: relative; isolation: isolate; overflow: hidden; }
/* Always visible: without an image, a slightly lighter 3:2 box with the portico in the middle. */
.palladio-corso .palladio-hero-media {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(255, 255, 255, .07);
}
.palladio-corso .palladio-hero-media:not(:has(img[src]))::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 35%; aspect-ratio: 360 / 124;
  background: var(--pc-cream); opacity: .3; mask: var(--palladio-hero-portico) center / contain no-repeat;
}
.palladio-corso .palladio-hero-media:has(img[src]) { border: 0; background: none; }
.palladio-corso.palladio-corso .palladio-hero-media .wp-block-image { margin: 0; }
.palladio-corso .palladio-hero-media img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px;
}
.palladio-corso .palladio-corso-apertura:not(:has(.palladio-hero-media))::after {
  content: ""; position: absolute; z-index: -1; right: -48px; bottom: -14px; width: min(520px, 62vw); aspect-ratio: 360 / 124;
  background: var(--pc-cream); opacity: .14; mask: var(--palladio-hero-portico) center / contain no-repeat; pointer-events: none;
}
@media (min-width: 768px) {
  /* Two flexible rows around the four text rows: a taller image centers the text instead of spreading it. */
  .palladio-corso .palladio-corso-apertura .palladio-corso-wrap:has(> .palladio-hero-media) {
    display: grid; grid-template-columns: minmax(0, 1fr) min(36%, 520px); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 48px;
  }
  .palladio-corso .palladio-corso-wrap:has(> .palladio-hero-media) > :not(.palladio-hero-media) { grid-column: 1; }
  .palladio-corso .palladio-corso-wrap:has(> .palladio-hero-media) > :nth-child(1) { grid-row: 2; }
  .palladio-corso .palladio-corso-wrap:has(> .palladio-hero-media) > :nth-child(2) { grid-row: 3; }
  .palladio-corso .palladio-corso-wrap:has(> .palladio-hero-media) > :nth-child(3) { grid-row: 4; }
  .palladio-corso .palladio-corso-wrap:has(> .palladio-hero-media) > :nth-child(4) { grid-row: 5; }
  .palladio-corso .palladio-corso-wrap > .palladio-hero-media { grid-column: 2; grid-row: 1 / -1; align-self: center; }
}
@media (min-width: 900px) {
  .palladio-corso .palladio-corso-apertura .palladio-corso-wrap:has(> .palladio-hero-media) { grid-template-columns: minmax(0, 1fr) min(39%, 520px); column-gap: 56px; }
}
@media (max-width: 767px) {
  .palladio-corso.palladio-corso .palladio-hero-media { max-width: 560px; margin-top: 28px; }
}

/* Carousel (1.23.0): the slot group with the class `palladio-car` and two or three Image blocks. Three frames turn
   in a circle (center, left, behind, right) inside the slot, which clips them: nothing reaches the title. CSS only;
   paused on hover and keyboard focus; still and on the first image with reduced motion. In the editor the images are
   shown side by side so each one can be replaced. */
/* With photos turning, no box: the frames sit free on the bordeaux; the slot only clips (overflow stays hidden). */
.palladio-corso .palladio-hero-media.palladio-car:has(> .wp-block-image + .wp-block-image):has(img[src]) { border: 0; border-radius: 0; background: none; }
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image img { box-shadow: 0 14px 32px rgba(0, 0, 0, .28); }
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) { perspective: 900px; }
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image {
  position: absolute; top: 17%; left: 17%; width: 66%; aspect-ratio: 3 / 2;
  --palladio-car-passo: 2.5s; /* 1.37.42: time per photo (still + turn); was 3s, 9s per round */
  animation: palladio-giro calc(3 * var(--palladio-car-passo)) ease-in-out infinite;
}
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image img { height: 100%; }
/* Same selector as the animation shorthand above (the :has() counts), or the shorthand resets the delays. */
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image:nth-of-type(2) { animation-delay: calc(-2 * var(--palladio-car-passo)); }
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image:nth-of-type(3) { animation-delay: calc(-1 * var(--palladio-car-passo)); }
.palladio-corso .palladio-car:is(:hover, :focus-within):has(> .wp-block-image + .wp-block-image) > .wp-block-image { animation-play-state: paused; }
/* Pause toggle (palladio-patterns.js, base style in palladio-patterns.css): bottom right corner of the slot, above the
   photos, which at most touch it with the corner of a side frame. Opaque cream with a deep bordeaux edge and icon and a
   soft shadow, so it reads on the bordeaux and on any photo. */
.palladio-corso .palladio-car.is-paused:has(> .wp-block-image + .wp-block-image) > .wp-block-image { animation-play-state: paused; }
.palladio-corso .palladio-car > .palladio-pausa { position: absolute; right: 8px; bottom: 8px; z-index: 5; border-color: var(--pc-deep); background: var(--pc-cream); color: var(--pc-deep); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.palladio-corso .palladio-car > .palladio-pausa:hover { background: var(--pc-white); color: var(--pc-deep); }
/* Veil (1.37.43): a light bordeaux tint plus a bottom-third gradient evens out photos from different sources. On the
   turning figure (an img takes no ::after), same box and radius as the image, so it turns with the photo. */
.palladio-corso .palladio-car { --palladio-car-velo: .07; --palladio-car-velo-basso: .14; }
.palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image:has(img[src])::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(74, 20, 27, 0) 66.67%, rgba(74, 20, 27, var(--palladio-car-velo-basso)) 100%), rgba(74, 20, 27, var(--palladio-car-velo));
}
@keyframes palladio-giro {
  0%, 28%, 100% { transform: translateX(0) rotateY(0) scale(1); opacity: 1; z-index: 3; }
  33%, 56% { transform: translateX(-34%) rotateY(32deg) scale(.72); opacity: .85; z-index: 2; }
  61% { transform: translateX(0) translateZ(-140px) scale(.55); opacity: 0; z-index: 1; }
  66%, 94% { transform: translateX(34%) rotateY(-32deg) scale(.72); opacity: .85; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image { position: static; width: auto; animation: none; }
  .palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image ~ .wp-block-image { display: none; }
}
.editor-styles-wrapper .palladio-corso .palladio-hero-media.palladio-car { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; aspect-ratio: auto; }
.editor-styles-wrapper .palladio-corso .palladio-car:has(> .wp-block-image + .wp-block-image) > .wp-block-image { position: static; width: auto; animation: none; }

/* Opening graphics (1.37.53, hero_icone_css() in includes/corsi-regionali.php): seven field icons on the bar of the
   pages with `palladio-hero-ambito-<field>`, in the aria-hidden `.palladio-hero-icone` box the plugin adds. Dark
   bordeaux, tone on tone, behind the text and the carousel; static. Color and opacity only here; the opacity never
   goes above .7 (each icon takes a share of it). Each span n reads its place from --palladio-hero-n-x (left edge,
   from the middle of the bar, in px of the 1120px container), -y (top), -s (size, same px), -r (turn) and -o (share
   of the opacity): defaults below, a field class can override any of them. Placed with translate, not top: when the
   bar grows (title font loading) the icons at the bottom follow it without counting as a layout shift. The large ones leave the bar at the
   corners and at the bottom; none reaches the way back, the eyebrow, the title box, the button or the carousel slot.
   From 1120px down the drawing shrinks with the container; under 768px only three small ones stay. */
.palladio-corso .palladio-hero-icone {
  --palladio-hero-icone-colore: #2c0a0f;
  --palladio-hero-icone-opacita: .7;
  --palladio-hero-u: min(1px, 100cqw / 1120);
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size;
  margin: 0; /* the bar is a flow layout: its 1.2rem gap would move the box down */
}
.palladio-corso .palladio-corso-apertura {
  --palladio-hero-1-x: 585; --palladio-hero-1-y: -46px; --palladio-hero-1-s: 200; --palladio-hero-1-r: -12deg; --palladio-hero-1-o: .6;
  --palladio-hero-2-x: 590; --palladio-hero-2-y: calc(100cqh - 70px); --palladio-hero-2-s: 110; --palladio-hero-2-r: 18deg; --palladio-hero-2-o: .8;
  --palladio-hero-3-x: 72; --palladio-hero-3-y: 30cqh; --palladio-hero-3-s: 34; --palladio-hero-3-r: -8deg; --palladio-hero-3-o: 1;
  --palladio-hero-4-x: 86; --palladio-hero-4-y: calc(100cqh - 118px); --palladio-hero-4-s: 24; --palladio-hero-4-r: 14deg; --palladio-hero-4-o: .9;
  --palladio-hero-5-x: -775; --palladio-hero-5-y: calc(100cqh - 150px); --palladio-hero-5-s: 210; --palladio-hero-5-r: 10deg; --palladio-hero-5-o: .6;
  --palladio-hero-6-x: -250; --palladio-hero-6-y: -18px; --palladio-hero-6-s: 64; --palladio-hero-6-r: 22deg; --palladio-hero-6-o: .85;
  --palladio-hero-7-x: -260; --palladio-hero-7-y: calc(100cqh - 90px); --palladio-hero-7-s: 130; --palladio-hero-7-r: -16deg; --palladio-hero-7-o: .7;
}
.palladio-corso .palladio-hero-icone > span {
  position: absolute; top: 0; left: calc(50cqw + var(--x) * var(--palladio-hero-u)); translate: 0 var(--y);
  width: calc(var(--s) * var(--palladio-hero-u)); aspect-ratio: 1; rotate: var(--r);
  background: var(--palladio-hero-icone-colore); opacity: calc(min(.7, var(--palladio-hero-icone-opacita)) * var(--o));
  mask: var(--i) center / contain no-repeat;
}
.palladio-corso .palladio-hero-icone > :nth-child(1) { --x: var(--palladio-hero-1-x); --y: var(--palladio-hero-1-y); --s: var(--palladio-hero-1-s); --r: var(--palladio-hero-1-r); --o: var(--palladio-hero-1-o); --i: var(--palladio-hero-icona-1); }
.palladio-corso .palladio-hero-icone > :nth-child(2) { --x: var(--palladio-hero-2-x); --y: var(--palladio-hero-2-y); --s: var(--palladio-hero-2-s); --r: var(--palladio-hero-2-r); --o: var(--palladio-hero-2-o); --i: var(--palladio-hero-icona-2); }
.palladio-corso .palladio-hero-icone > :nth-child(3) { --x: var(--palladio-hero-3-x); --y: var(--palladio-hero-3-y); --s: var(--palladio-hero-3-s); --r: var(--palladio-hero-3-r); --o: var(--palladio-hero-3-o); --i: var(--palladio-hero-icona-3); }
.palladio-corso .palladio-hero-icone > :nth-child(4) { --x: var(--palladio-hero-4-x); --y: var(--palladio-hero-4-y); --s: var(--palladio-hero-4-s); --r: var(--palladio-hero-4-r); --o: var(--palladio-hero-4-o); --i: var(--palladio-hero-icona-4); }
.palladio-corso .palladio-hero-icone > :nth-child(5) { --x: var(--palladio-hero-5-x); --y: var(--palladio-hero-5-y); --s: var(--palladio-hero-5-s); --r: var(--palladio-hero-5-r); --o: var(--palladio-hero-5-o); --i: var(--palladio-hero-icona-5); }
.palladio-corso .palladio-hero-icone > :nth-child(6) { --x: var(--palladio-hero-6-x); --y: var(--palladio-hero-6-y); --s: var(--palladio-hero-6-s); --r: var(--palladio-hero-6-r); --o: var(--palladio-hero-6-o); --i: var(--palladio-hero-icona-6); }
.palladio-corso .palladio-hero-icone > :nth-child(7) { --x: var(--palladio-hero-7-x); --y: var(--palladio-hero-7-y); --s: var(--palladio-hero-7-s); --r: var(--palladio-hero-7-r); --o: var(--palladio-hero-7-o); --i: var(--palladio-hero-icona-7); }
/* Soft light behind the carousel, on the box itself (it never moves): centered on the carousel column of the opening
   grid (36% / 39% of the container, up to 520px; vertically the middle of the padded bar). */
@media (min-width: 768px) {
  .palladio-corso .palladio-hero-icone {
    --palladio-hero-col: min(.36 * (min(100%, 1120px) - 2 * var(--pc-gap)), 520px);
    --palladio-hero-col-vw: min(.36 * (min(100vw, 1120px) - 2 * var(--pc-gap)), 520px); /* radius: Chrome takes no % in min() there */
    background: radial-gradient(calc(var(--palladio-hero-col-vw) * .72) clamp(150px, 16vw, 230px) at calc(50% + min(100%, 1120px) / 2 - var(--pc-gap) - var(--palladio-hero-col) / 2) calc(50% - 4px), rgb(250 247 242 / .08), rgb(250 247 242 / 0)) no-repeat;
  }
}
@media (min-width: 900px) {
  .palladio-corso .palladio-hero-icone {
    --palladio-hero-col: min(.39 * (min(100%, 1120px) - 2 * var(--pc-gap)), 520px);
    --palladio-hero-col-vw: min(.39 * (min(100vw, 1120px) - 2 * var(--pc-gap)), 520px);
  }
}
/* Narrow tablets: the text column is too tight for the ones by the carousel and under the title. */
@media (min-width: 768px) and (max-width: 899px) {
  .palladio-corso .palladio-hero-icone > :is(:nth-child(3), :nth-child(4), :nth-child(7)) { display: none; }
}
/* Phones: three small ones, top right, beside the button and in the bottom padding on the left; none on the photos. */
@media (max-width: 767px) {
  .palladio-corso .palladio-corso-apertura {
    --palladio-hero-1-x: 120; --palladio-hero-1-y: -22px; --palladio-hero-1-s: 76;
    --palladio-hero-3-x: 70; --palladio-hero-3-s: 34;
    --palladio-hero-3-y: calc(100cqh - 48px - min(100cqw - 2 * var(--pc-gap), 560px) * 2 / 3 - 28px - 24.5px - 17px);
    --palladio-hero-7-x: -175; --palladio-hero-7-y: calc(100cqh - 30px); --palladio-hero-7-s: 56; --palladio-hero-7-r: 12deg;
  }
  .palladio-corso .palladio-hero-icone { --palladio-hero-u: 1px; }
  .palladio-corso .palladio-hero-icone > :is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6)) { display: none; }
}
/* Educational field (page 70): mirrored layout, the large ones top left (pictograms) and bottom right, the medium ones
   above the eyebrow line and under the title, the small ones by the carousel, top right and in the left margin. */
.palladio-corso .palladio-hero-ambito-educativo {
  --palladio-hero-1-x: -800; --palladio-hero-1-y: -70px; --palladio-hero-1-s: 200; --palladio-hero-1-r: 14deg; --palladio-hero-1-o: .6;
  --palladio-hero-2-x: -90; --palladio-hero-2-y: -34px; --palladio-hero-2-s: 96; --palladio-hero-2-r: -18deg; --palladio-hero-2-o: .8;
  --palladio-hero-3-x: 78; --palladio-hero-3-y: 68cqh; --palladio-hero-3-s: 30; --palladio-hero-3-r: 10deg; --palladio-hero-3-o: 1;
  --palladio-hero-4-x: 570; --palladio-hero-4-y: 22px; --palladio-hero-4-s: 44; --palladio-hero-4-r: -10deg; --palladio-hero-4-o: .9;
  --palladio-hero-5-x: 560; --palladio-hero-5-y: calc(100cqh - 120px); --palladio-hero-5-s: 210; --palladio-hero-5-r: -8deg; --palladio-hero-5-o: .6;
  --palladio-hero-6-x: -690; --palladio-hero-6-y: 58cqh; --palladio-hero-6-s: 40; --palladio-hero-6-r: 16deg; --palladio-hero-6-o: .85;
  --palladio-hero-7-x: -110; --palladio-hero-7-y: calc(100cqh - 64px); --palladio-hero-7-s: 92; --palladio-hero-7-r: 12deg; --palladio-hero-7-o: .7;
}
@media (max-width: 767px) {
  .palladio-corso .palladio-hero-ambito-educativo {
    --palladio-hero-1-x: 30; --palladio-hero-1-y: 12px; --palladio-hero-1-s: 42;
    --palladio-hero-3-x: 120; --palladio-hero-3-s: 30; /* beside the button, as in the default */
    --palladio-hero-3-y: calc(100cqh - 48px - min(100cqw - 2 * var(--pc-gap), 560px) * 2 / 3 - 28px - 24.5px - 15px);
    --palladio-hero-7-x: 100; --palladio-hero-7-y: calc(100cqh - 34px); --palladio-hero-7-s: 64; --palladio-hero-7-r: -12deg;
  }
}

/* Language course pages (1.25.0, az_apertura() with a flag): the flag of the language fills the whole bar, under a
   bordeaux veil from the left (.88 → .35, stronger on phones) that keeps the white title and the button readable.
   Flags drawn with gradients or an inline SVG (official colors, outside the palette by nature); nothing to upload.
   Spain without the coat of arms (civil flag). Cover crop, centered, at every width. */
.palladio-corso .palladio-corso-apertura.palladio-flag {
  --pc-flag-veil: linear-gradient(90deg, rgb(107 29 35 / .88), rgb(107 29 35 / .35));
  display: flex; align-items: center; min-height: clamp(210px, 18vw, 260px);
  background: var(--pc-flag-veil), var(--pc-flag) center / cover no-repeat;
}
.palladio-corso .palladio-corso-apertura.palladio-flag::after { content: none; }
.palladio-corso .palladio-flag-it { --pc-flag: linear-gradient(90deg, #009246 0 33.34%, #ffffff 0 66.67%, #ce2b37 0); }
.palladio-corso .palladio-flag-fr { --pc-flag: linear-gradient(90deg, #002395 0 33.34%, #ffffff 0 66.67%, #ed2939 0); }
.palladio-corso .palladio-flag-de { --pc-flag: linear-gradient(180deg, #000000 0 33.34%, #dd0000 0 66.67%, #ffce00 0); }
.palladio-corso .palladio-flag-ru { --pc-flag: linear-gradient(180deg, #ffffff 0 33.34%, #0039a6 0 66.67%, #d52b1e 0); }
.palladio-corso .palladio-flag-es { --pc-flag: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 0 75%, #aa151b 0); }
.palladio-corso .palladio-flag-en {
  --pc-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0h60v30H0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23c8102e' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23c8102e' stroke-width='6'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .palladio-corso .palladio-corso-apertura.palladio-flag { --pc-flag-veil: linear-gradient(90deg, rgb(107 29 35 / .9), rgb(107 29 35 / .62)); }
}

/* Language hub (page 75): the greeting of each language above the card title. */
.palladio-numbered .palladio-lingua-saluto { margin: 0; color: var(--wp--preset--color--palladio-red, #a8342a); font-family: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
.palladio-numbered .palladio-numbered-card:nth-child(3n+2) .palladio-lingua-saluto { color: var(--wp--preset--color--palladio-gold-light, #e6c98a); }
/* Language hub (page 75, 20/10/2026): round flag of the language in place of the book circle, same place and size
   (56px, under the number), with the thin ring of the circle it replaces: red on the light cards, light gold on the
   bordeaux one. The flag is inline SVG added to the index paragraph (palladio-bandiera-<code>, specializzazioni.php). */
.palladio-numbered .palladio-numbered-index[class*="palladio-bandiera-"] { position: relative; padding-bottom: 84px; }
.palladio-numbered .palladio-numbered-index .palladio-bandiera { position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 56px; height: 56px; padding: 3px; 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 .palladio-bandiera { border-color: var(--wp--preset--color--palladio-gold-light, #e6c98a); }
.palladio-numbered .palladio-numbered-index .palladio-bandiera svg { display: block; width: 100%; height: 100%; }

/* Study graphics on the opening of page 75 (palladio-hero-lingue): five greeting bubbles, a dashed globe and an open
   book, cream and light gold, faint, in the free band between the text and the carousel (none reaches the way back,
   the title, the button or the photos). Same frame as the field icons: aria-hidden box behind the content, places from
   the middle of the bar in px of the 1120px container (--x) and from its top (--y), set with translate (no layout
   shift); from 1120px down they shrink with the container. Phones: two bubbles beside the title and the button and a
   small globe at the top right; the rest is hidden. */
.palladio-corso .palladio-hero-lingue-grafiche {
  --phl-u: min(1px, 100cqw / 1120);
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size;
  margin: 0; /* the bar is a flow layout: its 1.2rem gap would move the box down */
  color: var(--wp--preset--color--palladio-cream, #faf7f2);
}
.palladio-corso .palladio-hero-lingue-grafiche > * { position: absolute; top: 0; left: calc(50cqw + var(--x) * var(--phl-u)); translate: 0 var(--y); rotate: var(--r, 0deg); }
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto {
  padding: calc(7 * var(--phl-u)) calc(14 * var(--phl-u));
  border: 1px solid rgb(230 201 138 / .5); border-radius: calc(16 * var(--phl-u)) calc(16 * var(--phl-u)) calc(16 * var(--phl-u)) calc(4 * var(--phl-u));
  background: rgb(250 247 242 / .06); color: rgb(250 247 242 / .62);
  font-family: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: calc(17 * var(--phl-u)); font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-1 { --x: -290; --y: 34px; --r: -4deg; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-2 { --x: -55; --y: 28px; --r: 3deg; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-3 { --x: -275; --y: 263px; --r: 3deg; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-4 { --x: -30; --y: 198px; --r: -3deg; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-5 { --x: -170; --y: 238px; --r: 2deg; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-globo { --x: -225; --y: 73px; width: calc(150 * var(--phl-u)); height: auto; aspect-ratio: 1; stroke-width: .2; stroke-dasharray: .6 .7; opacity: .3; }
.palladio-corso .palladio-hero-lingue-grafiche .phl-libro { --x: -70; --y: 253px; --r: -6deg; width: calc(96 * var(--phl-u)); height: auto; aspect-ratio: 1; stroke-width: .3; color: var(--wp--preset--color--palladio-gold-light, #e6c98a); opacity: .45; }
@media (min-width: 768px) and (max-width: 899px) {
  .palladio-corso .palladio-hero-lingue-grafiche :is(.phl-fumetto-1, .phl-fumetto-3, .phl-fumetto-4, .phl-libro) { display: none; }
}
@media (max-width: 767px) {
  .palladio-corso .palladio-hero-lingue-grafiche { --phl-u: 1px; }
  .palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto { font-size: 14px; padding: 6px 11px; }
  .palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-1 { --x: 40; --y: 136px; }
  .palladio-corso .palladio-hero-lingue-grafiche .phl-fumetto-5 { --x: 75; --y: 204px; }
  .palladio-corso .palladio-hero-lingue-grafiche .phl-globo { --x: 105; --y: 34px; width: 64px; }
  .palladio-corso .palladio-hero-lingue-grafiche :is(.phl-fumetto-2, .phl-fumetto-3, .phl-fumetto-4, .phl-libro) { display: none; }
}
@media (max-width: 359px) {
  .palladio-corso .palladio-hero-lingue-grafiche .phl-globo { --x: 86; }
}

/* Grafica e Marketing hub (page 82, palladio-hero-grafica): faint symbols in the free band between the text and the
   carousel — pen tool, curve with anchors, cursor, rising bars, layers and a pixel grid (specializzazioni.php), cream
   and light gold. Same frame as palladio-hero-lingue-grafiche: places from the middle of the bar in px of the 1120px
   container (--x) and from its top (--y), set with translate (no layout shift); they shrink with the container below
   1120px. The title is longer than «Lingue»: the symbols stay above it and beside the button. Six from 1100px, the
   pen and the cursor from 768px, three on phones (pen, cursor, bars), two below 360px. */
.palladio-corso .palladio-hero-grafica-elementi {
  --phg-u: min(1px, 100cqw / 1120);
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size;
  margin: 0; /* the bar is a flow layout: its 1.2rem gap would move the box down */
  color: var(--wp--preset--color--palladio-cream, #faf7f2);
}
.palladio-corso .palladio-hero-grafica-elementi > * { position: absolute; top: 0; left: calc(50cqw + var(--x) * var(--phg-u)); translate: 0 var(--y); rotate: var(--r, 0deg); width: calc(var(--s) * var(--phg-u)); height: auto; aspect-ratio: 1; opacity: var(--o, .32); stroke-width: var(--w, 1); }
.palladio-corso .palladio-hero-grafica-elementi .phg-penna { --x: -40; --y: 24px; --s: 64; --r: -8deg; --w: .7; --o: .5; color: var(--wp--preset--color--palladio-gold-light, #e6c98a); }
.palladio-corso .palladio-hero-grafica-elementi .phg-curva { --x: -270; --y: 28px; --s: 56; --w: .6; }
.palladio-corso .palladio-hero-grafica-elementi .phg-cursore { --x: -175; --y: 230px; --s: 34; --r: -10deg; --w: 1.1; --o: .45; }
.palladio-corso .palladio-hero-grafica-elementi .phg-barre { --x: -120; --y: 262px; --s: 70; --w: .7; }
.palladio-corso .palladio-hero-grafica-elementi .phg-livelli { --x: -10; --y: 236px; --s: 72; --r: 6deg; --w: .55; --o: .3; }
.palladio-corso .palladio-hero-grafica-elementi .phg-pixel { --x: -300; --y: 300px; --s: 40; --o: .4; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--phg-u)); }
.palladio-corso .palladio-hero-grafica-elementi .phg-pixel i { aspect-ratio: 1; border: 1px solid rgb(250 247 242 / .7); }
.palladio-corso .palladio-hero-grafica-elementi .phg-pixel i:nth-child(odd) { border-color: transparent; background: rgb(230 201 138 / .55); }
@media (min-width: 768px) and (max-width: 1099px) {
  .palladio-corso .palladio-hero-grafica-elementi :is(.phg-curva, .phg-barre, .phg-livelli, .phg-pixel) { display: none; }
}
@media (max-width: 767px) {
  .palladio-corso .palladio-hero-grafica-elementi { --phg-u: 1px; }
  .palladio-corso .palladio-hero-grafica-elementi .phg-penna { --x: 110; --y: 40px; --s: 52; }
  .palladio-corso .palladio-hero-grafica-elementi .phg-cursore { --x: 60; --y: 206px; --s: 28; }
  .palladio-corso .palladio-hero-grafica-elementi .phg-barre { --x: 120; --y: 198px; --s: 50; }
  .palladio-corso .palladio-hero-grafica-elementi :is(.phg-curva, .phg-livelli, .phg-pixel) { display: none; }
}
@media (max-width: 359px) {
  .palladio-corso .palladio-hero-grafica-elementi .phg-penna { --x: 100; --s: 44; }
  .palladio-corso .palladio-hero-grafica-elementi .phg-barre { display: none; }
}

/* Cambridge preparation centre (page 76, «Preparazione all'esame», 28/10/2026): stone band with the Cambridge mark,
   unmodified (no filter), on a white rounded tile 112px tall (96px under 560px), and one visible line of text.
   The image keeps its 1787:959 ratio from its own width/height attributes. */
.palladio-corso.palladio-corso .palladio-corso-cambridge { display: flex; align-items: center; gap: 24px; margin-top: 20px; padding: 20px; border: 1px solid var(--pc-line); border-radius: 22px; background: var(--pc-stone); }
.palladio-corso.palladio-corso .pcc-logo { flex: none; margin: 0; padding: 12px; border-radius: 16px; background: var(--pc-white); }
.palladio-corso .pcc-logo img { display: block; width: auto; height: 88px; }
.palladio-corso .palladio-corso-cambridge .pcc-testo { color: var(--pc-ink); font-family: var(--pc-heading-font); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }
@media (max-width: 560px) {
  .palladio-corso.palladio-corso .palladio-corso-cambridge { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 18px; }
  .palladio-corso .pcc-logo img { height: 72px; }
  .palladio-corso .palladio-corso-cambridge .pcc-testo { font-size: 1.0625rem; }
}