/* Desktop-only overrides and specific tweaks */

/* Mobile Lockout Styling */
#mobile-only-view {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    z-index: 2147483647;
    align-items: center;
    justify-content: center;
}

/* Mobile lockout logo: use theme-aware masked logo */
#mobile-only-view .mobile-lockout-logo {
    width: 300px;
    height: 80px;
    background-color: var(--primary-color);
    -webkit-mask-image: url('6d-300.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('6d-300.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* For all light color themes, use the black 6d-300b.png logo instead */
[data-theme^="light"] #mobile-only-view .mobile-lockout-logo {
    background-color: var(--primary-color);
    -webkit-mask-image: url('6d-300b (3).png');
    mask-image: url('6d-300b (3).png');
}

/* MOBILE LOCKOUT: Hide app and show logo for screens <= 768px */
@media (max-width: 768px) {
    /* Hide all direct children of body except the lockout view and scripts */
    body > *:not(#mobile-only-view):not(script) {
        display: none !important;
    }
    
    html, body {
        overflow: hidden !important;
        height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: var(--background-color) !important;
        /* Remove background image on mobile lockout */
        background-image: none !important; 
    }

    #mobile-only-view {
        display: flex !important;
        z-index: 2147483647 !important; /* Max safe z-index */
        background-color: var(--background-color) !important;
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* Desktop Rules (Keep existing desktop logic) */

@media (min-width: 769px) {
  .media-grid,
  .similar-media-grid {
      grid-template-columns: repeat(2, 1fr);
  }


  
  .person-image-preview {
    height: 300px;
  }
  
  .modal-content .person-link,
  .modal-content .cast-link {
      border-radius: 5px; 
  }

  /* Desktop Media Grid Column Override based on Settings (data-homepage-cols) */
  [data-homepage-cols="2"] .media-grid, [data-homepage-cols="2"] .similar-media-grid { grid-template-columns: repeat(2, 1fr); }
  [data-homepage-cols="3"] .media-grid, [data-homepage-cols="3"] .similar-media-grid { grid-template-columns: repeat(3, 1fr); }
  [data-homepage-cols="4"] .media-grid, [data-homepage-cols="4"] .similar-media-grid { grid-template-columns: repeat(4, 1fr); }
  [data-homepage-cols="5"] .media-grid, [data-homepage-cols="5"] .similar-media-grid { grid-template-columns: repeat(5, 1fr); }
  [data-homepage-cols="6"] .media-grid, [data-homepage-cols="6"] .similar-media-grid { grid-template-columns: repeat(6, 1fr); }
  [data-homepage-cols="7"] .media-grid, [data-homepage-cols="7"] .similar-media-grid { grid-template-columns: repeat(7, 1fr); }
  [data-homepage-cols="8"] .media-grid, [data-homepage-cols="8"] .similar-media-grid { grid-template-columns: repeat(8, 1fr); }
  [data-homepage-cols="9"] .media-grid, [data-homepage-cols="9"] .similar-media-grid { grid-template-columns: repeat(9, 1fr); }
  [data-homepage-cols="10"] .media-grid, [data-homepage-cols="10"] .similar-media-grid { grid-template-columns: repeat(10, 1fr); }
    
  /* Desktop category header refinements */
  .top-category-header .category-main-term,
  .category-display .category-main-term {
      font-family: 'Cinzel Decorative', 'Abril Fatface', cursive;
      letter-spacing: 0.08em;
      text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.7);
      font-size: calc(1.5rem + 6pt);
  }
}

/* Light theme override for category title text shadows (homepage & front-page buttons) */
[data-theme^="light"] .top-category-header .category-main-term,
[data-theme^="light"] .category-display .category-main-term {
  text-shadow:
    1px 1px 0 rgba(200, 200, 200, 0.7),
    2px 2px 4px rgba(200, 200, 200, 0.9);
}

@media (min-width: 800px) {
  .modal-content {
    width: 62.5%;
  }
}