/* ============================================
   RESPONSIVE – HANCANU IMMOBILIEN
   Mobile-first breakpoints applied here
   ============================================ */

/* ============ LARGE TABLET / SMALL DESKTOP (max 1200px) ============ */
@media (max-width: 1200px) {
  .container { padding: 0 40px; }
  .nav, .nav.scrolled { padding-left: 40px; padding-right: 40px; }
  .about-content { padding: 100px 56px; }
  .contact-grid { gap: 56px; }
  .footer-cols { gap: 40px; }
}

/* ============ TABLET (max 1024px) ============ */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .nav, .nav.scrolled {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Hide desktop nav, show hamburger */
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: block; }

  /* Grids collapse */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .properties-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 24px; max-width: 640px; margin-left: auto; margin-right: auto; }

  /* About stacks */
  .about-wrap { grid-template-columns: 1fr; }
  .about-img {
    min-height: 420px;
    aspect-ratio: 16/10;
  }
  .about-content { padding: 80px 32px; }

  /* Contact stacks */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Footer */
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Section padding */
  .section-pad { padding: 100px 0; }

  /* Service cards slightly tighter */
  .service-card { padding: 40px 36px; }
  .service-num { font-size: 56px; top: 16px; right: 28px; }

  /* Testimonial full width */
  .testimonial { padding: 44px 36px; }
}

/* ============ MOBILE / LARGE PHONE (max 768px) ============ */
@media (max-width: 768px) {
  .container { padding: 0 22px; }
  .nav, .nav.scrolled {
    padding: 16px 22px;
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  /* Logo smaller on mobile */
  .logo-main { font-size: 18px; letter-spacing: 0.2em; }
  .logo-sub { font-size: 9px; }

  /* Hero */
  .hero {
    padding: 110px 20px 90px;
  }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
  .hero-sub { font-size: 15px; }
  .hero-buttons { gap: 12px; }
  .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
  }
  .eyebrow {
    font-size: 10px;
    gap: 12px;
    letter-spacing: 0.3em;
  }
  .eyebrow::before, .eyebrow::after {
    width: 24px;
  }
  .scroll-indicator { height: 40px; bottom: 28px; }

  /* Stats: 2x2 grid */
  .stats {
    padding: 24px 0;
  }
  .stats-grid {
    flex-wrap: wrap;
    height: auto;
  }
  .stat {
    flex: 0 0 50%;
    border-right: none;
    padding: 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.18);
  }
  .stat:nth-child(odd) {
    border-right: 1px solid rgba(0,0,0,0.18);
  }
  .stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .stat-num { font-size: 28px; }
  .stat-text { font-size: 20px; }
  .stat-text-sm { font-size: 16px; }
  .stat-label { font-size: 9px; }

  /* Section headings */
  .section-pad { padding: 80px 0; }
  .section-heading {
    font-size: clamp(30px, 7vw, 42px);
  }

  /* Services: 1 column */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 48px;
  }
  .service-card {
    padding: 36px 28px;
  }
  .service-card h3 { font-size: 24px; }
  .service-card p { font-size: 14px; }
  .service-num { font-size: 48px; top: 12px; right: 22px; }
  .service-icon { width: 40px; height: 40px; margin-bottom: 24px; }

  /* About */
  .about-img { min-height: 320px; }
  .about-content {
    padding: 60px 22px;
  }
  .trust-badges { gap: 20px; }
  .badge { font-size: 12px; }

  /* Properties: 1 column */
  .properties-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  .property-body { padding: 28px 24px; }
  .property-price { font-size: 28px; }
  .property-specs { gap: 14px; font-size: 11px; }
  /* On touch: overlay is always hidden, tap the link instead */
  .property-overlay { display: none; }
  .properties-cta { margin-top: 48px; }

  /* Testimonials */
  .testimonials-grid {
    margin-top: 56px;
    gap: 20px;
  }
  .testimonial {
    padding: 40px 28px;
  }
  .testimonial-quote {
    font-size: 96px;
    top: 10px;
    left: 22px;
  }
  .testimonial-text {
    font-size: 18px;
    margin: 36px 0 24px;
  }

  /* Contact */
  .contact-grid {
    gap: 48px;
    margin-top: 48px;
  }
  .contact-form { gap: 16px; }
  .field input,
  .field select,
  .field textarea {
    padding: 20px 16px 10px;
    font-size: 16px; /* critical: prevents iOS zoom */
  }
  .field label {
    left: 16px;
    top: 16px;
    font-size: 14px;
  }
  .btn-submit {
    padding: 18px;
    font-size: 12px;
  }
  .form-success {
    padding: 60px 24px;
  }
  .form-success h3 { font-size: 26px; }
  .hours-card { padding: 24px 26px; }
  .hours-card h4 { font-size: 20px; }

  /* Footer */
  .footer {
    padding: 60px 0 28px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .footer-top {
    flex-direction: column;
    text-align: center;
    padding-bottom: 36px;
    gap: 28px;
  }
  .footer-nav {
    gap: 20px;
    justify-content: center;
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0;
    text-align: center;
  }
  .footer-col h5 { margin-bottom: 16px; }
  .footer-bot {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .footer-bot-links {
    display: flex;
    justify-content: center;
  }
  .footer-bot-links a {
    margin: 0 12px;
  }

  /* Scroll to top smaller */
  .scroll-top {
    width: 42px;
    height: 42px;
    bottom: 20px;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* Modals */
  .modal { padding: 40px 16px; }
  .modal-content {
    padding: 48px 28px 40px;
  }
  .modal-content h2 {
    font-size: 30px;
    padding-right: 40px;
  }
  .modal-content h3 { font-size: 17px; margin-top: 24px; }
  .modal-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }

  /* Mobile menu adjustments */
  .mobile-menu ul a {
    font-size: 30px;
  }
}

/* ============ SMALL PHONE (max 480px) ============ */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .nav, .nav.scrolled {
    padding-left: 18px;
    padding-right: 18px;
  }

  .logo-main { font-size: 16px; }

  .hero h1 { font-size: clamp(36px, 12vw, 52px); }
  .hero-sub { font-size: 14px; }
  .btn {
    padding: 14px 28px;
    font-size: 12px;
  }

  .section-heading {
    font-size: clamp(26px, 8vw, 36px);
  }

  .service-card { padding: 32px 22px; }
  .service-card h3 { font-size: 22px; }

  .about-content { padding: 50px 18px; }

  .property-body { padding: 24px 20px; }
  .property-price { font-size: 26px; }

  .testimonial { padding: 36px 22px; }
  .testimonial-text { font-size: 17px; }

  .hours-card { padding: 22px; }

  .modal-content { padding: 40px 22px 32px; }
  .modal-content h2 { font-size: 26px; }
  .modal-content h3 { font-size: 16px; }
  .modal-content p { font-size: 13px; }

  .mobile-menu ul a { font-size: 26px; }

  .stat-num { font-size: 24px; }
  .stat-text { font-size: 18px; }
  .stat-text-sm { font-size: 14px; }
}

/* ============ VERY SMALL (max 360px) ============ */
@media (max-width: 360px) {
  .hero h1 { font-size: 34px; }
  .section-heading { font-size: 26px; }
  .service-card { padding: 28px 18px; }
  .testimonial { padding: 32px 20px; }
  .logo-main { font-size: 15px; letter-spacing: 0.18em; }
}

/* ============ LANDSCAPE PHONE ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 120px 24px 80px;
  }
  .hero h1 { font-size: clamp(36px, 6vw, 56px); }
  .scroll-indicator { display: none; }
  .mobile-menu {
    padding-top: 60px;
  }
  .mobile-menu ul { gap: 14px; }
  .mobile-menu ul a { font-size: 22px; }
  .mobile-menu-contact { margin-top: 16px; }
}

/* ============ TOUCH DEVICES ============ */
@media (hover: none) {
  /* Disable hover-only effects on touch */
  .property-overlay { display: none; }
  .service-card:hover { transform: none; }
  .service-card:active {
    border-color: rgba(201,168,76,0.6);
  }
  .property-card:hover { transform: none; }
  .property-card:active {
    border-color: rgba(201,168,76,0.5);
  }
  .cursor { display: none !important; }
}

/* ============ LARGE DESKTOP ============ */
@media (min-width: 1440px) {
  .container { padding: 0 64px; }
  .hero h1 { font-size: 104px; }
}