/* ============================================
   ROHIT SAMAJ - Responsive Breakpoints
   ============================================ */

/* --- Tablet Landscape (max 1024px) --- */
@media (max-width: 1024px) {
    /* Business */
    .business-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Bandharan Preview */
    .bandharan-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-row {
        gap: 30px;
    }

    .hero-portrait-frame {
        width: 150px;
        height: 150px;
    }

    .hero-portrait-label {
        max-width: 150px;
    }

    .hero-title-gu {
        font-size: 2.2rem;
    }

    .hero-title-en {
        font-size: 1.15rem;
    }

    .hero-actions {
        max-width: 600px;
        gap: 12px;
    }

    .hero-action-btn {
        font-size: 13px;
        padding: 12px 6px;
    }

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

    .about-preview-grid {
        gap: 40px;
    }

    .about-block-grid {
        grid-template-columns: 1fr;
    }

    .about-block-image {
        order: -1;
    }

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

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

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .content-grid {
        grid-template-columns: 1fr 260px;
        gap: 30px;
    }
}

/* --- Tablet Portrait (max 768px) --- */
@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }

    /* Top Bar */
    .top-bar-left {
        display: none;
    }

    .top-bar-right {
        width: 100%;
        justify-content: flex-end;
    }

    /* Mobile Toggle */
    .mobile-toggle {
        display: flex;
    }

    /* Mobile Nav Drawer */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        z-index: 1000;
        padding: 70px 24px 24px;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    .main-nav.open {
        right: 0;
    }

    /* FIX: Override display:flex from desktop and show items in column */
    .nav-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .nav-menu li a {
        padding: 12px 16px;
        font-size: 15px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .nav-menu li a:hover,
    .nav-menu li.current-menu-item a {
        background: rgba(26,35,126,0.06);
        padding-left: 20px;
    }

    /* Mobile Nav Overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hero */
    .hero-banner {
        min-height: auto;
        padding: 40px 0 80px;
    }

    .hero-row {
        flex-direction: column;
        gap: 20px;
    }

    /* Portraits side-by-side row on tablet */
    .hero-row {
        flex-wrap: wrap;
    }

    .hero-portrait-left {
        order: 1;
    }

    .hero-center {
        order: 3;
        flex: 1 1 100%;
    }

    .hero-portrait-right {
        order: 2;
    }

    .hero-portrait-frame {
        width: 120px;
        height: 120px;
    }

    .hero-portrait-label {
        font-size: 11px;
        max-width: 120px;
    }

    .hero-title-gu {
        font-size: 1.8rem;
    }

    .hero-title-en {
        font-size: 1.05rem;
    }

    .hero-row {
        margin-bottom: 28px;
    }

    .hero-actions {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 100%;
    }

    .hero-action-btn {
        font-size: 12px;
        padding: 10px 4px;
        gap: 5px;
    }

    .hero-action-btn i {
        font-size: 13px;
    }

    /* Services */
    .services-section {
        padding: 60px 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .stat-number {
        font-size: 2.25rem;
    }

    .stat-icon {
        font-size: 2rem;
    }

    /* About */
    .about-preview-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-image-frame img {
        height: 280px;
    }

    /* Testimonials */
    .testimonials-slider {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    /* CTA */
    .cta-section {
        padding: 60px 0;
    }

    .cta-content h2 {
        font-size: 1.75rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;
    }

    /* Content Pages */
    .content-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: -1;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .page-header {
        padding: 40px 0 30px;
    }

    .single-content {
        padding: 24px;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }

    /* Section headers */
    .section-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    /* About page */
    .leaders-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* Bandharan Timeline — Single Column */
    .timeline-line {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        left: 0 !important;
        padding-left: 60px !important;
        padding-right: 0 !important;
    }

    .timeline-left .timeline-marker,
    .timeline-right .timeline-marker {
        left: -1px !important;
        right: auto !important;
    }

    .timeline-marker {
        width: 42px;
        height: 42px;
    }

    .timeline-year {
        font-size: 0.72rem;
    }

    .timeline-card-header {
        padding: 18px 18px 14px;
    }

    .timeline-card-header h3 {
        font-size: 1.05rem;
    }

    .timeline-desc {
        padding: 10px 18px 0;
    }

    .timeline-pdf-embed {
        margin: 16px 18px 0;
    }

    .timeline-pdf-placeholder {
        margin: 16px 18px 0;
    }

    .timeline-actions {
        padding: 16px 18px 20px;
        flex-direction: column;
    }

    .timeline-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Bandharan Preview */
    .bandharan-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bandharan-preview-section {
        padding: 60px 0;
    }

    .bmc-year {
        font-size: 1.8rem;
    }

    /* Forms */
    .suggestion-form-wrap,
    .auth-form-wrap {
        padding: 24px 18px;
    }

    .rs-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    /* Auth & Dashboard */
    .dashboard-wrap {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
    }

    .dashboard-content {
        padding: 20px 16px;
    }

    .form-row-flex {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .account-info-grid {
        grid-template-columns: 1fr;
    }

    /* Events */
    .event-info-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }

    .business-job-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .business-job-item .btn {
        width: 100%;
        justify-content: center;
    }

    /* Business Directory & Matrimonial */
    .business-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-row {
        flex-direction: column;
    }

    .filter-group {
        min-width: 100%;
    }

    .filter-group-age {
        min-width: calc(50% - 6px);
    }

    .business-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .business-detail-image {
        width: 160px;
        height: 130px;
    }

    .business-detail-meta {
        justify-content: center;
    }

    .business-contact-buttons {
        justify-content: center;
    }

    .business-detail-grid {
        grid-template-columns: 1fr;
    }

    .business-list-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-business-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-business-actions {
        width: 100%;
    }

    /* Floating buttons */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 24px;
        bottom: 16px;
        right: 16px;
    }

    .scroll-top {
        width: 38px;
        height: 38px;
        bottom: 16px;
        right: 72px;
    }
}

/* --- Mobile Small (max 480px) --- */
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }

    .container {
        padding: 0 16px;
    }

    .hero-title-gu {
        font-size: 1.4rem;
    }

    .hero-title-en {
        font-size: 0.9rem;
    }

    .hero-tagline {
        font-size: 0.95rem;
        letter-spacing: 1px;
    }

    .hero-portrait-frame {
        width: 100px;
        height: 100px;
    }

    .hero-portrait-label {
        font-size: 10px;
        max-width: 100px;
    }

    .hero-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hero-action-btn {
        font-size: 13px;
        padding: 11px 8px;
    }

    .btn {
        padding: 10px 22px;
        font-size: 14px;
    }

    .btn-lg {
        padding: 12px 28px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .service-card {
        padding: 28px 20px;
    }

    .testimonial-card {
        padding: 24px 20px;
    }

    .experience-badge {
        padding: 12px 16px;
    }

    .exp-years {
        font-size: 2rem;
    }

    .page-header {
        padding: 40px 0;
    }

    .page-header h1 {
        font-size: 1.6rem;
    }

    .error-404-page .error-number {
        font-size: 5rem;
    }

    .single-content {
        padding: 24px 18px;
    }

    /* Bandharan */
    .bandharan-preview-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .bandharan-intro-content h2 {
        font-size: 1.5rem;
    }

    .timeline-marker {
        width: 36px;
        height: 36px;
    }

    .timeline-year {
        font-size: 0.65rem;
    }

    .timeline-item {
        padding-left: 50px !important;
    }

    .timeline-line {
        left: 16px;
    }

    .timeline-pdf-embed object {
        height: 350px;
    }

    /* Event Popup */
    .event-popup-modal {
        width: 94%;
        max-height: 85vh;
        border-radius: 16px;
    }

    .event-popup-ribbon {
        border-radius: 16px 16px 0 0;
        padding: 10px 18px;
        font-size: 0.8rem;
    }

    .event-popup-info {
        padding: 18px;
    }

    .event-popup-title {
        font-size: 1.15rem;
    }

    .epd-date {
        padding: 12px 14px;
    }

    .epd-date-block {
        min-width: 56px;
        padding: 8px 10px;
    }

    .epd-day {
        font-size: 1.3rem;
    }

    /* Events */
    .event-detail-header-section {
        padding: 20px 20px 0;
    }

    .event-detail-title {
        font-size: 1.35rem;
    }

    .event-datetime-highlight {
        margin: 20px !important;
        padding: 16px !important;
    }

    .event-date-block {
        min-width: 70px !important;
        padding: 12px 14px !important;
    }

    .event-date-block .event-date-day {
        font-size: 1.8rem !important;
    }

    .event-action-buttons {
        padding: 0 20px 20px;
        flex-direction: column;
    }

    .event-action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .event-poster-section {
        padding: 20px;
    }

    .event-poster-wrap {
        padding: 12px;
    }

    .event-info-bar {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .event-share-section {
        padding: 20px;
    }

    .business-jobs-section {
        padding: 20px;
    }

    /* Business & Matrimonial */
    .business-detail-header {
        padding: 20px;
    }

    .business-detail-grid {
        padding: 20px;
    }

    .business-description {
        padding: 20px;
    }

    .business-detail-footer {
        padding: 16px 20px;
    }

    .business-contact-buttons {
        flex-direction: column;
    }

    .business-contact-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .mat-profile-photo,
    .mat-profile-photo img,
    .mat-avatar-lg {
        width: 140px;
        height: 140px;
    }

    .mat-avatar-lg i {
        font-size: 3rem;
    }
}