/* IHMC V29.5 — Mobile Responsive & No-Crop Frontend
   Loaded last so it can safely normalize public pages and CMS content. */

/* Global safety: media and long CMS/user content must never push the viewport. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
.container, .container-fluid, .row, [class*="col-"] { min-width: 0; }
.service-rich-text, .service-long-content, .service-legacy-content, .medical-article,
.card, .form-card, .sticky-summary-card, .accordion-body, footer {
    overflow-wrap: anywhere;
    word-break: normal;
}
.service-rich-text img, .service-long-content img, .service-legacy-content img,
.medical-article img, .card-body img:not(.rounded-circle) {
    max-width: 100% !important;
    height: auto !important;
}
.service-rich-text table, .service-long-content table, .service-legacy-content table,
.medical-article table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Keep global media predictable without changing intentional circular avatars. */
.service-img-wrapper img,
.service-summary-image {
    object-position: center center;
}

/* Desktop/tablet header robustness. */
.navbar .container { min-width: 0; }
.navbar-brand { min-width: 0; flex-shrink: 1; }
.navbar-brand img { max-width: min(250px, 52vw); width: auto; }

@media (max-width: 991.98px) {
    /* Fixed navbar: menu scrolls inside the viewport instead of extending past it. */
    .navbar { padding-block: .45rem; }
    .navbar .container { gap: .5rem; }
    .navbar-toggler { flex: 0 0 auto; }
    .navbar-collapse {
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .65rem 0 .85rem;
        scrollbar-width: thin;
    }
    .navbar-nav .nav-link {
        padding: .7rem .75rem !important;
        border-radius: .65rem;
    }
    .navbar-nav .nav-link::after { display: none; }

    /* Service cards: uploaded 2:1 banners are shown completely instead of being cropped. */
    .service-img-wrapper {
        height: auto !important;
        aspect-ratio: 2 / 1;
        background: #eef5f4;
    }
    .service-img-wrapper img {
        width: 100%;
        height: 100% !important;
        object-fit: contain !important;
        transform: none !important;
    }
    .service-card:hover .service-img-wrapper img { transform: none !important; }

    /* V29.5.2 service Hero: the service Banner Image remains the Hero source.
       On tablet/mobile the complete 2:1 artwork is shown without cropping; copy starts below it. */
    .service-unified-hero {
        min-height: 0 !important;
        padding-top: calc(min(50vw, 420px) + 4.65rem) !important;
        padding-bottom: 2.6rem !important;
        align-items: stretch !important;
        background: linear-gradient(135deg, var(--primary-dark, #163b38), var(--primary, #286D65));
    }
    .service-hero-picture {
        height: 100% !important;
    }
    .service-hero-background {
        object-fit: contain !important;
        object-position: center top !important;
        background: #153c38;
        transform: none !important;
    }
    .service-hero-overlay {
        background:
            linear-gradient(to bottom, rgba(17,52,48,.08) 0, rgba(17,52,48,.16) min(50vw,420px), rgba(17,52,48,.94) min(50vw,420px), rgba(14,105,99,.98) 100%) !important;
        opacity: 1 !important;
    }
    .service-hero-copy { max-width: 100%; margin: 0; }
    .service-title { max-width: 100%; }
    .service-hero-subtitle { max-width: 100%; }
    .service-hero-actions { align-items: stretch; }
    .service-hero-actions .btn { min-height: 48px; }

    /* Sidebar becomes a normal full-width card and its banner keeps its native ratio. */
    .sticky-summary-card { position: static !important; top: auto !important; }
    .service-summary-card { overflow: hidden; }
    .service-summary-image {
        width: calc(100% + 4rem) !important;
        height: auto !important;
        aspect-ratio: 2 / 1;
        object-fit: contain !important;
        object-position: center !important;
        background: #eef5f4;
    }

    /* Avoid two fixed mobile action bars competing on service detail pages. */
    body.has-service-mobile-actions .floating-actions-bar { display: none !important; }
    body.has-service-mobile-actions { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
    .service-mobile-actions {
        min-height: 64px;
        padding-top: .45rem !important;
    }
    .service-mobile-actions a {
        min-width: 0;
        min-height: 50px;
        justify-content: center;
        line-height: 1.25;
    }
    .service-mobile-actions span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Public cards, forms and article/sidebar stacks breathe correctly on tablets. */
    .form-card { padding: 2rem; }
    .medical-article { min-width: 0; }
    footer { padding-top: 3.5rem; }
}

@media (max-width: 767.98px) {
    /* Home hero: show the entire background artwork. No background-image crop on mobile. */
    .hero-slider {
        height: clamp(650px, 178vw, 780px) !important;
        margin-top: 58px !important;
        background: linear-gradient(180deg, #0a5f5e, #123e3b) !important;
    }
    .slide-item {
        align-items: flex-start !important;
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        padding-top: clamp(175px, 52vw, 260px);
    }
    .slide-item::before {
        background: linear-gradient(to bottom,
            rgba(15,44,42,.18) 0,
            rgba(15,44,42,.38) clamp(170px, 50vw, 250px),
            rgba(15,58,54,.94) clamp(190px, 55vw, 275px),
            rgba(10,95,94,.98) 100%) !important;
    }
    .hero-slider .container,
    .hero-slider .row {
        height: auto !important;
        min-height: 0 !important;
    }
    .hero-slider .row { align-items: flex-start !important; }
    .slide-content {
        max-width: 100% !important;
        width: 100%;
        padding: 1.15rem .1rem 1.4rem;
    }
    .slide-content h1, .slide-content h2.h1 {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.25;
        margin-bottom: .85rem;
    }
    .slide-content p {
        font-size: .98rem !important;
        line-height: 1.75;
        margin-bottom: 1rem;
    }
    .hero-slider .badge {
        max-width: 100%;
        white-space: normal !important;
        text-align: center;
        line-height: 1.4;
    }

    /* Mobile cards: full artwork, no hover zoom, compact content. */
    .service-card { border-radius: 16px; }
    .service-body { padding: 1.15rem; }
    .service-title { font-size: 1.12rem; }
    .service-text { font-size: .92rem; margin-bottom: 1rem; }
    .service-category, .service-price {
        max-width: calc(100% - 30px);
        white-space: normal;
        line-height: 1.25;
        text-align: center;
        padding: .36rem .7rem;
        font-size: .78rem;
    }

    /* Generic page heroes. */
    .detail-hero:not(.service-unified-hero) {
        padding: 4.25rem 0 2.4rem !important;
        margin-top: 58px !important;
        background-position: center top !important;
    }
    .detail-hero:not(.service-unified-hero) h1 {
        font-size: clamp(1.75rem, 7vw, 2.1rem) !important;
        overflow-wrap: anywhere;
    }
    .detail-hero:not(.service-unified-hero) .lead,
    .detail-hero:not(.service-unified-hero) p { font-size: .96rem !important; }

    /* Forms: 16px prevents iOS automatic zoom; buttons are easy touch targets. */
    .form-card { padding: 1.35rem !important; border-radius: 16px; }
    .form-control, .form-select, textarea.form-control {
        font-size: 16px !important;
        max-width: 100%;
    }
    .btn, button, input[type="submit"] { min-height: 44px; }
    .btn-group, .btn-toolbar { flex-wrap: wrap; }

    /* Article / CMS content. */
    .medical-article { padding: 1.15rem !important; }
    .medical-article .fs-5,
    .service-rich-text,
    .service-content-block p { font-size: 1rem !important; }
    .medical-article [style*="text-align: justify"],
    .service-rich-text [style*="text-align: justify"] { text-align: right !important; }
    .faq-accordion .accordion-button { padding: 1rem 1.05rem; font-size: 1rem; }
    .faq-accordion .accordion-body { padding: 1.05rem; }

    /* Footer and fixed global mobile bar. */
    footer { padding: 3rem 0 1.5rem; }
    footer h4 { margin-top: .4rem; margin-bottom: 1rem; }
    .copyright-bar { margin-top: 2.25rem; padding-top: 1.25rem; }
    .floating-actions-bar {
        padding: .45rem max(.35rem, env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left)) !important;
        gap: .15rem;
    }
    .floating-action-item {
        min-width: 0;
        font-size: .68rem;
        line-height: 1.2;
        padding-inline: .2rem;
    }
    .floating-action-item i { font-size: 1.18rem; }
    .floating-action-item.btn-action-main { padding: .45rem .35rem; margin: 0; }
}

@media (max-width: 575.98px) {
    /* Narrow phones. */
    .container { --bs-gutter-x: 1.35rem; }
    .navbar-brand img { height: 36px !important; max-width: 60vw; }
    .navbar-toggler { padding: .35rem .5rem; }

    .hero-slider { height: clamp(680px, 192vw, 800px) !important; }
    .hero-slider .d-flex.flex-wrap.gap-3.mb-4 { gap: .45rem !important; }
    .hero-slider .d-flex.flex-wrap.gap-3.mb-4 .badge {
        width: 100%;
        justify-content: center;
        padding: .5rem .65rem !important;
        font-size: .78rem !important;
    }
    .hero-slider .cta-box {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .55rem !important;
        width: 100%;
    }
    .hero-cta-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px;
        padding: .72rem 1rem !important;
        font-size: .94rem !important;
    }

    .service-unified-hero {
        min-height: 0 !important;
        padding-top: calc(50vw + 4.3rem) !important;
        padding-bottom: 2.15rem !important;
    }
    .service-title { font-size: clamp(1.72rem, 8vw, 2rem) !important; }
    .service-hero-subtitle { font-size: .96rem !important; line-height: 1.75; }
    .service-hero-trust { gap: .4rem; }
    .service-hero-trust span { font-size: .78rem; padding: .4rem .55rem; }
    .service-hero-actions { display: grid !important; grid-template-columns: 1fr; gap: .55rem; }
    .service-hero-actions .btn { width: 100%; margin: 0; }
    .service-request-card { border-radius: 15px; }
    .service-content-block { margin-bottom: 1.4rem; padding-bottom: 1.4rem; }
    .service-content-block h2 { font-size: 1.3rem !important; line-height: 1.4; }
    .service-custom-soft, .service-custom-highlight { padding: 1rem; }
    .service-emergency-box { padding: 1rem; gap: .7rem; }
    .service-related-card { padding: .9rem; }

    .sticky-summary-card { padding: 1.15rem !important; border-radius: 16px; }
    .service-summary-image {
        width: calc(100% + 2.3rem) !important;
        margin: -1.15rem -1.15rem 1.15rem !important;
    }
    .service-summary-card .btn { font-size: 1rem !important; padding-block: .75rem !important; }

    .filter-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: .1rem .1rem .55rem;
        margin-inline: -.1rem;
        gap: .55rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { flex: 0 0 auto; padding: .55rem 1rem; }

    .step-card { min-height: 0; }
    .v-card { border-right-width: 4px; }
    .feature-card { min-height: 0; }
    .bullet-list-check li { font-size: 1rem; padding-right: 1.65rem; }

    /* Prevent long badges / license numbers / URLs from expanding cards. */
    .badge { max-width: 100%; white-space: normal; line-height: 1.35; }
    a, p, li, td, th, label, small, span { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
    .container { --bs-gutter-x: 1rem; }
    .slide-content h1, .slide-content h2.h1 { font-size: 1.72rem !important; }
    .service-title { font-size: 1.62rem !important; }
    .floating-action-item span, .service-mobile-actions span { font-size: .65rem; }
}

/* Respect motion-reduction preferences globally. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* IHMC V29.5.3 — final no-crop service artwork contract (all breakpoints). */
.service-img-wrapper{
    height:auto !important;
    aspect-ratio:2 / 1;
    background:#eef5f4;
}
.service-img-wrapper img{
    width:100%;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}
.service-card:hover .service-img-wrapper img{transform:none !important}
.service-summary-image{
    height:auto !important;
    aspect-ratio:2 / 1;
    object-fit:contain !important;
    object-position:center center !important;
    background:#eef5f4;
}

@media (max-width: 991.98px){
    /* Service banners are always full artwork on tablet/mobile, even if Desktop Cover is selected. */
    .service-unified-hero,
    .service-unified-hero.service-hero-full-banner,
    .service-unified-hero.service-hero-cover-banner{
        display:block !important;
        min-height:0 !important;
        padding:0 !important;
        background:linear-gradient(135deg,var(--primary-dark,#163b38),var(--primary,#286D65)) !important;
    }
    .service-unified-hero .service-hero-picture{
        position:relative !important;
        inset:auto !important;
        display:block !important;
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        aspect-ratio:2 / 1 !important;
        margin:0 !important;
        background:#eef5f4;
    }
    .service-unified-hero .service-hero-background{
        position:relative !important;
        inset:auto !important;
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        background:#eef5f4;
        transform:none !important;
    }
    .service-unified-hero .service-hero-overlay{display:none !important}
    .service-unified-hero .service-hero-content{
        padding-top:1.7rem !important;
        padding-bottom:2.7rem !important;
    }
}

@media (max-width:575.98px){
    .service-unified-hero,
    .service-unified-hero.service-hero-full-banner,
    .service-unified-hero.service-hero-cover-banner{
        padding:0 !important;
    }
    .service-unified-hero .service-hero-content{
        padding-top:1.35rem !important;
        padding-bottom:2.15rem !important;
    }
    .service-summary-image{
        width:calc(100% + 2.3rem) !important;
        margin:-1.15rem -1.15rem 1.15rem !important;
    }
}
