/* Shared breadcrumb + photo gallery for yatriwala-service-detail-shell.blade.php — used across
   hotel/flight/visa/umrah/tour detail pages. Reuses the global --yw-primary/--yw-accent/--yw-navy/
   --yw-muted/--yw-line/--yw-soft tokens from public_html/landing/css/yatriwala-figma.css. */

.yw-td-breadcrumb {
    padding: 14px 0 0;
    color: var(--yw-muted);
    font-size: 12.5px;
    font-weight: 650;
}

.yw-td-breadcrumb .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.yw-td-breadcrumb a {
    color: var(--yw-muted);
}

.yw-td-breadcrumb a:hover {
    color: var(--yw-primary);
}

.yw-td-breadcrumb i {
    font-size: 9px;
    opacity: .6;
}

.yw-td-breadcrumb span[aria-current] {
    color: var(--yw-ink, #172033);
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.yw-td-gallery--shell {
    padding: 12px 0 0;
}

.yw-td-gallery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 200px;
    gap: 10px;
    height: 360px;
}

.yw-td-gallery--single .yw-td-gallery__grid {
    grid-template-columns: 1fr;
}

/* Visa's detail wrapper carries the class "bc_detail_tour" (copy-pasted from the real Tour detail
   template, never renamed) purely to inherit its generic header/spacing styling. But yatriwala.css
   also has rules scoped to .bc_detail_tour that hide the "legacy" Bootstrap .col-lg-9/.col-lg-3
   content grid and collapse .bc_content to height:0 — written for the *actual* Tour page, where
   real content moved into the custom .yw-tour-app-detail layout and the old grid became vestigial.
   Visa has no .yw-tour-app-detail — its .col-lg-9/.col-lg-3 grid IS the real, only content — so
   those rules were wrongly hiding Visa's entire application-details column and its mobile booking
   bar. Renaming Visa's wrapper class would also lose the generic styling it legitimately wants, so
   this counter-overrides only the specific problem rules, scoped to .yw-visa-detail-page. */
@media (min-width: 768px) {
    .yw-visa-detail-page .bc_content .col-md-12.col-lg-9 {
        display: block !important;
    }

    .yw-visa-detail-page .bc_content .col-md-12.col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 767px) {
    .yw-visa-detail-page.bc_detail_tour {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }

    .yw-visa-detail-page .bc_content {
        height: auto !important;
        padding: 0 !important;
    }

    .yw-visa-detail-page .bc_content > .container {
        height: auto !important;
        min-height: 0 !important;
    }

    .yw-visa-detail-page .bc_content .col-md-12.col-lg-9 {
        display: block !important;
    }

    .yw-visa-detail-page .bc_content .col-md-12.col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 0 0 auto !important;
        padding: 0 15px !important;
    }

    .yw-visa-detail-page .bc-more-book-mobile {
        display: block !important;
    }
}

/* The new gallery above fully replaces the old single background-image banner (.bc_banner) that
   Hotel/Flight/Visa/Umrah detail pages render before this shell — keeping both would show the
   same (or a redundant) photo twice and waste a full viewport height of scroll. Scoped to
   .yw-service-detail-page (the wrapper only these 5 detail pages use) — .bc_banner is also used
   by unrelated pages (News, search results, Boat/Car/Event/Location detail) that must keep it. */
.yw-service-detail-page .bc_banner {
    display: none !important;
}

.yw-td-gallery__main {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--yw-soft, #eaf1ff);
}

.yw-td-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yw-td-gallery__side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    height: 100%;
}

.yw-td-gallery__thumb {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--yw-soft, #eaf1ff);
}

.yw-td-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yw-td-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(6, 21, 51, .58);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.yw-td-gallery__more small {
    font-size: 10.5px;
    font-weight: 700;
    opacity: .9;
}

@media (max-width: 1023px) {
    .yw-td-gallery__grid {
        grid-template-columns: minmax(0, 1.4fr) 130px;
        height: 280px;
    }
}

@media (max-width: 767px) {
    .yw-td-breadcrumb {
        padding: 10px 0 0;
        font-size: 11.5px;
    }

    .yw-td-gallery--shell {
        padding: 0;
    }

    .yw-td-gallery__grid {
        grid-template-columns: 1fr;
        grid-template-rows: 220px;
        height: auto;
        gap: 0;
        border-radius: 0;
    }

    .yw-td-gallery__main {
        border-radius: 0;
        height: 220px;
    }

    .yw-td-gallery__side {
        display: none;
    }
}