/* 1. Il contenitore principale deve essere una GRID */
.weblinks, 
ul.category-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;

    width: 80% !important;
    margin: 40px auto !important;
}

/* 2. Il singolo elemento LI deve essere un FLEX COLUMN */
.weblinks li, 
ul.category-list li {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-top: 4px solid #1f3854 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 3. IL TRUCCO: Se c'è un DIV interno che rompe il layout, forziamo anche lui */
.weblinks li div, 
.weblinks li span {
    display: block !important; /* Forza ogni contenitore interno ad andare a capo */
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
}

/* 4. Titolo e Descrizione specifici */
.weblinks li a {
    display: block !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
    color: #333 !important;
}

.weblinks li .description, 
.weblinks li .web-description {
    display: block !important;
    font-size: 1rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* WebLinks LIST */

/* Stile specifico per il layout Tabella centrato all'80% */
.weblinks-container-tabella {
    width: 90% !important;
    margin: 30px auto !important;
    overflow-x: auto; /* Permette lo scroll su mobile se la tabella è larga */
    font-size: 1.1rem !important;
}

.weblinks-table-custom {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.weblinks-table-custom th {
    background-color: #f4f7f9;
    color: #333;
    padding: 12px 15px;
    border-bottom: 3px solid #007bff; /* Barra blu per richiamare lo stile precedente */
    text-align: left;
}

.weblinks-table-custom td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

/* Titolo a sinistra */
.cell-title {
    width: 35%;
    color: #333;
}

/* Contenuto a destra */
.weblink-description-text {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.btn-link-tab {
    font-size: 0.85rem;
    color: #007bff !important;
    text-decoration: underline !important;
    word-break: break-all; /* Evita che link lunghi rompano la tabella */
}

/* Responsive: su smartphone torna a larghezza piena */
@media (max-width: 768px) {
    .weblinks-container-tabella {
        width: 100% !important;
    }
}

/* Altro CSS Custom */
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span, li.sp-menu-item {
font-size: 1.2vw !important;
font-weight: bold !important;
font-style: italic;
color: white;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
font-size: 1.2vw !important;
font-weight: bold !important;
font-style: italic;
}

#sp-main-body {
    padding: 0;
    min-height: calc(100vh - 10.1em);
}

.container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.burger-icon > span {background-color: #ffffff; }

/*div[itemprop="articleBody"], .article-header, .article-ratings-social-share {
   padding-right: calc(var(--bs-gutter-x) * 2);
    padding-left: calc(var(--bs-gutter-x) * 2);
}*/

.article-full-image img, .articleImage {
border-radius: 0px 0px 4px 4px !important;
width: 100%;
height: 350px;
}

.innerImage {
  margin: 10px;
  max-width: 270px;
  border-radius: 10px !important; 
}

@media (max-width: 1199px) {
	.article-full-image img, .articleImage {
		height: 150px;
	}

    .innerImage {
      margin: 5px;
      max-width: 130px;
      border-radius: 10px !important; 
    }
}

.articlePageLayout{
   padding-right: calc(var(--bs-gutter-x) * 2);
    padding-left: calc(var(--bs-gutter-x) * 2);
    margin-top: 20px;
    margin-bottom: 20px;
}

.article-details .article-can-edit {
    margin-bottom: 0px !important;
}

.header-page-image { width: 100%}