/* ============================================
   WALLS MOBILE CSS
   মোবাইল ভিউ ফিক্স - সব walls templates এর জন্য
   ============================================ */

/* ============================================
   TABLET / MEDIUM SCREENS (max 991px)
   ============================================ */

@media (max-width: 991px) {

    /* Grid: single column */
    .walls-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 10px !important;
    }

    /* Sidebars hide */
    .walls-sidebar,
    .walls-right-sidebar,
    .walls-sidebar-right {
        display: none !important;
    }

    /* Main content full width */
    .walls-main-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .walls-container {
        padding: 12px 0 !important;
    }

    /* Encyclopedia post cards */
    .ency-post-card {
        margin-bottom: 16px !important;
    }

    .ency-post-header {
        padding: 18px !important;
    }

    .ency-post-title {
        font-size: 1.5rem !important;
    }

    .ency-featured-image {
        height: 280px !important;
    }

    .ency-post-footer {
        padding: 14px 18px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .ency-stats {
        gap: 16px !important;
    }

    .ency-read-more-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Encyclopedia layout */
    .ency-container {
        padding: 10px !important;
    }

    .ency-sidebar,
    .ency-sidebar-right {
        display: none !important;
    }

    .ency-main-content {
        width: 100% !important;
    }
}

/* ============================================
   BASE MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {

    /* Container padding শূন্য করা */
    .walls-container {
        padding: 8px 0 !important;
    }

    /* Grid: single column */
    .walls-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 0 8px !important;
    }

    /* Left sidebar hide */
    .walls-sidebar {
        display: none !important;
    }

    /* Right sidebar hide */
    .walls-right-sidebar,
    .walls-sidebar-right {
        display: none !important;
    }

    /* Main content full width */
    .walls-main-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Card padding কমানো */
    .walls-card {
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    /* ============================================
       NEWSPAPER / HOME PAGE
       ============================================ */

    .newspaper-wrapper {
        grid-template-columns: 1fr !important;
        padding: 8px !important;
        gap: 10px !important;
    }

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

    .newspaper-main {
        width: 100% !important;
    }

    .newspaper-masthead {
        padding: 30px 15px !important;
        border-radius: 10px !important;
    }

    .newspaper-title {
        font-size: 1.8rem !important;
    }

    .newspaper-tagline,
    .newspaper-date {
        font-size: 0.85rem !important;
    }

    /* Magazine grid: সব posts full width */
    .magazine-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .post-hero,
    .post-large,
    .post-medium,
    .post-small,
    .post-text {
        grid-column: span 1 !important;
    }

    .post-hero {
        height: 220px !important;
    }

    .post-hero-title {
        font-size: 1.2rem !important;
    }

    .post-hero-excerpt {
        display: none !important;
    }

    .post-hero-overlay {
        padding: 15px !important;
    }

    .post-large-image {
        height: 200px !important;
    }

    .post-large-content,
    .post-medium-content,
    .post-small-content {
        padding: 12px !important;
    }

    .post-large-title {
        font-size: 1.2rem !important;
    }

    .post-medium-title {
        font-size: 1rem !important;
    }

    .post-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .post-stats {
        margin-left: 0 !important;
    }

    /* ============================================
       POST DETAIL PAGE
       ============================================ */

    .post-detail-container {
        padding: 0 !important;
    }

    .post-header {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .post-header h1 {
        font-size: 1.4rem !important;
    }

    .post-content {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    /* Stats row wrap করা */
    .post-header > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 0.85rem !important;
    }

    /* ============================================
       ENCYCLOPEDIA HOME
       ============================================ */

    /* Search box */
    .walls-card form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .walls-card form input[type="text"] {
        width: 100% !important;
        font-size: 14px !important;
    }

    .walls-card form button[type="submit"] {
        width: 100% !important;
        padding: 10px !important;
    }

    /* Encyclopedia entry cards */
    .encyclopedia-posts-feed article {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .encyclopedia-posts-feed article h3 {
        font-size: 1.3rem !important;
    }

    /* Read more button: stack vertically */
    .encyclopedia-posts-feed article > div:last-child {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .encyclopedia-posts-feed article > div:last-child a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ency-post-card (encyclopedia_post.html partial) */
    .ency-post-card {
        border-radius: 10px !important;
        margin-bottom: 14px !important;
    }

    .ency-post-header {
        padding: 14px !important;
    }

    .ency-author-section {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .ency-author-avatar,
    .ency-author-avatar-placeholder {
        width: 42px !important;
        height: 42px !important;
        font-size: 1rem !important;
    }

    .ency-category-badge {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .ency-post-title {
        font-size: 1.3rem !important;
    }

    .ency-post-summary {
        font-size: 0.95rem !important;
    }

    .ency-featured-image {
        height: 220px !important;
    }

    .ency-post-footer {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .ency-stats {
        gap: 14px !important;
        font-size: 0.85rem !important;
    }

    .ency-read-more-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px 20px !important;
    }

    .ency-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .entry-header {
        padding: 15px !important;
    }

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

    .entry-meta-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .entry-stats {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .entry-featured-image {
        border-radius: 8px !important;
    }

    .entry-content {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    /* ============================================
       SEARCH RESULTS
       ============================================ */

    .search-header {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    .search-header h1 {
        font-size: 1.4rem !important;
        margin-bottom: 12px !important;
    }

    .filter-section {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .filter-tabs {
        gap: 6px !important;
    }

    .filter-tabs .btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    .category-filter {
        gap: 6px !important;
    }

    .sort-options {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .result-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .result-title {
        font-size: 1.1rem !important;
    }

    .result-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 0.8rem !important;
    }

    .keyword-tags {
        gap: 5px !important;
    }

    /* ============================================
       MY SUBMISSIONS
       ============================================ */

    .submissions-header {
        padding: 1.2rem 0 !important;
    }

    .submissions-header h1 {
        font-size: 1.4rem !important;
    }

    .submissions-header .col-md-4 {
        margin-top: 12px !important;
    }

    .submissions-header .d-flex {
        justify-content: flex-start !important;
    }

    /* Stats cards: 2 columns on mobile */
    .row.mb-4 > .col-md-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 10px !important;
    }

    .stats-card {
        padding: 12px !important;
    }

    .stats-number {
        font-size: 1.5rem !important;
    }

    /* Filter tabs scroll */
    .filter-tabs .d-flex {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 5px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .filter-tab {
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .submission-card {
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }

    .submission-header {
        padding: 10px 12px !important;
    }

    .submission-content {
        padding: 12px !important;
    }

    .submission-footer {
        padding: 10px 12px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .submission-footer .d-flex:last-child {
        justify-content: flex-start !important;
    }

    /* Media preview: 2 columns */
    .media-preview .row > .col-4 {
        width: 33.33% !important;
    }

    /* ============================================
       REVIEW LIST
       ============================================ */

    .review-container {
        padding: 10px 8px !important;
    }

    .review-container .row.g-4 {
        flex-direction: column !important;
    }

    .review-container .col-lg-3 {
        display: none !important;
    }

    .review-container .col-lg-9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .review-header {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    .review-header h1 {
        font-size: 1.3rem !important;
    }

    .review-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .review-stats .stat-card {
        padding: 12px 8px !important;
    }

    .review-stats .stat-card h3 {
        font-size: 1.8rem !important;
    }

    /* Review posts: single column */
    .review-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .review-post-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .post-author-section {
        gap: 10px !important;
    }

    .author-avatar {
        width: 45px !important;
        height: 45px !important;
    }

    .post-title {
        font-size: 1.2rem !important;
    }

    .review-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-approve,
    .btn-reject {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    .post-media-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .post-media-item img {
        height: 140px !important;
    }

    /* ============================================
       SKYLAND
       ============================================ */

    .sky-container {
        padding: 0 !important;
    }

    .sky-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 8px !important;
    }

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

    .sky-main-content {
        width: 100% !important;
    }

    .sky-header {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    .sky-header h1,
    .header-title {
        font-size: 1.2rem !important;
    }

    /* Stories grid: 2 columns */
    .sky-stories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .story-card {
        border-radius: 10px !important;
    }

    .story-thumbnail {
        height: 160px !important;
    }

    .story-author-info {
        padding: 8px !important;
    }

    .author-name {
        font-size: 0.85rem !important;
    }

    .story-time {
        font-size: 0.75rem !important;
    }

    /* ============================================
       BASE GUEST NAVBAR MOBILE
       ============================================ */

    .guest-navbar .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .guest-brand {
        font-size: 1.3rem !important;
    }

    .guest-right-section {
        gap: 8px !important;
    }

    .guest-nav-links {
        display: none !important;
    }

    .btn-guest-login,
    .btn-guest-register {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    /* ============================================
       FLOATING ACTION BUTTON
       ============================================ */

    .walls-fab,
    .floating-action-btn,
    .sky-fab {
        bottom: 15px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }

    /* Tips button */
    button.btn.btn-primary.rounded-circle.position-fixed {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    /* ============================================
       GENERAL FORM ELEMENTS
       ============================================ */

    .form-control,
    input[type="text"],
    input[type="email"],
    textarea,
    select {
        font-size: 16px !important; /* iOS zoom prevent */
    }

    /* ============================================
       IMAGES
       ============================================ */

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ============================================
       PAGINATION
       ============================================ */

    .pagination {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .page-link {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
    }

    /* ============================================
       MODAL
       ============================================ */

    .modal-dialog {
        margin: 10px !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    /* ============================================
       SECTION HEADER
       ============================================ */

    .section-header {
        margin: 20px 0 12px 0 !important;
    }

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

    /* ============================================
       BREAKING NEWS
       ============================================ */

    .breaking-news {
        font-size: 0.85rem !important;
        padding: 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .breaking-label {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
    }
}

/* ============================================
   EXTRA SMALL (max 480px)
   ============================================ */

@media (max-width: 480px) {

    .walls-container {
        padding: 5px 0 !important;
    }

    .walls-grid {
        padding: 0 5px !important;
    }

    .newspaper-title {
        font-size: 1.5rem !important;
    }

    .post-hero {
        height: 180px !important;
    }

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

    /* Stats: 2 columns */
    .review-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Skyland: 2 columns */
    .sky-stories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .story-thumbnail {
        height: 130px !important;
    }

    /* Submissions stats: 2 columns */
    .row.mb-4 > .col-md-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .entry-title {
        font-size: 1.2rem !important;
    }

    .result-title {
        font-size: 1rem !important;
    }
}

/* ============================================
   ENCYCLOPEDIA LAYOUT (encyclopedia_layout.html)
   ============================================ */

@media (max-width: 768px) {

    .ency-container {
        padding: 8px !important;
    }

    .ency-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .ency-sidebar,
    .ency-sidebar-right {
        display: none !important;
    }

    .ency-main-content {
        width: 100% !important;
    }

    .ency-card {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Search box in encyclopedia */
    .ency-card form,
    .ency-main-content form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ency-card form input,
    .ency-main-content form input[type="text"] {
        width: 100% !important;
        font-size: 16px !important;
    }

    .ency-card form button,
    .ency-main-content form button[type="submit"] {
        width: 100% !important;
    }

    /* Stats grid in encyclopedia */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-box {
        padding: 12px 8px !important;
    }

    /* Related entries */
    .related-entry {
        padding: 8px !important;
    }

    .related-entry-image {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ============================================
   CATEGORY PAGE
   ============================================ */

@media (max-width: 768px) {

    .category-header {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    .category-header h1 {
        font-size: 1.5rem !important;
    }

    .category-header > div:first-child {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .category-header > div:last-child {
        gap: 15px !important;
        flex-wrap: wrap !important;
    }

    /* ============================================
       REVIEW DETAIL PAGE
       ============================================ */

    .detail-container {
        padding: 10px 8px !important;
    }

    .detail-post-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    /* ============================================
       ENCYCLOPEDIA CREATE/EDIT FORMS
       ============================================ */

    .walls-container form .row {
        flex-direction: column !important;
    }

    .walls-container form .col-md-8,
    .walls-container form .col-md-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Form inputs */
    .walls-container .form-group,
    .walls-container .mb-3 {
        margin-bottom: 12px !important;
    }

    /* ============================================
       REVIEW LIST (review_list.html)
       ============================================ */

    .review-list-container {
        padding: 10px 8px !important;
    }
}

/* ============================================
   DENIED PAGE
   ============================================ */

@media (max-width: 768px) {

    .denied-container {
        padding: 10px 8px !important;
    }

    .denied-header {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }

    .denied-header h1 {
        font-size: 1.4rem !important;
    }

    /* review_list.html */
    .review-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    /* ============================================
       ENCYCLOPEDIA REVIEW PAGE
       ============================================ */

    .ency-review-container {
        padding: 10px 8px !important;
    }

    /* ============================================
       GENERAL: overflow fix for all pages
       ============================================ */

    body {
        overflow-x: hidden !important;
    }

    /* Prevent horizontal scroll from wide elements */
    .walls-container,
    .newspaper-wrapper,
    .review-container,
    .denied-container,
    .detail-container,
    .sky-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Tables responsive */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}