/* ------------------ */
/* ROOT + BASE        */
/* ------------------ */

/* Admin bar is disabled via PHP; no CSS normalization needed */


/* ------------------ */
/* RESPONSIVE: DESKTOP */
/* ------------------ */
@media (min-width: 1025px) {
  :root {
    --gap: 24px;
    --container-max-width: 1440px;
    --sticky-top-offset: 48px;
    --header-height: 60px;
    --header-height-scrolled: 60px;
  }



.mobile-only { display: none !important; visibility: hidden; }
  

}

/* ------------------ */
/* RESPONSIVE: TABLET */
/* ------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --gap: 16px;
    --sticky-top-offset: 40px;
    --header-height: 60px;
    --header-height-scrolled: 60px;
  }

  /* Reset all columns to full width by default */
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

    /* Tablet Grid */
  .t-col-12 { flex: 0 0 100%;  max-width: 100%; }
  .t-col-6 { flex: 0 0 calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); }

  .t-col-4 { 
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    max-width: calc((100% - 2 * var(--gap)) / 3);
  }

  .t-col-3 { 
    flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
    max-width: calc((100% - 3 * var(--gap)) / 4);
  }

  .main-nav {
    display: none;
  }
  
  #menu_mobile_trigger {
    display: block;
  }
  
  .main-nav ul {
    gap: 15px;
  }

  /* Tablet Visibility */
  .hide-tablet { display: none !important; }
  .tablet-only { display: block !important; }

  /* Sticky behavior adjustments */
  .sticky-child {
    top: calc(var(--sticky-top-offset) + 40px);
  }
}

/* ------------------ */
/* MOBILE (< 768px) */
/* ------------------ */
@media (max-width: 767px) {
  :root {
    --gap: 12px;
    --sticky-top-offset: 32px;
    --header-height: 60px;
    --header-height-scrolled: 60px;
  }

    /* Mobile Grid */
  [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .m-col-12 { 
    flex: 0 0 100%;
    max-width: 100%;
  }

  .m-col-6 { 
    flex: 0 0 calc((100% - var(--gap)) / 2);
    max-width: calc((100% - var(--gap)) / 2);
  }

  .m-col-4 { 
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    max-width: calc((100% - 2 * var(--gap)) / 3);
  }

  .m-col-3 { 
    flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
    max-width: calc((100% - 3 * var(--gap)) / 4);
  }

  /* Mobile Visibility */
  .hide-mobile { display: none !important; }
  .mobile-only { display: block !important; }

  /* Mobile Header */
  .site-header {
    height: var(--header-height);
  }

  .site-header.scrolled {
    height: var(--header-height-scrolled);
  }

  /* Mobile Dashboard Avatar Positioning */
  .dashboard-user-avatar-large {
    bottom: -40px; /* Less overflow on mobile */
    left: 20px; /* Closer to edge on mobile */
    width: 80px; /* Smaller on mobile */
    height: 80px;
  }

  .dashboard-user-avatar-large .avatar-large {
    width: 80px;
    height: 80px;
  }

  .header-user-meta {
    left: 120px;
    top: 70%;
    transform: translateY(-50%);
    gap: 4px;
  }

  .header-user-meta .header-user-name {
    font-size: 18px;
  }

  .header-user-meta .header-user-handle {
    font-size: 12px;
  }

  /* Mobile Sticky */
  .sticky-scroll {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-top-offset);
  }

  .sticky-parent .sticky-scroll {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-top-offset);
  }

  .sticky-child {
    top: calc(var(--sticky-top-offset) + 20px);
  }

  /* Mobile Sticky Fix */
  .sticky-container[data-sticky-container="live-personalize"] .sticky-scroll,
  .sticky-container[data-sticky-container="group-nav"] .sticky-scroll {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
  }

  .sticky-container[data-sticky-container="live-personalize"] .sticky-child,
  .sticky-container[data-sticky-container="group-nav"] .sticky-child {
    top: 0;
  }

  /* Mobile navigation spacing removed */
  .col-3 .sticky-container {
    padding-top: 0;
  }

@media (max-width: 1024px) {
  /* Dashboard Responsive */
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .charts-row {
    grid-template-columns: 1fr;
  }
  
  .weblog-layout {
    flex-direction: column;
  }

  .weblog-sidebar,
  .weblog-content {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .weblog-item {
    flex-direction: column;
  }

  .weblog-item__media {
    flex: 0 0 auto;
  }

  .weblog-item__excerpt {
    max-width: 100%;
  }
}

  /* Mobile Layout */
  .sticky-wrapper {
    flex-direction: column;
  }

  .scroll-content {
    width: 100%;
  }

  .scroll-area {
    min-height: 300px;
  }

  .site-header {
    padding: 10px var(--gap);
  }

  /* Mobile subnavigation */
  .subnav-inner {
    padding: 0 var(--gap);
  }
  
  .subnav-menu {
    gap: 16px;
  }
  
  /* Mobile hero adjustments */
  .hero {
    padding: 32px var(--gap);
  }
  
  .hero-home {
    min-height: 60vh;
  }
  
  .hero-inner {
    align-items: stretch;
  }
  
  .hero-search,
  .music-search {
    flex-direction: column;
  }
  
  .hero-search button,
  .music-search button {
    width: 100%;
    justify-content: center;
  }
  
  .main-nav {
    display: none;
  }

  /* Footer Responsive */
  .footer-grid {
    margin-bottom: 20px;
  }

  .footer-column {
    margin-bottom: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .logo a {
    font-size: 1.6em;
  }

  .mobile-nav a {
    font-size: 1em;
    padding: 12px 0;
  }

  /* Mobile Header Image */
  .header-image { height: 60vh; max-height: 500px; min-height: 400px; }
  .header-image-bg { transform: none !important; }
}

/* ------------------------ */
/* SMALL MOBILE (< 480px) */
/* ------------------------ */
@media (max-width: 480px) {
  :root {
    --gap: 8px;
    --sticky-top-offset: 50px;
    --header-height: 50px;
    --header-height-scrolled: 35px;
  }

  /* Adjust sticky offsets for very small screens */
  .sticky-child {
    top: calc(var(--sticky-top-offset) + 15px);
  }

  /* Ensure sticky elements work on small screens */
  .sticky-scroll,
  .sticky-parent .sticky-scroll {
    position: -webkit-sticky;
    position: sticky;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Latest Uploads Responsive Styles */
@media (max-width: 768px) {
    .uploads-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .upload-actions {
        flex-wrap: wrap;
    }
    
    .action-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    /* List view mobile adjustments */
    .upload-row {
        grid-template-columns: 35px 1fr 60px 80px 50px;
        gap: 10px;
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Playlists Responsive Styles */
@media (max-width: 768px) {
    .playlists-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .playlists-tabs {
        flex-wrap: wrap;
    }
    
    .playlists-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .playlist-card-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .playlist-actions {
        align-self: flex-end;
    }
    
    .playlist-card-footer {
        flex-direction: column;
    }
    
    .playlist-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .playlists-header-full {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .playlists-tabs-full {
        flex-wrap: wrap;
    }
    
    .playlist-row-full {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .playlist-play-col {
        justify-content: flex-start;
    }
    
    .playlist-info-col {
        gap: 4px;
    }
    
    .playlist-tracks-col,
    .playlist-visibility-col {
        text-align: left;
    }
    
    .playlist-actions-col {
        justify-content: flex-start;
        gap: 8px;
    }
    
    .edit-overlay-content {
        margin: 10px;
        max-width: none;
    }
    
    .edit-playlist-form-full .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .playlist-header-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .playlist-info h1 {
        font-size: 24px;
    }
    
    .playlist-actions {
        justify-content: flex-start;
    }
    
    .track-item {
        grid-template-columns: 30px 1fr 80px;
        gap: 10px;
        padding: 10px 15px;
    }
    
    .track-album,
    .track-duration {
        display: none;
    }
    
    .playlist-large-player {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .large-play-button {
        width: 60px;
        height: 60px;
    }
    
    .large-play-button i {
        font-size: 20px;
    }
    
    .track-title-large {
        font-size: 20px;
    }
    
    .track-meta-large {
        justify-content: center;
        gap: 15px;
    }
    
    #album-tracks-tabs {
        flex-direction: column;
    }
    
    #album-tracks-tabs .tabs-navigation {
        width: 100%;
        min-width: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    
    #album-tracks-tabs .track-content {
        padding: 15px;
    }
    
    /* Network Page Responsive */
    .network-header-map {
        height: 50vh;
        min-height: 400px;
    }
    
    #network-map {
        min-height: 400px;
    }
    
    .create-group-btn {
        bottom: 15px;
        right: 15px;
        padding: 10px 18px;
        font-size: 13px;
    }
    
    #network-map .leaflet-control-zoom {
        top: 15px;
        right: 15px;
    }
    }
    
    .play-btn-list {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
    
    .song-title-list {
        font-size: 13px;
    }
    
    .artist-name-list,
    .album-name-list {
        font-size: 11px;
    }
    
    .upload-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .action-btn-list {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    .upload-actions-col {
        gap: 4px;
    }
    
    /* Dashboard Responsive */
    .dashboard-nav-stats {
        flex-direction: column;
    }
    
    .nav-stat-item {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .public-stats {
        flex-wrap: wrap;
    }
    
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    .dashboard-content {
        grid-template-columns: 1fr;
    }
    
    /* Create Group Responsive */
    .wizard-progress {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .wizard-progress::before {
        display: none;
    }
    
    .wizard-step {
        width: 45%;
    }
    
    .crop-preview {
        max-width: 100%;
    }
    
    /* Album Slideshow Responsive */
    .album-card {
        flex: 0 0 calc(50% - 10px); /* 2 items per view on mobile */
    }
    
    .albums-slide-btn {
        width: 32px;
        height: 32px;
    }
    
    .albums-slide-btn i {
        font-size: 12px;
    }
    
    .album-action-btn {
        width: 28px;
        height: 28px;
    }
    
    .album-action-btn i {
        font-size: 10px;
    }
}

/* Tablet Album Slideshow */
@media (min-width: 768px) and (max-width: 1024px) {
    .album-card {
        flex: 0 0 calc(25% - 15px); /* 4 items per view on tablet */
    }
}