/**
 * Iframe Embed - Base Styles
 *
 * These are minimal fallback styles. For full theming,
 * override these in your Omeka S theme (e.g., IWAC-theme).
 *
 * The module uses CSS custom properties where available,
 * allowing themes to control appearance via:
 * --iframe-embed-bg, --iframe-embed-border, --iframe-embed-radius, etc.
 */

.iframe-embed {
    --_bg: var(--iframe-embed-bg, #f5f5f5);
    --_border: var(--iframe-embed-border, #e0e0e0);
    --_radius: var(--iframe-embed-radius, 8px);
    --_caption-color: var(--iframe-embed-caption-color, #666);

    margin: 0 auto 1.5rem;
    width: 100%;
}

.iframe-embed__wrapper {
    position: relative;
    width: 100%;
    background-color: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    overflow: hidden;
}

.iframe-embed__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Aspect ratio variants using padding-top technique for broad compatibility */
.iframe-embed--16-9 .iframe-embed__wrapper {
    padding-top: 56.25%; /* 9/16 */
}

.iframe-embed--4-3 .iframe-embed__wrapper {
    padding-top: 75%; /* 3/4 */
}

.iframe-embed--1-1 .iframe-embed__wrapper {
    padding-top: 100%;
}

.iframe-embed--21-9 .iframe-embed__wrapper {
    padding-top: 42.857%; /* 9/21 */
}

.iframe-embed--3-2 .iframe-embed__wrapper {
    padding-top: 66.667%; /* 2/3 */
}

/* Position iframe absolutely within aspect-ratio container */
.iframe-embed--16-9 .iframe-embed__frame,
.iframe-embed--4-3 .iframe-embed__frame,
.iframe-embed--1-1 .iframe-embed__frame,
.iframe-embed--21-9 .iframe-embed__frame,
.iframe-embed--3-2 .iframe-embed__frame {
    position: absolute;
    top: 0;
    left: 0;
}

/* Auto aspect ratio - let content determine height */
.iframe-embed:not([class*="--"]) .iframe-embed__frame,
.iframe-embed--auto .iframe-embed__frame {
    min-height: 400px;
}

/* Caption styling */
.iframe-embed__caption {
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--_caption-color);
    text-align: center;
    font-style: italic;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .iframe-embed,
    .iframe-embed__wrapper,
    .iframe-embed__frame {
        transition: none;
    }
}