/* Workshop block (palladio/workshop, includes/workshop-blocco.php): the workshops to come from the Google calendar as
   cards. Built on the area cards of palladio-workshop.css (pws-carta: image as the shape, gold label, text on the
   section background; hover lift) and on palladio-card-cta.css, both loaded with this file. Here: the grid (three
   columns from 1024px, two from 768px, one below), the card text, the round area badge (the one of the Aziende pages,
   as in palladio-numbered.css: gradient --ib-1/--ib-2, shadow --ib-ombra, drawing tones --ic-1/2/3 set on the card),
   the drawing that stands in for a photo, the "Vedi tutti" link, the empty state box and the filter of the generic calendar. No entrance animation (the
   timed one of palladio-workshop.js belongs to .pws-carte), so nothing waits for a script. */
.pwb { display: grid; gap: 32px; }
.pwb .pwb-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.pwb .pwb-carta { grid-template-rows: auto 1fr; gap: 18px; }

/* Image: the library photo covers the placeholder (no mask icon); without a photo, the area drawing on its gradient. */
.pwb .pwb-carta .pws-visual::after { content: none; }
.pwb .pws-visual .pwb-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pwb .pwb-visual--disegno { background: linear-gradient(135deg, var(--ib-1), var(--ib-2)); }
.pwb .pwb-disegno { position: absolute; inset: 0; display: grid; place-items: center; }
.pwb .pwb-disegno .palladio-icona-disegno { width: 112px; height: 112px; }
.pwb .palladio-icona-disegno .ic-1 { color: var(--ic-1); }
.pwb .palladio-icona-disegno .ic-2 { color: var(--ic-2); }
.pwb .palladio-icona-disegno .ic-3 { color: var(--ic-3); }
.pwb .pwb-badge {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ib-1), var(--ib-2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ib-ombra) 35%, transparent);
}
.pwb .pwb-badge .palladio-icona-disegno { width: 28px; height: 28px; }
.pwb .pws-visual .pwb-badge { position: absolute; right: 18px; bottom: 18px; z-index: 2; }

/* Text: date, time and length, title, place, seats, short description, button at the bottom of the card. */
.pwb .pwb-carta .pws-testo { display: flex; flex-direction: column; gap: 10px; }
.pwb.pwb .pwb-quando { display: grid; gap: 2px; }
.pwb .pwb-quando time { color: var(--pws-red); font-size: 1rem; font-weight: 700; }
.pwb .pwb-orario { color: var(--pws-secondary); font-size: .9rem; }
.pwb.pwb .pwb-info { display: flex; gap: 8px; align-items: flex-start; color: var(--pws-secondary); font-size: 1rem; line-height: 1.45; }
.pwb .pwb-info svg { flex: none; width: 18px; height: 18px; color: var(--pws-red); }
.pwb.pwb .pwb-descrizione { color: var(--pws-secondary); font-size: 1rem; line-height: 1.55; }
.pwb.pwb .pwb-carta .pws-testo > .palladio-card-cta { margin-top: auto; padding-top: 8px; }

/* "Vedi tutti i workshop": the text link with an arrow of the area cards. */
.pwb.pwb .pwb-tutti { margin: 0; font-size: .95rem; font-weight: 700; }
.pwb .pwb-tutti a { color: var(--pws-red); text-decoration: none; }
.pwb .pwb-tutti a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pwb .pwb-tutti a::after { content: "→" / ""; display: inline-block; margin-left: .4em; }

/* No workshop to come: one white box, as the "Workshop o corso?" cards of page 61. */
.pwb .pwb-vuoto {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 24px; align-items: center;
  padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--pws-white);
  box-shadow: var(--pl-card-shadow-wide, 0 18px 40px -16px rgba(74, 20, 27, .22));
}
.pwb .pwb-vuoto-testo { display: grid; gap: 6px; }
.pwb.pwb .pwb-vuoto :where(h3, p) { margin: 0; }
.pwb .pwb-vuoto h3 { color: var(--pws-ink); font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.pwb.pwb .pwb-vuoto-testo p { color: var(--pws-secondary); }

/* Generic calendar (fonte "tutti", page 63): the filter by type as pill links (the current one bordeaux, as the choices
   of palladio-calendario.css), wrapping instead of scrolling; the area of an event as a small pill above the date. The
   filter is the target of #attivita after a reload: room for the sticky header, taller without JS (no compaction). */
.pwb .pwb-filtro { scroll-margin-top: 96px; }
@media (scripting: none) { .pwb .pwb-filtro { scroll-margin-top: 176px; } }
.pwb .pwb-filtro ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pwb .pwb-filtro a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--pws-line); border-radius: 999px;
  background: var(--pws-white); color: var(--pws-ink); font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.pwb .pwb-filtro a:hover { border-color: var(--pws-bordeaux); color: var(--pws-bordeaux); }
.pwb .pwb-filtro a[aria-current] { border-color: var(--pws-bordeaux); background: var(--pws-bordeaux); color: var(--pws-white); }
.pwb .pwb-filtro a:focus-visible { outline: 2px solid var(--pws-red); outline-offset: 2px; }
.pwb.pwb .pwb-carta .pwb-area {
  align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pws-gold) 32%, var(--pws-white));
  color: var(--pws-deep); font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .pwb .pwb-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pwb .pwb-griglia { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pwb .pwb-vuoto { grid-template-columns: auto minmax(0, 1fr); }
  .pwb .pwb-vuoto > .palladio-card-cta { grid-column: 1 / -1; }
}