/* Mobile-specific CSS for tsimshatsui.hk */
/* This file provides additional mobile-specific styles */

@media (max-width: 767px) {
  /* Mobile-specific overrides */
  .main-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Allow images to go to screen edge but keep text centered */
  .main-content .full-width-mobile,
  .main-content img.full-width {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem);
  }
  
  /* Ensure hero section looks good on mobile */
  .hero-section {
    min-height: 300px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  /* Mobile navigation adjustments */
  .mobile-menu-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background: rgba(222, 41, 16, 0.9);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  /* Callout boxes mobile optimization */
  .callout-info,
  .callout-warning,
  .callout-tip,
  .callout-cultural,
  .callout-luxury {
    margin: 1rem 0;
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  /* Mobile typography */
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
  
  /* Mobile button styling */
  a[href$=".html"] {
    word-break: break-word;
  }
}

/* Very small mobile devices */
@media (max-width: 360px) {
  .hero-title {
    font-size: 1.7rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .main-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}