/* =========================================================
   SmartClass Group - Global Responsive System
   File: assets/css/responsive.css

   এই ফাইলটি public website-এর সব page-এ ব্যবহার হবে।
   সব page-specific CSS-এর পরে এই ফাইল load করতে হবে।
   ========================================================= */

/* =========================================================
   1. Global Responsive Reset
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

main,
header,
nav,
footer,
section,
article,
aside {
    max-width: 100%;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
picture,
video,
canvas {
    height: auto;
}

img {
    display: block;
}

iframe {
    width: 100%;
    border: 0;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    font-size: 16px;
}

textarea {
    resize: vertical;
}

a {
    overflow-wrap: anywhere;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
small,
li,
td,
th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =========================================================
   2. Global Container System
   ========================================================= */

.container,
.site-container,
.page-container,
.section-container,
.content-container,
.wrapper,
.main-wrapper {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    margin-inline: auto;
}

.container-fluid {
    width: 100%;
    max-width: 100%;
    padding-inline: 20px;
}

/*
 * কোনো child element parent-এর বাইরে যাওয়া বন্ধ করবে।
 */
.page-wrapper,
.site-wrapper,
.main-content,
.page-content,
.section-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* =========================================================
   3. Fix Common Horizontal Overflow
   ========================================================= */

/*
 * 100vw scrollbar-এর width-ও হিসাব করে। এর কারণে mobile-এ
 * ডান পাশে extra space দেখা দিতে পারে।
 */
.full-width,
.w-100,
.hero-section,
.page-hero,
.banner-section {
    max-width: 100%;
}

/*
 * Fixed-width images, cards এবং content responsive করবে।
 */
.card,
.service-card,
.solution-card,
.pricing-card,
.portfolio-card,
.team-card,
.blog-card,
.contact-card,
.feature-card,
.testimonial-card,
.dashboard-card {
    min-width: 0;
    max-width: 100%;
}

/*
 * Absolute decorative elements screen-এর বাইরে গেলেও
 * horizontal scrolling তৈরি করবে না।
 */
.hero-section,
.page-hero,
.contact-hero,
.about-hero,
.services-hero,
.solutions-hero,
.pricing-hero,
.portfolio-hero,
.team-hero,
.cta-section,
.footer-section {
    overflow: hidden;
}

/*
 * Flexbox children-এর content overflow সমস্যা সমাধান করে।
 */
.flex,
.d-flex,
.header-wrapper,
.navbar-wrapper,
.hero-wrapper,
.hero-content,
.footer-wrapper,
.footer-grid,
.contact-main-grid,
.about-grid,
.services-grid,
.solutions-grid,
.pricing-grid,
.portfolio-grid,
.team-grid {
    min-width: 0;
}

/* =========================================================
   4. Responsive Typography
   ========================================================= */

h1,
.page-title,
.hero-title {
    font-size: clamp(32px, 5vw, 62px);
    line-height: 1.12;
}

h2,
.section-title {
    font-size: clamp(25px, 4vw, 42px);
    line-height: 1.2;
}

h3 {
    font-size: clamp(18px, 2.5vw, 26px);
    line-height: 1.3;
}

p {
    line-height: 1.75;
}

/* =========================================================
   5. Responsive Grid System
   ========================================================= */

.grid {
    display: grid;
    gap: 24px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/*
 * Common website grids
 */
.services-grid,
.solutions-grid,
.portfolio-grid,
.team-grid,
.pricing-grid,
.features-grid,
.testimonials-grid,
.blog-grid,
.quick-links-grid,
.stats-grid {
    min-width: 0;
}

.services-grid > *,
.solutions-grid > *,
.portfolio-grid > *,
.team-grid > *,
.pricing-grid > *,
.features-grid > *,
.testimonials-grid > *,
.blog-grid > *,
.quick-links-grid > *,
.stats-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   6. Responsive Flex System
   ========================================================= */

.flex-responsive {
    display: flex;
    align-items: center;
    gap: 20px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-responsive > * {
    min-width: 0;
}

/* =========================================================
   7. Responsive Buttons
   ========================================================= */

.btn,
.button,
.primary-button,
.secondary-button,
.hero-button,
.cta-button,
.submit-button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.button-group,
.hero-buttons,
.hero-actions,
.cta-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* =========================================================
   8. Responsive Forms
   ========================================================= */

form {
    width: 100%;
    max-width: 100%;
}

.form-row,
.form-grid {
    min-width: 0;
}

.form-group {
    min-width: 0;
    max-width: 100%;
}

.form-group input,
.form-group select,
.form-group textarea,
.input-wrapper input,
.input-wrapper select,
.textarea-wrapper textarea {
    width: 100%;
    max-width: 100%;
}

input[type="file"] {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-width: 0;
}

/* =========================================================
   9. Responsive Tables
   ========================================================= */

.table-responsive,
.responsive-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
    border-collapse: collapse;
}

.table-responsive table,
.responsive-table table {
    width: 100%;
    min-width: 650px;
}

table img {
    max-width: 70px;
}

/* =========================================================
   10. Header and Navbar Protection
   ========================================================= */

.site-header,
.main-header,
.header,
.navbar,
.main-navbar {
    width: 100%;
    max-width: 100%;
}

.header-container,
.navbar-container,
.header-wrapper,
.navbar-wrapper {
    min-width: 0;
}

.logo,
.site-logo,
.navbar-brand {
    max-width: 220px;
    flex-shrink: 1;
}

.logo img,
.site-logo img,
.navbar-brand img {
    max-width: 100%;
    height: auto;
}

.nav-menu,
.nav-links,
.navbar-menu {
    min-width: 0;
}

/* Mobile menu button hidden on desktop */

.mobile-menu-toggle,
.menu-toggle,
.nav-toggle,
.hamburger {
    flex-shrink: 0;
}

/* =========================================================
   11. Footer Protection
   ========================================================= */

footer,
.site-footer,
.main-footer {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.footer-grid > *,
.footer-wrapper > * {
    min-width: 0;
}

.footer-logo img {
    max-width: 220px;
}

.footer-contact a,
.footer-links a {
    overflow-wrap: anywhere;
}

/* =========================================================
   12. Large Tablet - Maximum 1100px
   ========================================================= */

@media (max-width: 1100px) {
    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: min(100% - 36px, 1050px);
    }

    .grid-5,
    .grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-grid,
    .solutions-grid,
    .portfolio-grid,
    .team-grid,
    .features-grid,
    .blog-grid {
        grid-template-columns: repeat(
            3,
            minmax(0, 1fr)
        );
    }

    .pricing-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}

/* =========================================================
   13. Tablet - Maximum 900px
   ========================================================= */

@media (max-width: 900px) {
    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: min(100% - 32px, 850px);
    }

    .grid-5,
    .grid-4,
    .grid-3 {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .services-grid,
    .solutions-grid,
    .portfolio-grid,
    .team-grid,
    .features-grid,
    .testimonials-grid,
    .blog-grid,
    .quick-links-grid,
    .stats-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .hero-wrapper,
    .about-grid,
    .contact-main-grid,
    .footer-grid,
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .flex-responsive {
        align-items: flex-start;
        flex-direction: column;
    }

    .desktop-only {
        display: none !important;
    }

    section {
        background-attachment: scroll !important;
    }
}

/* =========================================================
   14. Mobile - Maximum 768px
   ========================================================= */

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: calc(100% - 28px);
        max-width: 100%;
        margin-inline: auto;
    }

    .container-fluid {
        padding-inline: 14px;
    }

    /*
     * Mobile section spacing
     */
    section {
        max-width: 100%;
    }

    .section,
    .content-section,
    .about-section,
    .services-section,
    .solutions-section,
    .pricing-section,
    .portfolio-section,
    .team-section,
    .contact-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /*
     * Hero spacing
     */
    .hero-section,
    .page-hero,
    .contact-hero,
    .about-hero,
    .services-hero,
    .solutions-hero,
    .pricing-hero,
    .portfolio-hero,
    .team-hero {
        min-height: auto;
        padding-top: 75px;
        padding-bottom: 75px;
    }

    h1,
    .page-title,
    .hero-title {
        font-size: clamp(30px, 9vw, 44px);
        letter-spacing: -1px;
    }

    h2,
    .section-title {
        font-size: clamp(24px, 7vw, 34px);
    }

    /*
     * Grid conversion
     */
    .grid-5,
    .grid-4,
    .grid-3,
    .grid-2,
    .services-grid,
    .solutions-grid,
    .pricing-grid,
    .portfolio-grid,
    .team-grid,
    .features-grid,
    .testimonials-grid,
    .blog-grid,
    .quick-links-grid,
    .stats-grid,
    .form-row,
    .form-grid {
        grid-template-columns: 1fr;
    }

    /*
     * Fix grid items spanning multiple columns
     */
    .grid-5 > *,
    .grid-4 > *,
    .grid-3 > *,
    .grid-2 > *,
    .services-grid > *,
    .solutions-grid > *,
    .pricing-grid > *,
    .portfolio-grid > *,
    .team-grid > *,
    .features-grid > *,
    .testimonials-grid > *,
    .blog-grid > *,
    .quick-links-grid > *,
    .stats-grid > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /*
     * Mobile buttons
     */
    .button-group,
    .hero-buttons,
    .hero-actions,
    .cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button-group .btn,
    .hero-buttons .btn,
    .hero-actions .hero-button,
    .cta-actions .btn,
    .cta-actions a {
        width: 100%;
    }

    /*
     * Navbar
     */
    .logo,
    .site-logo,
    .navbar-brand {
        max-width: 175px;
    }

    .nav-menu,
    .nav-links,
    .navbar-menu {
        max-width: 100%;
    }

    /*
     * Cards
     */
    .card,
    .service-card,
    .solution-card,
    .pricing-card,
    .portfolio-card,
    .team-card,
    .blog-card,
    .contact-card,
    .feature-card,
    .testimonial-card {
        width: 100%;
        max-width: 100%;
    }

    /*
     * Modal and popup
     */
    .modal,
    .popup,
    .modal-dialog,
    .popup-content {
        max-width: calc(100% - 24px);
    }

    /*
     * Breadcrumb
     */
    .breadcrumb {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /*
     * Pagination
     */
    .pagination {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   15. Small Mobile - Maximum 576px
   ========================================================= */

@media (max-width: 576px) {
    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: calc(100% - 24px);
    }

    .section,
    .content-section,
    .about-section,
    .services-section,
    .solutions-section,
    .pricing-section,
    .portfolio-section,
    .team-section,
    .contact-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .hero-section,
    .page-hero,
    .contact-hero,
    .about-hero,
    .services-hero,
    .solutions-hero,
    .pricing-hero,
    .portfolio-hero,
    .team-hero {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    h1,
    .page-title,
    .hero-title {
        font-size: clamp(28px, 9vw, 38px);
    }

    h2,
    .section-title {
        font-size: clamp(23px, 7vw, 30px);
    }

    .card,
    .service-card,
    .solution-card,
    .pricing-card,
    .portfolio-card,
    .team-card,
    .blog-card,
    .contact-card,
    .feature-card,
    .testimonial-card,
    .sidebar-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .form-card,
    .contact-form-card,
    .login-card,
    .register-card {
        padding: 22px 17px;
    }

    .button,
    .btn,
    .primary-button,
    .secondary-button,
    .hero-button,
    .submit-button {
        min-height: 47px;
    }

    .footer-grid {
        gap: 30px;
    }
}

/* =========================================================
   16. Extra Small Mobile - Maximum 400px
   ========================================================= */

@media (max-width: 400px) {
    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: calc(100% - 20px);
    }

    .container-fluid {
        padding-inline: 10px;
    }

    h1,
    .page-title,
    .hero-title {
        font-size: 28px;
    }

    h2,
    .section-title {
        font-size: 23px;
    }

    h3 {
        font-size: 18px;
    }

    .logo,
    .site-logo,
    .navbar-brand {
        max-width: 145px;
    }

    .card,
    .service-card,
    .solution-card,
    .pricing-card,
    .portfolio-card,
    .team-card,
    .blog-card,
    .contact-card,
    .feature-card,
    .testimonial-card,
    .sidebar-card {
        padding-left: 15px;
        padding-right: 15px;
    }

    .quick-contact-card {
        gap: 10px;
    }

    .contact-card-icon,
    .card-icon,
    .feature-icon {
        flex-shrink: 0;
    }

    .button-group,
    .hero-buttons,
    .hero-actions,
    .cta-actions {
        width: 100%;
    }
}

/* =========================================================
   17. Extremely Small Mobile - Maximum 340px
   ========================================================= */

@media (max-width: 340px) {
    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: calc(100% - 16px);
    }

    h1,
    .page-title,
    .hero-title {
        font-size: 25px;
    }

    h2,
    .section-title {
        font-size: 21px;
    }

    .logo,
    .site-logo,
    .navbar-brand {
        max-width: 125px;
    }

    .card,
    .service-card,
    .solution-card,
    .pricing-card,
    .portfolio-card,
    .team-card,
    .blog-card,
    .contact-card,
    .feature-card,
    .testimonial-card,
    .sidebar-card,
    .contact-form-card {
        padding-left: 13px;
        padding-right: 13px;
    }
}

/* =========================================================
   18. Landscape Mobile
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-section,
    .page-hero,
    .contact-hero,
    .about-hero,
    .services-hero,
    .solutions-hero,
    .pricing-hero,
    .portfolio-hero,
    .team-hero {
        min-height: auto;
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .mobile-menu,
    .nav-menu.active,
    .navbar-menu.active {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

/* =========================================================
   19. Accessibility
   ========================================================= */

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

/* =========================================================
   20. Print
   ========================================================= */

@media print {
    html,
    body {
        width: 100%;
        overflow: visible;
    }

    .container,
    .site-container,
    .page-container,
    .section-container,
    .content-container,
    .wrapper,
    .main-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .mobile-menu-toggle,
    .menu-toggle,
    .nav-toggle,
    .hamburger,
    .floating-whatsapp,
    .back-to-top {
        display: none !important;
    }
}