/* object-view.css — Level 2: Horizontal strip of clickable cover art cards.
   .object-view wraps .clearfix-architect-google so the existing scroll JS hooks in. */

/* -----------------------------------------------------------------------
   Outer container
   ----------------------------------------------------------------------- */
.object-view {
    color: #fff;
}

.object-view--error {
    padding: 60px 50px;
    color: #666;
}

/* -----------------------------------------------------------------------
   Inner track — cards in a horizontal row
   ----------------------------------------------------------------------- */
/* Mobile default — vertical stacking */
.object-view__track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px 16px;
    box-sizing: border-box;
}

/* Desktop — horizontal scroll track.
   assets-architect-google (from page.css, priority 99) supplies:
     height: 100vh; width: max-content; touch-action: pan-x; white-space: nowrap
   We only add display + gap + padding here. */
@media (min-width: 768px) {
    .object-view__track {
        display: inline-flex;
        flex-direction: row;
        align-items: stretch;
        gap: 40px;
        padding: 20px 40px;
    }

    /* assets-architect-google sets height: 100vh which exceeds the visible content
       area. Override to match content-main-architect's viewport height. */
    .object-view .object-view__track {
        height: 76vh;
    }

    /* Target only the Elementor assets-architect-google wrapping an object-view. */
    .assets-architect-google:has(.object-view) {
        overflow-y: hidden;
    }

    /* width: fit-content on the card works only when the image has a definite (non-%)
       height, because only then can the browser compute intrinsic_width = h × aspect_ratio.
       Setting an explicit calc() height on card-image makes height: 100% on the img
       resolve to a definite value, so each card is exactly as wide as its poster. */
    .object-view__card {
        height: 100%;
        width: fit-content;
    }

    .object-view__card-image {
        height: calc(76vh - 50px);
        overflow: hidden;
        background: transparent;
    }

    /* Two-class selector (0,2,1) beats Elementor's .elementor img (0,1,1) */
    .object-view .object-view__card-image img {
        height: 100%;
        width: auto;
        max-width: none;
        display: block;
    }

    .object-view__card-placeholder {
        height: 100%;
        width: 200px;
    }
}

@media (min-width: 768px) and (min-height: 980px) {
    .object-view .object-view__track {
        height: 78vh;
    }

    .object-view__card-image {
        height: calc(78vh - 50px);
    }
}

/* -----------------------------------------------------------------------
   Card
   ----------------------------------------------------------------------- */
.object-view__card {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s;
}

.object-view__card:hover {
    opacity: 0.85;
}

/* Image area — fills available height, width follows the image's natural ratio */
.object-view__card-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: transparent;
}

.object-view__card-image img {
    height: 100%;
    width: auto;
    display: block;
}

/* Placeholder when no cover art is available */
.object-view__card-placeholder {
    height: 100%;
    width: 200px;
    background: #1a1a1a;
}

/* -----------------------------------------------------------------------
   Card meta — title + year, always visible below the image
   ----------------------------------------------------------------------- */
.object-view__card-meta {
    flex-shrink: 0;
    padding: 10px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.object-view__card-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.object-view__card-year {
    font-size: 11px;
    color: #555;
    letter-spacing: 0.05em;
}

/* -----------------------------------------------------------------------
   Mobile — vertical stack (mirrors picture-player pattern)
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .object-view__track {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: unset;
        gap: 16px;
        padding: 16px;
    }

    .object-view__card {
        width: 100%;
        height: auto;
    }

    .object-view__card-image {
        flex: none;
        width: 100%;
        height: auto;
    }

    .object-view__card-image img {
        width: 100%;
        height: auto;
    }

    .object-view__card-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
    }

    .object-view__card-title {
        max-width: 100%;
        white-space: normal;
    }
}