/* =======================================================
   SECTION_ALL.CSS
   Used by ALL "all_*" pages (all_omelie, all_preghiere, all_video, ...)
   Goal: consistent layout + zero regressions + mobile friendly.

   IMPORTANT:
   - We keep existing template class names (e.g. .omelie-container / .omelie-table)
   - We also provide generic aliases (English names) for future pages.
   ======================================================= */


/* =======================================================
   1) "TRIO" GRID (used in some landing sections)
   Target: .trio, .item, .item-title, .item-meta, .item-desc
   ======================================================= */

/* Grid: 1 column on mobile, 3 columns on medium+ screens */
.trio{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px){
  .trio{ grid-template-columns: repeat(3, 1fr); }
}

/* Clickable card (usually <a class="item"> or <div class="item">) */
.item{
  display: block;
  text-decoration: none;
  color: inherit;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.item-title{
  font-family: "Cinzel", "Crimson Text", serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d1b4e;
  margin: 0 0 8px 0;
}
.item-meta{
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 8px 0;
}
.item-desc{
  font-size: 0.95rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}


/* =======================================================
   2) ALL_* PAGES IN TABLE MODE (Omelie / Preghiere / ...)
   Existing template classes:
     - .omelie-container, .omelie-header
     - .omelie-table-wrapper, .omelie-table
     - .omelia-titolo, .omelia-descrizione, .omelia-data, .omelia-formato
   Generic aliases (English):
     - .all-container, .all-header
     - .data-table-wrapper, .data-table
   ======================================================= */

/* ===============================
   Page container — responsive width (good on 1080p/2K/4K)
   =============================== */

:where(.omelie-container, .all-container){
  width: min(94vw, 1200px);
  margin: 3rem auto;
  padding: 0 16px;
}

/* Large screens (2K-ish) */
@media (min-width: 1400px){
  :where(.omelie-container, .all-container){
    width: min(94vw, 1500px);
  }
}

/* Very large screens (4K-ish) */
@media (min-width: 1800px){
  :where(.omelie-container, .all-container){
    width: min(94vw, 1700px);
  }
}

/* Page header */
:where(.omelie-header, .all-header){
  text-align: center;
  margin-bottom: 1.5rem;
}
:where(.omelie-header, .all-header) h1{
  font-family: "Cinzel", "Crimson Text", serif;
  font-size: 2.5rem;
  color: #2d1b4e;
  margin: 0 0 0.75rem 0;
}
:where(.omelie-header, .all-header) p{
  font-size: 1.1rem;
  color: #555;
  max-width: 820px;
  margin: 0 auto;
}


/* ===============================
   Table wrapper (card + horizontal scroll on small screens)
   =============================== */

:where(.omelie-table-wrapper, .data-table-wrapper){
  background: #fff;
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}


/* ===============================
   Table base
   =============================== */

:where(.omelie-table, .data-table){
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

/* Header: same teal as site header */
:where(.omelie-table, .data-table) thead{
  background: #5eb8c4;
}

:where(.omelie-table, .data-table) th{
  padding: 1rem 1rem;
  color: #fff;
  text-align: left;
  font-weight: 700;

  border-right: 1px solid rgba(255,255,255,0.28);
  white-space: nowrap; /* label + arrows on ONE line */
}
:where(.omelie-table, .data-table) th:last-child{ border-right: 0; }

/* Sortable headers */
:where(.omelie-table, .data-table) th[data-sort]{
  cursor: pointer;
  user-select: none;
}

/* Indicator */
:where(.omelie-table, .data-table) th[data-sort]::after{
  content: " ⇅";
  font-size: 0.95em;
  opacity: 0.9;
  margin-left: 0.35rem;
}
:where(.omelie-table, .data-table) th.sorted-asc::after { content: " ↑"; }
:where(.omelie-table, .data-table) th.sorted-desc::after{ content: " ↓"; }

:where(.omelie-table, .data-table) th:hover{
  background: rgba(0,0,0,0.10);
}


/* ===============================
   Table body
   =============================== */

:where(.omelie-table, .data-table) tbody tr:nth-child(odd){ background: rgba(0,0,0,0.015); }
:where(.omelie-table, .data-table) tbody tr:nth-child(even){ background: rgba(0,0,0,0.00); }

:where(.omelie-table, .data-table) td{
  padding: 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  border-right: 1px solid rgba(0,0,0,0.06);
}
:where(.omelie-table, .data-table) td:last-child{ border-right: 0; }

.omelia-titolo{
  font-weight: 700;
  color: #2d1b4e;
}
.omelia-descrizione{
  color: #666;
  font-size: 0.95rem;
}
.omelia-data{
  white-space: nowrap;
}

/* --- STILE TOOLTIP PERSONALIZZATO --- */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 20px;
  width: 320px;
  padding: 12px;
  background: #fdf6e3; /* Crema come i video */
  color: #2d1b4e;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  display: none;
  z-index: 1000;
  pointer-events: none;
}

[data-tooltip]:hover::after {
  display: block;
}

/* ===============================
   Mobile tuning
   =============================== */

@media (max-width: 900px){
  :where(.omelie-container, .all-container){ margin: 2rem auto; }
  :where(.omelie-table, .data-table){ min-width: 760px; }
  :where(.omelie-table, .data-table) th,
  :where(.omelie-table, .data-table) td{
    padding: 0.75rem 0.65rem;
  }
}