/* Rionale — Piazza: app installabile, tre schede in alto, strumenti di lettura */

/* Colori della parrocchia (scelti in Sacrestia): fondo, filigrana e fascia dell'intestazione.
   La fascia usa sempre la tinta scura del colore: testo bianco con contrasto AA anche con l'ocra.
   La filigrana è il portale del marchio, nel colore scelto: il disegno esce da Mark::pattern()
   (src/Services/Brand/Mark.php), qui ci sta scritto solo il risultato. */
.theme-terracotta { --r-primary: #b5552f; --r-primary-strong: #9a4422; }
.theme-ocra {
  --r-primary: #b07a1c; --r-primary-strong: #8f5f10; --r-bg: #f5e6c6; --r-band-1: #6f4a0c; --r-band-2: #8f5f10; --r-band-glow: rgba(240, 196, 96, 0.45);
  --r-page-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23b07a1c' stroke-opacity='.16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 70V48a26 26 0 0 1 52 0v22M24 70V50a14 14 0 0 1 28 0v20M92 150V128a26 26 0 0 1 52 0v22M104 150V130a14 14 0 0 1 28 0v20'/%3E%3Cpath d='M33 70V54a5 5 0 0 1 10 0v16ZM113 150V134a5 5 0 0 1 10 0v16Z' fill='%23b07a1c' fill-opacity='.16' stroke='none'/%3E%3C/svg%3E");
}
.theme-oliva {
  --r-primary: #6d7a45; --r-primary-strong: #5f6b3a; --r-bg: #e6ebd5; --r-band-1: #48512b; --r-band-2: #5f6b3a; --r-band-glow: rgba(196, 206, 120, 0.4);
  --r-page-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%236d7a45' stroke-opacity='.15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 70V48a26 26 0 0 1 52 0v22M24 70V50a14 14 0 0 1 28 0v20M92 150V128a26 26 0 0 1 52 0v22M104 150V130a14 14 0 0 1 28 0v20'/%3E%3Cpath d='M33 70V54a5 5 0 0 1 10 0v16ZM113 150V134a5 5 0 0 1 10 0v16Z' fill='%236d7a45' fill-opacity='.15' stroke='none'/%3E%3C/svg%3E");
}
.theme-vinaccia {
  --r-primary: #94405a; --r-primary-strong: #7d2e46; --r-bg: #f2dde4; --r-band-1: #5e2234; --r-band-2: #7d2e46; --r-band-glow: rgba(222, 128, 158, 0.4);
  --r-page-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%2394405a' stroke-opacity='.13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 70V48a26 26 0 0 1 52 0v22M24 70V50a14 14 0 0 1 28 0v20M92 150V128a26 26 0 0 1 52 0v22M104 150V130a14 14 0 0 1 28 0v20'/%3E%3Cpath d='M33 70V54a5 5 0 0 1 10 0v16ZM113 150V134a5 5 0 0 1 10 0v16Z' fill='%2394405a' fill-opacity='.13' stroke='none'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .theme-terracotta { --r-primary: #e0875f; --r-primary-strong: #f0a987; }
  .theme-ocra { --r-primary: #d9a54c; --r-primary-strong: #e3b86a; --r-bg: #221d15; --r-band-1: #3f2a06; --r-band-2: #5c3d0a; }
  .theme-oliva { --r-primary: #a6b777; --r-primary-strong: #b9c98a; --r-bg: #1d2118; --r-band-1: #2b3119; --r-band-2: #414a26; }
  .theme-vinaccia { --r-primary: #d07d97; --r-primary-strong: #e095ab; --r-bg: #24181c; --r-band-1: #3b1522; --r-band-2: #5a2135; }
  .theme-ocra, .theme-oliva, .theme-vinaccia { --r-page-pattern: var(--r-page-pattern-dark); --r-band-glow: rgba(255, 255, 255, 0.1); }
}

/* Strumenti di lettura. L'alto contrasto vale anche sopra il colore della parrocchia (body.theme-*):
   niente filigrana né sfumature, fascia nera e testo bianco. */
html.a11y-large { font-size: 145%; }
html.a11y-contrast,
html.a11y-contrast body {
  --r-bg: #ffffff; --r-surface: #ffffff; --r-surface-alt: #f2f2f2; --r-text: #000000; --r-muted: #1a1a1a;
  --r-primary: #000000; --r-primary-strong: #000000; --r-on-primary: #ffffff; --r-accent: #000000;
  --r-border: #000000; --r-field-border: #000000; --r-focus: #0000ff;
  --r-page-pattern: none; --r-band-pattern: none; --r-band-glow: transparent;
  --r-band-1: #000000; --r-band-2: #000000; --r-band-line: #ffffff; --r-band-muted: #ffffff;
  --r-footer: #000000; --r-footer-text: #ffffff;
}
html.a11y-contrast .r-badge { border: 1px solid #000; color: #000; background: #fff; }

.p-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Il contenuto si prende lo spazio che resta, così il piede sta in fondo anche su pagine corte. */
.p-page > .p-main { flex: 1 0 auto; }

/* Intestazione con nome, strumenti e schede. Come nella Sacrestia, la fascia mostra la parte alta
   dello sfondo d'apertura della vetrina, nel colore della parrocchia. */
.p-header {
  color: var(--r-band-text);
  background:
    var(--r-band-pattern),
    radial-gradient(38rem circle at 82% 68%, var(--r-band-glow), transparent 70%) top / 100% 36rem no-repeat,
    linear-gradient(135deg, var(--r-band-1), var(--r-band-2)) top / 100% 36rem no-repeat,
    var(--r-band-2);
  box-shadow: 0 4px 16px rgba(40, 20, 10, 0.18);
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0);
}

.p-header .r-brand { color: var(--r-band-text); }
.p-header > .r-brand { display: inline-flex; padding: 0.8rem 1rem; }
.p-header :focus-visible { outline-color: #ffffff; }

.p-header-inner {
  width: min(100% - 1.5rem, 48rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0 0.35rem;
}

.p-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  color: var(--r-band-text);
  text-decoration: none;
  font-size: 1.05rem;
  min-width: 0;
}

.p-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-logo { width: 2rem; height: 2rem; object-fit: contain; border-radius: 0.45rem; flex-shrink: 0; }

.p-tools { display: flex; gap: 0.3rem; flex-shrink: 0; }

.p-tool {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: var(--r-radius-sm);
  border: 2px solid var(--r-band-line);
  background: transparent;
  color: var(--r-band-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.p-tool[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: var(--r-band-1); }

/* Le porte di chi è entrato (12/10/2026): un pulsantino con le iniziali, della misura di A+ e ◐, e il suo
   riquadro. Il riquadro si allinea al bordo destro della testata (non al pulsantino): così sui telefoni
   stretti non esce dallo schermo a sinistra. */
.p-header-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; position: relative; }
.p-me-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.p-me-button::-webkit-details-marker { display: none; }
.p-me[open] > .p-me-button { background: #ffffff; border-color: #ffffff; color: var(--r-band-1); }
.p-me-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  width: max-content;
  min-width: 13rem;
  max-width: min(18rem, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border-radius: var(--r-radius);
  background: var(--r-surface);
  color: var(--r-text);
  box-shadow: 0 14px 34px rgba(40, 20, 10, 0.28);
  z-index: 30;
}
.p-me-menu :focus-visible { outline-color: var(--r-focus); }
.p-me-name { margin: 0; font-size: 0.92rem; color: var(--r-muted); overflow-wrap: anywhere; }
.p-me-link { font-weight: 700; color: var(--r-primary-strong); }
.p-me-menu form { margin: 0; }

.p-tabs {
  width: min(100% - 1.5rem, 48rem);
  margin-inline: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  padding: 0 0 0.45rem;
}

.p-tabs a {
  display: block;
  text-align: center;
  padding: 0.55rem 0.4rem;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--r-band-text);
  background: transparent;
  border-radius: var(--r-radius-sm);
  border: 2px solid var(--r-band-line);
}

.p-tabs a[aria-current="page"] { background: #ffffff; border-color: #ffffff; color: var(--r-band-1); }
.p-tabs a:hover { border-color: #ffffff; }

/* Contenuto */
.p-main { padding: 0.25rem 0 1rem; }
/* Spazio in fondo, altrimenti l'ultima riga della pagina finisce sotto la barra. */
.p-page { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0)); }

.p-content {
  width: min(100% - 1.5rem, 48rem);
  margin-inline: auto;
  padding: 0.25rem 0 1rem;
}

.p-content section { margin-top: 0.9rem; }
.p-content .r-card + .r-card { margin-top: 0.9rem; }
.p-content h1 { font-size: 1.55rem; margin: 0.4rem 0 0.3rem; }
.p-content h2 { font-size: 1.15rem; }
.p-content .r-card { padding: 0.95rem 1rem; }
.p-date { font-size: 1rem; margin: 0.5rem 0 0.6rem; color: var(--r-muted); }
.p-date strong { color: var(--r-primary-strong); }

.p-hero { text-align: center; max-width: 34rem; margin-inline: auto; padding: 1rem 0; }
.p-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--r-primary-strong); }
.p-hero p { font-size: 1.05rem; color: var(--r-muted); }

/* Trova la tua parrocchia: su uno schermo stretto la casella si prende tutta la riga e il pulsante va sotto,
   altrimenti resta un francobollo accanto a «Cerca» (visto a 320 punti il 28/09/2026). */
.p-search { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem auto; max-width: 30rem; }
.p-search .r-input { flex: 1 1 14rem; min-width: 0; }
.p-search .r-btn { flex: 0 1 auto; }
.p-results h2 { margin-top: 0; }
.p-results .c-venues li { padding: 0.75rem 0; }

.p-contacts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.p-contacts dt { font-weight: 600; color: var(--r-muted); }
.p-contacts dd { margin: 0; overflow-wrap: anywhere; }

.p-nearest-result { font-weight: 600; margin: 0.5rem 0 0; }

/* Invito a installare */
.p-install {
  width: min(100% - 1.5rem, 48rem);
  margin: 0.5rem auto;
  padding: 0.8rem 0.9rem;
  background: var(--r-surface);
  border: 1px solid var(--r-primary);
  border-radius: var(--r-radius);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.p-install[hidden] { display: none; }
.p-install-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.92rem; }
.p-install-actions { display: flex; gap: 0.5rem; }

/* In fondo alla Piazza, «fatta con Rionale»: il marchietto prende il colore del testo e resta
   piccolo. Il colore della parrocchia non lo tocca — qui Rionale firma e si fa da parte. */
/* Riga sua, sotto ai collegamenti: a 320 punti il piede va a capo, e un «·» all'inizio della
   riga nuova sembrerebbe un errore di stampa. */
.p-footer .p-made { display: flex; justify-content: center; align-items: center; gap: 0.3rem; margin-top: 0.35rem; color: inherit; opacity: 0.85; }
.p-footer .p-made .r-mark { width: 1.05em; height: 1.05em; }

.p-footer {
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
  text-align: center;
  background: var(--r-footer);
  color: var(--r-footer-text);
  font-size: 0.85rem;
}

.p-footer a,
.p-footer .r-muted { color: inherit; }
.p-footer :focus-visible { outline-color: #ffffff; }

/* Telefono: meno spazio sprecato, tutto a larghezza piena, pulsanti comodi */
@media (max-width: 40rem) {
  html { font-size: 106.25%; }
  .p-content { width: min(100% - 1.25rem, 48rem); }
  .p-header-inner, .p-tabs, .p-install { width: min(100% - 1.25rem, 48rem); }
  .a-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .c-week { grid-template-columns: 1fr; gap: 0.6rem; }
  .c-day { padding: 0.75rem 0.85rem; }
  .c-next-title { font-size: 1.15rem; }
  .r-btn { min-height: 2.75rem; }
  .p-hero .r-flex { flex-direction: column; align-items: stretch; }
  .p-hero .r-btn { width: 100%; }
  .p-footer a { display: inline-block; padding: 0.25rem 0; }
}

@media (max-width: 40rem) {
  /* Una riga sola: freccia, periodo, freccia. */
  /* Una riga sola: freccia, periodo, freccia. I nomi lunghi dei pulsanti restano allo schermo grande. */
  .c-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: center; }
  .c-weeknav .r-btn { flex: 0 0 auto; padding-inline: 0.85rem; font-size: 1rem; font-weight: 700; }
  .c-weeklabel { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; }
  /* Quattro viste in una riga, senza andare a capo. */
  .p-views { gap: 0.2rem; }
  .p-views a { padding: 0.5rem 0.1rem; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-filter .r-select { flex: 1 1 8rem; }
  .a-filter .r-btn { flex: 0 0 auto; }
  /* Niente a capo dell'intera voce: l'orario resta a sinistra e il testo si spezza dentro la sua colonna. */
  .c-body { overflow-wrap: anywhere; }
  .c-next-when, .c-next-where { overflow-wrap: anywhere; }
  .p-tabs a { font-size: 0.92rem; padding: 0.5rem 0.2rem; }
  .r-badge { white-space: normal; }
}

/* Agenda */
.p-views { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; margin: 0.5rem 0; }
.p-views a { text-align: center; padding: 0.5rem 0.3rem; border-radius: var(--r-radius-sm); background: var(--r-surface-alt); text-decoration: none; font-weight: 600; color: var(--r-text); font-size: 0.95rem; }
/* A 320 punti «Settimana» non stava su una riga: si stringe quel tanto che basta. */
@media (max-width: 360px) {
  .p-views a { font-size: 0.85rem; padding-left: 0.15rem; padding-right: 0.15rem; }
}
.p-views a[aria-current="page"] { background: var(--r-primary-strong); color: var(--r-on-primary); }
.a-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 0.75rem; }
.a-filter .r-select { flex: 1 1 10rem; min-height: 2.6rem; }
.c-details summary { cursor: pointer; font-size: 0.9rem; color: var(--r-primary-strong); }
.c-details p { margin: 0.3rem 0 0; font-size: 0.95rem; }

/* Iniziative (passo 6) */
.i-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.9rem; }
.i-card-title { font-size: 1.1rem; margin: 0 0 0.3rem; overflow-wrap: anywhere; }
.i-card-title a { color: inherit; text-decoration: none; }
.i-card-title a:hover { text-decoration: underline; }
.i-card-when { margin: 0 0 0.4rem; color: var(--r-muted); }
.i-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.5rem; }
.i-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 0.9rem; }
.i-facts dt { color: var(--r-muted); }
.i-facts dd { margin: 0; overflow-wrap: anywhere; }
.i-enroll { margin-top: 1.2rem; }
.i-participant { align-items: end; border-bottom: 1px solid var(--r-border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.i-participant-minor { align-self: center; }
.i-tickets { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.i-ticket { display: flex; gap: 0.9rem; align-items: center; }
.i-ticket-qr { flex: 0 0 auto; width: 9.5rem; }
.i-ticket-qr svg { width: 100%; height: auto; display: block; }
.i-ticket-name { font-weight: 700; margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.i-ticket-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1.35rem; letter-spacing: 0.12em; margin: 0; }
.i-ticket-actions form { margin: 0; }
@media (max-width: 30rem) {
  .i-ticket { flex-direction: column; text-align: center; }
  .i-ticket-qr { width: 12rem; }
}
@media print {
  .p-header, .p-tabs, .p-footer, .p-install, .i-ticket-actions { display: none !important; }
  .i-ticket { break-inside: avoid; }
}

/* Notifiche (passo 7) */
.n-push .r-pills { margin-bottom: 0.75rem; }
.n-push [data-push-status] { font-weight: 600; }

/* Segui questa parrocchia (passo 8) */
.p-follow form { margin: 0.5rem 0 0; }
.p-follow .r-flex { flex-wrap: wrap; }

/* Orario di apertura delle chiese (Comunità). */
.c-hours { margin-top: 0.5rem; }
.c-hours-now { margin: 0 0 0.35rem; }
.c-hours-status.is-open { background: var(--r-success-bg); color: var(--r-success); border-color: var(--r-success); }
.c-hours-list { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; margin: 0; font-size: 0.95rem; }
.c-hours-list dt { font-weight: 600; }
.c-hours-list dd { margin: 0; }

/* Benedizione delle famiglie (Richieste, passo B) */
.bl-search-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bl-search-row .r-input { flex: 1 1 12rem; min-width: 0; }
.bl-found { border-left: 4px solid var(--r-accent); }
.bl-found-item + .bl-found-item { border-top: 1px solid var(--r-border); margin-top: 0.6rem; padding-top: 0.6rem; }
.bl-found-item p, .bl-when { margin: 0 0 0.3rem; }
.bl-round h2 { margin-top: 1.2rem; }
.bl-streets { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }
.bl-streets li { overflow-wrap: anywhere; }
.bl-streets-public summary { cursor: pointer; }
.bl-kinds { border: 0; padding: 0; margin: 0 0 0.75rem; }
.bl-kinds .r-check { margin-bottom: 0.5rem; }

/* ---- L'apertura della pagina «Oggi» -------------------------------------------------
   La fotografia la carica la parrocchia. Senza, resta la fascia colorata con il nome:
   deve essere bella lo stesso, perché all'inizio non la carica quasi nessuno. */
.p-open { position: relative; background: var(--r-band-2); }
.p-open-img { display: block; width: 100%; height: 12rem; object-fit: cover; }
.p-open-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 5, 0.10) 25%, rgba(20, 10, 5, 0.85) 100%);
}
.p-open-words {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: min(100% - 2rem, 48rem); margin-inline: auto; padding: 0 0 0.9rem;
  color: #fff;
}
.p-open-plain { background: linear-gradient(150deg, var(--r-band-1), var(--r-band-2)); }
.p-open-plain .p-open-words { position: static; padding: 1.5rem 0 1.4rem; }
.p-open-day { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.p-open h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; color: #fff; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* Etichetta sopra un blocco: piccola, distanziata, smorzata. */
.p-label {
  margin: 0 0 0.45rem; font-size: 0.78rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--r-muted);
}

.p-today { display: grid; gap: 1.5rem; }
.p-today section { margin: 0; }
.p-today h2 { font-size: 1.2rem; margin-bottom: 0.55rem; }

/* La prossima celebrazione: l'ora si legge da lontano. */
.p-next { display: flex; align-items: baseline; gap: 0.9rem; padding: 1rem 1.15rem; }
.p-next-time {
  font-family: var(--r-font-titoli); font-size: 2rem; line-height: 1;
  font-weight: 700; color: var(--r-primary-strong); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}
.p-next-what { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.p-next-what strong { font-size: 1.05rem; }

/* Avviso in evidenza */
.p-featured { border-left: 4px solid var(--r-primary); }
.p-featured h3 { margin: 0.25rem 0 0.4rem; font-size: 1.2rem; }
.p-featured h3 a { color: var(--r-text); text-decoration: none; }
.p-featured h3 a:hover { text-decoration: underline; }
.p-cat {
  margin: 0; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--r-accent-strong); font-weight: 700;
}
/* La data accanto alla categoria non è un'etichetta: niente maiuscoletto. */
.p-cat .r-small { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Elenchi compatti: appuntamenti e ultimi avvisi */
.p-rows { list-style: none; margin: 0; padding: 0; }
.p-row { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0; border-top: 1px solid var(--r-border); }
.p-row:first-child { border-top: 0; padding-top: 0.2rem; }
.p-row-when { font-size: 0.86rem; font-weight: 700; color: var(--r-primary-strong); }
.p-row-title { font-family: var(--r-font-titoli); font-size: 1.08rem; font-weight: 700; color: var(--r-text); text-decoration: none; }
.p-row-title:hover { text-decoration: underline; }
.p-row-text { margin: 0.1rem 0 0; color: var(--r-muted); font-size: 0.95rem; }
.p-row-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.p-more-link { margin: 0.8rem 0 0; font-size: 0.95rem; }
.p-cover-preview { display: block; width: 100%; max-width: 22rem; border-radius: var(--r-radius-sm); }
/* ---- La scheda grande dell'avviso importante ----------------------------------------
   Tutta la larghezza, con la fotografia dell'annuncio dietro le parole. La fotografia è un
   <img> vero e non uno sfondo CSS: la Content-Security-Policy non ammette stili in linea,
   e così l'immagine si carica con calma (`lazy`) senza bloccare la pagina. */
.p-spot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-radius);
  box-shadow: var(--r-shadow);
  min-height: 13rem;
  display: flex;
  align-items: flex-end;
  background: var(--r-surface);
}
.p-spot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-spot-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 5, 0.15) 20%, rgba(20, 10, 5, 0.82) 100%);
}
.p-spot-words { position: relative; padding: 1.2rem 1.3rem; color: #fff; }
.p-spot-words h2 { margin: 0.15rem 0 0.4rem; font-size: 1.45rem; color: #fff; text-wrap: balance; }
.p-spot-words h2 a { color: #fff; text-decoration: none; }
.p-spot-words h2 a:hover { text-decoration: underline; }
.p-spot-cat {
  margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.88);
}
.p-spot-text { margin: 0; color: rgba(255, 255, 255, 0.92); }
.p-spot-link { margin: 0.7rem 0 0; }
.p-spot-link a { color: #fff; font-weight: 700; }
/* Senza fotografia: il colore della parrocchia, con la filigrana. */
.p-spot-plain {
  background: var(--r-page-pattern), linear-gradient(150deg, var(--r-band-1), var(--r-band-2));
  background-size: 22rem auto, cover;
}

/* ---- Due schede affiancate quando lo schermo lo permette ---------------------------- */
@media (min-width: 52rem) {
  .p-today { width: min(100% - 2rem, 64rem); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-today > .p-wide { grid-column: 1 / -1; }
  .p-today { align-items: start; }
  .p-open-today .p-open-words { width: min(100% - 2rem, 64rem); }
  .p-spot { min-height: 16rem; }
  .p-spot-words { width: min(100%, 40rem); padding: 1.6rem 1.8rem; }
  .p-spot-words h2 { font-size: 1.8rem; }
}
/* «Poi, oggi»: separa la prossima celebrazione dalle altre dentro la stessa scheda. */
.p-then { margin: 1rem 0 0.35rem; padding-top: 0.9rem; border-top: 1px solid var(--r-border); }
.p-next { padding: 0.2rem 0 0; }

/* ---- La barra delle sezioni ---------------------------------------------------------
   In fondo allo schermo sul telefono, dove arriva il pollice; in alto sul computer.
   Quattro voci con la loro icona: niente parole da indovinare, niente menu da aprire. */
.p-bar {
  /* Sul telefono si stacca dall'intestazione e resta incollata in fondo, dove arriva il pollice:
     non si muove scorrendo la pagina. Sul computer resta dentro l'intestazione, che è già fissa in alto. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--r-surface);
  border-top: 1px solid var(--r-border);
  box-shadow: 0 -2px 12px rgba(60, 35, 15, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.p-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.35rem 0.15rem calc(0.35rem + env(safe-area-inset-bottom, 0) / 2);
  color: var(--r-muted);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
}
/* Il nome sta su una riga sola: se lo schermo è strettissimo si rimpicciolisce, non va a capo. */
.p-bar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.p-bar a[aria-current="page"] { color: var(--r-primary-strong); }
.p-bar-ic { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }
.p-bar a[aria-current="page"] .p-bar-ic { stroke-width: 2; }

@media (min-width: 52rem) {
  .p-page { padding-bottom: 0; }
  .p-bar {
    position: static;
    width: min(100% - 1.5rem, 64rem);
    margin: 0 auto;
    padding-bottom: 0.5rem;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0.4rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .p-bar a {
    flex-direction: row; gap: 0.5rem; padding: 0.45rem 1.1rem; border-radius: 999px;
    font-size: 0.95rem; color: var(--r-band-text); border: 1px solid rgba(255, 255, 255, 0.35);
  }
  .p-bar a[aria-current="page"] {
    background: var(--r-surface); color: var(--r-primary-strong); border-color: transparent;
  }
  .p-bar a:hover { border-color: rgba(255, 255, 255, 0.7); }
}

/* ---- «Tutto»: la griglia delle sezioni ---------------------------------------------- */
.p-all section { margin-bottom: 1.6rem; }
.p-all h2 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.p-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
/* Le piastrelle di una riga hanno la stessa altezza anche se il nome va a capo. */
.p-tiles li { display: flex; }
.p-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  flex: 1;
  min-height: 5.6rem;
  padding: 0.9rem 0.8rem;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  box-shadow: var(--r-shadow);
  color: var(--r-text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.25;
}
.p-tile:hover, .p-tile:focus-visible { border-color: var(--r-primary); }
.p-tile-ic { width: 1.7rem; height: 1.7rem; color: var(--r-primary-strong); }

/* ---- Il calendario del mese ---------------------------------------------------------
   Sette colonne, i giorni fuori mese smorzati, un punto sotto i giorni che hanno qualcosa.
   Si tocca un giorno e sotto si legge cosa c'è: nessuno script, è un collegamento. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin: 0.8rem 0 1.2rem;
}
.cal-grid-head {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--r-muted);
  padding-bottom: 0.2rem;
}
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  color: var(--r-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cal-cell:hover { border-color: var(--r-primary); }
.cal-n { font-size: 0.95rem; font-weight: 600; line-height: 1; }
.cal-dot { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--r-primary); }
.cal-out { opacity: 0.45; }
.cal-today .cal-n { color: var(--r-primary-strong); font-weight: 800; }
.cal-today { border-color: var(--r-primary); }
.cal-selected { background: var(--r-primary-strong); border-color: var(--r-primary-strong); color: #fff; }
.cal-selected .cal-n { color: #fff; }
.cal-selected .cal-dot { background: #fff; }

/* Telefoni stretti: il nome si stringe ancora un po' invece di spezzarsi. */
@media (max-width: 22.5rem) {
  .p-bar a { font-size: 0.62rem; letter-spacing: -0.01em; }
  .p-bar-ic { width: 1.2rem; height: 1.2rem; }
}
/* Con il testo ingrandito la barra cresce, ma non si mangia mezzo schermo. */
html.a11y-large .p-bar a { font-size: 0.58rem; padding-top: 0.3rem; }
html.a11y-large .p-bar-ic { width: 1.1rem; height: 1.1rem; }

/* ---- Letture del giorno (§7.28) -----------------------------------------------------
   Si leggono la sigla del brano e il titoletto del lezionario, non il testo: per quello si
   va sul sito della CEI. La riga che si cerca con l'occhio è la sigla, quindi è in tondo
   scuro e l'etichetta in piccolo, non il contrario; il titoletto sta sotto, su una riga
   sua, perché è una frase e non un'etichetta.                                            */
.l-readings .l-day { margin: 0 0 0.25rem; font-weight: 600; }
/* Colore liturgico, grado e ciclo. I puntini fra le voci li mette il CSS: una voce che
   manca non lascia un puntino orfano. */
.l-meta { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--r-muted); display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; align-items: baseline; }
.l-meta > * + *::before { content: '·'; margin-right: 0.45rem; }
.l-color { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.l-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); }
.l-dot-green { background: #4f7a3f; }
.l-dot-white { background: #fbf7ef; }
.l-dot-red { background: #a6352a; }
.l-dot-purple { background: #6b4a7d; }
.l-dot-pink { background: #d19aad; }
/* «DOMENICA», «SOLENNITA'»: la fonte grida, la Piazza no. Si ammorbidisce qui, senza
   toccare il testo che arriva. */
.l-grade { text-transform: lowercase; }
.l-grade::first-letter { text-transform: uppercase; }
.l-list { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; }
.l-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-top: 1px solid var(--r-border);
}
.l-list li:first-child { border-top: 0; }
.l-what { color: var(--r-muted); font-size: 0.85rem; min-width: 8.5rem; }
.l-ref { font-weight: 600; }
/* Il titoletto prende tutta la riga sotto la sigla: è una frase, e affiancata sarebbe
   illeggibile su un telefono. */
.l-heading { min-width: 100%; font-size: 0.95rem; }
.l-resp-sign { color: var(--r-primary-strong); font-weight: 600; }
/* La riga nell'Agenda: una sola, sotto le celebrazioni del giorno. */
.l-line { margin: 0.35rem 0 0; font-size: 0.9rem; }
.l-line a { color: var(--r-muted); }
.l-line a:hover, .l-line a:focus-visible { color: var(--r-primary-strong); }
/* Telefoni stretti: l'etichetta va sopra la sigla invece di stringerla. */
@media (max-width: 26rem) {
  .l-what { min-width: 100%; }
}

/* «Non trovi la tua parrocchia?» (28/09/2026): il testo pronto da mandare al parroco si distingue dal resto,
   così si capisce che è lui, e si può copiare con un tocco lungo. */
.p-missing-list { margin: 0.3rem 0 0.8rem; padding-left: 1.1rem; }
.p-missing-list li { margin-bottom: 0.3rem; }
.p-missing-text {
  background: var(--r-surface-alt);
  border-radius: var(--r-radius-sm);
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Invito a registrarsi, per chi non è entrato (28/09/2026): una riga discreta sopra il piè di pagina, mai un
   riquadro che copre la Piazza. Su uno schermo stretto il pulsante va sotto la frase. */
.p-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  margin: 1.2rem auto 0;
  padding: 0.8rem 1rem;
  max-width: 44rem;
  border-top: 1px solid var(--r-border);
}
.p-join-text { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: 0.95rem; color: var(--r-muted); }
.p-join-text a { color: var(--r-primary-strong); }

/* «Perché registrarsi»: un elenco che si legge in dieci secondi. */
.p-why { list-style: none; margin: 0; padding: 0; }
.p-why li { padding: 0.6rem 0; border-top: 1px solid var(--r-border); }
.p-why li:first-child { border-top: 0; padding-top: 0; }
.p-why strong { display: block; }
.p-why span { color: var(--r-muted); }

/* Nel piè di pagina il nome resta attaccato al suo punto: con un collegamento in più andava a capo da solo. */
.p-footer .r-muted { white-space: nowrap; }

/* Parrocchia dimostrativa (01/10/2026): una riga in cima che dice che è inventata e porta alla Sacrestia. */
.p-demo { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--r-radius-sm); background: var(--r-info-bg); color: var(--r-text); font-size: 0.95rem; }
.p-demo a { font-weight: 600; white-space: nowrap; }

/* L'avviso sulla porta di Rionale, quando è aperta una sessione dimostrativa: una riga sola che dice dove
   sei, come tornarci e come uscirne. «Esci» è un pulsante perché deve passare da un invio (serve il
   gettone anti-CSRF), ma si legge come un collegamento. */
.p-demo-porta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25rem 0.75rem; text-align: left; }
.p-demo-porta form { margin: 0; }
.p-demo-porta button {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--r-primary-strong);
  text-decoration: underline; cursor: pointer;
}
.p-demo-porta button:hover { text-decoration: none; }

/* L'avviso dell'informativa aggiornata, per chi è entrato (20/10/2026): largo come il contenuto della pagina. */
.p-notice { width: min(100% - 2rem, 48rem); margin: 0.75rem auto 0; }
.p-notice .r-alert { margin-bottom: 0; }