/*-----------------------------------------------------------------------------
 * Mobile Responsive Styles
 * Breakpoints: 768px (tablet), 480px (phone)
 *-----------------------------------------------------------------------------
 */

/* =============================================================================
   Hamburger Menu Button (hidden on desktop)
   ============================================================================= */

.hamburger-btn {
   display: none;
   background: none;
   border: none;
   font-size: var(--hero-size);
   color: var(--text-primary);
   cursor: pointer;
   padding: 8px;
   margin-left: auto;
}

/* =============================================================================
   Rotation Hint (for landscape photos on portrait screens)
   ============================================================================= */

.rotate-hint {
   display: none;
   position: fixed;
   bottom: 80px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 12px 20px;
   border-radius: 8px;
   font-size: var(--popup-size);
   z-index: 10000;
   align-items: center;
   gap: 10px;
   animation: fadeInOut 3s ease-in-out forwards;
}

.rotate-hint i {
   font-size: var(--icon-md);
   transform: rotate(90deg);
}

@keyframes fadeInOut {
   0% { opacity: 0; }
   15% { opacity: 1; }
   85% { opacity: 1; }
   100% { opacity: 0; }
}

/* =============================================================================
   TABLET BREAKPOINT (768px and below)
   ============================================================================= */

@media (max-width: 768px) {
   
   /* --- Layout --- */
   :root {
      --gallery-row-height: 200px;
      --gallery-gap: 4px;
   }
   
   main {
      padding: 12px;
   }
   
   .main-header {
      margin-top: 12px;
      margin-bottom: 12px;
   }
   
   /* --- Navigation Menu --- */
   .hamburger-btn {
      display: block;
      order: 2;
   }
   
   .menu {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   
   .menu .logo-link {
      order: 1;
   }
   
   .menu ul {
      display: none;
      position: absolute;
      top: 100%;
      left: -1rem;
      right: -1rem;
      flex-direction: column;
      background: var(--bg-header);
      padding: 10px 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      gap: 0;
   }
   
   .menu ul.menu-open {
      display: flex;
   }
   
   .menu li {
      width: 100%;
   }
   
   .menu a {
      padding: 14px 20px;
      width: 100%;
      justify-content: flex-start;
   }
   
   .menu li.active {
      background-color: var(--accent-color);
   }
   
   /* Show full menu labels on mobile menu */
   .menu-item-label {
      display: inline;
   }
   
   /* --- Home Page --- */
   .home-categories {
      gap: 20px;
   }
   
   .home-category {
      width: 130px;
      height: 130px;
   }
   
   .home-category i {
      font-size: 32px;
      margin-bottom: 12px;
   }
   
   .home-title {
      font-size: 2em;
   }
   
   /* --- Gallery --- */
   .gallery-item .album-overlay {
      height: 35px;
      font-size: var(--label-size);
   }
   
   /* --- Collection Toolbar --- */
   .collection-toolbar {
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
   }
   
   .button.icon {
      margin-left: 8px;
   }
   
   /* --- User Dropdown --- */
   .user-menu .user-overlay {
      width: calc(100vw - 20px);
      max-width: 300px;
      right: -10px;
   }
   
   /* --- Touch-friendly slideshow controls --- */
   .slideshow-controls {
      opacity: 1 !important;
   }
   
   .slideshow-counter {
      opacity: 1 !important;
   }
   
   .slideshow-close {
      opacity: 1 !important;
   }
}

/* =============================================================================
   PHONE BREAKPOINT (480px and below)
   ============================================================================= */

@media (max-width: 480px) {
   
   /* --- Layout --- */
   :root {
      --gallery-row-height: 150px;
      --gallery-gap: 3px;
   }
   
   main {
      padding: 8px;
   }
   
   
   .main-header {
      margin-top: 8px;
      margin-bottom: 8px;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
   }
   
   /* --- Navigation Menu --- */
   .menu img.logo {
      height: 28px;
   }
   
   .menu a {
      padding: 14px 16px;
   }
   
   /* --- Home Page --- */
   .home-container {
      padding: 20px 15px;
      min-height: 50vh;
   }
   
   .home-title {
      font-size: 1.6em;
   }
   
   .home-subtitle {
      font-size: 1em;
      margin-bottom: 30px;
   }
   
   .home-categories {
      gap: 15px;
   }
   
   .home-category {
      width: 100px;
      height: 100px;
   }
   
   .home-category i {
      font-size: 28px;
      margin-bottom: 8px;
   }
   
   .home-category span {
      font-size: var(--label-size);
   }
   
   /* --- Gallery --- */
   .gallery-item .album-overlay {
      height: 30px;
      font-size: var(--label-size);
   }
   
   /* --- Selection Checkboxes (larger touch targets) --- */
   .selection-overlay {
      top: 5px;
      right: 5px;
      padding: 5px;
   }
   
   .selection-overlay input[type="checkbox"] {
      width: 28px;
      height: 28px;
   }
   
   /* --- Toolbar --- */
   .collection-toolbar {
      width: 100%;
      justify-content: flex-start;
      align-items: center;
   }
   
   .button.icon {
      margin-left: 5px;
      padding: 8px;
   }
   
   .button.icon i {
      font-size: 1.3rem;
   }
   
   /* --- Photo action icons: smaller on phone --- */
   .photo-actions-overlay {
      padding: 3px 5px;
      gap: 1px;
   }
   
   .like-btn,
   .comment-btn,
   .info-btn {
      padding: 2px 4px;
      font-size: var(--label-size);
   }
   
   .like-btn i,
   .comment-btn i,
   .info-btn i {
      font-size: var(--label-size);
   }
   
   /* Smaller heart animation on phone */
   .double-tap-heart i {
      font-size: 50px;
   }
   
   /* --- Single Photo View --- */
   .view-single {
      min-height: calc(100dvh - 140px) !important;
      overflow: visible !important;
   }
   
   .single-photo-container {
      max-width: 100% !important;
      overflow: visible !important;
   }
   
   .view-single img {
      /* Preserve aspect ratio - width is the constraint on phones */
      width: auto !important;
      height: auto !important;
      max-width: calc(100vw - 16px) !important;
      max-height: calc(100dvh - 160px) !important;
      object-fit: contain !important;
   }
   
   /* --- Collection Title --- */
   .collection-title {
      font-size: var(--body-size);
   }
   
   /* --- Slideshow --- */
   .slideshow-btn {
      width: 52px;
      height: 52px;
   }
   
   .slideshow-btn-large {
      width: 68px;
      height: 68px;
   }
   
   .slideshow-controls {
      bottom: 30px;
      gap: 15px;
   }
   
   .slideshow-counter {
      bottom: 30px;
      right: 20px;
   }
   
   .slideshow-close {
      top: 15px;
      right: 15px;
      width: 48px;
      height: 48px;
   }
}

/* =============================================================================
   TOUCH DEVICE DETECTION (via pointer: coarse)
   ============================================================================= */

@media (pointer: coarse) {
   
   /* Always show slideshow controls on touch devices */
   .slideshow-controls {
      opacity: 1 !important;
   }
   
   .slideshow-counter {
      opacity: 1 !important;
   }
   
   .slideshow-close {
      opacity: 1 !important;
   }
   
   /* Larger touch targets for buttons */
   .back-button {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px;
      min-height: 44px;
   }
   
   .map-popup-nav {
      width: 44px !important;
      height: 44px !important;
   }
   
   .map-settings-btn {
      width: 44px !important;
      height: 44px !important;
   }
   
   .comment-submit {
      width: 44px !important;
      height: 44px !important;
   }
   
   /* Selection checkboxes */
   .selection-overlay input[type="checkbox"] {
      width: 28px;
      height: 28px;
   }
}

/* =============================================================================
   FORM INPUT FIXES (prevent iOS zoom on focus)
   ============================================================================= */

@media (max-width: 768px) {
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="search"],
   input[type="url"],
   input[type="tel"],
   input[type="number"],
   textarea,
   select {
      font-size: 16px !important;
   }
}

/* =============================================================================
   LANDSCAPE ORIENTATION ON MOBILE
   ============================================================================= */

@media (max-width: 896px) and (orientation: landscape) {
   
   /* Adjust gallery for landscape mobile */
   :root {
      --gallery-row-height: 180px;
   }
   
   /* Slideshow adjustments for landscape */
   .slideshow-controls {
      bottom: 20px;
   }
   
   .slideshow-counter {
      bottom: 20px;
   }
   
   .slideshow-close {
      top: 10px;
      right: 10px;
   }
   
   /* Smaller header in landscape to maximize photo space */
   .main-header {
      margin-top: 8px;
      margin-bottom: 8px;
   }
}