/* ========================================
   ESCORTLARCOK.FIT - RESPONSIVE STYLES
   ======================================== */

:root {
  --header-mobile-breakpoint: 1023px;
}

/* ---- Tablet (768px - 1023px) ---- */
@media (max-width: 1023px) {
  .container {
    padding: 0 16px;
  }

  .nav-desktop {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .header-actions .btn-ilan-ver {
    display: none;
  }

  .header-inner {
    padding: 10px 16px;
  }

  .logo {
    font-size: 1.2rem;
    word-break: break-word;
    min-width: 0;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .logo-img {
    max-height: 36px;
    max-width: 130px;
  }

  .mobile-menu {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
  }

  .mobile-menu.open {
    right: 0;
  }

  .hero {
    padding: 120px 16px 60px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .two-column {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .detail-gallery {
    grid-template-columns: 1fr;
  }

  .detail-gallery-thumbs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .ad-form {
    padding: 24px;
  }

  .legal-content {
    padding: 24px;
  }
}

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  html {
    font-size: 15px;
  }

  .nav-desktop {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .header-actions .btn-ilan-ver {
    display: none;
  }

  .header-inner {
    padding: 10px 16px;
  }

  .logo {
    font-size: 1.2rem;
    word-break: break-word;
    min-width: 0;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .logo-img {
    max-height: 36px;
    max-width: 130px;
  }

  .hero {
    padding: 100px 16px 50px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .search-box {
    flex-direction: column;
    border-radius: var(--radius-lg);
  }

  .search-box input {
    padding: 12px 16px;
  }

  .search-box button {
    width: 100%;
  }

  .search-filters {
    gap: 8px;
  }

  .search-filters select {
    flex: 1;
    min-width: 120px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cards-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .escort-card-info {
    padding: 12px;
  }

  .escort-card-name {
    font-size: 0.95rem;
  }

  .escort-card-meta {
    font-size: 0.75rem;
    gap: 8px;
  }

  .escort-card-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .content-section {
    padding: 24px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .footer-brand .logo {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .modal {
    padding: 28px 20px;
    margin: 16px;
  }

  .modal h2 {
    font-size: 1.3rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .ad-form {
    padding: 20px 16px;
  }

  .ad-form h1 {
    font-size: 1.4rem;
  }

  .checkbox-group {
    grid-template-columns: 1fr 1fr;
  }

  .legal-content {
    padding: 20px 16px;
  }

  .legal-content h1 {
    font-size: 1.4rem;
  }

  .detail-header {
    padding: 24px 0;
  }

  .detail-info h1 {
    font-size: 1.4rem;
  }

  .detail-meta {
    gap: 12px;
  }

  .detail-section {
    padding: 16px;
  }

  .blog-detail-header h1 {
    font-size: 1.5rem;
  }

  .blog-detail-content {
    font-size: 1rem;
  }

  .city-hero {
    padding: 100px 16px 40px;
  }

  .city-hero h1 {
    font-size: 1.6rem;
  }

  .districts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pagination a,
  .pagination span {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  .notification {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .two-column .sidebar {
    margin-top: 20px;
  }
}

/* ---- Small Mobile (< 480px) ---- */
@media (max-width: 479px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .escort-card-name {
    font-size: 0.85rem;
  }

  .escort-card-meta {
    font-size: 0.7rem;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .escort-card-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .checkbox-group {
    grid-template-columns: 1fr;
  }

  .blog-detail-meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* ---- Large Desktop (> 1400px) ---- */
@media (min-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .two-column {
    grid-template-columns: 1fr 360px;
  }
}

/* ---- Touch Device Optimizations ---- */
@media (hover: none) {
  .escort-card:hover {
    transform: none;
  }

  .escort-card:hover .escort-card-image img {
    transform: none;
  }
}