/* ============================================================
   RightCompound — Global Mobile Responsive Overrides
   Breakpoints: xs<576, sm≥576, md≥768, lg≥992, xl≥1200
   ============================================================ */

/* ── 1. Base / Layout ──────────────────────────────────────── */
/* Prevent horizontal overflow on all pages.
   IMPORTANT: Use overflow-x:clip (NOT hidden) — overflow:hidden on body creates a
   new block formatting context (BFC) that causes Slick carousel to calculate a
   33554432px slide width on mobile. overflow-x:clip prevents scrolling without
   creating a BFC, so Slick's offsetWidth calculation works correctly. */
html, body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

/* content wrapper — remove excess top margin on mobile */
@media (max-width: 767.98px) {
    .content.content-full.mt-6 {
        margin-top: 1.5rem !important;
    }
    .content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── 2. Hero Carousel ──────────────────────────────────────── */
/* Fix slider-nav hardcoded width */
.slider-nav {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 8px 12px !important;
}

@media (max-width: 767.98px) {
    .slider-nav .slide img {
        height: 44px !important;
        width: 70px !important;
    }
}

/* ── 3. Featured Compounds Section (Homepage) ──────────────── */
/* Title row — prevent text overflow on small screens */
@media (max-width: 575.98px) {
    .rc-fc-title {
        font-size: 15px !important;
    }
    .rc-fc-subtitle {
        font-size: 13px !important;
        display: block;
    }
}

/* Featured compound cards — 2 per row on mobile */
@media (max-width: 575.98px) {
    #featured-compounds-component-carousel .card {
        margin: 4px !important;
    }
    #featured-compounds-component-carousel .card .card-img-top {
        height: 140px !important;
    }
}

/* ── 4. Homepage — col-lg-9 / col-lg-3 split ──────────────── */
/* Stack featured compounds + contact form on mobile */
@media (max-width: 991.98px) {
    .content > .row > .col-lg-9,
    .content > .row > .col-lg-3 {
        width: 100%;
    }
}

/* ── 5. Listings Page ──────────────────────────────────────── */
/* Compound list card — horizontal layout on mobile */
@media (max-width: 767.98px) {
    /* Remove default block padding to tighten the card */
    .compound-list-item .block-content {
        padding: 12px 12px 8px !important;
    }
    /* Horizontal row: image left, text right */
    .compound-list-item .row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0;
    }
    /* Image column — fixed width on left, acts as image+badge container */
    .compound-list-item .col-12.col-sm-3 {
        flex: 0 0 110px;
        max-width: 110px;
        width: 110px;
        height: 110px !important;   /* match image height so badge stays inside */
        padding: 0;
        margin-bottom: 0;
        overflow: hidden;           /* clip badge to column bounds */
        border-radius: 8px;
        position: relative !important;
    }
    /* Image — square thumbnail */
    .compound-list-item .card-img-sm {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }
    /* Price badge — inside image bottom-right, fully contained */
    .compound-list-item .col-12.col-sm-3 span.fs-xs {
        font-size: 0.55rem !important;
        padding: 3px 5px !important;
        border-bottom-right-radius: 8px !important;
        border-bottom-left-radius: 0 !important;
        max-width: 108px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
    }
    /* Text column — takes remaining space */
    .compound-list-item .col-12.col-sm-9 {
        flex: 1 1 auto;
        padding-left: 10px;
        padding-top: 0 !important;
    }
    /* Compound name */
    .compound-list-item .col-12.col-sm-9 h7 {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        line-height: 1.25;
        display: block;
        margin-bottom: 3px;
    }
    /* Description — limit to 2 lines */
    .compound-list-item .col-12.col-sm-9 p {
        font-size: 0.72rem !important;
        line-height: 1.4;
        margin-bottom: 4px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* View details link */
    .compound-list-item .col-12.col-sm-9 a.text-info {
        font-size: 0.68rem !important;
        float: none !important;
        display: inline-block;
        margin-top: 4px !important;
    }
    /* Divider */
    .compound-list-item hr.delimeter {
        margin: 8px 0 0 !important;
    }
}

/* ── 6. Compound Detail Page ───────────────────────────────── */
/* Gallery main image — constrain height on mobile */
@media (max-width: 767.98px) {
    /* IMPORTANT: Do NOT set overflow:hidden on .slider-for itself — it breaks Slick's
       slide width calculation (causes 33554426px overflow bug on mobile).
       Instead, constrain only the img height and let Slick manage its own overflow. */
    .slider-for .slide img,
    .slider-for .slick-slide img {
        height: 260px !important;
        max-height: 260px !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .rc-cd-expand-btn {
        bottom: 56px !important;
    }
    .rc-cd-layout {
        padding: 20px 0 40px !important;
    }
    .rc-cd-hero {
        padding: 20px 0 0 !important;
    }
    .rc-cd-hero__title {
        font-size: 1.35rem !important;
    }
    .rc-cd-breadcrumb {
        padding: 10px 0 !important;
    }
}

/* Units table — stack price and action on mobile */
@media (max-width: 575.98px) {
    .rc-cd-unit {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .rc-cd-unit__price {
        font-size: 0.9rem !important;
    }
}

/* ── 7. Plans Page ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .rc-plans-hero {
        padding: 36px 0 28px !important;
    }
    .rc-plans-section {
        padding: 48px 0 56px !important;
    }
    .rc-plan-card {
        padding: 28px 22px 24px !important;
    }
    .rc-plan-card__amount {
        font-size: 42px !important;
    }
    .rc-plans-grid {
        max-width: 100% !important;
    }
}

/* ── 8. About Page ─────────────────────────────────────────── */
/* Values grid — single column on mobile */
@media (max-width: 575.98px) {
    .rc-about-values {
        grid-template-columns: 1fr !important;
    }
    .rc-about-hero {
        padding: 52px 0 36px !important;
    }
    .rc-about-mission {
        padding: 48px 0 !important;
    }
    .rc-about-cities {
        padding: 52px 0 !important;
    }
}

/* ── 9. Contact Page ───────────────────────────────────────── */
@media (max-width: 575.98px) {
    .rc-contact-hero {
        padding: 52px 0 36px !important;
    }
    .rc-contact-form-wrap {
        padding: 24px 16px !important;
    }
    .rc-contact-section {
        padding: 40px 0 56px !important;
    }
}

/* ── 10. Blog / Content Pages ──────────────────────────────── */
/* Old blog index — add horizontal padding */
@media (max-width: 575.98px) {
    .container .page {
        padding: 20px 16px !important;
        margin: 16px auto !important;
    }
    .container .page .page-title {
        font-size: 20px !important;
    }
}

/* ── 11. Search Box (Hero) ─────────────────────────────────── */
/* Range slider label overflow fix */
@media (max-width: 767.98px) {
    #compounds-search-component .block-content {
        padding: 16px 12px !important;
    }
    #compounds-search-component .block {
        max-width: 100% !important;
        border-radius: 12px !important;
    }
    #compounds-search-component .col-12.col-lg-3,
    #compounds-search-component .col-12.col-lg-2 {
        margin-bottom: 4px;
    }
    #compounds-search-component button[type="submit"] {
        width: 100% !important;
        margin-top: 12px;
    }
}

/* ── 12. Modals (Login / Register) ────────────────────────── */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
    }
    .modal-content {
        border-radius: 16px !important;
    }
    .modal-body {
        padding: 16px !important;
    }
}

/* ── 13. Navbar — CTA button text on very small screens ────── */
@media (max-width: 374.98px) {
    .rc-navbar__cta-btn {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
    .rc-navbar__logo {
        max-width: 120px !important;
    }
}

/* ── 14. Footer ────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .rc-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .rc-footer__top {
        padding: 36px 0 28px !important;
    }
}

/* ── 15. General utility — tap targets ────────────────────── */
@media (max-width: 767.98px) {
    .btn {
        min-height: 40px;
    }
    a, button {
        -webkit-tap-highlight-color: rgba(3,151,214,0.15);
    }
}

/* ── 16. Back-to-top button — keep visible above mobile nav ── */
@media (max-width: 767.98px) {
    #back-to-top {
        bottom: 16px;
        right: 12px;
        width: 42px;
        height: 42px;
        font-size: 28px;
        border-radius: 12px;
    }
}

/* ── 17. Testimonials / Partners sections ──────────────────── */
@media (max-width: 767.98px) {
    .bg-white .content.content-full {
        padding: 24px 16px !important;
    }
}

/* ── 18. Block / Card padding on mobile ────────────────────── */
@media (max-width: 575.98px) {
    .block-content {
        padding: 16px 14px !important;
    }
    .block-header {
        padding: 12px 14px 0 !important;
    }
}