/* =========================================================
   responsive.css — larger-screen adjustments (mobile-first)
   Base styles in style.css are for phones (360px+).
   Breakpoints: 600px · 768px (tablet) · 1024px (laptop) · 1280px+
   ========================================================= */

/* ---------- Very small phones (360px) ---------- */
@media (max-width: 380px) {
  .container { padding-inline: 1rem; }
  .btn { width: 100%; }           /* full-width buttons are easier to tap */
  .btn-row { flex-direction: column; }
  .hero-title { font-size: 2.5rem; }
  .float-badge--3, .float-badge--4 { display: none; }
}

/* ---------- Phones: keep the photo extras inside the screen ---------- */
@media (max-width: 599px) {
  .orbit { --size: 112%; }
  .orbit--2 { --size: 124%; }
  .float-badge { font-size: 0.66rem; padding: 0.3rem 0.65rem; }
  .float-badge--1 { left: -4%; }
  .float-badge--2 { right: -6%; }
  .float-badge--3 { left: -6%; }
  .float-badge--4 { right: -2%; }
  .float-badge--5 { left: -2%; }
  .float-badge--6 { right: -2%; }
  .deco--ring { right: -6px; }
  .deco--square { left: -10px; }
}

/* ---------- Large phones & small tablets ---------- */
@media (min-width: 600px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* Footer: brand on top, the two link lists side by side */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  /* Bottom bar in one row; padding keeps "Back to top" clear of the floating WhatsApp button */
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; padding-right: 4.5rem; }
}

/* ---------- Tablet (768px) ---------- */
@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
  .section { padding-block: var(--space-7); }
  .card { padding: var(--space-5); }
  .project-body { padding: var(--space-5); }
  .contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; gap: var(--space-6); }
  .cta-panel { padding: var(--space-7) var(--space-5); }
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1.5fr; gap: var(--space-6); }
  .footer-brand { grid-column: auto; }
}

/* ---------- Laptop (1024px): full desktop navigation ---------- */
@media (min-width: 1024px) {
  /* Hide hamburger and show the menu inline */
  .nav-toggle { display: none; }

  .nav-menu {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-list { flex-direction: row; align-items: center; gap: var(--space-1); }
  .nav-link { padding: 0.5rem 0.9rem; min-height: 0; }

  /* Underline that slides in under the hovered / active link */
  .nav-link:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0.9rem; right: 0.9rem; bottom: 2px;
    height: 2px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav-link:not(.nav-cta):hover::after,
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }

  .nav-cta { margin: 0 0 0 var(--space-3); padding: 0.55rem 1.3rem; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  /* Hero: text left, image right */
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); }
  .hero-stage { --stage-w: 380px; }
  .hero-circuit { opacity: 0.75; }

  /* Timeline alternates left / right on wide screens */
  .timeline { padding-left: 0; max-width: 900px; margin-inline: auto; }
  .timeline::before { left: 50%; margin-left: -1px; }
  .timeline-item { width: 50%; padding-right: var(--space-6); }
  .timeline-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: var(--space-6); }
  .timeline-marker { left: auto; right: calc(-10px - 1px); }
  .timeline-item:nth-child(even) .timeline-marker { right: auto; left: calc(-10px - 1px); }
  .js .timeline-item.reveal--left:nth-child(even) { transform: translateX(28px); }
  .js .timeline-item.reveal--left.is-visible { transform: none; }
}

/* ---------- Desktop (1440px) ---------- */
@media (min-width: 1280px) {
  :root { --container: 1240px; }
  .hero-title { font-size: 5.4rem; }
}