/* USTEC · Galeries de fotos — mosaic justificat (només CSS) + visor a pantalla completa */
.ug {
    --ug-blau: var(--fs-color-primary, #11519B);
    --ug-text: #1d2327;
    --ug-gris: #646970;
    --ug-vora: #dcdcde;
    --ug-fons: #f6f7f7;
    --ug-gap: 4px;
    --ug-h: 190px;              /* alçada base de les files del mosaic */
    margin: 1.5em 0 2em;
    font-family: inherit;
}
.ug *, .ug *::before, .ug *::after { box-sizing: border-box; }

/* capçalera */
.ug-cap {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 12px 20px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ug-vora);
}
.ug-cap-txt { min-width: 0; flex: 1 1 320px; }
.ug-etiqueta {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ug-blau);
}
.ug .ug-titol { margin: 2px 0 2px; font-size: 1.15em; line-height: 1.3; font-weight: 700; color: var(--ug-text); }
.ug-meta { font-size: 13px; color: var(--ug-gris); }
.ug-accions { display: flex; gap: 8px; flex-wrap: wrap; }
.ug .ug-btn {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px; min-height: 36px;
    font: 600 13px/1 inherit; font-family: inherit; text-transform: none; letter-spacing: 0;
    color: var(--ug-text); background: #fff; border: 1px solid var(--ug-vora); border-radius: 6px;
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.ug .ug-btn:hover { background: var(--ug-fons); border-color: #c3c4c7; }
.ug .ug-btn:focus-visible { outline: 2px solid var(--ug-blau); outline-offset: 2px; }
.ug .ug-btn-pri { color: #fff; background: var(--ug-blau); border-color: var(--ug-blau); }
.ug .ug-btn-pri:hover { background: #0d4482; border-color: #0d4482; }
.ug-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* fila destacada: tots els elements en una sola fila, amplades proporcionals → mateixa alçada */
.ug-hero { display: flex; gap: var(--ug-gap); margin-bottom: var(--ug-gap); }
.ug-hero .ug-it { flex: var(--r) 1 0; aspect-ratio: var(--r); min-width: 0; }

/* mosaic justificat: cada element creix en proporció a la seva relació d'aspecte */
.ug-mosaic { display: flex; flex-wrap: wrap; gap: var(--ug-gap); }
.ug-mosaic::after { content: ''; flex-grow: 999999; }   /* l'última fila no s'estira */
.ug-mosaic .ug-it { flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--ug-h)); aspect-ratio: var(--r); max-height: calc(var(--ug-h) * 1.9); }
.ug .ug-mosaic .ug-ocult { display: none; }

.ug .ug-it {
    position: relative; display: block; overflow: hidden; border-radius: 4px; background: #e7e8e9;
    text-decoration: none; cursor: zoom-in;
}
.ug-it img {
    display: block; width: 100%; height: 100%; object-fit: cover; margin: 0;
    transition: transform .35s ease, filter .35s ease;
}
.ug-it::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background .25s; pointer-events: none; }
.ug-it:hover img { transform: scale(1.035); }
.ug-it:hover::after { background: rgba(0, 0, 0, .12); }
.ug-it:focus-visible { outline: 3px solid var(--ug-blau); outline-offset: 2px; }

/* vídeos */
.ug-es-video { cursor: pointer; }
.ug-play {
    position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); z-index: 1; transition: transform .2s, background .2s;
}
.ug-play::before {
    content: ''; position: absolute; left: 17px; top: 13px;
    border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff;
}
.ug-it:hover .ug-play { transform: scale(1.08); background: rgba(0, 0, 0, .65); }
.ug-dur {
    position: absolute; right: 6px; bottom: 6px; z-index: 1; padding: 2px 6px; border-radius: 3px;
    font-size: 11px; font-weight: 600; line-height: 1.4; color: #fff; background: rgba(0, 0, 0, .6);
}

.ug-peu { display: flex; justify-content: center; margin-top: 14px; }

@media (max-width: 849px) { .ug { --ug-h: 150px; } }
@media (max-width: 549px) {
    .ug { --ug-h: 110px; --ug-gap: 3px; }
    .ug-accions { width: 100%; }
    .ug-accions .ug-btn { flex: 1 1 0; justify-content: center; }
    .ug-play { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
    .ug-play::before { left: 13px; top: 10px; border-width: 7px 0 7px 11px; }
    .ug-dur { font-size: 10px; right: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ug-it img, .ug-play { transition: none; } .ug-it:hover img { transform: none; } }

/* ───────────── visor ───────────── */
html.ug-obert, html.ug-obert body { overflow: hidden !important; }
.ugv {
    position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
    background: #0c0d0e; color: #fff; font-family: Lato, system-ui, sans-serif;
    opacity: 0; transition: opacity .2s ease;
}
.ugv.ugv-visible { opacity: 1; }
.ugv[hidden] { display: none; }
.ugv button {
    margin: 0; padding: 0; min-height: 0; border: 0; background: none; color: inherit; font: inherit;
    text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer;
}
.ugv-barra { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 16px; flex: 0 0 auto; }
.ugv-info { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ugv-info strong { color: #fff; font-weight: 700; margin-right: 10px; }
.ugv-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    color: rgba(255, 255, 255, .85) !important; text-decoration: none !important; transition: background .15s, color .15s;
}
.ugv-ico:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }
.ugv-ico:focus-visible, .ugv-fletxa:focus-visible, .ugv-tira button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ugv-ico svg { width: 22px; height: 22px; fill: currentColor; }

.ugv-escena { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding: 0 64px; overflow: hidden; touch-action: pan-y; }
.ugv-marc { flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.ugv-escena img, .ugv-escena video {
    display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0; object-fit: contain;
    border-radius: 2px; user-select: none; -webkit-user-drag: none; transition: opacity .2s ease;
}
.ugv-escena video { background: #000; }
.ugv-avis { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; max-width: 100%; max-height: 100%; text-align: center; }
.ugv-avis img { max-height: 55vh; opacity: .35; }
.ugv-avis p { margin: 0; font-size: 15px; color: #fff; }
.ugv .ugv-avis-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 6px; background: #fff; color: #1d2327 !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.ugv-escena .ugv-carrega { opacity: .25; }
.ugv-fletxa {
    position: absolute; z-index: 2; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08) !important;
    transition: background .15s;
}
.ugv-fletxa:hover { background: rgba(255, 255, 255, .18) !important; }
.ugv-fletxa svg { width: 26px; height: 26px; fill: #fff; }
.ugv-ant { left: 10px; }
.ugv-seg { right: 10px; }

.ugv-progres { height: 2px; background: rgba(255, 255, 255, .08); flex: 0 0 auto; }
.ugv-progres i { display: block; height: 100%; width: 0; background: #fff; }
.ugv-passi .ugv-progres i { transition: width linear; }

.ugv-tira {
    flex: 0 0 auto; display: flex; gap: 4px; padding: 8px 12px 10px; overflow-x: auto; scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.ugv-tira button {
    position: relative; flex: 0 0 auto; height: 56px; aspect-ratio: var(--r); max-width: 100px; min-width: 32px;
    border-radius: 3px; overflow: hidden; opacity: .45; transition: opacity .15s;
}
.ugv-tira button:hover { opacity: .8; }
.ugv-tira button.ugv-actiu { opacity: 1; }
.ugv-tira button.ugv-actiu::before { content: ''; position: absolute; inset: 0; z-index: 1; border: 2px solid #fff; border-radius: 3px; }
.ugv-tira img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ugv-tira .ugv-tv::after {
    content: ''; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -4px;
    border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff;
}

@media (max-width: 549px) {
    .ugv-escena { padding: 0; }
    .ugv-fletxa { display: none; }
    .ugv-tira button { height: 44px; }
    .ugv-ico { width: 38px; height: 38px; }
    .ugv-info strong { display: block; margin: 0; }
}