/* =============================================
   Aurecutis — page content responsive (home modules, etc.)
   Nav responsive rules live in header.css (site-wide)
   Breakpoints: 1440 / 1200 / 1024 / 768 / 600 / 480 / 375
   ============================================= */

/* --- Global overflow & safe area --- */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  min-width: 320px;
}

/* --- Large desktop 1440px+ --- */
@media (min-width: 1440px) {
  :root {
    --section-pad: 120px;
    --container-side: 48px;
  }

  .container {
    padding-left: var(--container-side);
    padding-right: var(--container-side);
  }
}

/* --- Desktop narrow 1200px --- */
@media (max-width: 1200px) {
  .team-grid {
    gap: 36px;
  }

  .blog-grid {
    gap: 40px;
  }
}

/* --- Tablet landscape / small desktop 1024px --- */
@media (max-width: 1024px) {
  :root {
    --section-pad: 80px;
    --container-side: 32px;
  }

  .container {
    padding-left: var(--container-side);
    padding-right: var(--container-side);
  }

  /* Home grids */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .services-grid .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .blog-grid .blog-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .about-inner {
    gap: 48px;
    padding-left: var(--container-side);
    padding-right: var(--container-side);
  }

  .gift-inner {
    padding-left: var(--container-side);
    padding-right: var(--container-side);
  }

  .map-section {
    padding-left: var(--container-side);
    padding-right: var(--container-side);
  }

  .hero-frame {
    height: clamp(300px, 45vw, 580px);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .footer-grid .footer-column:last-child {
    grid-column: 1 / -1;
  }
}

/* --- Tablet portrait 768px --- */
@media (max-width: 768px) {
  :root {
    --section-pad: 72px;
    --container-side: 24px;
  }

  .services-header,
  .team-header,
  .blog-header {
    margin-bottom: 48px;
  }

  .gallery-title {
    margin-bottom: 48px;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-card {
    text-align: center;
  }

  .about-btn {
    display: inline-flex;
  }

  .about-image {
    order: -1;
  }

  .feedback-slider {
    gap: 24px;
  }

  .feedback-slides {
    min-height: 180px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-grid .footer-column:last-child {
    grid-column: auto;
  }

  .footer-main {
    padding: 64px 0 48px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .hero-frame {
    height: clamp(280px, 52vw, 480px);
  }
}

/* --- Large phone 600px --- */
@media (max-width: 600px) {
  :root {
    --section-pad: 64px;
    --font-size-lead: 14px;
  }

  .services-grid,
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-title {
    font-size: clamp(22px, 6.5vw, 32px);
    margin-bottom: 28px;
  }

  .hero-content {
    padding: 32px 20px 48px;
  }

  .gift-section {
    min-height: clamp(340px, 70vw, 460px);
  }

  .gift-content {
    max-width: none;
    margin: 0 auto;
  }

  .feedback-text {
    font-size: 15px;
  }
}

/* --- Phone 480px --- */
@media (max-width: 480px) {
  :root {
    --section-pad: 56px;
    --container-side: 20px;
  }

  .hero-frame {
    height: clamp(260px, 58vw, 380px);
  }

  .hero-arrow {
    width: 44px;
    height: 44px;
  }

  .hero-arrow--prev {
    left: 12px;
  }

  .hero-arrow--next {
    right: 12px;
  }

  .btn-outline {
    padding: 14px 24px;
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }

  .service-card-btn,
  .blog-card-btn,
  .about-btn,
  .gift-btn {
    width: auto;
    align-self: flex-start;
  }

  .gallery-btn {
    width: 100%;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 360px;
    margin: 0 auto;
  }

  .feedback-slider {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .feedback-arrow {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .feedback-slides {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 8px 0;
  }

  .feedback-slide {
    position: relative;
    inset: auto;
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .feedback-slide.active {
    position: relative;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .map-iframe,
  .map-fallback {
    height: 260px;
  }

  .map-address {
    font-size: 14px;
    padding: 0 8px;
  }

  .back-to-top {
    bottom: max(20px, env(safe-area-inset-bottom, 20px));
    right: max(20px, env(safe-area-inset-right, 20px));
    width: 44px;
    height: 44px;
  }

  .blog-tag {
    top: 12px;
    left: 12px;
    font-size: 8px;
  }

  .blog-tags-group {
    top: 12px;
    left: 12px;
  }
}

/* --- Small phone 375px --- */
@media (max-width: 375px) {
  :root {
    --container-side: 16px;
    --section-pad: 48px;
  }

  .hero-title {
    font-size: 21px;
    letter-spacing: 0.03em;
  }

  .services-subtitle,
  .team-subtitle,
  .section-lead {
    max-width: none;
  }
}

/* --- Landscape phone (short height) --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-frame {
    height: 85vh;
    max-height: 320px;
  }

  .hero-content {
    padding: 16px 24px;
  }

  .hero-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

}

/* --- Touch devices: larger tap targets --- */
@media (hover: none) and (pointer: coarse) {
  .footer-menu-link,
  .gallery-item {
    -webkit-tap-highlight-color: transparent;
  }

}

/* --- Reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-content,
  .feedback-slide,
  .gallery-item img {
    animation: none;
    transition: none;
  }

  .hero-content {
    opacity: 1;
    transform: none;
  }
}