/* 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-only-view img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

/* Invert logo for dark themes (assuming asset is black) */
[data-theme]:not([data-theme^="light"]) #mobile-only-view img {
    filter: invert(1);
}

/* 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;
    }
    
    body {
        overflow: hidden !important;
        background: var(--background-color) !important;
        /* Remove background image on mobile lockout */
        background-image: none !important; 
    }

    #mobile-only-view {
        display: flex !important;
    }
}

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

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

  /* Hide slideshow bio buttons on desktop when Biography Button setting is OFF */
  :root[data-show-bio-btn-desktop="false"] .bio-button {
      display: none !important;
  }
  
  .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: "Abril Fatface", cursive;
      letter-spacing: 0.12em;
      text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.7);
      font-size: 1.5rem;
  }
}

/* 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%;
  }
}