/* =================================================================
   Мебели Мемо — Responsive rules
   Mobile-first base lives in style.css; this file layers on the
   tablet and desktop refinements. Breakpoints mirror the original
   Tailwind build (md = 768px, lg = 1024px).
   ================================================================= */

/* -----------------------------------------------------------------
   Small / tablet and up — 640px (sm)
   ----------------------------------------------------------------- */
@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }

  .hero__actions {
    flex-direction: row;
  }
}

/* -----------------------------------------------------------------
   Tablet and up — 768px (md)
   At this width the desktop navigation appears, the mobile menu and
   the portfolio carousel are hidden in favour of the grid.
   ----------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Navigation: show desktop nav, hide hamburger + mobile panel */
  .main-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }

  /* Hero & about two-column layouts unlocked at lg, but tighten typography here */
  .hero__title {
    font-size: clamp(3.75rem, 7vw, 4.5rem);
  }

  /* Portfolio: hide the swipe carousel, show the grid */
  .portfolio__carousel {
    display: none;
  }

  .portfolio__grid-wrap {
    display: block;
  }

  /* Two columns on tablet */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

/* -----------------------------------------------------------------
   Desktop and up — 1024px (lg)
   ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  .container {
    padding-inline: 2rem;
  }

  /* Hero: text + media side by side, text on the left */
  .hero__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__content {
    text-align: left;
    order: 1;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__media {
    order: 2;
  }

  /* About: text + image side by side */
  .about__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Portfolio: three columns */
  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer: four columns, brand keeps a single column */
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -----------------------------------------------------------------
   Below tablet — up to 767px
   Mobile-specific behaviour: swap portfolio grid for the carousel.
   ----------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Hide desktop nav, reveal hamburger */
  .main-nav {
    display: none;
  }

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

  /* Portfolio: carousel only */
  .portfolio__carousel {
    display: block;
  }

  .portfolio__grid-wrap {
    display: none;
  }

  /* Soften section padding on small screens */
  .section {
    padding-block: 3.5rem;
  }

  .section__lead {
    font-size: 1.0625rem;
  }
}

/* -----------------------------------------------------------------
   Extra-small phones — up to 400px
   ----------------------------------------------------------------- */
@media (max-width: 400px) {
  .partner-card {
    width: 14rem;
  }

  .btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }
}