/*!
 * STYLE-COMPONENTS.CSS - Comunitazione.it
 * Componenti del vecchio style.css non presenti in style2026.css.
 * Va caricato DOPO style2026.css.
 * Non toccare style2026.css per queste regole.
 */


/* ============================================
 * NAVBAR DROPDOWN - Fix sfondo e colori
 * style2026.css sovrascriveva con sfondo nero
 * ============================================ */

.navbar .site-menu ul li ul {
  position: absolute;
  left: -30px;
  top: calc(100% + 23px);
  z-index: 1000;
  padding: 30px;
  background: #0c0c0c; /* dropdown scuro: coerente con style originale */
  opacity: 0;
  visibility: hidden;
  transition: all .35s ease-in-out;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  border-radius: 0 0 6px 6px;
}

/* Ponte invisibile per non perdere hover tra trigger e dropdown */
.navbar .site-menu ul li ul::before {
  content: "";
  width: 100%;
  height: 27px;
  position: absolute;
  left: 0;
  top: -27px;
}

.navbar .site-menu ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

.navbar .site-menu ul li ul li {
  width: 100%;
  display: block;
  white-space: nowrap;
  margin-bottom: 7px;
}
.navbar .site-menu ul li ul li:last-child { margin-bottom: 0; }

.navbar .site-menu ul li ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 0;
  background: none;
  border: none;
}
.navbar .site-menu ul li ul li a:hover {
  color: #e90101;
  background: none;
  padding-left: 0;
  border: none;
}
/* annulla effetti :before/:after del menu principale sui link di secondo livello */
.navbar .site-menu ul li ul li a::before,
.navbar .site-menu ul li ul li a::after {
  display: none !important;
}


/* ============================================
 * POST-CATEGORIES
 * Pillole categoria su articoli e single-header
 * ============================================ */

.single-header .post-categories {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 20px;
  padding: 0;
  list-style: none;
}

.single-header .post-categories li {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
}

.single-header .post-categories li a {
  height: 24px;
  line-height: 24px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  background: #e90101;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.single-header .post-categories li a:hover {
  background: #0c0c0c;
  color: #fff;
}

.blog-post .post-categories {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 0;
  list-style: none;
}

.blog-post .post-categories li {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
}

.blog-post .post-categories li a {
  height: 24px;
  line-height: 24px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  background: #e90101;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.blog-post .post-categories li a:hover {
  background: #0c0c0c;
  color: #fff;
}


/* ============================================
 * NEW-YORK blog post style
 * Lista articoli numerata con underline hover
 * ============================================ */

.content-section {
  counter-reset: figure;
}

.new-york {
  position: relative;
  padding-left: 30px;
}

.new-york::before {
  counter-increment: figure;
  content: counter(figure, decimal-leading-zero);
  font-size: 20px;
  font-weight: 600;
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
}

.new-york .post-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.new-york .post-content .post-title {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.new-york .post-content .post-title a {
  display: inline;
  color: #1a1a1a;
  text-decoration: none;
  background-image: linear-gradient(rgba(0,0,0,0) calc(99% - 1px), #0c0c0c 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.new-york .post-content .post-title a:hover {
  background-size: 100% 100%;
  color: #1a1a1a;
}

/* Dark mode */
body.dark-mode .new-york .post-content .post-title a {
  color: #fff;
  background-image: linear-gradient(rgba(255,255,255,0) calc(99% - 1px), #fff 1px);
}


/* ============================================
 * MIAMI blog post style (sidebar widget)
 * ============================================ */

.blog-post.miami {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.blog-post.miami:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.blog-post.miami .post-image {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  margin: 0;
}

.blog-post.miami .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post.miami .post-content {
  flex: 1;
}

.blog-post.miami .post-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}

.blog-post.miami .post-title a {
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.3s ease;
}
.blog-post.miami .post-title a:hover { color: #e90101; }

.blog-post.miami .metas {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #999;
}

.blog-post.miami .metas .views {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-post.miami .metas .views img {
  width: 12px;
  height: auto;
  display: inline;
}


/* ============================================
 * SPACE UTILITIES
 * ============================================ */

.space-50 { padding-top: 50px; padding-bottom: 50px; }
.space-30 { padding-top: 30px; padding-bottom: 30px; }


/* ============================================
 * TEXAS blog post style
 * Card con immagine, categoria sovrapposta,
 * post-content che risale sull'immagine
 * ============================================ */

.content-section {
  counter-reset: figure;
}

.texas {
  position: relative;
}

.texas .post-image {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: 0;
}

.texas .post-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.texas .post-image .post-categories {
  position: absolute;
  left: 36px;
  top: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.texas .post-content {
  width: calc(100% - 36px);
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 36px;
  margin-top: -70px;
  position: relative;
  z-index: 1;
}

.texas .post-content::before {
  content: "";
  width: 20px;
  height: 1px;
  background: #0c0c0c;
  position: absolute;
  left: 80px;
  bottom: 57px;
}

.texas .post-content::after {
  counter-increment: figure;
  content: counter(figure, decimal-leading-zero);
  font-size: 26px;
  display: inline-block;
}

.texas .post-content .metas {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.texas .post-content .metas .date {
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.texas .post-content .post-title {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.texas .post-content .post-title a {
  display: inline;
  color: #1a1a1a;
  text-decoration: none;
  background-image: linear-gradient(rgba(0,0,0,0) calc(99% - 1px), #0c0c0c 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.texas .post-content .post-title a:hover {
  background-size: 100% 100%;
}

.texas .post-content .post-excerpt {
  width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Dark mode */
body.dark-mode .texas .post-content {
  background: #1a1a1a;
  color: #eee;
}
body.dark-mode .texas .post-content .post-title a {
  color: #eee;
  background-image: linear-gradient(rgba(255,255,255,0) calc(99% - 1px), #fff 1px);
}
body.dark-mode .texas .post-content::before {
  background: #eee;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .texas .post-content {
    width: 100%;
    margin-top: 0;
    padding: 20px 0;
  }
  .texas .post-content::before {
    left: 38px;
    bottom: 41px;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .texas .post-image .post-categories {
    top: 20px;
    left: 20px;
  }
  body.dark-mode .texas {
    margin-bottom: 30px;
  }
  body.dark-mode .texas .post-content {
    padding: 20px;
  }
  body.dark-mode .texas .post-content::before {
    left: 58px;
  }
}


/* ============================================
 * INDIANA blog post style
 * Full-width card con immagine background,
 * titolo centrato con highlight box-shadow
 * ============================================ */

.indiana {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.indiana .post-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover !important;
  background-position: center !important;
}

.indiana .post-content {
  width: 100%;
  padding: 0 15%;
  margin: 200px 0;
  margin-bottom: 300px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.indiana .post-content .post-categories {
  width: 100%;
  justify-content: center;
  margin-bottom: 30px;
}

.indiana .post-content .post-title {
  font-size: 45px;
  font-weight: 800;
  display: inline;
  line-height: 1.7;
  background-color: #0c0c0c;
  box-shadow: 0 0 0 10px #0c0c0c;
}

.indiana .post-content .post-title a {
  display: inline;
  color: #fff;
}

.indiana .post-content .post-title a:hover {
  text-decoration: none;
  color: #81fdc5;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .indiana .post-content {
    padding: 0 10%;
    margin: 150px 0;
    margin-bottom: 200px;
  }
  
  .indiana .post-content .post-title {
    font-size: 36px;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .indiana .post-content {
    padding: 0 5%;
    margin: 100px 0;
    margin-bottom: 150px;
  }
  
  .indiana .post-content .post-title {
    font-size: 28px;
    box-shadow: 0 0 0 5px #0c0c0c;
  }
}


/* ============================================
 * INDIANA blog post style
 * Full-width card con immagine background,
 * titolo centrato con highlight box-shadow
 * ============================================ */

.indiana {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.indiana .post-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover !important;
  background-position: center !important;
}

.indiana .post-content {
  width: 100%;
  padding: 0 15%;
  margin: 200px 0;
  margin-bottom: 300px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.indiana .post-content .post-categories {
  width: 100%;
  justify-content: center;
  margin-bottom: 30px;
}

.indiana .post-content .post-title {
  font-size: 45px;
  font-weight: 800;
  display: inline;
  line-height: 1.7;
  background-color: #0c0c0c;
  box-shadow: 0 0 0 10px #0c0c0c;
}

.indiana .post-content .post-title a {
  display: inline;
  color: #fff;
}

.indiana .post-content .post-title a:hover {
  text-decoration: none;
  color: #81fdc5;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .indiana .post-content {
    padding: 0 10%;
    margin: 150px 0;
    margin-bottom: 200px;
  }
  
  .indiana .post-content .post-title {
    font-size: 36px;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .indiana .post-content {
    padding: 0 5%;
    margin: 100px 0;
    margin-bottom: 150px;
  }
  
  .indiana .post-content .post-title {
    font-size: 28px;
    box-shadow: 0 0 0 5px #0c0c0c;
  }
}


/* ============================================
 * SIDE-NEWS
 * Box flottante con lista articoli in evidenza
 * ============================================ */

.side-news {
  width: 360px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 36px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translateX(260px) translateY(-50%);
}

.side-news .section-title {
  width: 100%;
  margin-bottom: 20px;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .side-news {
    width: 280px;
    transform: translateX(190px) translateY(-50%);
    padding: 20px;
  }
}

/* Responsive mobile: nascosto */
@media (max-width: 767px) {
  .side-news {
    display: none;
  }
}


/* ============================================
 * KENTUCKY blog post style
 * Lista con thumbnail circolare + titolo
 * ============================================ */

.kentucky {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #ddd;
}

.kentucky:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.kentucky .post-image {
  width: 70px;
  flex-shrink: 0;
  margin-bottom: 0;
  border-radius: 50%;
  overflow: hidden;
}

.kentucky .post-image img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.kentucky .post-content {
  width: calc(100% - 90px);
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}

.kentucky .post-content .metas {
  width: 100%;
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.kentucky .post-content .post-title {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

.kentucky .post-content .post-title a {
  display: inline;
  color: #1a1a1a;
  text-decoration: none;
  background-image: linear-gradient(rgba(0,0,0,0) calc(99% - 1px), #0c0c0c 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.kentucky .post-content .post-title a:hover {
  background-size: 100% 100%;
}

/* Dark mode */
body.dark-mode .kentucky .post-content .post-title a {
  color: #fff;
  background-image: linear-gradient(rgba(255,255,255,0) calc(99% - 1px), #fff 1px);
}
body.dark-mode .kentucky {
  border-bottom-color: #333;
}


/* ============================================
 * MONTANA blog post style
 * Lista notizie orizzontale: immagine 320px
 * a sinistra, contenuto a destra
 * ============================================ */

.montana {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ddd;
}

.montana:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.montana .post-image {
  width: 320px;
  flex-shrink: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 4px;
}

.montana .post-image img {
  width: 320px;
  height: 200px;
  object-fit: cover;
  display: block;
}

.montana .post-content {
  width: calc(100% - 340px);
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}

.montana .post-content .post-categories {
  width: 100%;
  margin-bottom: 10px;
}

.montana .post-content .post-title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0;
}

.montana .post-content .post-title a {
  display: inline;
  color: #1a1a1a;
  text-decoration: none;
  background-image: linear-gradient(rgba(0,0,0,0) calc(99% - 1px), #0c0c0c 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.montana .post-content .post-title a:hover {
  background-size: 100% 100%;
}

.montana .post-content .metas {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.montana .post-content .metas .author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.montana .post-content .metas .author figure {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}

.montana .post-content .metas .author figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.montana .post-content .metas .author a {
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  font-weight: 600;
}
.montana .post-content .metas .author a:hover { color: #e90101; }

.montana .post-content .metas .dot {
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: inline-block;
}

/* Dark mode */
body.dark-mode .montana {
  border-bottom-color: rgba(255,255,255,0.15);
}
body.dark-mode .montana .post-content .post-title a {
  color: #fff;
  background-image: linear-gradient(rgba(255,255,255,0) calc(99% - 1px), #fff 1px);
}
body.dark-mode .montana .post-content .metas {
  color: rgba(255,255,255,0.6);
}
body.dark-mode .montana .post-content .metas .dot {
  background: rgba(255,255,255,0.4);
}
body.dark-mode .montana .post-content .metas .author a {
  color: rgba(255,255,255,0.6);
}

/* Responsive tablet */
@media (max-width: 991px) {
  .montana .post-content .post-title {
    font-size: 20px;
  }
  .montana .post-content .metas .dot {
    display: none;
  }
  .montana .post-content .metas .author {
    width: 100%;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .montana {
    flex-direction: column;
    align-items: flex-start;
  }
  .montana .post-image {
    width: 100%;
    margin-bottom: 15px;
  }
  .montana .post-image img {
    width: 100%;
    height: 180px;
  }
  .montana .post-content {
    width: 100%;
    margin-left: 0;
  }
  .montana .post-content .metas .author {
    width: auto;
  }
}


/* ============================================
 * MAIN SLIDER (Swiper hero)
 * Slider principale su sfondo scuro
 * ============================================ */

.main-slider {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.main-slider .swiper-slide {
  overflow: hidden;
}

/* Paginazione verticale a destra */
.main-slider .swiper-pagination {
  width: 20px;
  display: inline-block;
  position: absolute;
  bottom: 50%;
  left: auto;
  right: 30px;
  z-index: 2;
  transform: translateY(50%);
}

.main-slider .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  position: relative;
  height: 14px;
  width: 14px;
  background: none;
  text-align: center;
  float: left;
  margin: 4px 0;
}

.main-slider .swiper-pagination .swiper-pagination-bullet::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

.main-slider .swiper-pagination .swiper-pagination-bullet svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

.main-slider .swiper-pagination .swiper-pagination-bullet svg circle {
  width: 14px;
  height: 14px;
  stroke-dasharray: 83px;
  stroke-dashoffset: 83px;
  stroke-linecap: round;
  stroke-width: 3px;
  stroke: #fff;
  fill: none;
  animation: none;
  animation-play-state: paused;
}

.main-slider .swiper-pagination .swiper-pagination-bullet-active {
  background: none;
}

.main-slider .swiper-pagination .swiper-pagination-bullet-active svg circle {
  stroke-dashoffset: 0;
  stroke-linejoin: round;
  transition: stroke-dashoffset .5s ease;
}

.main-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active svg circle {
  animation-play-state: running;
  stroke-width: 3px;
  animation: countdown 4.5s linear forwards;
  animation-delay: 0.5s;
}

@keyframes countdown {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 83px; }
}

/* Responsive: nasconde paginazione su tablet/mobile */
@media (max-width: 767px) {
  .main-slider .swiper-pagination {
    display: none;
  }
}


/* ============================================
 * BLOG-POST BASE + LIGHT VARIANT
 * ============================================ */

.blog-post {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.blog-post.light {
  color: #fff;
}
.blog-post.light .post-categories li a:hover {
  background: #fff;
  color: #0c0c0c;
}
.blog-post.light .post-title {
  color: #fff;
}
.blog-post.light .post-title a {
  color: #fff;
}
.blog-post.light .post-content {
  color: #fff;
}
.blog-post.light .post-content .metas {
  color: #fff;
}
.blog-post.light .post-content .metas .date {
  opacity: 0.6;
  color: #fff;
}
.blog-post.light .post-content .metas .dot {
  background: #eee;
}
.blog-post.light .post-content .metas .author {
  color: rgba(255, 255, 255, 0.6);
}
.blog-post.light .post-content .metas .author a {
  color: rgba(255, 255, 255, 0.6);
}


/* ============================================
 * CHICAGO blog post style
 * ============================================ */

.chicago {
  position: relative;
  align-items: center;
}
.chicago .post-content {
  width: 55%;
  margin-right: -21%;
  position: relative;
  z-index: 1;
}
.chicago .post-content .post-title {
  font-size: 50px;
  font-weight: 800;
  display: inline;
  line-height: 66px;
  background-color: #0c0c0c;
  box-shadow: 0.5em 0 0 #0c0c0c, -0.5em 0 0 #0c0c0c;
}
.chicago .post-content .post-title a {
  display: inline;
}
.chicago .post-content .post-title a:hover {
  text-decoration: none;
  color: #81fdc5;
}
.chicago .post-content .metas {
  margin-top: 30px;
}
.chicago .post-image {
  width: 66%;
  margin-bottom: 0;
  overflow: hidden;
}
.chicago .post-image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Responsive tablet grande */
@media (max-width: 1199px) {
  .chicago .post-content .post-title {
    font-size: 40px;
    line-height: 54px;
  }
}

/* Responsive tablet */
@media (max-width: 991px) {
  .chicago .post-content .post-title {
    font-size: 30px;
    line-height: 38px;
  }
  .chicago .post-content .metas .dot {
    display: none;
  }
  .chicago .post-content .metas .date {
    width: 100%;
    margin-top: 10px;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .chicago .post-content {
    width: 100%;
    margin-right: 0;
  }
  .chicago .post-image {
    width: 100%;
    margin-top: 25px;
  }
}


/* ============================================
 * NEWS-SLIDER-WRAPPER
 * Slider hero full-width con thumbnail bottom
 * e side-news assoluto a destra
 * ============================================ */

.news-slider-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.news-slider-wrapper .news-slider-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* Thumbnail strip in basso */
.news-slider-wrapper .news-slider-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 50px;
  z-index: 2;
}

.news-slider-wrapper .news-slider-bottom .news-slider-thumbs {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.news-slider-wrapper .news-slider-bottom .news-slider-thumbs figure {
  width: 100%;
  display: block;
  margin-bottom: 0;
}

.news-slider-wrapper .news-slider-bottom .news-slider-thumbs figure img {
  width: 50%;
}

.news-slider-wrapper .news-slider-bottom .news-slider-thumbs figure figcaption {
  width: 100%;
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding-right: 20%;
  line-height: 1.3;
}

/* Side-news: assoluto a destra dentro news-slider-wrapper
   HTML: fratello di news-slider-top, non figlio */
/* news-slider-top: overflow hidden come originale AQUM */
.news-slider-wrapper .news-slider-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* SIDE-NEWS: posizionamento originale AQUM */
.side-news {
  width: 360px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 36px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translateX(260px) translateY(-50%);
}

.side-news .section-title {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1a1a1a;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .side-news {
    width: 260px;
    padding: 20px;
    transform: translateX(190px) translateY(-50%);
  }
  .news-slider-wrapper .news-slider-bottom {
    bottom: 20px;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .news-slider-wrapper .news-slider-bottom {
    display: none;
  }
  .side-news {
    display: none;
  }
}


/* ============================================
 * ARIZONA blog post style
 * Slide hero full-screen con immagine
 * in background e titolo con highlight nero
 * ============================================ */

.arizona {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background: #0c0c0c;
}

/* Immagine come background assoluto */
.arizona .post-image {
  width: 100%;
  height: 860px;
  position: absolute;
  left: 0;
  top: 0;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.7;
}

.arizona {
  min-height: 860px;
}

.arizona .post-content {
  width: 50%;
  display: block;
  padding-left: 10px;
  margin: 200px 0 300px 0;
  position: relative;
  z-index: 1;
}

.arizona .post-content .post-categories {
  margin-left: -10px;
  margin-bottom: 20px;
}

.arizona .post-content .post-title {
  font-size: 40px;
  font-weight: 800;
  display: inline;
  line-height: 1.7;
  background-color: #0c0c0c;
  box-shadow: 0 0 0 10px #0c0c0c;
  margin-bottom: 0;
}

.arizona .post-content .post-title a {
  display: inline;
  color: #fff;
  text-decoration: none;
}
.arizona .post-content .post-title a:hover {
  color: #e90101;
}

.arizona .post-content .metas {
  margin-top: 30px;
  margin-left: -10px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .arizona .post-content {
    width: 80%;
  }
}

/* Responsive mobile */
@media (max-width: 767px) {
  .arizona {
    height: 100%;
  }
  .arizona .post-content {
    margin: 100px 0 !important;
  }
  .arizona .post-content .post-title {
    font-size: 22px;
  }
}


/* ============================================
 * ALASKA blog post style
 * Lista articoli pagina area/categoria:
 * immagine full-width, content che risale
 * ============================================ */

.alaska {
  width: calc(100% - 50px);
  margin-bottom: 50px;
  position: relative;
}

.alaska:last-child {
  margin-bottom: 0;
}

.alaska .post-image {
  width: 100%;
  position: relative;
  margin-bottom: 0;
}

.alaska .post-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.alaska .post-image .post-categories {
  position: absolute;
  left: 36px;
  top: 36px;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.alaska .post-image .bookmark {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.95);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  z-index: 2;
  transition: all 0.3s ease;
  text-decoration: none;
}
.alaska .post-image .bookmark:hover {
  background: #e90101;
  color: #fff;
}

.alaska .post-content {
  width: calc(100% - 50px);
  background: #fff;
  padding: 36px;
  margin-top: -50px;
  position: relative;
  z-index: 1;
}

.alaska .post-content .metas {
  margin-bottom: 20px;
  align-items: center;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #666;
  font-size: 13px;
}

.alaska .post-content .metas .author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alaska .post-content .metas .author figure {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  flex-shrink: 0;
}

.alaska .post-content .metas .author figure img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.alaska .post-content .metas .author a {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}
.alaska .post-content .metas .author a:hover { color: #e90101; }

.alaska .post-content .metas .dot {
  width: 4px;
  height: 4px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
}

.alaska .post-content .metas .comments {
  color: #e90101;
  font-weight: 500;
}

.alaska .post-content .post-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.alaska .post-content .post-title a {
  display: inline;
  color: #1a1a1a;
  text-decoration: none;
  background-image: linear-gradient(rgba(0,0,0,0) calc(99% - 1px), #0c0c0c 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.alaska .post-content .post-title a:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.alaska .post-content .post-excerpt {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.alaska .post-content .post-link {
  display: inline-block;
  color: #e90101;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #e90101;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}
.alaska .post-content .post-link:hover {
  color: #0c0c0c;
  border-color: #0c0c0c;
}

/* Dark mode */
body.dark-mode .alaska .post-content {
  background: #1a1a1a;
}
body.dark-mode .alaska .post-content .post-title a {
  color: #fff;
  background-image: linear-gradient(rgba(255,255,255,0) calc(99% - 1px), #fff 1px);
}

/* Responsive mobile */
@media (max-width: 767px) {
  .alaska {
    width: 100%;
  }
  .alaska .post-content {
    width: 100%;
    margin-top: 0;
    padding: 20px;
  }
  .alaska .post-content .post-title {
    font-size: 24px;
  }
  .alaska .post-image img {
    height: 220px;
  }
}


/* ============================================
 * PAGINATION
 * ============================================ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
}

.pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e5e5;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.pagination .page-item .page-link:hover {
  background: #e90101;
  border-color: #e90101;
  color: #fff;
}

.pagination .page-item.active .page-link {
  background: #e90101;
  border-color: #e90101;
  color: #fff;
}


/* ============================================
 * SUBCATEGORIES SIDEBAR
 * Lista sottocategorie con stile pill
 * ============================================ */

.blog-sidebar__wrap {
  margin-bottom: 20px;
}

.blog-sidebar__title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e90101;
}

.blog-sidebar__categories ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.blog-sidebar__categories ul li {
  list-style: none !important;
}

.blog-sidebar__categories ul li {
  margin-bottom: 10px;
}

.blog-sidebar__categories ul li:last-child {
  margin-bottom: 0;
}

.blog-sidebar__categories ul li a,
.blog-sidebar__categories ul li .subcat {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  box-sizing: border-box;
}

.blog-sidebar__categories ul li a:hover,
.blog-sidebar__categories ul li .subcat:hover {
  background-color: #e90101;
  border-color: #e90101;
  color: #fff;
}

/* Categoria attiva (quella corrente) */
.blog-sidebar__categories ul li p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid #e90101;
  background: #e90101;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

/* Contatore articoli (span dentro il link) */
.blog-sidebar__categories ul li a span.count,
.blog-sidebar__categories ul li .subcat span.count {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  flex-shrink: 0;
  transition: all 0.3s ease-in-out;
}

.blog-sidebar__categories ul li a:hover span.count,
.blog-sidebar__categories ul li .subcat:hover span.count {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* Dark mode */
body.dark-mode .blog-sidebar__title {
  color: #fff;
}

body.dark-mode .blog-sidebar__categories ul li a,
body.dark-mode .blog-sidebar__categories ul li .subcat {
  border-color: rgba(255,255,255,0.15);
  color: #eee;
}

body.dark-mode .blog-sidebar__categories ul li a span.count,
body.dark-mode .blog-sidebar__categories ul li .subcat span.count {
  border-color: rgba(255,255,255,0.15);
  color: #aaa;
}


/* ============================================
 * HIGHLIGHT SLIDER - CSS originale AQUM
 * ============================================ */

.highlight-slider-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.highlight-slider-wrapper .highlight-slider-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.highlight-slider-wrapper .highlight-slider-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.highlight-slider-wrapper .highlight-slider-bottom::before {
  content: "";
  width: 100%;
  height: 50px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.highlight-slider-wrapper .highlight-slider-bottom .highlight-slider-thumbs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.highlight-slider-wrapper .highlight-slider-bottom .highlight-slider-thumbs .swiper-slide figure {
  width: 100%;
  display: block;
  margin-bottom: 0;
  position: relative;
  background: #0c0c0c;
}

.highlight-slider-wrapper .highlight-slider-bottom .highlight-slider-thumbs .swiper-slide figure figcaption {
  display: flex;
  position: absolute;
  left: 15px;
  bottom: 10px;
  color: #fff;
  background: #0c0c0c;
  padding: 2px 6px;
  font-size: 13px;
}

.highlight-slider-wrapper .highlight-slider-bottom .highlight-slider-thumbs .swiper-slide figure img {
  opacity: 1;
}

.highlight-slider-wrapper .highlight-slider-bottom .highlight-slider-thumbs .swiper-slide-active figure img {
  opacity: 0.6;
}

/* Dark mode */
body.dark-mode .highlight-slider-wrapper .highlight-slider-bottom::before {
  background: #0c0c0c;
}

/* Altezza fissa slide per dare contesto a post-image absolute */
.highlight-slider-top .swiper-slide,
.highlight-slider-top .blog-post.indiana {
  height: 600px;
}

@media (max-width: 991px) {
  .highlight-slider-top .swiper-slide,
  .highlight-slider-top .blog-post.indiana {
    height: 450px;
  }
}

@media (max-width: 767px) {
  .highlight-slider-top .swiper-slide,
  .highlight-slider-top .blog-post.indiana {
    height: 320px;
  }
}