/* ============================================
   GULVSLIPEREN.NO – Responsive CSS
   Breakpoints: 480 / 768 / 1200px
   Mobile First
   ============================================ */

/* --- 480px: Small mobile+ --- */
@media (min-width: 480px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .badges__grid {
    gap: 1rem 2.5rem;
  }
}

/* --- 768px: Tablet+ --- */
@media (min-width: 768px) {
  /* Header */
  .header__nav {
    display: flex;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__hamburger {
    display: none;
  }

  /* Hero */
  .hero__image {
    height: 42vw;
    min-height: 280px;
  }

  /* Services */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* Process */
  .process__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .process-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* Gallery */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Service detail */
  .service-detail {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .service-detail:nth-child(even) .service-detail__image {
    order: 2;
  }

  .service-detail:nth-child(even) .service-detail__content {
    order: 1;
  }

  /* Blog grid */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Profile card */
  .profile-card {
    grid-template-columns: 1fr 2fr;
  }

  .profile-card__image {
    aspect-ratio: auto;
    min-height: 280px;
  }

  /* Booking */
  .booking-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  /* Contact bar */
  .contact-bar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-bar__item {
    flex: 1;
    min-width: 200px;
  }

  /* Sticky CTA – hide on tablet+ (use header CTA) */
  .sticky-cta {
    display: none;
  }

  /* Section padding */
  .section {
    padding: 6rem 0;
  }

  .badges {
    padding: 3rem 0;
  }

  /* Page hero */
  .page-hero {
    padding: 10rem 0 5rem;
  }
}

/* --- 1200px: Desktop --- */
@media (min-width: 1200px) {
  :root {
    --padding-x: 2rem;
  }

  /* Services – 4 cols on landing page */
  .services__grid--four {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Testimonials – 3 cols */
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Gallery – 4 cols option */
  .gallery__grid--four {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hero */
  .hero__content {
    padding: 8rem 0 6rem;
  }

  /* Section */
  .section {
    padding: 7rem 0;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
  }
}

/* --- Print styles --- */
@media print {
  .header,
  .sticky-cta,
  .footer {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
}

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

  .fade-in {
    opacity: 1;
    transform: none;
  }
}