/* ═══════════════════════════════════════
   GDESIGN — Responsive / Mobile-First
   Breakpoints: xs:375 sm:480 md:768 lg:1024 xl:1280
   ═══════════════════════════════════════ */

/* ─── xs base (375px) — already in style.css ─── */

/* ─── Mobile: svc-desc no left margin ─── */
@media (max-width: 767px) {
  .svc-desc {
    margin-left: 0;
    padding-left: var(--space-6);
  }

  .svc-trigger {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-4);
    min-height: 72px;
  }

  .svc-name {
    font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  }
}

/* ─── Portfolio grid responsive columns ─── */
@media (max-width: 479px) {
  .pf-grid { columns: 2; column-gap: var(--space-2); }
  .pf-grid-item { margin-bottom: var(--space-2); border-radius: var(--radius-sm); }
}

@media (min-width: 480px) and (max-width: 767px) {
  .pf-grid { columns: 2; }
}

@media (min-width: 768px) {
  .pf-grid { columns: 3; }
}

@media (min-width: 1280px) {
  .pf-grid { columns: 4; }
}

/* ─── sm: 480px ─── */
@media (min-width: 480px) {

  .about-image {
    max-height: 440px;
  }

  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── md: 768px ─── */
@media (min-width: 768px) {
  :root {
    --nav-height: 72px;
  }

  /* Nav */
  .nav-links {
    display: flex;
  }

  .lang-switcher {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .hamburger {
    display: none;
  }

  /* Hero */
  .hero-content {
    text-align: left;
  }

  .hero-actions {
    flex-wrap: nowrap;
  }

  /* About */
  .about-inner {
    grid-template-columns: 1fr 1fr;
  }

  .about-image {
    max-height: none;
    height: 560px;
  }

  /* Services accordion — split header on tablet+ */
  .svc-header {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  /* Portfolio */
  .pf-grid {
    columns: 3;
  }

  /* Process steps horizontal on tablet — still vertical */

  /* Contact */
  .contact-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ─── lg: 1024px ─── */
@media (min-width: 1024px) {

  /* About — give photo more room */
  .about-image {
    height: 640px;
  }

  /* Process — horizontal layout */
  .process-steps {
    flex-direction: row;
    gap: 0;
    align-items: stretch;
  }

  .process-step {
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-8) var(--space-6);
    flex: 1;
    gap: var(--space-4);
  }

  .process-step:last-child {
    border-right: none;
  }

  .step-number {
    width: auto;
    text-align: left;
    font-size: 4rem;
  }

  .step-content {
    border-left: none;
    border-top: 1px solid rgba(201, 169, 110, 0.3);
    padding-left: 0;
    padding-top: var(--space-5);
  }

  [dir="rtl"] .process-step {
    flex-direction: column;
    border-right: none;
    border-left: 1px solid rgba(255,255,255,0.08);
  }

  [dir="rtl"] .process-step:last-child {
    border-left: none;
  }

  [dir="rtl"] .step-number {
    text-align: right;
  }

  [dir="rtl"] .step-content {
    border-right: none;
    border-top: 1px solid rgba(201, 169, 110, 0.3);
    padding-right: 0;
    padding-top: var(--space-5);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ─── xl: 1280px ─── */
@media (min-width: 1280px) {
  /* Keep the 3+2 centred layout at xl too */

  .about-image {
    height: 680px;
  }
}

/* ─── Large screens ─── */
@media (min-width: 1440px) {
  :root {
    --container-padding: 4rem;
  }
}

/* ─── Touch / Mobile UX ─── */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
  }

  .btn:active {
    transform: scale(0.97);
  }

  .pf-grid-item:hover img {
    transform: none;
  }

  .pf-grid-item:active img {
    transform: scale(1.03);
  }

  .pf-grid-item:hover .pf-item-overlay {
    opacity: 0;
  }
}

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero-overline,
  .hero-headline,
  .hero-subline,
  .hero-actions {
    animation: none;
    opacity: 1;
  }

  .hero-scroll {
    animation: none;
  }
}

/* ─── Safe area for iPhone notch ─── */
.nav {
  padding-top: env(safe-area-inset-top);
}

.mobile-menu {
  padding-top: calc(var(--space-24) + env(safe-area-inset-top));
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-bottom {
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}

/* ─── Testimonials grid breakpoints ─── */
@media (max-width: 1023px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}