/* ============================================
   RESPONSIVE FIXES
   Φόρτωσέ το ΤΕΛΕΥΤΑΙΟ στο <head>, μετά από όλα τα άλλα CSS:
   <link rel="stylesheet" href="css/responsive-fixes.css">
   ============================================ */


/* --------------------------------------------
   1. FLUID PADDING
   Καλύπτει το κενό μεταξύ 900px και 1400px+,
   όπου τώρα υπάρχει απότομο άλμα 8rem -> 5rem.
   -------------------------------------------- */
section {
  padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 4rem);
}


/* --------------------------------------------
   2. ΕΝΔΙΑΜΕΣΟ BREAKPOINT (tablet / μικρό laptop)
   Στα 900–1200px τα gap: 6rem "τρώνε" το περιεχόμενο.
   -------------------------------------------- */
@media (max-width: 1200px) {
  .about,
  .approach,
  .contact { gap: 3rem; }

  .about { grid-template-columns: 1fr 1.2fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  nav { padding: 1.5rem 2rem; }
  .nav-links { gap: 1.5rem; }
  .about-text { padding-right: 0; }
}


/* --------------------------------------------
   3. CUSTOM CURSOR — OFF σε touch συσκευές
   Σε κινητό ο custom cursor είναι άχρηστος και το
   cursor:none σπάει το UX σε υβριδικές συσκευές.
   -------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor-ring { display: none !important; }

  body { cursor: auto; }
  a, button,
  .service-card,
  .btn-primary, .btn-outline,
  .form-input, .form-textarea, .form-submit,
  .review-cta-btn, #lang-toggle { cursor: pointer; }

  .form-input, .form-textarea { cursor: text; }
}


/* --------------------------------------------
   4. iOS AUTO-ZOOM ΣΤΑ INPUTS
   Κάτω από 16px το Safari κάνει zoom στο focus.
   -------------------------------------------- */
@media (max-width: 900px) {
  .form-input,
  .form-textarea { font-size: 16px; }
  .form-textarea { height: 120px; }
}


/* --------------------------------------------
   5. HERO — 100vh -> 100svh (address bar κινητού)
   -------------------------------------------- */
.hero { min-height: 100svh; }

@media (max-width: 900px) {
  /* Το hero-scroll είναι absolute ως προς το .hero,
     οπότε σε κινητό πέφτει πάνω στο σκούρο δεξί panel. */
  .hero-scroll { display: none; }
  .hero-right { min-height: 45svh; }
}


/* --------------------------------------------
   6. MARQUEE CONTAINMENT (gallery / testimonials)
   Το width:max-content ξεφεύγει· τώρα βασίζεται
   μόνο στο body{overflow-x:hidden} που είναι εύθραυστο.
   -------------------------------------------- */
.gallery-main-wrapper,
.testimonials { overflow: hidden; }

@media (max-width: 600px) {
  .gallery-card img {
    width: 78vw;
    height: 52vw;
  }
  .gallery-thumbs { flex-wrap: wrap; }
  .gallery-thumbs img { width: 52px; height: 40px; }

  .testimonial-card {
    width: min(360px, 84vw);
    padding: 2rem 1.5rem;
  }
}


/* --------------------------------------------
   7. ΤΜΗΜΑΤΑ ΧΩΡΙΣ MEDIA QUERY
   .review-cta και footer κρατούν 4rem οριζόντιο padding
   ακόμα και σε οθόνη 360px.
   -------------------------------------------- */
@media (max-width: 900px) {
  .review-cta { padding: 0 1.5rem 4rem; }
  .review-cta-btn { width: 100%; justify-content: center; }

  footer { padding: 2.5rem 1.5rem; }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
  }
}


/* --------------------------------------------
   8. ABOUT IMAGE — 3/4 σε full width κινητού
   βγαίνει πολύ ψηλή (π.χ. 360px -> 480px ύψος).
   -------------------------------------------- */
@media (max-width: 600px) {
  .about-image { aspect-ratio: 4/3; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
  .stat-num { font-size: 1.9rem; }
  .stat-label { font-size: 0.65rem; letter-spacing: 0.06em; }
}


/* --------------------------------------------
   9. TAP TARGETS >= 44px
   -------------------------------------------- */
@media (max-width: 900px) {
  .nav-phone,
  #lang-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-links a { padding: 0.4rem 0; }
}


/* --------------------------------------------
   10. ΠΟΛΥ ΜΙΚΡΕΣ ΟΘΟΝΕΣ (<= 360px)
   -------------------------------------------- */
@media (max-width: 360px) {
  .approach .step { grid-template-columns: 44px 1fr; gap: 1rem; }
  .step-num { font-size: 2rem; }
  .service-card { padding: 2rem 1.5rem; }
  .nav-right { gap: 12px; }
}


/* --------------------------------------------
   11. ACCESSIBILITY — reduced motion + focus
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .gallery-track,
  .testimonials-track { animation: none; }
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}