/* PizzaUp - Programma: ritratto del relatore e profilo a fisarmonica.
   File a parte, caricato da includes/programma_render.php: non modifica
   styles.css. Il profilo usa gli stessi <details>/<summary> delle FAQ, con il
   "+" cerchiato che ruota in "x" quando e' aperto. */

/* ---------- ritratti (colonna a destra della voce: uno o due cerchi affiancati) ---------- */
.agenda-row--portrait{grid-template-columns:170px minmax(0,1fr) auto}
.agenda-row--portrait .agenda-portraits{grid-column:3;grid-row:1}
.agenda-portraits{display:flex;gap:14px;align-items:flex-start;justify-content:flex-end;align-self:start;justify-self:end}
.agenda-portrait{position:relative;flex:0 0 auto;width:160px;height:160px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2)}
/* la foto e' uno sfondo (vedi programma_portrait_img): cosi' il kit non la tratta come un'immagine sostituibile */
.agenda-portrait-img{display:block;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
/* con due relatori i cerchi sono un po' piu' piccoli, per non togliere troppo spazio al testo */
.agenda-portraits--two .agenda-portrait{width:136px;height:136px}

/* ---------- profilo del relatore: "+" cerchiato che apre una sezione ---------- */
.agenda-profile{margin-top:20px;padding:0;border-bottom:0}
.agenda-profile + .agenda-profile{margin-top:14px}
/* annullo la riga con il "+" che le FAQ generiche applicano a ogni summary */
.agenda-profile summary{display:inline-flex;align-items:center;gap:12px;padding:0;font-size:14px;font-weight:700;
  letter-spacing:0;line-height:1.2;cursor:pointer;color:rgba(255,255,255,.88);list-style:none}
.agenda-profile summary::after{content:none}
.agenda-profile summary::-webkit-details-marker{display:none}
.agenda-profile-plus{position:relative;flex:0 0 auto;width:30px;height:30px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  transition:transform .25s ease,border-color .2s,color .2s;color:#fff}
.agenda-profile-plus::before,.agenda-profile-plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px}
.agenda-profile-plus::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.agenda-profile-plus::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.agenda-profile summary:hover .agenda-profile-plus,.agenda-profile summary:focus-visible .agenda-profile-plus{border-color:var(--yellow,#f2c300);color:var(--yellow,#f2c300)}
.agenda-profile[open] .agenda-profile-plus{transform:rotate(45deg);border-color:var(--yellow,#f2c300);color:var(--yellow,#f2c300)}
.agenda-profile-body{max-width:640px;padding:16px 0 4px}
.agenda-profile[open] .agenda-profile-body{animation:prgProfileIn .25s ease}
@keyframes prgProfileIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.agenda-profile-text{font-size:16px;line-height:1.6;color:rgba(255,255,255,.8)}
.agenda-profile-text a{color:var(--yellow,#f2c300)}
/* i paragrafi dentro al profilo non ereditano lo stile "details p" delle FAQ */
/* i paragrafi seguono dimensione, interlinea, spaziatura e allineamento scelti con la barra */
.agenda-profile .agenda-profile-body p{font-size:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;color:rgba(255,255,255,.8);margin:0 0 .7em;padding:0}
/* in modifica: tutti i campi di testo formattato (sottotitolo, "Cosa ci guadagni", profili) usano la barra
   del kit: segnaposto quando sono vuoti, contorno al passaggio del mouse ed evidenziazione mentre si scrive */
.agenda-row [data-e-custom]{cursor:text;border-radius:4px;min-height:1.4em;transition:outline-color .15s}
.agenda-row [data-e-custom]:hover{outline:1.5px dashed rgba(255,255,255,.35)}
.agenda-row [data-e-custom]:empty::before{content:attr(data-ph);opacity:.5}
.agenda-row [data-e-custom].ed-active{outline:2px solid #FFCC00;background:rgba(242,195,0,.10)}
/* i paragrafi e le liste dentro questi campi seguono lo stile scelto con i cursori */
.agenda-row .sub p,.agenda-row .payoff-text p{font-size:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;margin:0 0 .6em}
/* (vecchie regole del solo profilo, ora coperte da quelle sopra) */
.agenda-profile-text[data-e-custom]{min-height:1.6em;cursor:text}
.agenda-profile-text[data-e-custom]:empty::before{content:attr(data-ph);opacity:.55}
.agenda-profile-text.ed-active{outline:2px solid #FFCC00;background:rgba(242,195,0,.10);border-radius:4px}

/* ---------- in modifica ---------- */
.agenda-portrait--edit{cursor:pointer;border-style:dashed;border-color:rgba(255,255,255,.4);transition:border-color .2s}
.agenda-portrait.is-busy{opacity:.55;cursor:progress;pointer-events:none}
.agenda-portrait--edit:hover,.agenda-portrait--edit:focus-visible{border-color:var(--yellow,#f2c300);outline:0}
.agenda-portrait-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;
  text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.75)}
.agenda-portrait-ph small{margin-top:3px;font-size:10.5px;font-weight:500;opacity:.75}
.agenda-portrait-clear{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:26px;height:26px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.agenda-portrait-clear:hover{background:#c0392b}
/* secondo ritratto ancora vuoto: solo un piccolo "+" (in modifica) */
.agenda-portrait--add{width:64px;height:64px;align-self:center}
.agenda-portrait--add .agenda-portrait-ph{font-size:30px;font-weight:300;line-height:1}
/* il relatore, se ancora vuoto, resta visibile in modifica (altrimenti non si potrebbe scrivere) */
.agenda-row--edit .agenda-relatore:empty{display:block;min-height:1.2em}

/* ---------- tablet: colonne un po' piu' strette, ritratti piu' piccoli ---------- */
@media(max-width:1000px) and (min-width:761px){
  .agenda-row--portrait{grid-template-columns:140px minmax(0,1fr) auto;gap:24px}
  .agenda-portraits{gap:10px}
  .agenda-portrait{width:120px;height:120px}
  .agenda-portraits--two .agenda-portrait{width:96px;height:96px}
  .agenda-portrait--add{width:52px;height:52px}
}

/* ---------- mobile: orario a sinistra e ritratti a destra sulla stessa riga,
   centrati tra loro; sotto, il testo a tutta larghezza ---------- */
@media(max-width:760px){
  .agenda-row--portrait{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:16px;align-items:center}
  .agenda-row--portrait .agenda-time-col{grid-column:1;grid-row:1}
  .agenda-row--portrait .agenda-portraits{grid-column:2;grid-row:1;gap:10px;align-self:center}
  .agenda-portrait{width:104px;height:104px}
  .agenda-portraits--two .agenda-portrait{width:76px;height:76px}
  .agenda-portrait--add{width:48px;height:48px}
  .agenda-row--portrait .agenda-main{grid-column:1/-1;grid-row:2}
}

/* ---------- in modifica: esporta il programma in .txt (barra "Giorni:") ---------- */
.prg-export{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;
  color:#fff;font-weight:600;font-size:13px;padding:6px 16px;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.prg-export:hover,.prg-export:focus-visible{border-color:var(--yellow,#f2c300);color:var(--yellow,#f2c300)}