@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap);

/* ============================================================
   BARINEDITA.CSS - CSS unificato per Bootstrap 5
   ============================================================ */

/* === BASE === */
body {
  user-select: none;
  background: #ebebeb;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; outline: none; color: #00427f; }
iframe, .fb_iframe_widget { vertical-align: middle; max-width: 100%; }
img.bannerspec { vertical-align: top; }
html { scroll-behavior: smooth; }

/* === LAYOUT === */
.container { position: relative; z-index: 1; }
.container.bianco { background: #fff; }
.np { padding: 0; }
.nm { margin: 0 !important; }
.col-md-6, .col-md-4, .col-md-3, .col-md-2, .col-md-12 { margin-bottom: 10px; }

/* === NAVBAR === */
.navbar { border-radius: 0; border: none; min-height: inherit; }
.navbar.bg-dark, .navbar-dark { background-color: #403b3d !important; margin-left: -12px; margin-right: -12px; }
.navbar-nav .nav-link { padding: 10px; color: rgba(255,255,255,0.85) !important; font-size: 13px; }
.navbar-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.1); }

/* === HEADER / TOP === */
.top { margin-top: 15px; }
.logo { padding-bottom: 15px; padding-right: 15px; display: block; }
.pulsantini .btn { font-size: 13px; }
.pulsantini .btn.riduci { font-size: 11px; }
.img-circle { border: 2px solid #08bcc0; }
.blink_me { background-color: #08bcc0 !important; border-color: #08bcc0 !important; }

/* === BUTTONS === */
.btn-dark { background-color: #403b3d; border-color: #403b3d; color: #fff; border-radius: 3px; font-size: 12px; transition: background 0.2s; }
.btn-dark:hover, .btn-dark:focus { background-color: #08bcc0; border-color: #08bcc0; color: #fff; }
.btn { white-space: normal; }

/* === PAGE HEADER === */
.page-header { padding-bottom: 0; color: #08bcc0; margin: 20px 0 10px; border-bottom: none; }
.page-header a { color: #666; }

/* === SECTION TITLES === */
.section-title {
  display: flex;
  align-items: center;
  margin: 28px 0 16px;
  padding: 0;
  border: none;
  gap: 10px;
}
.section-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 28px;
  background: #08bcc0;
  flex-shrink: 0;
  border-radius: 2px;
}
.section-title h3 {
  margin: 0; padding: 0;
  font-size: 17px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; color: #333;
}
.section-title h3 a { color: #333 !important; text-decoration: none; }
.section-title h3 a:hover { color: #08bcc0 !important; }

/* === BIG BOX (HERO NEWS) === */
.newsbig { margin-bottom: 15px; border-radius: 6px; }
.newsbig .foto, .newshp .foto {
  position: relative; overflow: hidden; border-radius: 4px 4px 0 0;
}
.newsbig .foto img, .newshp .foto img {
  transition: transform 0.35s ease; display: block; width: 100%;
}
.newsbig:hover .foto img, .newshp:hover .foto img { transform: scale(1.04); }
.newsbig .boxblutxt {
  font-size: 19px; font-weight: bold; color: #fff; line-height: 21px;
  padding: 12px 14px !important;
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 70%, transparent 100%) !important;
  height: 50%; display: flex; align-items: flex-end;
}
.newsbig .boxblutxt a {
  color: #fff !important; line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4); text-decoration: none;
}
.newsbig .boxblu { display: none; }
.newsbig .testo {
  font-size: 13px; line-height: 1.65; color: #555;
  padding: 10px 2px; height: auto; overflow: hidden;
}
.row.newsbig { border: none; }
.newsbig .rounded { border-radius: 4px; transition: opacity 0.2s; }
.newsbig .rounded:hover { opacity: 0.85; }

/* === NEWS CARDS (THUMBNAIL) === */
.thumbnail {
  position: relative; border: none; border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: 0; margin-bottom: 10px;
}
.thumbnail:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
.thumbnail img { display: block; width: 100%; }
.thumbnail .cat { position: absolute; top: 3%; left: -4px; border-color: #ddd; }
.caption { padding: 14px !important; }
.caption .testo-card { font-size: 13px; line-height: 1.6; color: #555; }
/* Card: .foto wrapper con h4 overlay */
.newshp .foto {
  position: relative; overflow: hidden; border-radius: 4px 4px 0 0;
}
.newshp .foto img {
  transition: transform 0.35s ease; display: block; width: 100%;
}
.newshp:hover .foto img { transform: scale(1.04); }
.newshp .foto h4 {
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 70%, transparent 100%) !important;
  padding: 12px 14px !important;
  position: absolute; bottom: 0; left: 0; right: 0; margin: 0;
  font-size: 16px; font-weight: 300; height: 50%;
  display: flex; align-items: flex-end; color: #fff !important;
}
.newshp .foto h4 a, .newshp h4 a { color: #fff !important; text-decoration: none; }
h4 a { color: #08bcc0; display: block; width: 100%; height: 100%; }

/* === SEZIONI INFERIORI === */
.eventi, .artisti { width: 100%; }
.eventi .foto, .artisti .foto, .eventi.secondo .foto {
  position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 10px;
}
.eventi .foto img, .artisti .foto img, .eventi.secondo .foto img {
  transition: transform 0.35s ease; display: block; width: 100%;
}
.eventi .foto:hover img, .artisti .foto:hover img, .eventi.secondo .foto:hover img {
  transform: scale(1.04);
}
.eventi .boxblutxt, .artisti .boxblutxt, .eventi.secondo .boxblutxt {
  font-size: 18px; color: #fff;
  padding: 30px 12px 10px !important;
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
}
.eventi .boxblutxt h4, .artisti .boxblutxt h4, .eventi.secondo .boxblutxt h4 {
  margin: 0; background: none !important; padding: 0 !important;
  height: auto; position: static; display: block;
}
.eventi .boxblutxt h4 a, .artisti .boxblutxt h4 a, .eventi.secondo .boxblutxt h4 a {
  color: #fff !important; font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); text-decoration: none;
}

/* === ESPERTI === */
.media { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.media:last-child { border-bottom: none; }
.media-heading a { color: #08bcc0 !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.media-heading a:hover { color: #333 !important; }

/* === VIDEO PLAY === */
.videoplay { position: relative; display: block; overflow: hidden; }
.videoplay::after {
  content: "Video gallery"; border-radius: 0 0 6px 6px; font-size: 90%; padding: 4px;
  position: absolute; bottom: 0; width: 100%; text-align: center;
  background: #403b3dcf; color: #11bdc2;
}
.videoplay::before {
  position: absolute; z-index: 2; top: calc(50% - 50px); left: calc(50% - 40px);
  content: url(/images/Play_Icon.png); width: 80px; height: 80px;
}

/* === BANNER === */
.banneresp { height: auto; margin-bottom: 0 !important; overflow: hidden; }
.adsbygoogle[style] { max-width: 100% !important; overflow: hidden; }
.adsbygoogle iframe[style] { width: 100% !important; }
.adv {
  position: absolute; bottom: 6px; right: 10px;
  background: url("/pubblicita.png") no-repeat; width: 117px; height: 59px; z-index: 4;
}
.pubbli .caption h4 { background: #80b828; }

/* === BREADCRUMBS === */
.breadcrumb {
  background: #f5f5f5; padding: 10px 15px; border-radius: 4px;
  font-size: 13px; margin-bottom: 15px; list-style: none; display: flex; flex-wrap: wrap;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/"; padding: 0 8px; color: #999;
}
.breadcrumb-item a { color: #08bcc0; text-decoration: none; }
.breadcrumb-item a:hover { color: #333; }
.breadcrumb-item.active { color: #666; }

/* === NEWSLETTER === */
.newsletter {
  background: #403b3d; color: #fff; padding: 14px 0 4px 0;
  clear: both; position: relative; z-index: 2;
}

/* === FOOTER === */
.bgfooter { background: #7a7577; padding: 20px 0; position: relative; z-index: 2; }
#footer { margin-top: 15px; padding: 10px 0; border-top: 1px solid #dedede; font-size: 11px; }
#footer a, #footer2 a { color: #fff; }
#footer2 { padding: 10px 0; font-size: 11px; border-top: 1px solid #dedede; }
#footer2 .credits { float: right; }

/* === NEWS TEXT (ARTICOLI) === */
.newstxt {
  color: #000; line-height: 25px; margin: 0; font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
.newstxt img[style*="left"] { margin: 0 10px 10px 0; }
.newstxt img[style*="right"] { margin: 0 0 10px 10px; }
.newstxt a {
  text-decoration: underline; color: #000;
  text-decoration-color: #08bcc0; text-underline-offset: 6%;
  text-underline-position: from-font; text-decoration-thickness: 2px;
}
.newstxt table {
  border: 1px solid #ddd; width: 100%; max-width: 100%;
  margin-bottom: 20px; border-collapse: collapse; font-size: 85%;
}
.newstxt table > thead:first-child > tr:first-child > td { border-top: 0; }
.newstxt table > thead > tr > td {
  border: 1px solid #ddd; border-bottom-width: 2px;
  padding: 5px; line-height: 1.42857143; vertical-align: top;
}
.newstxt table > tbody > tr > td { border: 1px solid #ddd; padding: 5px; }
.newstxt table > tbody > tr:nth-of-type(2n+1) { background-color: #f9f9f9; }

/* === GALLERY === */
.gall { overflow: hidden; padding-bottom: 0; }
.gall .caption { padding-bottom: 0; }
.gall .caption h4 { margin-bottom: 0; font-size: 15px; }

/* === AUTORE === */
.autore {
  display: inline-table; margin: 8px 0; width: 49.6%;
  background: #ddd; overflow: hidden; border-radius: 6px;
}
.autore.np { padding: 0; width: 100%; }
.autore .foto {
  width: 70px; height: 70px; display: table-cell;
  margin: 0; overflow: hidden; border-radius: 5px 0 0 5px;
}
.autore .testo { display: table-cell; padding: 5px 5px 5px 10px; vertical-align: top; }
.autore .testo span { font-size: 16px; margin: 0 0 2px 0; padding: 0; color: #12bcc1; font-weight: bold; }

/* === VARIE === */
ul, ol { padding-left: 15px; }
.letton { background: #403b3d; color: #fff; padding: 4px; font-size: 11px; line-height: 12px; display: inline-table; }
span.print { background: url(/images/icon_printer.gif) no-repeat; display: inline-block; line-height: 20px; padding-left: 23px; float: right; }
#send2 { display: none; }
.dont-break-out { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.fancybox-container { z-index: 1000300 !important; }
.fancybox-caption { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 14px !important; }

/* === ANIMATION === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.newshp { animation: fadeInUp 0.4s ease both; }
.newshp:nth-child(1) { animation-delay: 0s; }
.newshp:nth-child(2) { animation-delay: 0.08s; }
.newshp:nth-child(3) { animation-delay: 0.16s; }
.newshp:nth-child(4) { animation-delay: 0.24s; }

/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */
.mobile-fregi-spacer { display: none; }

@media (max-width: 767.98px) {
  body { padding-bottom: 50px; }
  .mobile-fregi-spacer { display: block; height: 12px; background: #fff; }
  .top-area-desktop { display: none !important; }

  .navbar.bg-dark, .navbar-dark {
    overflow: visible; position: relative; min-height: 50px; margin-bottom: 0;
  }
  .navbar-logo-mobile {
    display: flex !important; align-items: center; flex: 1;
    padding: 0 10px; height: 50px; overflow: visible;
  }
  .logo-in-navbar {
    width: min(338px, calc(100vw - 70px)); height: auto;
    display: block; position: relative; top: -2px;
  }
  .navbar-toggler {
    margin: 0; position: relative; z-index: 2;
    border-color: rgba(255,255,255,0.3); flex-shrink: 0;
  }

  .mobile-extra-items { padding: 12px 15px 8px; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .mobile-extra-items .mobile-menu-link {
    display: block; color: #ccc; padding: 9px 8px; font-size: 13px;
    font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none;
  }
  .mobile-extra-items .mobile-menu-link:hover,
  .mobile-extra-items .mobile-menu-link:focus { color: #fff; background: rgba(255,255,255,0.05); }
  .mobile-extra-items .mobile-menu-highlight { color: #08bcc0 !important; }

  .mobile-social-row {
    padding: 10px 8px; color: #aaa; font-size: 13px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .mobile-social-row img { width: 28px; height: 28px; }

  .mobile-search-row { padding: 8px; }
  .mobile-search-row .form-control {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff;
  }
  .mobile-search-row .form-control::placeholder { color: rgba(255,255,255,0.5); }

  .newshp { padding-left: 8px; padding-right: 8px; }
  .newsbig .boxblutxt a { font-size: 14px; }
  .caption h4 { font-size: 13px; padding: 8px 10px !important; }
  .section-title { margin: 20px 0 12px; }
  .section-title h3 { font-size: 15px; }
  .thumbnail { margin-bottom: 12px; }
  .eventi, .artisti, .eventi.secondo { margin-bottom: 15px; }
  .banner1 { margin: 10px 0; }
  .newstxt { font-size: 15px; line-height: 21px; }
  .pulsantini .btn.riduci { font-size: 11px; }
  .riducixs { padding-right: 8px; }
}

@media (min-width: 768px) {
  .navbar-logo-mobile { display: none !important; }
  .mobile-extra-items { display: none !important; }
  .mobile-fregi-spacer { display: none !important; }
  .top-area-desktop { display: block !important; }
  .newstxt { font-size: 15px; line-height: 21px; text-align: justify; }
  .banneresp { max-height: 400px; }
  .logo { padding-right: 0; }
  .riducixs { padding-right: 15px; }
  .pulsantini .btn.riduci { font-size: 13px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .newsbig .boxblutxt a { font-size: 14px; }
}

@media (min-width: 992px) {
  .banneresp { max-height: 381px; font-size: 12px; }
  .banner1 { margin-top: 24px; }
  .newsbig { margin-top: 0; }
  .boxblutxt { overflow: hidden; }
  .pulsantini .btn.riduci { font-size: 13px; }
}

@media (min-width: 1200px) {
  .banneresp { max-height: 377px; }
}
