/*
 * Componente "marco editorial" — pieza central del sistema de imágenes.
 * Toda fotografía del sitio (hero, cards, galerías) pasa por este marco:
 * relación de aspecto fija (sin layout shift), recorte object-fit,
 * velo de gradiente para legibilidad y una barra de crédito/ubicación
 * que hace visible el compromiso de transparencia hasta en el detalle
 * fotográfico (ver 04_UI_DESIGN_SYSTEM.md).
 */

.frame {
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--color-dark);
    border-radius: var(--radius-sm);
    isolation: isolate;
}

.frame picture,
.frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--frame-focus, center);
}

.frame img {
    transition: transform var(--duration-cinematic) var(--ease-editorial),
                filter var(--duration-medium) ease-out,
                opacity var(--duration-medium) ease-out;
}

/* Blur-up: la imagen entra borrosa/opaca y el JS de carga la resuelve
   agregando .is-loaded cuando decode() termina (ver public/gallery.js). */
.frame img.is-loading {
    filter: blur(16px);
    opacity: 0.6;
    transform: scale(1.03);
}

.frame img.is-loaded {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

.frame:hover img.is-loaded,
.frame:focus-within img.is-loaded {
    transform: scale(1.045);
}

/* Relaciones de aspecto */
.frame--21x9 { aspect-ratio: 21 / 9; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--1x1 { aspect-ratio: 1 / 1; }
.frame--full { height: 100%; }

/* Velo de gradiente para legibilidad de texto superpuesto */
.frame--scrim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-bottom);
    pointer-events: none;
}

/* Variante para el hero: oscurece también el tope (donde va el menú),
 * no solo la base. Así el nav sigue siendo legible sin importar qué tan
 * clara sea la fotografía usada — no depende de que la foto "cargue" oscura arriba.
 */
.frame--scrim-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(7, 18, 51, 0.65) 0%,
        rgba(7, 18, 51, 0.15) 16%,
        rgba(7, 18, 51, 0.12) 55%,
        rgba(7, 18, 51, 0.85) 100%
    );
    pointer-events: none;
}

.frame--scrim-subtle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--scrim-subtle);
    pointer-events: none;
}

/* Barra de crédito / ubicación */
.frame__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5, var(--space-4));
    color: var(--color-light);
    font-size: var(--fs-2xs);
    letter-spacing: 0.02em;
}

.frame__location {
    font-weight: 600;
}

.frame__credit {
    opacity: 0.75;
}

/* En tarjetas, el crédito solo aparece al interactuar (menos ruido visual);
   en el hero se fuerza visible con .frame__caption--static. */
.frame--reveal-caption .frame__caption {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-fast) var(--ease-editorial),
                transform var(--duration-fast) var(--ease-editorial);
}

.frame--reveal-caption:hover .frame__caption,
.frame--reveal-caption:focus-within .frame__caption {
    opacity: 1;
    transform: translateY(0);
}

.frame__caption--static {
    opacity: 1;
    transform: none;
}

/* Placeholder DEMO: mientras no hay fotografía real cargada, se usa un
   degradado de marca en vez de una imagen de stock genérica. */
.frame--placeholder {
    background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-dark) 100%);
    display: flex;
    align-items: flex-end;
}

.frame--placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%),
                       radial-gradient(circle at 80% 60%, rgba(255,255,255,0.06), transparent 45%);
}

.frame--placeholder .frame__placeholder-label {
    position: relative;
    z-index: 1;
    margin: auto;
    color: rgba(255,255,255,0.55);
    font-size: var(--fs-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-4);
}