/* MOBILE-ONLY BOOK IMAGE FIX - Added Jan 2026 - FULL VIEW VERSION */
/* This ONLY affects images on screens smaller than 768px */

@media only screen and (max-width: 768px) {
  /* Target all three book cover images from Dropbox */
  img[src*="grounded.jpg"],
  img[src*="timeless.jpg"], 
  img[src*="unbroken.jpg"],
  
  /* Also target by alt text to be safe */
  img[alt*="grounded"],
  img[alt*="timeless"],
  img[alt*="unbroken"],
  img[alt*="Book Cover"] {
    /* SHOW FULL IMAGE - no width restriction */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    
    /* Ensure full visibility */
    object-fit: contain !important;
    
    /* Remove any margins that might cut it off */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Ensure container doesn't cut it off */
    box-sizing: border-box !important;
  }
  
  /* Make sure parent containers don't cut images */
  div:has(> img[src*="grounded.jpg"]),
  div:has(> img[src*="timeless.jpg"]),
  div:has(> img[src*="unbroken.jpg"]) {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* For very small phones - ensure full visibility */
@media only screen and (max-width: 400px) {
  img[src*="grounded.jpg"],
  img[src*="timeless.jpg"], 
  img[src*="unbroken.jpg"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* AGGRESSIVE CONTAINER FIXES - Ensure images can be full width */
@media only screen and (max-width: 768px) {
  /* Target any container that might hold book images */
  body > div,
  main > div,
  section > div,
  .container,
  .content,
  .book-container,
  .image-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
  }
  
  /* Specifically target the UNKNOWN text container if it exists */
  div:contains("UNKNOWN"),
  div:has(> h1:contains("UNKNOWN")) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* FORCE full-width rendering on mobile */
@media only screen and (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Remove any padding that might cut content */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
}