/* Calendario (page 63, patterns/calendario.php). Loaded only where the section is, and in the editor.
   Colors: direction A (README, "Regola dei colori"); bordeaux opening with the same gradient as the course pages.
   Brief exceptions: the gold of the opening icon (#e8c46a), the light green "Online" and light red "Annullato" pills.
   Focus: palladio-focus.css of the child theme; the opening only sets its colors. Margins are reset and spacing is
   done with gaps, so the layout rules of WordPress (`.is-layout-flow > *`) do not apply. */
.palladio-calendario {
  --cal-cream: var(--wp--preset--color--palladio-cream, #faf7f2);
  --cal-stone: var(--wp--preset--color--palladio-stone, #f1e9de);
  --cal-white: var(--wp--preset--color--base, #ffffff);
  --cal-ink: var(--wp--preset--color--palladio-ink-warm, #2a211c);
  --cal-secondary: var(--wp--preset--color--palladio-text-secondary, #5a4a3f);
  --cal-bordeaux: var(--wp--preset--color--palladio-bordeaux, #6b1d23);
  --cal-deep: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  --cal-red: var(--wp--preset--color--palladio-red, #a8342a);
  --cal-line: var(--wp--preset--color--palladio-line, #e7ded2);
  --cal-strong: var(--wp--preset--color--palladio-border-strong, #7d6858);
  --cal-gold: #e8c46a;
  --cal-heading-font: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  --cal-heading-tracking: clamp(-.03em, calc(-.02em - (1em - 23.9px) * 2.4), -.02em);
  /* Lucide "calendar-days" and "chevron-down" (ISC), drawn as masks. */
  --cal-icon: 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='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  --cal-chevron: 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='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cal-gap: clamp(16px, 4vw, 32px);
  --cal-ora: 88px;
  background: var(--cal-cream);
  color: var(--cal-ink);
  font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif);
  font-size: 16px;
  line-height: 1.5;
}
.palladio-calendario, .palladio-calendario *, .palladio-calendario *::before, .palladio-calendario *::after { box-sizing: border-box; }
.palladio-calendario.palladio-calendario :where(h1,h2,h3,p,details,summary,.wp-block-group,.wp-block-buttons,.wp-block-button) { margin-block: 0; }
.palladio-calendario :where(h1,h2,h3) { color: inherit; font-family: var(--cal-heading-font); font-weight: 700; line-height: 1.1; letter-spacing: var(--cal-heading-tracking); overflow-wrap: break-word; }
.palladio-calendario [hidden] { display: none !important; }
/* Live count of the results, for screen readers only (added by the script). */
.palladio-calendario .palladio-cal-annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.palladio-calendario .palladio-cal-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--cal-gap); }

/* Opening: bordeaux bar, gold calendar icon in a rounded box left of the eyebrow and title. */
.palladio-calendario .palladio-cal-apertura {
  padding-block: 48px 52px; background: linear-gradient(145deg, var(--cal-bordeaux), var(--cal-deep)); color: var(--cal-cream);
  --palladio-focus-text: var(--cal-gold); --palladio-focus-fill: var(--cal-gold); --palladio-focus-on-fill: var(--cal-deep);
}
.palladio-calendario .palladio-cal-testa { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; row-gap: 10px; align-items: center; }
.palladio-calendario .palladio-cal-testa > * { grid-column: 2; }
.palladio-calendario .palladio-cal-testa::before, .palladio-calendario .palladio-cal-testa::after { content: ""; grid-column: 1; grid-row: 1 / span 2; place-self: center; }
.palladio-calendario .palladio-cal-testa::before { width: 64px; height: 64px; border: 1px solid color-mix(in srgb, var(--cal-gold) 40%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--cal-gold) 14%, transparent); }
.palladio-calendario .palladio-cal-testa::after { width: 30px; height: 30px; background: var(--cal-gold); mask: var(--cal-icon) center / contain no-repeat; }
.palladio-calendario .palladio-cal-eyebrow { align-self: end; color: var(--cal-gold); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.palladio-calendario .palladio-cal-apertura h1 { align-self: start; font-size: clamp(30px, 5.2vw, 52px); }
.palladio-calendario.palladio-calendario .palladio-cal-intro { max-width: 620px; margin-top: 8px; color: color-mix(in srgb, var(--cal-cream) 88%, transparent); font-size: 17px; }
@media (max-width: 600px) {
  .palladio-calendario .palladio-cal-testa { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .palladio-calendario .palladio-cal-testa::before { width: 52px; height: 52px; border-radius: 14px; }
  .palladio-calendario .palladio-cal-testa::after { width: 26px; height: 26px; }
  /* The intro takes the full width under icon and title. */
  .palladio-calendario .palladio-cal-testa > .palladio-cal-intro { grid-column: 1 / -1; font-size: 16px; }
}

/* Filters: white band, one row per group (name, then the buttons). The buttons scroll sideways inside their row when
   they do not fit; without the script they would do nothing, so they are hidden. */
.palladio-calendario .palladio-cal-filtri { padding-block: 20px; border-bottom: 1px solid var(--cal-line); background: var(--cal-white); }
.palladio-calendario .palladio-cal-filtri .palladio-cal-wrap { display: grid; gap: 12px; }
.palladio-calendario .palladio-cal-filtro { display: flex; align-items: center; gap: 16px; min-width: 0; }
.palladio-calendario .palladio-cal-filtro-nome { flex: none; width: 72px; color: var(--cal-secondary); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.palladio-calendario .palladio-cal-filtri .palladio-cal-scelte { flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; min-width: 0; padding-block: 2px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.palladio-calendario .palladio-cal-scelta { flex: none; }
.palladio-calendario .palladio-cal-scelta .wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--cal-strong) 45%, transparent); border-radius: 999px;
  background: var(--cal-white); color: var(--cal-ink); font: 600 14px/1.2 var(--wp--preset--font-family--manrope, Manrope, sans-serif); letter-spacing: normal; white-space: nowrap; cursor: pointer;
}
.palladio-calendario .palladio-cal-scelta .wp-block-button__link:hover { background: var(--cal-stone); color: var(--cal-ink); }
.palladio-calendario .palladio-cal-scelta .wp-block-button__link[aria-pressed="true"] { border-color: var(--cal-bordeaux); background: var(--cal-bordeaux); color: var(--cal-cream); }
@media (scripting: none) { .palladio-calendario .palladio-cal-filtri { display: none; } }
@media (max-width: 600px) {
  .palladio-calendario .palladio-cal-filtro { flex-direction: column; align-items: stretch; gap: 8px; }
  .palladio-calendario .palladio-cal-filtro-nome { width: auto; }
}

/* Appointments: a section per month, a white panel per day: date column on the left, rows sorted by time. */
.palladio-calendario .palladio-cal-corpo { padding-block: 48px 80px; }
.palladio-calendario .palladio-cal-corpo > .palladio-cal-wrap { display: grid; gap: 48px; }
.palladio-calendario .palladio-cal-mese { display: grid; gap: 14px; }
.palladio-calendario .palladio-cal-mese-titolo { margin-bottom: 4px; font-size: clamp(24px, 3.2vw, 30px); }
.palladio-calendario .palladio-cal-giorno { display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--cal-line); border-radius: 18px; background: var(--cal-white); }
.palladio-calendario .palladio-cal-data { display: flex; flex-direction: column; align-items: center; padding: 22px 10px; background: var(--cal-stone); text-align: center; }
.palladio-calendario .palladio-cal-numero { color: var(--cal-bordeaux); font-family: var(--cal-heading-font); font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.palladio-calendario .palladio-cal-mese-breve { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.palladio-calendario.palladio-calendario .palladio-cal-conta { margin-top: 10px; color: var(--cal-secondary); font-size: 12.5px; line-height: 1.3; }

/* One row: time on the left (absolute, aligned with the title), title on the first line, labels, place and link on the
   second. Rows and the "show more" line start with a thin line; the column is raised by 1px so that the line of the
   first visible row (whichever the filters leave) is clipped by the panel. */
.palladio-calendario.palladio-calendario .palladio-cal-eventi { min-width: 0; margin-top: -1px; }
.palladio-calendario .palladio-cal-evento {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 18px 24px 18px var(--cal-ora); border-top: 1px solid var(--cal-line);
}
.palladio-calendario .palladio-cal-ora { position: absolute; top: 18px; left: 24px; color: var(--cal-bordeaux); font-size: 15px; font-weight: 700; line-height: 24px; font-variant-numeric: tabular-nums; }
.palladio-calendario .palladio-cal-titolo { flex: 1 0 100%; font-size: 18px; line-height: 24px; }
.palladio-calendario :is(.palladio-cal-area, .palladio-cal-online, .palladio-cal-stato) { padding: 3px 10px; border-radius: 999px; background: var(--cal-stone); color: var(--cal-secondary); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.palladio-calendario .palladio-cal-online { background: #e2f1e5; color: #1f6034; }
.palladio-calendario .palladio-cal-stato { background: #fbe3e0; color: #9a2a20; }
.palladio-calendario .palladio-cal-luogo { color: var(--cal-secondary); font-size: 14px; }
.palladio-calendario .palladio-cal-dettagli { margin-left: auto; font-size: 14px; font-weight: 600; }
.palladio-calendario .palladio-cal-dettagli a { display: inline-flex; align-items: center; min-height: 32px; color: var(--cal-red); text-decoration: none; }
.palladio-calendario .palladio-cal-dettagli a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Cancelled: title struck through, time in grey, red pill. */
.palladio-calendario .is-annullato .palladio-cal-ora { color: var(--cal-strong); }
.palladio-calendario .is-annullato .palladio-cal-titolo { color: var(--cal-secondary); text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* More than four rows: the others in a native Details, opened by its summary line. */
.palladio-calendario .palladio-cal-altre > summary {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 24px 12px var(--cal-ora); border-top: 1px solid var(--cal-line); list-style: none;
  color: var(--cal-red); font-size: 14px; font-weight: 600; cursor: pointer;
}
.palladio-calendario .palladio-cal-altre > summary::-webkit-details-marker { display: none; }
.palladio-calendario .palladio-cal-altre > summary::after { content: ""; width: 16px; height: 16px; background: currentColor; mask: var(--cal-chevron) center / contain no-repeat; transition: transform .2s; }
.palladio-calendario .palladio-cal-altre[open] > summary::after { transform: rotate(180deg); }
.palladio-calendario .palladio-cal-altre > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .palladio-calendario .palladio-cal-altre > summary::after { transition: none; } }

@media (max-width: 720px) {
  .palladio-calendario .palladio-cal-giorno { grid-template-columns: 84px minmax(0, 1fr); border-radius: 16px; }
  .palladio-calendario .palladio-cal-data { padding: 18px 4px; }
  .palladio-calendario .palladio-cal-numero { font-size: 32px; }
  /* "12 appuntamenti" on two lines inside the narrow column. */
  .palladio-calendario.palladio-calendario .palladio-cal-conta { font-size: 11px; overflow-wrap: anywhere; }
  /* The time goes above the title. */
  .palladio-calendario .palladio-cal-evento { row-gap: 6px; padding: 16px; }
  .palladio-calendario .palladio-cal-ora { position: static; flex: 1 0 100%; line-height: 1.3; }
  .palladio-calendario .palladio-cal-titolo { font-size: 17px; line-height: 1.3; }
  .palladio-calendario .palladio-cal-dettagli { flex: 1 0 100%; margin-left: 0; }
  .palladio-calendario .palladio-cal-altre > summary { padding-inline: 16px; }
}

/* Empty state: shown by the script when a filter leaves nothing (always visible in the editor, to edit it). */
.palladio-calendario .palladio-cal-vuoto { display: grid; justify-items: center; gap: 18px; padding: 40px var(--cal-gap); border: 2px dashed color-mix(in srgb, var(--cal-strong) 45%, transparent); border-radius: 18px; text-align: center; }
:where(body:not(.editor-styles-wrapper)) .palladio-calendario .palladio-cal-vuoto:not(.is-shown) { display: none; }
.palladio-calendario .palladio-cal-vuoto-testo { max-width: 460px; color: var(--cal-secondary); font-size: 17px; }

/* Buttons: red filled (request) and red outline (add to your calendar). */
.palladio-calendario :is(.palladio-cal-button, .palladio-cal-contorno) .wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border: 1.5px solid var(--cal-red); border-radius: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: normal; text-decoration: none;
}
.palladio-calendario .palladio-cal-button .wp-block-button__link { background: var(--cal-red); color: var(--cal-white); }
.palladio-calendario .palladio-cal-button .wp-block-button__link:hover { border-color: var(--cal-bordeaux); background: var(--cal-bordeaux); color: var(--cal-white); }
.palladio-calendario .palladio-cal-contorno .wp-block-button__link { background: transparent; color: var(--cal-red); }
.palladio-calendario .palladio-cal-contorno .wp-block-button__link:hover { background: var(--cal-red); color: var(--cal-white); }

/* Source line and calendar subscription, at the bottom. */
.palladio-calendario .palladio-cal-fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--cal-line); }
.palladio-calendario .palladio-cal-fonte { color: var(--cal-secondary); font-size: 14px; }