/* Cross-device responsive hardening. Loaded last on every public/admin page. */
:root { --hebe-page-gutter: clamp(14px, 3vw, 32px); }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; min-width: 0 !important; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
pre, code { max-width: 100%; overflow-wrap: anywhere; }
main, section, article, aside, header, footer,
.container, .container-fluid, .row, [class*="col-"],
.grid, .cards-grid, .blog-grid, .admin-layout { min-width: 0; }
p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
.table-card, .blog-admin-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; }

@media (max-width: 1199.98px) {
    .container { max-width: 100% !important; padding-inline: var(--hebe-page-gutter) !important; }
    .detail, .detail-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 360px) !important; gap: 30px !important; }
    .hebe-register-shell { width: calc(100% - 40px) !important; }
}

@media (max-width: 991.98px) {
    .hebe-nav-shell .container { width: 100%; padding-inline: 18px !important; }
    .hebe-nav-shell .navbar-brand { transform: none !important; }
    .hebe-nav-shell .navbar { min-height: 66px !important; }
    .hebe-nav-shell .navbar-collapse {
        max-height: calc(100svh - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hebe-nav-shell .navbar-nav, .hebe-account-nav { width: 100%; }
    .hebe-nav-shell .nav-link, .hebe-account-nav a { width: 100%; margin: 2px 0 !important; padding: 12px !important; }
    .hebe-account-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .detail, .detail-layout, .contact-layout, .content-grid.two-col,
    .about-hero-grid, .about-story-grid, .about-principles-grid,
    .about-process-grid, .blog-hero-grid, .blog-article-layout,
    .blog-editor-form, .admin-layout { grid-template-columns: minmax(0, 1fr) !important; }
    .detail-panel, .admin-layout .sidebar, .blog-editor-side { position: static !important; width: 100%; }
    .cards-grid, .blog-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .stats, .stats-four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .section-head { align-items: flex-start !important; flex-direction: column; gap: 16px; }
    .filters, .filters.hebe-smart-search { grid-template-columns: minmax(0, 1fr) !important; }
    .filters input, .filters select, .filters button { width: 100%; min-height: 48px; }
    .footer .row { row-gap: 24px; }
}

@media (max-width: 767.98px) {
    :root { --hebe-page-gutter: 16px; }
    body { font-size: 15px; }
    input, select, textarea { font-size: 16px !important; }
    .py-5 { padding-top: 2.6rem !important; padding-bottom: 2.6rem !important; }
    .p-5 { padding: 1.5rem !important; }
    .display-1, .display-2, .display-3, .display-4,
    .page-hero h1, .blog-hero h1 { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.06 !important; }
    h2, .h2 { font-size: clamp(28px, 8vw, 38px) !important; }

    .hebe-template-hero { padding-top: 28px !important; }
    .hebe-template-hero .row { row-gap: 24px; }
    .hebe-template-carousel { width: 100%; min-height: 340px !important; }
    .hebe-template-slide { inset: 0 32px 0 0 !important; }
    .hebe-template-slide img { width: 100%; height: 100% !important; object-fit: cover; }
    .hebe-template-features > [class*="col-"] { width: 100%; }
    .hebe-exact-project { min-height: 390px !important; }
    .hebe-category-portrait { height: 350px !important; }

    .cards-grid, .blog-grid, .related-grid, .grid,
    .stats, .stats-four, .about-principles-list,
    .blog-editor-side { grid-template-columns: minmax(0, 1fr) !important; }
    .card img, .blog-card img { width: 100%; object-fit: cover; }
    .detail-panel { padding: 22px 18px !important; }
    .cta-row, .cta-row form { display: grid !important; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cta-row .btn, .cta-row button, .cta-row a { width: 100%; justify-content: center; text-align: center; }
    .breadcrumbs { max-width: 100%; overflow-x: auto; white-space: nowrap; }

    .page-hero, .blog-hero { padding: 64px 0 50px !important; }
    .page-hero p, .blog-hero p { font-size: 15px !important; line-height: 1.65; }
    .form-wrap, .form-card { width: 100% !important; padding: 24px 18px !important; }
    .admin-layout { width: 100%; padding-block: 24px; }
    .admin-layout .sidebar { padding: 16px !important; overflow-x: auto; }
    .admin-layout .sidebar a { min-height: 44px; }
    table { min-width: 640px; }

    .hebe-register-shell { width: calc(100% - 24px) !important; margin: 22px auto 46px !important; min-height: 0 !important; grid-template-columns: 1fr !important; }
    .hebe-register-visual { min-height: 260px !important; padding: 28px 22px !important; }
    .hebe-register-visual h1 { font-size: clamp(34px, 10vw, 48px) !important; }
    .istudio-hebe .hebe-register-form { padding: 28px 20px !important; }

    .hebe-ai-panel { right: 10px !important; bottom: 72px !important; width: calc(100vw - 20px) !important; max-height: calc(100svh - 84px) !important; }
    .hebe-ai-launcher { right: 12px !important; bottom: 12px !important; }
}

@media (max-width: 479.98px) {
    :root { --hebe-page-gutter: 13px; }
    .hebe-nav-shell .container { padding-inline: 13px !important; }
    .hebe-account-nav { grid-template-columns: minmax(0, 1fr) !important; }
    .hebe-square-logo-header { width: min(180px, 55vw) !important; height: 70px !important; }
    .hebe-square-logo-footer { width: min(220px, 78vw) !important; }
    .hebe-template-carousel { min-height: 300px !important; }
    .hebe-template-slide { right: 26px !important; }
    .hebe-category-portrait { height: 310px !important; }
    .hebe-exact-project { min-height: 330px !important; }
    .btn, button.btn { max-width: 100%; }
    .section-head .btn, .section-head .section-link { width: 100%; justify-content: center; text-align: center; }
    .auth-history-back, .hebe-history-back { left: 10px !important; bottom: 10px !important; }
}

/* Login/admin login: keep the form visible on short and narrow screens. */
.animated-login-page *, .animated-login-page *::before, .animated-login-page *::after { box-sizing: border-box !important; }
@media (max-width: 940px) {
    .animated-login-page { min-height: 100svh !important; overflow-y: auto !important; }
    .auth-login-stage { min-height: 100svh !important; height: auto !important; padding: 16px !important; align-items: flex-start !important; }
    .auth-shell { width: min(680px, 100%) !important; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) !important; margin: 0 auto !important; }
    .auth-visual-panel { min-height: 260px !important; height: 260px !important; padding: 24px !important; overflow: hidden !important; }
    .auth-form-panel { width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 34px 28px !important; overflow: hidden; }
    .auth-form-content, .auth-form, .auth-field, .auth-input-wrap { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    .auth-visual-copy h1 { font-size: clamp(30px, 7vw, 46px) !important; }
}

@media (max-width: 560px) {
    .auth-login-stage { padding: 0 !important; }
    .auth-shell { width: 100% !important; border-radius: 0 !important; box-shadow: none !important; }
    .auth-visual-panel { min-height: 210px !important; height: 210px !important; padding: 18px !important; border-radius: 0 !important; }
    .auth-visual-copy, .auth-visual-badge, .auth-stats, .admin-access-mark { max-width: 100%; }
    .auth-form-panel { padding: 30px 20px 44px !important; }
    .auth-form-content { width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; margin: 0 !important; }
    .auth-form-panel h1 { font-size: clamp(38px, 12vw, 52px) !important; }
    .auth-form { width: 100% !important; }
    .auth-field input { width: 100% !important; min-height: 52px; font-size: 16px !important; }
    .auth-submit { width: 100% !important; min-height: 52px; }
}

@media (max-width: 380px) {
    .auth-visual-panel { height: 180px !important; min-height: 180px !important; }
    .auth-form-panel { padding-inline: 16px !important; }
    .page-hero, .blog-hero { padding: 52px 0 42px !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .auth-shell { grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) !important; }
    .auth-visual-panel { height: 100svh !important; min-height: 420px !important; }
    .auth-form-panel { min-height: 100svh !important; padding-block: 24px !important; }
    .hebe-nav-shell .navbar-collapse { max-height: calc(100vh - 66px); }
}

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

/* Explore cards equal row alignment */
.hebe-explore-grid {
    display: grid !important;
    columns: unset !important;
    column-count: unset !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

.hebe-explore-grid > .card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    break-inside: auto !important;
}

.hebe-explore-grid > .card > img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

.hebe-explore-grid .card-content {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
}

.hebe-explore-grid .card-content h3 {
    min-height: 3.3em;
}

.hebe-explore-grid .card-content > p:last-child {
    margin-top: auto !important;
}

@media (max-width: 1100px) {
    .hebe-explore-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .hebe-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .hebe-explore-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Explore catalogue: masonry हटाकर cards को rows में align करें */
.hebe-explore-catalogue > .grid {
    display: grid !important;
    columns: unset !important;
    column-count: unset !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.hebe-explore-catalogue > .grid > .hebe-public-design-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    break-inside: auto !important;
}

.hebe-public-design-card .hebe-design-image-link,
.hebe-public-design-card .hebe-design-image-link img {
    display: block;
    width: 100% !important;
}

.hebe-public-design-card .hebe-design-image-link img {
    height: 220px !important;
    object-fit: cover !important;
}

.hebe-public-design-card .card-content {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
}

.hebe-public-design-card .card-content > p:last-child {
    margin-top: auto !important;
}

@media (max-width: 1100px) {
    .hebe-explore-catalogue > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .hebe-explore-catalogue > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .hebe-explore-catalogue > .grid {
        grid-template-columns: 1fr !important;
    }
}