/* Responsive refinements for NEOKARTS - added to preserve desktop styling and improve mobile layouts */

/* Tablet and small desktop */
@media (max-width: 1024px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .navbar { width: 95%; padding: 0 18px; }
  .nav-links { display: none !important; }
  .nav-menu-btn { display: flex !important; align-items: center; justify-content: center; }
  .nav-menu-btn span { background: #fff !important; }
  .hero-content { padding: 60px 18px; }
  .showcase-card { padding: 24px; min-height: 420px; }
  .story-image-box img { height: 420px; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
}

/* Ensure mobile menu button is visible and tappable */
@media (max-width: 768px) {
  .nav-menu-btn { display: flex !important; width:44px; height:44px; padding:8px; }
  .nav-menu-btn span { width:20px; height:2px; background:#fff; margin:4px 0; }
  .nav-links { display: none !important; }
  .showcase-grid { grid-template-columns: 1fr !important; }
  .showcase-card { padding: 20px !important; min-height: auto !important; }
  .card-image-wrapper img, .story-image-box img { height: auto; max-height: 320px; object-fit: cover; }
  .gallery-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  .nav-menu-btn { display: flex !important; }
  .nav-menu-btn span { background: #fff !important; }
  .showcase-card { padding: 16px !important; }
  .gallery-item { height: 200px !important; overflow: hidden; }
  .gallery-video { width:100%; height:100%; object-fit:contain; object-position:center; }

  /* Mobile fix: remove decorative transforms on images/videos to prevent rotated/overflowing media */
  .card-image-wrapper img,
  .story-image-box img,
  .gallery-item img,
  .gallery-item video,
  .card-image-wrapper video {
    transform: none !important;
    rotate: 0deg !important;
    -webkit-transform: none !important;
    -webkit-rotate: 0deg !important;
    margin: 0 auto !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Ensure image containers center media and clip overflow */
  .card-image-wrapper,
  .story-image-box,
  .gallery-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Reduce hero image size to fit small screens */
  .card-image-wrapper img { max-height: 320px !important; }
  .story-image-box img { max-height: 260px !important; }
}

/* Mobile portrait */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .hero-title-box h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .hero-actions { flex-direction: column; gap: 12px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-card { min-height: auto; padding: 20px; }
  .card-image-wrapper img, .story-image-box img { height: auto; max-height: 360px; object-fit: cover; }
  .modal-media img { width: 100%; height: auto; object-fit: contain; }
  .modal-info .btn-primary { width: 100%; }
  .gallery-item { height: 240px; }
}

/* Small phones */
@media (max-width: 420px) {
  html { font-size: 14px; }
  .navbar { top: 12px; height: 56px; padding: 0 12px; border-radius: 18px; }
  .nav-brand .site-logo-img { height: 28px; }
  .hero-title-box h1 .line-1, .hero-title-box h1 .line-2 { font-size: clamp(1.2rem, 8vw, 2rem); }
  .story-image-box img { height: 220px; }
  .showcase-card { padding: 18px; }
  .gallery-item { height: 200px; }
  .modal-spec-row { display: flex; flex-direction: column; gap: 8px; }
  .nav-links { display: none !important; }
  .nav-menu-btn { display: flex !important; }
}