/* ClubConnect Events styles */
.cc-events { margin: 1rem 0; }
.cc-events__toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; position: sticky; top: var(--cc-topbar-height, 52px); background: #fff; z-index: 500; padding: .5rem 0; border-bottom: 1px solid #E5E7EB; }
.cc-events__items { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 1rem; row-gap: 3rem; }
.cc-events__toplink { display: flex; justify-content: center; margin-top: .75rem; }
.cc-event { background: #fff; border: 1px solid #E5E7EB; border-radius: var(--cc-radius-controls); padding: .9rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 10px 24px rgba(15,23,42,0.08); height: 100%; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; cursor: pointer; }
.cc-event:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(15,23,42,0.14); border-color: #D1D5DB; }
.cc-event__cover { width: 100%; height: 180px; object-fit: cover; border-radius: var(--cc-radius-controls); }
.cc-event__media { position: relative; }
.cc-event__cover { transition: transform .22s ease, filter .22s ease; }
.cc-event:hover .cc-event__cover { transform: scale(1.03); filter: brightness(1.05); }
.cc-event__cover--placeholder { background: #F3F4F6; border: 1px dashed #E5E7EB; }
.cc-event__title { font-size: 1.1rem; margin: .25rem 0; color: #540201; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; min-height: 2.4em; }
.cc-event__title a { color: #540201; }
.cc-event__when { color: #666; font-size: .875rem; min-height: 20px; }
.cc-event__loc { color: #444; min-height: 20px; }
.cc-event__stats { color: #666; font-size: .8rem; min-height: 18px; }
.cc-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: var(--cc-radius-controls); padding: 4px 8px; min-height: 26px; }
.cc-chip--placeholder { visibility: hidden; }
.cc-chip__logo { width: 18px; height: 18px; object-fit: cover; border-radius: var(--cc-radius-controls); border: 1px solid #E5E7EB; }
.cc-chip__name { color: #111827; font-weight: 600; font-size: .78rem; text-decoration: none; }
.cc-events__pagination { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 2rem; position: relative; z-index: 1; }
.cc-pager__info { color: #444; }
@media (max-width: 768px) {
  /* Nascondi il testo "Pagina X di Y" su mobile/tablet per interfaccia più pulita */
  .cc-pager__info { display: none; }
}
.cc-empty { color: #666; text-align: center; }

/* Responsive grid: colonne e altezze cover */
@media (max-width: 639px) { .cc-events__items { grid-template-columns: 1fr; row-gap: 2.75rem !important; } }

@media (max-width: 1024px) { .cc-event__cover { height: 160px; } }
@media (max-width: 640px) { .cc-event__cover { height: 140px; } }

/* Migliorie visuali su mobile: maggiore respiro e utilizzo del margine sinistro */
@media (max-width: 640px) {
  /* Gutter sinistro per contenuti e toolbar */
  .cc-events { padding-left: 0; }
  .cc-events__toolbar { padding-left: 0.75rem; padding-right: 0.5rem; }
  .cc-events__items { padding-left: 0; row-gap: 2rem; }
  .cc-events__pagination { padding-left: 0.75rem; flex-wrap: wrap; row-gap: .5rem; }

  /* Card più ariose: padding e spaziatura interna */
  .cc-event { padding: 1.05rem 1rem 1rem 1.1rem; gap: .75rem; }
  .cc-event__title { font-size: 1.15rem; line-height: 1.3; }
  .cc-event__when, .cc-event__loc { line-height: 1.35; }
}
@media (max-width: 640px) { .cc-events .cc-carousel-outer { overflow: visible; } }
@media (max-width: 640px) { .cc-events .cc-carousel { grid-auto-columns: clamp(200px, calc(100% - 64px), 290px) !important; } }
/* Badge visibilità per eventi */
.cc-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .4rem;
  font-size: .75rem;
  border-radius: .25rem;
  vertical-align: middle;
  line-height: 1.2;
  border: 1px solid rgba(0,0,0,.08);
}
.cc-badge--overlay { position: absolute; top: .5rem; right: .5rem; margin-left: 0; }
.cc-badge--public { background: #e7f5ff; color: #0b7285; }
.cc-badge--private { background: #fff3bf; color: #ad7d00; }
.cc-badge--draft { background: #F59E0B; color: #1f2937; }
/* Carosello per lista Eventi */
.cc-events .cc-carousel {
  display: grid;
  grid-auto-flow: column;
  --cc-carousel-gap: 16px;
  grid-auto-columns: clamp(280px, calc((100% - (3 * var(--cc-carousel-gap))) / 4), 360px);
  gap: var(--cc-carousel-gap);
  overflow-x: auto;
  padding: 8px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-y pan-x;
  width: 100%;
}
.cc-events .cc-carousel::-webkit-scrollbar { display: none; }
.cc-events .cc-carousel-outer { position: relative; display: block; }
.cc-events .cc-carousel-wrap { width: 100%; }
.cc-events .cc-carousel-controls { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.cc-events .cc-carousel__prev,
.cc-events .cc-carousel__next { appearance: none; border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; position: static; transform: none; }
.cc-events .cc-carousel__prev:focus-visible,
.cc-events .cc-carousel__next:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.cc-events .cc-carousel__prev:disabled,
.cc-events .cc-carousel__next:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1399px) { .cc-events .cc-carousel { grid-auto-columns: clamp(280px, calc((100% - (3 * var(--cc-carousel-gap))) / 4), 360px); } }
@media (min-width: 1400px) { .cc-events .cc-carousel { grid-auto-columns: calc((100% - (3 * var(--cc-carousel-gap))) / 4); } }
.cc-events .cc-carousel__item { scroll-snap-align: start; }
.cc-events .cc-carousel__item > .cc-event { width: 100%; }
