/**
 * Responsive CSS
 * Standardized breakpoints: 375px (mobile), 1024px (tablet), 1440px (desktop)
 * Refactored for DRY and SOLID principles
 */

/* ========================================
   Tablet & Desktop (1024px and up)
   ======================================== */
@media (min-width: 1024px) {
    .hero-section {
        background-size: cover;
        height: 750px;
        background-position: -48px 0;
    }

    .hero-content p br {
        display: none;
    }
}

/* ========================================
   Mobile (up to 1023px)
   ======================================== */
@media (max-width: 1023px) {
    /* Typography */
    body, p {
        font-size: 12px;
        line-height: 22px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 16px;
    }

    p br {
        display: none;
    }
    
    h2 br {
        display: none;
    }

    /* Layout */
    .padding {
        padding: 60px 0;
    }

    .xs-padding,
    .sm-padding {
        padding: 15px;
    }

    /* Header */
    .header-section .navbar-brand {
        height: 80px;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .menu-btn, 
    .js #mainmenu {
        display: none;
    }

    .js .slicknav_menu {
        display: block;
    }

    .header-right .menu-btn {
        margin-right: 50px;
    }

    /* Error Pages */
    .error-content {
        display: block;
    }

    .error-content .error-info {
        padding-left: 10px;
    }

    .error-content .error-info h2 {
        font-size: 120px;
        line-height: 120px;
        margin-bottom: 30px;
    }

    .error-content .error-info a {
        display: block;
    }

    /* Page Header */
    .page-header {
        height: 250px;
    }

    .page-content h2 {
        font-size: 30px;
        margin: 0;
    }

    /* Hero Section */
    .hero-section {
        background: #8e2de2;
        background: -webkit-linear-gradient(to right, #5c6690, #424966);
        background: linear-gradient(to right, #5c6690, #424966);
        height: 688px;
    }

    .hero-wrap {
        align-items: center;
    }

    .hero-content,
    .hero-content h2 {
        font-size: 36px;
        line-height: 46px;
    }

    /* Forms */
    .contact-form .form-group .col-sm-6:first-child {
        margin-bottom: 15px;
    }

    .contact-info h2 {
        line-height: 28px;
    }

    /* Content Areas */
    .content-img {
        margin-bottom: 25px;
    }

    .content-item {
        text-align: center;
        margin-bottom: 40px;
    }

    .content-item h2, 
    .section-heading h2 {
        line-height: 35px;
    }

    .content-area-section .content-item h2 {
        margin-bottom: 10px;
    }

    /* Sidebar & Blog */
    .sidebar-wrap {
        padding-left: 0;
    }

    .blog-single-content h2 a {
        font-size: 22px;
        line-height: 28px;
    }

    .blog-single-content h2 {
        line-height: 28px;
    }

    blockquote p {
        line-height: 32px;
    }

    /* About & CTA */
    .about-content a {
        margin-bottom: 20px;
    }

    .cta-section {
        margin-bottom: -210px;
    }

    .cta-wrap {
        text-align: center;
    }

    .cta-content h2 {
        line-height: 35px;
        margin-bottom: 25px;
    }

    /* Team */
    .team-content span {
        margin-bottom: 20px;
    }

    /* Subscribe Form */
    .subscribe-form {
        width: 100%;
    }

    /* Counter */
    .counter-wrap .col-lg-4:first-child {
        margin-bottom: 50px;
    }
}

/* ========================================
   Tablet (1024px - 1439px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Add tablet-specific overrides here if needed */
    .hero-section {
        background-size: contain;
    }
}

/* ========================================
   Desktop (1440px and up)
   ======================================== */
@media (min-width: 1440px) {
    /* Desktop-specific enhancements */
    .container {
        max-width: 1280px;
    }
    
    .hero-section {
        height: 800px;
    }
}