/* ---------------------------------------------------------------------------
   Interiors portfolio styles -- /Interiors only.

   Extracted from an inline <style> block in Views/Interiors/Index.cshtml so the
   rules are cacheable rather than re-sent with every page view, and so they
   land in <head> instead of mid-body where they force a re-render.

   LINKED ONLY FROM Views/Interiors/Index.cshtml, via @section Styles, and it
   must stay that way: .card, .carousel-inner img and .carousel-control-prev /
   -next are global Bootstrap names that /Covers and /Pricing define with
   different values. Linking this sheet site-wide would break those pages.

   Note the row images are also sized by JS at the bottom of the view
   (img.style.width / height / objectFit), which overrides .card-img-top here.
   --------------------------------------------------------------------------- */

/* Cards size by aspect ratio rather than by a third of the row, so a
   spread keeps its proportions and a row can hold however many it holds
   and scroll. Ported from the Staging branch. */
.card {
    aspect-ratio: 3 / 2;
    height: 250px; /* fixed height; width follows from the ratio */
    width: auto;
    flex-shrink: 0;
}

/* Staging wrote this as #images-container-[id], a literal that matches
   nothing. Prefix selector is what it meant. */
[id^="images-container-"]::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    position: absolute;
    top: 40%;
    z-index: 10;
    background: #4f5e72;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
}

.scroll-btn.left {
    left: 0;
}

.scroll-btn.right {
    right: 0;
}

.card-img-top {
    width: 100%; /* Image fills card width */
    height: 100%; /* Image fills card height */
    object-fit: cover; /* Ensure the image maintains its aspect ratio */
}

/* Selector follows the markup, which is overflow-hidden now that the
   arrow buttons do the scrolling. */
.d-flex.overflow-hidden {
    gap: 0 8px;
    overflow-x: auto;
}

.carousel-inner img {
    width: 100%; /* Image fills the modal width */
    height: 500px; /* Adjust modal image height as necessary */
    object-fit: contain; /* Maintain aspect ratio within the modal */
}

/* Pagination styling */
.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

.bg-lightblue {
    background-color: #4f5e72; /* slate band behind alternating rows */
}

/* Bigger arrows with a drop shadow, so they stay visible over artwork of
   any brightness. The shadow leans away from the arrow's direction. */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-size: 100% 100%;
}

.carousel-control-prev-icon {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.carousel-control-next-icon {
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Mobile.

   A 250px-tall card at aspect-ratio 3/2 computes to 375px wide -- wider than a
   360px viewport. One spread filled the screen with no visual hint that the row
   scrolled, and the absolutely-positioned arrows sat on top of it.

   A shorter card shows one spread plus a slice of the next, which is what makes
   the row read as scrollable, and the arrows shrink out of the artwork's way
   while keeping a 44px touch target.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .card {
        height: 190px; /* -> 285px wide at 3/2 */
    }

    .scroll-btn {
        padding: 6px 4px;
        font-size: 13px;
        /* keep a usable touch target even though the glyph is smaller */
        min-width: 28px;
        min-height: 44px;
        background: rgba(79, 94, 114, 0.85);
    }

    /* The carousel arrows are sized for desktop; at 5% of a phone they become
       unusable slivers. */
    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
    }
}