/* COMITE DE GOVERN - FOCUS INTERACTIU V1 */
.inst-figure {
  position: relative;
}

.comite-focus-overlay {
  position: absolute;
  pointer-events: none;
  background: rgba(3, 17, 37, .73);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 220ms ease;
}

.comite-focus-overlay.is-visible {
  opacity: 1;
}

.comite-person-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.comite-person-button:hover,
.comite-person-button:focus-visible,
.comite-person-active .comite-person-button {
  color: #184481;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.comite-person-button:focus-visible {
  outline: 2px solid #184481;
  outline-offset: 5px;
  border-radius: 3px;
}

.comite-person-active {
  border-color: rgba(24,68,129,.6);
  background: rgba(24,68,129,.055);
}

@media (prefers-reduced-motion: reduce) {
  .comite-focus-overlay {
    transition: none;
  }
}


/* COMITE HOVER LABEL V1 */
.comite-photo-tooltip {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(240px, 75%);
  padding: 12px 16px;
  color: #fff;
  background: rgba(24, 68, 129, .96);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px)) scale(.97);
  transition: opacity 160ms ease, transform 160ms ease;
}

.comite-photo-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 18px)) scale(1);
}

.comite-photo-tooltip strong {
  font-size: 14px;
  line-height: 1.3;
}

.comite-photo-tooltip span {
  font-size: 12px;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .comite-photo-tooltip { transition: none; }
}


/* COMITE TOOLTIP ANIMATION V2 */
.comite-photo-tooltip {
    transform: translate(-50%, calc(-100% - 55px)) scale(.96);
    transition:
        opacity 350ms ease-in-out,
        transform 350ms cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.comite-photo-tooltip.is-visible {
    transform: translate(-50%, calc(-100% - 65px)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .comite-photo-tooltip {
        transition: none;
    }
}

/* COMITE TOOLTIP POSITION V3 */
.comite-photo-tooltip {
    transform:
        translate(-50%, calc(-100% - 14px))
        scale(.96);
}

.comite-photo-tooltip.is-visible {
    transform:
        translate(-50%, calc(-100% - 20px))
        scale(1);
}

.comite-photo-tooltip::after {
    content: "";
    position: absolute;
    left: calc(50% + var(--comite-anchor-dx, 0px));
    top: 100%;
    height: 12px;
    width: 1px;
    background: rgba(255,255,255,.8);
    transform: translateX(-50%);
    opacity: .8;
}



/* AC COMITE PHOTO FLOATING V2 */

/* El contenidor no genera ombres ni fons addicionals. */
main#contingut.inst-main .inst-figure {
    position: relative;
    background: transparent;
    box-shadow: none;
    animation: none;
    transform: none;
    filter: none;
}

/* L'ombra s'aplica exclusivament a la fotografia. */
main#contingut.inst-main .inst-figure > img {
    display: block;
    border-radius: 12px;

    box-shadow:
        0 24px 48px rgba(5, 24, 47, .38),
        0 8px 20px rgba(5, 24, 47, .22);

    transition:
        box-shadow 450ms cubic-bezier(.22, 1, .36, 1),
        filter 450ms ease;

    animation: none;
}

/* Elevació visual mitjançant l'ombra, sense moure la imatge. */
main#contingut.inst-main .inst-figure:hover > img,
main#contingut.inst-main .inst-figure:focus-within > img {
    box-shadow:
        0 38px 75px rgba(5, 24, 47, .52),
        0 16px 32px rgba(5, 24, 47, .30);
}

/* Sense animacions si l'usuari ho ha configurat així. */
@media (prefers-reduced-motion: reduce) {
    main#contingut.inst-main .inst-figure > img {
        transition: none;
    }
}