/* --- HERO --- */
.pwds-hero { margin-top: 1rem; margin-bottom: 2rem; }
.pwds-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.pwds-hero-title {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}
.pwds-hero-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* --- LAYOUT --- */
.pwds-layout {
  display: grid;
  grid-template-columns: 1fr 220px; /* sinistra contenuto, destra legenda */
  gap: 32px;
}

/* --- MULTI-COLONNE SINISTRA --- */
.pwds-multicol {
  column-count: 4;
  column-gap: 24px;
}
@media (max-width: 1200px) {
  .pwds-multicol { column-count: 3; }
}
@media (max-width: 992px) {
  .pwds-multicol { column-count: 2; }
}
@media (max-width: 600px) {
  .pwds-multicol { column-count: 1; }
}

.pwds-letter-block {
  break-inside: avoid-column; /* se vuoi meno “buchi” tra h2 e lista, toglilo se preferisci più flusso */
  margin-bottom: 16px;
  display: inline-block; /* necessario per columns */
  width: 100%;
}

.pwds-letter {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.pwds-names {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pwds-name { margin: 0 0 6px 0; }
.pwds-name a { text-decoration: none; }
.pwds-name a:hover { text-decoration: underline; }

/* --- LEGENDA DESTRA --- */
.pwds-legend { position: relative; }
.pwds-legend-inner {
  position: sticky;
  top: 80px; /* regola se hai header sticky nel tema */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 12px;
}
.pwds-legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2; /* legenda su 2 colonne per compattezza */
  column-gap: 12px;
}
.pwds-legend-list li { break-inside: avoid; margin: 4px 0; }

.pwds-letter-link {
  color: #111;
  text-decoration: none;
  font-weight: 600;
}
.pwds-letter-link:hover { text-decoration: underline; }

.pwds-letter-disabled {
  color: #bbb;
  font-weight: 600;
}

/* Responsive: legenda sotto per schermi stretti */
@media (max-width: 992px) {
  .pwds-layout {
    grid-template-columns: 1fr;
  }
  .pwds-legend-inner {
    position: static;
    margin-top: 8px;
  }
}
.container:has(.pwds-full) {
	width:90% !important;
}

#content:has(.pwds-full) {
	box-shadow: none !important;
	border: 0px !important;
}

#module-pwdesigner-designers .breadcrumb OL {
	display:none !important;
}

/* JUMPBAR: visibile SOLO su mobile/tablet, sticky on scroll */
.pwds-jumpbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: none;            /* nascosta di default (desktop) */
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: .75rem 1rem;
}

.pwds-jumpbar-label {
  font-weight: 600;
  margin-right: .5rem;
}

.pwds-jumpbar-select {
  width: 100%;
  /* max-width: 260px; */
  background-color: #ece1a08c !important;
  color: #232323 !important;
  border-radius: 5px !important;
  border: 0px !important;
}

/* Mostra la jumpbar sotto 992px (mobile/tablet), desktop resta invariato */
@media (max-width: 991.98px) {
  .pwds-jumpbar {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .pwds-legend-inner {
	display: none;
	}
	
}

.pwds-letter-block {
  scroll-margin-top: 80px; /* alza pure a 100 se la barra è più alta */
}

.pwds-jumpbar--fixed {
  position: fixed;
  top: 0;               /* se hai header fisso metti 60px ecc. */
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #eee;
}