/* Eroom WebPills – frontend styles
   Layout standard e temi per titoli/descrizioni/allegati.
   Scope: tutte le regole sotto .ewp-webpills-wrap per evitare leakage. */

/************************************
 * WRAPPER E LAYOUT DI BASE
 ************************************/
.ewp-webpills-wrap .webpill,
.ewp-webpills-wrap .webpill-img-sx,
.ewp-webpills-wrap .webpill-img-dx {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px; /* spacing tra pills */
}

/* Colonne base */
.ewp-webpills-wrap .webpill-col-sx,
.ewp-webpills-wrap .webpill-col-dx {
    box-sizing: border-box;
    min-width: 0; /* prevenire overflow del testo */
}

/* Figure/immagini */
.ewp-webpills-wrap .webpill-figure { margin: 0; }
.ewp-webpills-wrap .webpill-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 6px; /* leggero abbellimento */
}

/* Titolo e contenuti */
.ewp-webpills-wrap .webpill-title { margin: 0 0 12px; }
.ewp-webpills-wrap .webpill-title h1,
.ewp-webpills-wrap .webpill-title h2,
.ewp-webpills-wrap .webpill-title h3,
.ewp-webpills-wrap .webpill-title h4,
.ewp-webpills-wrap .webpill-title h5,
.ewp-webpills-wrap .webpill-title h6 {
    margin: 0;
    line-height: 1.25;
}
.ewp-webpills-wrap .webpill-content { line-height: 1.6; }
.ewp-webpills-wrap .webpill-content p { margin: 0 0 12px; }
.ewp-webpills-wrap .webpill-content ul,
.ewp-webpills-wrap .webpill-content ol { margin: 0 0 12px 20px; }

/* Collassa la colonna immagine se non ci sono attachments */
.ewp-webpills-wrap .webpill-figure:empty { display: none; }

/************************************
 * LAYOUT 2 COLONNE (IMG SX / IMG DX)
 ************************************/
/* Rapporto colonne di default (40/60) */
.ewp-webpills-wrap .webpill-img-sx .webpill-col-sx,
.ewp-webpills-wrap .webpill-img-dx .webpill-col-dx { flex: 0 0 40%; max-width: 40%; }
.ewp-webpills-wrap .webpill-img-sx .webpill-col-dx,
.ewp-webpills-wrap .webpill-img-dx .webpill-col-sx { flex: 1 1 60%; max-width: 60%; }

/* Varianti rapporto opzionali */
.ewp-webpills-wrap .is-50-50 .webpill-col-sx,
.ewp-webpills-wrap .is-50-50 .webpill-col-dx { flex: 0 0 50%; max-width: 50%; }

.ewp-webpills-wrap .is-33-67.webpill-img-sx .webpill-col-sx,
.ewp-webpills-wrap .is-33-67.webpill-img-dx .webpill-col-dx { flex: 0 0 33.333%; max-width: 33.333%; }
.ewp-webpills-wrap .is-33-67.webpill-img-sx .webpill-col-dx,
.ewp-webpills-wrap .is-33-67.webpill-img-dx .webpill-col-sx { flex: 0 0 66.666%; max-width: 66.666%; }

/************************************
 * LAYOUT 1 COLONNA
 ************************************/
/* Wrapper a colonna singola (immagine sopra, testo sotto) */
.ewp-webpills-wrap .webpill-one-col {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
}
.ewp-webpills-wrap .webpill-one-col .webpill-figure { margin-bottom: 16px; }

/************************************
 * TEMI (CARD / MINIMAL / ELEVATED)
 ************************************/
.ewp-webpills-wrap .theme-card {
    padding: 20px;
}

/* Tema card accent (variante) */
.ewp-webpills-wrap .theme-card-accent {
    background: linear-gradient(145deg, #ffffff 0%, #f7fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    position: relative;
}
.ewp-webpills-wrap .theme-card-accent .corner-decoration {
    position: absolute; top: -1px; right: -1px; width: 20px; height: 20px;
    background: linear-gradient(135deg, #4299e1, #3182ce); border-radius: 0 12px 0 12px;
}

/* Tema minimal: nessun bordo, spaziature più ariose */
.ewp-webpills-wrap .theme-minimal {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Tema elevated: card più marcata */
.ewp-webpills-wrap .theme-elevated {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/************************************
 * UTILITÀ DI SPAZIATURA E DENSITÀ
 ************************************/
.ewp-webpills-wrap .is-tight { gap: 16px; }
.ewp-webpills-wrap .is-loose { gap: 32px; }
.ewp-webpills-wrap .pad-0   { padding: 0 !important; }
.ewp-webpills-wrap .pad-s   { padding: 12px !important; }
.ewp-webpills-wrap .pad-m   { padding: 20px !important; }
.ewp-webpills-wrap .pad-l   { padding: 28px !important; }

/************************************
 * RESPONSIVE
 ************************************/
@media (max-width: 768px) {
    .ewp-webpills-wrap .webpill,
    .ewp-webpills-wrap .webpill-img-sx,
    .ewp-webpills-wrap .webpill-img-dx {
        flex-direction: column;
        gap: 16px;
    }
    .ewp-webpills-wrap .webpill-col-sx,
    .ewp-webpills-wrap .webpill-col-dx {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================
 * ATTACHMENTS LIST RENDERING
 * ============================ */
.ewp-webpills-wrap .webpill-attachments { display: block; }
.ewp-webpills-wrap .webpill-attachments a {
    display: block;
    margin: 0 0 8px;
    text-decoration: none;
}
.ewp-webpills-wrap .webpill-attachments a:hover { text-decoration: underline; }
.ewp-webpills-wrap .webpill-attachments img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0 0 8px;
}

/* Two Rows: titolo centrato (riga 1) + 2 colonne (riga 2) */
.ewp-webpills-wrap .webpill-two-rows {
  display: block;          /* sovrascrive .webpill { display:flex } */
  width: 100%;
  box-sizing: border-box;
}

.ewp-webpills-wrap .webpill-two-rows .webpill-row-title {
  text-align: center;
  margin: 0 0 16px;
}

.ewp-webpills-wrap .webpill-two-rows .webpill-row-2cols {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* proporzioni 60/40 come richiesto */
.ewp-webpills-wrap .webpill-two-rows .webpill-col-left  { flex: 1 1 60%; max-width: 60%; min-width: 0; }
.ewp-webpills-wrap .webpill-two-rows .webpill-col-right { flex: 0 0 40%; max-width: 40%; min-width: 0; }

/* stilare lista risorse/attachments */
.ewp-webpills-wrap .webpill-two-rows .webpill-attachments a {
  display: block;
  margin: 0 0 8px;
  text-decoration: none;
}
.ewp-webpills-wrap .webpill-two-rows .webpill-attachments a:hover {
  text-decoration: underline;
}
.ewp-webpills-wrap .webpill-two-rows .webpill-attachments img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* Responsive: stack su mobile */
@media (max-width: 768px) {
  .ewp-webpills-wrap .webpill-two-rows .webpill-row-2cols {
    flex-direction: column;
    gap: 16px;
  }
  .ewp-webpills-wrap .webpill-two-rows .webpill-col-left,
  .ewp-webpills-wrap .webpill-two-rows .webpill-col-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}