/* ===============================
   IMAGE HOVER OPACITY – FINAL
   Compatible amb Convert (CSSIgnition)
   =============================== */

/* Contenidor principal */
.iho-wrapper {
  position: relative;
  display: grid !important;
  grid-template-areas: "stack";
  align-items: stretch;
  overflow: hidden !important;
  border-radius: var(--iho-radius, 30px) !important;
  background: var(--iho-bg-color, transparent) !important;
  min-height: var(--iho-min-height, 220px);
  width: 100%;
  max-width: 100%;
}

/* Forçar border-radius al contenidor principal fins i tot si el tema l'intenta sobreescriure */
.entry-content .iho-wrapper,
article .iho-wrapper,
main .iho-wrapper,
div .iho-wrapper {
  border-radius: var(--iho-radius, 30px) !important;
  overflow: hidden !important;
}

.iho-wrapper > img,
.iho-wrapper > .iho-link > img,
.iho-wrapper .iho-link,
.iho-wrapper .iho-overlay {
  grid-area: stack;
}

/* Assegurem que si hi ha link, els seus fills ocupin tot l'espai */
.iho-wrapper .iho-link {
  display: grid !important;
  grid-template-areas: "stack";
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.iho-wrapper .iho-link > img,
.iho-wrapper .iho-link > .iho-overlay {
  grid-area: stack;
}

.iho-wrapper.iho-wrapper--noimg {
  min-height: var(--iho-min-height, 220px);
  display: flex;
  width: 100%;
  max-width: 100%;
}

/* Imatge de fons i enllaç */
.iho-wrapper > img,
.iho-wrapper > .iho-link > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: var(--iho-img-opacity, 0.5);
  transition: opacity 0.3s ease;
  border-radius: 0 !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Hover imatge */
.iho-wrapper:hover img {
  opacity: var(--iho-img-hover-opacity, 1);
}

/* Overlay de text */
.iho-overlay {
  grid-area: stack;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0.75rem;
  background: var(--iho-overlay-bg, transparent);
  color: var(--iho-overlay-color, #ffffff);
  pointer-events: none;
  transition: background 0.3s ease, color 0.3s ease;
  z-index: 2;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Overlay sense imatge de fons (transparent) */
.iho-wrapper--noimg .iho-overlay {
  background: transparent !important;
  color: inherit !important;
}

/* Hover overlay */
.iho-wrapper:hover .iho-overlay {
  color: var(--iho-overlay-hover-color, #000000);
  background: var(--iho-overlay-hover-bg, transparent);
}

/* Hover overlay sense imatge (mantenir transparent) */
.iho-wrapper--noimg:hover .iho-overlay {
  background: transparent !important;
}

/* Títol (core/heading amb classe iho-title) */
.iho-overlay .iho-title,
.iho-overlay h1.iho-title,
.iho-overlay h2.iho-title,
.iho-overlay h3.iho-title,
.iho-overlay h4.iho-title,
.iho-overlay h5.iho-title,
.iho-overlay h6.iho-title {
  display: block !important;
  width: 100%;
  margin: 0 0 0.5rem !important;
  font-size: var(--iho-title-size, 1.4rem) !important;
  font-weight: 700 !important;
  color: var(--iho-title-color, inherit) !important;
  text-align: var(--iho-title-align, center) !important;
}

/* Descripció (core/paragraph amb classe iho-description) */
.iho-overlay .iho-description,
.iho-overlay p.iho-description {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  font-size: var(--iho-description-size, 1rem) !important;
  line-height: 1.4 !important;
  color: var(--iho-description-color, inherit) !important;
  text-align: var(--iho-description-align, center) !important;
}

/* Enllaços inline dins del títol i descripció */
/* Aquests tenen pointer-events actius per poder-se clicar, fins i tot quan hi ha un enllaç global */
.iho-overlay .iho-title a,
.iho-overlay .iho-description a {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Imatge interna (core/image amb classe iho-inner-image) */
.iho-overlay .iho-inner-image {
  margin: 1rem auto !important;
  border-radius: 8px;
  display: block !important;
  max-width: 100%;
}

.iho-overlay .iho-inner-image img {
  border-radius: 8px;
  /* Permetre redimensionar amb els puntets blancs de Gutenberg */
  width: auto;
  height: auto;
  display: block;
}

/* Alineació de la imatge interna */
.iho-overlay .iho-inner-image.iho-inner-image-left,
.iho-overlay .iho-inner-image-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.iho-overlay .iho-inner-image.iho-inner-image-center,
.iho-overlay .iho-inner-image-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.iho-overlay .iho-inner-image.iho-inner-image-right,
.iho-overlay .iho-inner-image-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Estils generals per tots els blocs dins l'overlay */
.iho-overlay > * {
  color: inherit;
}

.iho-overlay .wp-block-heading,
.iho-overlay .wp-block-paragraph,
.iho-overlay .wp-block-image {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.iho-overlay.iho-overlay--noimg {
  width: 100%;
  min-height: 100%;
  height: auto;
  box-sizing: border-box;
}

.iho-wrapper:hover .iho-title,
.iho-wrapper:hover h1.iho-title,
.iho-wrapper:hover h2.iho-title,
.iho-wrapper:hover h3.iho-title,
.iho-wrapper:hover h4.iho-title,
.iho-wrapper:hover h5.iho-title,
.iho-wrapper:hover h6.iho-title {
  color: var(--iho-title-hover-color, var(--iho-title-color, inherit)) !important;
}

.iho-wrapper:hover .iho-description,
.iho-wrapper:hover p.iho-description {
  color: var(--iho-description-hover-color, var(--iho-description-color, inherit)) !important;
}

/* Forcem compatibilitat amb Convert */
.entry-content .iho-wrapper,
.entry-content .iho-wrapper * {
  visibility: visible !important;
}

/* Assegurem que els placeholders dels InnerBlocks es vegin bé */
.iho-overlay .block-editor-block-list__layout {
  width: 100%;
}

.iho-overlay .block-editor-block-list__block {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Estils per l'editor: assegurar que els blocs interns es vegin amb els colors correctes */
.iho-overlay [data-type="core/heading"],
.iho-overlay [data-type="core/paragraph"] {
  color: inherit;
}

.iho-overlay [data-type="core/image"] {
  text-align: center;
}

/* ===== AMAGAR CONTROLS DELS BLOCS FILLS (NOMÉS DINS DEL PLUGIN) ===== */

/* Amagar TOTA la toolbar dels blocs fills */
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/heading"].is-selected .block-editor-block-toolbar,
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/paragraph"].is-selected .block-editor-block-toolbar,
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/image"].is-selected .block-editor-block-toolbar {
  display: none !important;
}

/* Amagar el selector H1-H6 del menú desplegable */
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/heading"] .components-dropdown-menu,
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/heading"] .block-editor-block-toolbar__slot {
  display: none !important;
}

/* Permitir només el rich text inline (per poder afegir enllaços amb Ctrl+K o selecció) */
/* però amagar tots els botons de la toolbar */
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/heading"] .components-toolbar,
[data-type="iho/image-hover-opacity"] .iho-overlay [data-type="core/paragraph"] .components-toolbar {
  display: none !important;
}

/* La lògica de sidebar la gestionem des de JavaScript per més control */

/* Estils predefinits */
.iho-wrapper.is-style-rounded {
  border-radius: 50px !important;
}

.iho-wrapper.is-style-square {
  border-radius: 0 !important;
}

/* Visibility Settings - Viewport */
@media (min-width: 1025px) {
  .iho-hide-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .iho-hide-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .iho-hide-mobile {
    display: none !important;
  }
}

/* Ocultar elements InnerBlocks */
.iho-overlay .iho-title.iho-hidden,
.iho-overlay .iho-description.iho-hidden,
.iho-overlay .iho-inner-image.iho-hidden {
  display: none !important;
}

/* Animations */
.iho-wrapper[data-animation] {
  opacity: 0;
  transition: all 0.6s ease-out;
}

.iho-wrapper[data-animation].iho-animated {
  opacity: 1;
}

/* Fade */
.iho-wrapper[data-animation="fade"] {
  opacity: 0;
}

.iho-wrapper[data-animation="fade"].iho-animated {
  opacity: 1;
}

/* Slide Up */
.iho-wrapper[data-animation="slide-up"] {
  transform: translateY(50px);
}

.iho-wrapper[data-animation="slide-up"].iho-animated {
  transform: translateY(0);
}

/* Slide Down */
.iho-wrapper[data-animation="slide-down"] {
  transform: translateY(-50px);
}

.iho-wrapper[data-animation="slide-down"].iho-animated {
  transform: translateY(0);
}

/* Slide Left */
.iho-wrapper[data-animation="slide-left"] {
  transform: translateX(50px);
}

.iho-wrapper[data-animation="slide-left"].iho-animated {
  transform: translateX(0);
}

/* Slide Right */
.iho-wrapper[data-animation="slide-right"] {
  transform: translateX(-50px);
}

.iho-wrapper[data-animation="slide-right"].iho-animated {
  transform: translateX(0);
}

/* Zoom In */
.iho-wrapper[data-animation="zoom-in"] {
  transform: scale(0.8);
}

.iho-wrapper[data-animation="zoom-in"].iho-animated {
  transform: scale(1);
}

/* Zoom Out */
.iho-wrapper[data-animation="zoom-out"] {
  transform: scale(1.2);
}

.iho-wrapper[data-animation="zoom-out"].iho-animated {
  transform: scale(1);
}