/* ============================================================
   SPEHRE — GLOBAL RESPONSIVE OVERRIDES
   Loaded LAST. Breakpoints: 1200 / 1024 / 768 / 480
   ============================================================ */

/* ── Global fluid safety nets ── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* Block runaway widths for long strings */
.post-content,
.comment-body,
.post-title,
.chat-msg-text,
.profile-bio {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* ============================================================
   ≤1200px — tighten gaps, shrink rails
   ============================================================ */
@media (max-width: 1200px) {
    .feed-container {
        max-width: 100%;
        grid-template-columns: 220px 1fr 220px;
        gap: 1rem;
    }

    .network-layout-grid,
    .explore-layout-grid,
    .profile-layout {
        gap: 1rem !important;
    }

    #view-network {
        padding: 1.5rem 1.25rem 4rem !important;
    }
}

/* ============================================================
   ≤1024px — drop right rail, stack side columns
   ============================================================ */
@media (max-width: 1024px) {
    .feed-container {
        grid-template-columns: 1fr !important;
        padding: 1rem 0.75rem 3rem;
    }

    .feed-left-col,
    .feed-right-col {
        display: none !important;
    }

    /* Network: 3-col → 1-col */
    .network-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .network-sidebar-left,
    .network-sidebar-right {
        position: static !important;
        max-height: none !important;
    }

    /* Explore: hide right filter rail */
    .explore-sidebar-right {
        display: none !important;
    }

    .explore-layout-grid {
        grid-template-columns: 260px 1fr !important;
    }

    /* Profile: 2-col → 1-col */
    .profile-layout {
        grid-template-columns: 1fr !important;
    }

    /* Generator */
    .generator-container,
    .generator-grid {
        grid-template-columns: 1fr !important;
    }

    /* Job details */
    .job-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .job-sidebar {
        order: -1;
    }

    /* Search results */
    .search-results-grid {
        grid-template-columns: 1fr !important;
    }

    /* Settings */
    .settings-layout {
        grid-template-columns: 1fr !important;
    }

    .settings-nav {
        position: static !important;
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ============================================================
   ≤768px — mobile: single column, stack everything, bigger tap targets
   ============================================================ */
@media (max-width: 768px) {
    /* Ensure content doesn't slip under mobile header */
    .app-content {
        padding: 76px 0.85rem 100px 0.85rem !important;
    }

    /* ── FEED ── */
    .feed-container {
        padding: 0.5rem 0.5rem 6rem;
    }

    .feed-sort-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .feed-sort-bar::-webkit-scrollbar { display: none; }

    .post-composer {
        padding: 0.85rem;
        border-radius: 10px;
    }

    .composer-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .composer-actions::-webkit-scrollbar { display: none; }

    .composer-action-btn {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .post-card {
        border-radius: 10px;
        margin-bottom: 0.5rem;
    }

    .post-header,
    .post-body {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    .post-author-info {
        min-width: 0;
        flex: 1;
    }

    .post-author {
        font-size: 0.9rem !important;
    }

    .post-actions {
        padding: 6px 0.5rem;
    }

    .post-action-btn {
        padding: 6px 8px;
        font-size: 0.78rem;
    }

    .post-action-btn span {
        display: none;
    }

    .comment-section,
    .comment-list-inline {
        padding: 8px 0.85rem 0 !important;
    }

    .comment-item {
        gap: 8px;
    }

    /* Post image/media fluid */
    .post-media img,
    .post-media video {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* ── PROFILE ── */
    .profile-hero-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-hero-cover {
        height: 140px !important;
    }

    .profile-hero-avatar,
    .profile-avatar-large {
        width: 100px !important;
        height: 100px !important;
    }

    .profile-meta-pills {
        justify-content: center;
        flex-wrap: wrap;
    }

    .profile-actions-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .profile-section-card,
    .profile-widget-card {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .profile-main-col,
    .profile-side-col {
        min-width: 0;
    }

    .exp-top-row,
    .edu-top-row {
        flex-direction: column;
        gap: 4px;
    }

    /* ── CHAT ── */
    .chat-container {
        height: calc(100vh - 60px);
        max-height: none;
        border-radius: 0;
    }

    /* ── EXPLORE / JOBS ── */
    .explore-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .explore-sidebar {
        display: none !important;
    }

    .explore-sidebar.mobile-open {
        display: block !important;
        position: fixed;
        inset: 60px 0 0 0;
        z-index: 990;
        background: #fff;
        overflow-y: auto;
        padding: 1rem;
    }

    .job-card {
        flex-direction: column;
        padding: 1rem !important;
        gap: 0.75rem !important;
    }

    .job-card .job-logo {
        width: 48px;
        height: 48px;
    }

    .job-header {
        flex-direction: column;
        gap: 4px;
    }

    .job-action {
        width: 100%;
        justify-content: flex-start;
    }

    .job-meta {
        gap: 0.5rem;
    }

    /* ── MODALS ── */
    .modal-content,
    .modal-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 92vh !important;
        border-radius: 14px !important;
        margin: 4vh auto !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    /* ── FORMS ── */
    .form-row,
    .form-grid,
    .form-2col,
    .two-col-grid {
        display: block !important;
    }

    .form-row > *,
    .form-grid > *,
    .form-2col > * {
        width: 100% !important;
        margin-bottom: 0.75rem;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    /* ── NETWORK ── */
    .connections-grid,
    .people-grid,
    .suggestions-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── AUTH PAGES ── */
    .auth-split,
    .login-split,
    .signup-split {
        grid-template-columns: 1fr !important;
    }

    .auth-visual,
    .login-visual,
    .signup-visual {
        display: none !important;
    }

    .auth-card,
    .login-card,
    .signup-container {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 1.25rem !important;
    }

    /* ── LANDING ── */
    .hero-grid,
    .features-grid,
    .stats-grid,
    .testimonials-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    /* ── NAV SEARCH (mobile drawer) ── */
    .nav-search-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Close oversized grids everywhere */
    [class*="grid-"],
    [class*="-grid"] {
        max-width: 100% !important;
    }
}

/* ============================================================
   ≤480px — phones: tight padding, smaller typography
   ============================================================ */
@media (max-width: 480px) {
    .app-content {
        padding: 72px 0.6rem 120px 0.6rem !important;
    }

    .feed-container {
        padding: 0.25rem 0.4rem 6rem;
    }

    .post-card {
        border-radius: 8px;
    }

    .post-header {
        padding: 0.7rem 0.7rem 0.3rem !important;
    }

    .post-body {
        padding: 0 0.7rem 0.5rem !important;
        font-size: 0.9rem;
    }

    .post-author {
        font-size: 0.88rem !important;
    }

    .post-timestamp,
    .post-status-line {
        font-size: 0.72rem !important;
    }

    .comment-body {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .comment-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .reply-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    /* Composer */
    .post-composer {
        padding: 0.7rem;
    }

    .composer-avatar {
        width: 36px;
        height: 36px;
    }

    .composer-input-btn {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    /* Buttons full width on tiny screens */
    .btn-block-mobile,
    .form-submit-btn {
        width: 100% !important;
    }

    /* Profile */
    .profile-hero-cover {
        height: 110px !important;
    }

    .profile-hero-avatar,
    .profile-avatar-large {
        width: 84px !important;
        height: 84px !important;
        border-width: 3px !important;
    }

    .profile-name,
    .profile-hero-name {
        font-size: 1.25rem !important;
    }

    /* Job card */
    .job-title {
        font-size: 1rem !important;
    }

    /* Modals full screen */
    .modal-content,
    .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Chat bubble sizes */
    .chat-msg {
        max-width: 90% !important;
        font-size: 0.88rem;
    }

    /* Page titles */
    .page-title,
    h1.page-title {
        font-size: 1.3rem !important;
    }

    /* Notif dropdown full-width */
    #navNotifDropdown {
        width: 92vw !important;
        right: 4vw !important;
        left: 4vw !important;
    }

    /* Landing hero */
    .hero-title {
        font-size: 1.6rem !important;
    }

    .section-title {
        font-size: 1.4rem !important;
    }
}

/* ============================================================
   Landscape phones — reduce header padding
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .app-content {
        padding-top: 68px !important;
    }

    .mobile-header {
        height: 52px !important;
    }
}

/* ============================================================
   Prefer-reduced-motion — disable animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}