/* MusicalAround R Evolution v1.3.0 - gallery styles consolidated.
 * 1. Foto e video: Joomla category blog with "ma-photo-index" on blog-items.
 * 2. Phoca Gallery: lightweight card and pagination styling, no thumbnail regeneration.
 * The real Phoca album remains owned by the Phoca component.
 */

/* Intro della categoria: meno testo monumentale, più respiro */
.ma-is-inner .ma-component .com-content-category-blog:has(> .blog-items.ma-photo-index) > .category-desc {
  max-width: 960px;
  margin: 0 0 clamp(22px, 4vw, 45px);
  color: #4b3b40;
}
.ma-is-inner .ma-component .com-content-category-blog:has(> .blog-items.ma-photo-index) > .category-desc h2 {
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  line-height: 1.22;
  margin: 0 0 16px;
}
.ma-is-inner .ma-component .com-content-category-blog:has(> .blog-items.ma-photo-index) > .category-desc p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 12px;
}

/* Un album = una fascia larga */
.ma-is-inner .ma-component .blog-items.ma-photo-index {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: clamp(20px, 3vw, 32px) !important;
  margin: 0;
  padding: 0;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(22px, 3.6vw, 42px) !important;
  overflow: hidden;
  border: 1px solid rgba(102, 66, 38, .13) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fbf4e6 0%, #eddbb6 100%) !important;
  box-shadow: 0 15px 35px rgba(39, 24, 26, .065) !important;
  transition: box-shadow .22s ease, transform .22s ease;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item:nth-child(even) {
  border-color: rgba(119, 48, 62, .12) !important;
  background: linear-gradient(135deg, #fae8e5 0%, #eac4c2 100%) !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(39, 24, 26, .11) !important;
}
/* Il riquadro custom usa tre foto; non duplicare l'immagine introduttiva nativa */
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item > .item-image {display: none !important;}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item > .item-content {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  background: none !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .page-header {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .page-header h2,
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item h2.item-title,
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .item-title {
  margin: 0 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 3.1vw, 2.7rem) !important;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.14;
  color: #311f29 !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .page-header a {
  color: inherit !important;
  text-decoration: none !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .article-info,
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .readmore {display: none !important;}

/* Due colonne: testo e mosaico tre fotografie */
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  min-width: 0;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__copy {min-width: 0;}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__kicker {
  margin: 0 0 10px !important;
  font: 800 .68rem/1.4 Arial, sans-serif !important;
  letter-spacing: .145em;
  text-transform: uppercase;
  color: #875a28 !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item:nth-child(even) .ma-gallery-teaser__kicker {color:#8c3b51 !important;}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__copy > p:not(.ma-gallery-teaser__kicker) {
  margin: 0 0 20px !important;
  max-width: 39ch;
  font-size: clamp(.95rem, 1.3vw, 1.04rem) !important;
  font-weight: 400;
  line-height: 1.72 !important;
  color: #4d3b42 !important;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 19px;
  border-radius: 999px;
  background: #682b42;
  color: #fff !important;
  text-decoration: none !important;
  font: 700 .78rem/1.25 Arial, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(87, 31, 48, .14);
  transition: background .2s ease, transform .2s ease;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button:hover,
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button:focus-visible {
  background: #8e324e;
  transform: translateY(-1px);
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button:focus-visible,
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb:focus-visible {
  outline: 3px solid #40324b;
  outline-offset: 3px;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 12px);
  min-width: 0;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #2d1a2a;
  border: 1px solid rgba(39, 23, 30, .16);
  aspect-ratio: 4 / 5;
  box-shadow: 0 8px 22px rgba(32, 19, 24, .13);
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  transition: transform .4s ease;
}
.ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb:hover img {transform: scale(1.045);}

/* Fasce rosse: foto a sinistra, testo a destra */
.ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item:nth-child(even) .ma-gallery-teaser__images {order: -1;}

/* Il titolo categoria puo' già comparire nella hero del tema */
.ma-is-inner .ma-component .com-content-category-blog:has(> .blog-items.ma-photo-index) > h1:first-child,
.ma-is-inner .ma-component .com-content-category-blog:has(> .blog-items.ma-photo-index) > h2:first-child {display: none;}

@media (max-width: 900px) {
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item:nth-child(even) .ma-gallery-teaser__images {order: initial;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__copy > p:not(.ma-gallery-teaser__kicker) {max-width: none;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb {aspect-ratio: 1 / 1;}
}
@media (max-width: 550px) {
  .ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item {padding: 20px !important; border-radius: 16px !important;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item .page-header h2,
  .ma-is-inner .ma-component .blog-items.ma-photo-index > .blog-item h2.item-title {font-size: 1.78rem !important;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__images {gap: 6px;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb {border-radius: 8px;}
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button {width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
  .ma-is-inner .ma-component .blog-items.ma-photo-index .blog-item,
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__thumb img,
  .ma-is-inner .ma-component .blog-items.ma-photo-index .ma-gallery-teaser__button {transition: none !important;}
}


/* 2. PHOCA GALLERY: restyling, senza cambiare dimensioni miniature */
.ma-is-inner .ma-component #phocagallery {
  color: var(--ma-ink);
  font-family: var(--ma-font);
  font-size: 1rem;
}
.ma-is-inner .ma-component #phocagallery .pg-item-box,
.ma-is-inner .ma-component #phocagallery .pg-category-box {
  border: 1px solid #e5d9d2 !important;
  border-radius: 10px !important;
  background: #fffdfa !important;
  box-shadow: 0 8px 23px rgba(30, 16, 23, .06);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ma-is-inner .ma-component #phocagallery .pg-item-box:hover,
.ma-is-inner .ma-component #phocagallery .pg-category-box:hover {
  box-shadow: 0 15px 32px rgba(30, 16, 23, .13);
  transform: translateY(-2px);
}
.ma-is-inner .ma-component #phocagallery .pg-item-box img,
.ma-is-inner .ma-component #phocagallery .pg-category-box img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}
.ma-is-inner .ma-component #phocagallery .pg-item-box-title {
  color: #3b2833;
  font: 600 .9rem/1.4 var(--ma-font);
  letter-spacing: -.01em;
  padding: 7px 9px;
}
.ma-is-inner .ma-component #phocagallery a {
  color: var(--ma-red-dark);
  text-decoration: none;
}
.ma-is-inner .ma-component #phocagallery a:hover {color: var(--ma-red);}
.ma-is-inner .ma-component #phocagallery .pg-category-box-count {
  display: none;
}
/* Nel layout Phoca "Simple" elimina la piccola icona davanti al titolo.
   Decommentare solo se appare realmente e la si vuole togliere.
.ma-is-inner .ma-component #phocagallery .ph-si-image { display: none; }
*/
.ma-is-inner .ma-component #phocagallery .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 25px 0;
  justify-content: center;
}
.ma-is-inner .ma-component #phocagallery .pagination a,
.ma-is-inner .ma-component #phocagallery .pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid #dfd2cf;
  border-radius: 5px;
  background: #fffdfa;
  color: #562b3a;
  text-decoration: none;
  font-size: .9rem;
}
.ma-is-inner .ma-component #phocagallery .pagination .active .page-link,
.ma-is-inner .ma-component #phocagallery .pagination .page-link:hover {
  background: #63263b;
  color: white;
  border-color: #63263b;
}


@media (prefers-reduced-motion: reduce) {
  .ma-is-inner .ma-component #phocagallery .pg-item-box,
  .ma-is-inner .ma-component #phocagallery .pg-category-box {
    transition: none;
    transform: none;
  }
}