/* ============================================================
   RESPONSIVE STYLES - MOBILE-FIRST
   Breakpoints: 320px (base) -> 480px -> 768px -> 1024px -> 1440px
   ============================================================ */

/* Required for SPA page transitions */
.page.leaving { position: absolute; }

/* ============================================================
   1. BASE / SMARTPHONE (320px and up)
   Mobile-first defaults. style.css holds desktop styles; these
   overrides load after it so equal-specificity rules win here.
   ============================================================ */

.container { padding: 0 16px; }

html { font-size: 16px; }

/* --- Typography (scalable, clamp-based) --- */
.section-header { margin-bottom: 32px; }
.section-title { font-size: 1.5rem; }
.section-subtitle { font-size: 0.95rem; line-height: 1.6; }
.section-tag { font-size: 0.7rem; }

/* --- Buttons (fluid width on touch, min 44px height) --- */
.btn { min-height: 44px; padding: 12px 24px; font-size: 0.9rem; width: 100%; justify-content: center; }

/* --- Navigation (off-canvas mobile menu) --- */
.nav-links {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(80%, 320px);
  height: 100dvh;
  background: var(--black);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 100px 32px 40px;
  gap: 12px;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9998;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  overflow-y: auto;
}
.nav-links.active { right: 0; }
.nav-links a {
  font-size: 1.05rem;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
}
.nav-links a::after { bottom: 2px; }
.nav-cta { display: none; }
.hamburger { display: flex; }
.nav-logo { font-size: 1.05rem; white-space: nowrap; }

/* --- Hero --- */
.hero {
  min-height: auto;
  padding: 100px 0 50px;
  background-attachment: scroll;
}
.hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.hero p { font-size: 0.95rem; margin-bottom: 24px; }
.hero-buttons { flex-direction: column; align-items: stretch; width: 100%; }
.hero .btn-secondary { border-width: 1.5px; }
.hero-shape { opacity: 0.06; }
.drop { display: none; }

/* --- Clients bar --- */
.clients-bar { padding: 28px 0; }
.clients-bar .container { justify-content: center; gap: 16px; }
.client-logo { font-size: 0.85rem; }
.client-logo .icon { font-size: 1.2rem; }

/* --- About --- */
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.about-features { grid-template-columns: 1fr; }
.about-experience { position: relative; bottom: auto; right: auto; margin-top: -20px; width: 100%; }
.about-content p { font-size: 0.95rem; }

/* --- Services --- */
.services { background-attachment: scroll; }
.service-card { padding: 24px 20px; }
.service-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 14px; }

/* --- Pricing --- */
.pricing { background-attachment: scroll; }
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.pricing-card { padding: 28px 20px; }
.pricing-card.featured { transform: none; }
.pricing-card.featured:hover { transform: translateY(-8px); }

/* --- FAQ --- */
.faq-question { min-height: 56px; padding: 16px 18px; font-size: 0.92rem; }
.faq-item.active .faq-answer { max-height: 600px; padding: 0 18px 16px; }
.faq-answer { padding: 0 18px; }

/* --- Contact --- */
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.form-row { grid-template-columns: 1fr; }
.form-group input,
.form-group textarea,
.form-group select { min-height: 44px; }
.form-group textarea { min-height: 120px; }
.contact-form { padding: 20px; }
.contact-detail .icon { width: 44px; height: 44px; min-width: 44px; font-size: 1rem; }

/* --- Newsletter --- */
.newsletter .container { flex-direction: column; text-align: center; }
.newsletter-form { flex-direction: column; min-width: 0; width: 100%; }
.newsletter-form input { min-height: 44px; border-radius: 50px; text-align: center; padding: 12px 16px; }
.newsletter-form button { min-height: 44px; border-radius: 50px; padding: 12px 24px; }
.newsletter-text h3 { font-size: 1.3rem; }

/* --- Footer --- */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-bottom-links { justify-content: center; flex-wrap: wrap; }

/* --- Floating widgets --- */
.back-to-top { bottom: 14px; left: 14px; width: 44px; height: 44px; font-size: 1rem; }

/* --- Modal & cookie --- */
.modal-content { padding: 20px; max-width: 95%; }
.cookie-consent { flex-direction: column; text-align: center; padding: 16px; }
.cookie-consent p { font-size: 0.82rem; }

/* --- Map --- */
.map-section { height: 280px; }

/* --- Small phones (up to ~390px) hardening --- */
@media (min-width: 0px) and (max-width: 389px) {
  .container { padding: 0 12px; }
  .section-title { font-size: 1.35rem; }
  .nav-logo { font-size: 0.95rem; }
  .hero h1 { font-size: clamp(1.45rem, 7.5vw, 1.9rem); }
  .hero p { font-size: 0.9rem; }
  .btn { padding: 12px 16px; }
  .pricing-card { padding: 24px 16px; }
  .service-card { padding: 20px 16px; }
  .contact-form { padding: 16px; }
  .faq-question { font-size: 0.88rem; padding: 14px 14px; }
  .about-experience { padding: 14px 18px; }
  .about-experience .number { font-size: 2rem; }
  .about-vision, .about-mission { padding: 16px; }
  .footer-social a { width: 42px; height: 42px; }
}

/* ============================================================
   2a. LANDSCAPE SMARTPHONES (short viewport height)
   Ensures layouts adapt when a small device is rotated.
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 550px) {
  /* Reduce hero to avoid overflow on short landscape screens */
  .hero { min-height: auto; padding: 90px 0 30px; }
  .hero h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .hero p { margin-bottom: 14px; }
  .hero-buttons { flex-direction: row; gap: 12px; }

  /* Navbar tighter in landscape */
  .navbar { padding: 8px 0; }
  .navbar.scrolled { padding: 6px 0; }

  /* Compact drawers/menus */
  .nav-links { padding-top: 70px; }

  /* Landscaping knowledge: pricing cards in a row instead of stacked */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 14px; }
  .pricing-card { padding: 18px 14px; }
  .pricing-card .pricing-price { font-size: 1.3rem; }
  .pricing-features { font-size: 0.8rem; gap: 8px; margin-bottom: 14px; }

  /* Contact form compact */
  .contact-grid { gap: 24px; }
  .contact-form { padding: 18px; }

  /* Reduce section vertical padding in landscape to avoid excessive scroll */
  .about, .services, .pricing, .faq, .contact { padding: 40px 0; }
  .section-header { margin-bottom: 24px; }

  /* Keep modal usable in landscape */
  .modal-content { max-height: 92vh; }

  /* Back to top & cookie fit landscape */
  .back-to-top { bottom: 8px; left: 8px; width: 40px; height: 40px; }
}

/* ============================================================
   2. SMALL SCREENS (min-width: 480px)
   ============================================================ */
@media (min-width: 480px) {
  .container { padding: 0 20px; }
  .section-title { font-size: 1.7rem; }
  .btn { width: auto; }
  .nav-logo { font-size: 1.2rem; }

  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .hero-buttons .btn { width: auto; min-width: 160px; }

  .about-features { grid-template-columns: 1fr 1fr; }

  .newsletter-form { flex-direction: row; }
  .newsletter-form input { text-align: left; }
}

/* ============================================================
   3. TABLETS (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
  .container { padding: 0 24px; }
  .section-header { margin-bottom: 48px; }
  .section-title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
  .section-subtitle { font-size: 1rem; }

  /* Nav: keep hamburger, wider drawer */
  .nav-links { width: min(70%, 340px); }

  /* Hero */
  .hero { padding: 120px 0 60px; }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }

  /* About: two columns */
  .about-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about-experience { position: absolute; bottom: -20px; right: -20px; width: auto; margin-top: 0; }

  /* Services: two columns */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing: two columns */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; }
  .pricing-card.featured { transform: scale(1.02); }

  /* Contact: two columns */
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-form { padding: 28px; }

  /* Footer: two columns */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }

  /* Newsletter: horizontal */
  .newsletter .container { flex-direction: row; text-align: left; }
  .newsletter-form { width: auto; flex: 1; max-width: 460px; }

  /* Map */
  .map-section { height: 360px; }

  .drops-container .drop { display: block; }
}

/* ============================================================
   4. LAPTOPS / DESKTOPS (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .container { padding: 0 24px; }

  /* Desktop navigation */
  .nav-links {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    gap: 24px;
    box-shadow: none;
    overflow: visible;
  }
  .nav-links a { width: auto; font-size: 0.88rem; }
  .nav-links a::after { bottom: -4px; }
  .nav-cta { display: inline-flex; }
  .hamburger { display: none; }
  .nav-logo { font-size: 1.5rem; }

  /* Hero */
  .hero { min-height: 100vh; padding-top: 80px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); }

  /* Services: three columns */
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card { padding: 36px 28px; }

  /* Pricing: three columns */
  .pricing-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }

  /* Footer: two columns (brand + support) */
  .footer-grid { grid-template-columns: 2fr 1fr; gap: 40px; }
  .footer-brand { grid-column: auto; }

  /* Forms */
  .contact-form { padding: 36px; }
  .form-row { gap: 18px; }

  /* Sections */
  .section-padding { --section-padding: 100px 0; }
  .btn { padding: 14px 32px; font-size: 0.95rem; }
  .section-title { font-size: clamp(2rem, 4vw, 3rem); }
  .hero, .services, .pricing { background-attachment: fixed; }

  /* Map */
  .map-section { height: 400px; }
}

/* ============================================================
   5. LARGE DESKTOPS (min-width: 1440px)
   ============================================================ */
@media (min-width: 1440px) {
  .container { padding: 0 40px; max-width: 1440px; }

  html { font-size: 17px; }

  .hero h1 { font-size: clamp(3rem, 4.5vw, 4.2rem); }
  .hero p { font-size: 1.2rem; }

  .section-title { font-size: clamp(2.2rem, 3.5vw, 3.2rem); }
  .section-subtitle { font-size: 1.1rem; }

  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .pricing-grid { gap: 32px; }
}