/**
 * Martin Kids Seat - Responsive Stylesheet
 * Breakpoints: 360px, 390px, 576px, 768px, 992px, 1200px, 1440px
 */

/* ========================================================
   LARGE DESKTOP (>= 1440px)
   ======================================================== */
@media (min-width: 1440px) {
  .container {
    max-width: 1360px;
  }
  .home-hero {
    padding: 110px 0 130px 0;
  }
  .hero-title-main {
    font-size: 4.4rem;
  }
}

/* ========================================================
   DESKTOP / LAPTOPS (992px to 1199px)
   ======================================================== */
@media (max-width: 1199.98px) {
  .home-hero::before {
    background-position: 85% center;
  }
  .home-hero::after {
    background: linear-gradient(90deg, rgba(18, 17, 14, 0.96) 0%, rgba(18, 17, 14, 0.88) 40%, rgba(18, 17, 14, 0.5) 68%, rgba(18, 17, 14, 0.15) 100%);
  }
  .product-media-box {
    height: 200px;
  }
}

/* ========================================================
   TABLETS (768px to 991px)
   ======================================================== */
@media (max-width: 991.98px) {
  .site-header {
    padding: 10px 0;
  }

  /* ========================================================
     HERO SECTIONS ON MOBILE / TABLET
     Top portion displays crystal clear hero image with faces
     Smooth downward gradient fade to dark background
     ======================================================== */
  .home-hero,
  .about-hero,
  .products-hero,
  .gallery-hero,
  .contact-hero {
    position: relative;
    background-color: #121111 !important;
    padding-top: 250px !important;
    padding-bottom: 45px !important;
    min-height: auto !important;
    overflow: hidden;
  }

  .home-hero::before,
  .about-hero::before,
  .products-hero::before,
  .gallery-hero::before,
  .contact-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 330px !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }

  .home-hero::after,
  .about-hero::after,
  .products-hero::after,
  .gallery-hero::after,
  .contact-hero::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 330px !important;
    background: linear-gradient(
      180deg,
      rgba(18, 17, 17, 0) 0%,
      rgba(18, 17, 17, 0.05) 32%,
      rgba(18, 17, 17, 0.55) 60%,
      rgba(18, 17, 17, 0.92) 85%,
      #121111 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .home-hero .container,
  .about-hero .container,
  .products-hero .container,
  .gallery-hero .container,
  .contact-hero .container {
    position: relative !important;
    z-index: 3 !important;
  }

  .hero-desc {
    max-width: 100%;
  }

  .contact-info-card,
  .contact-form-card,
  .contact-map-card {
    margin-bottom: 24px;
  }
}

/* ========================================================
   MOBILE PHONES (<= 767px) - MATCHING MOCKUP
   ======================================================== */
@media (max-width: 767.98px) {
  body {
    font-size: 15px;
  }

  .site-brand {
    gap: 8px;
  }

  .brand-icon-wrap {
    width: 38px;
    height: 38px;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.62rem;
  }

  /* Hero Section for mobile phones */
  .home-hero,
  .about-hero,
  .products-hero,
  .gallery-hero,
  .contact-hero {
    padding-top: 230px !important;
    padding-bottom: 35px !important;
  }

  .home-hero::before,
  .about-hero::before,
  .products-hero::before,
  .gallery-hero::before,
  .contact-hero::before {
    height: 300px !important;
    background-position: center top !important;
  }

  .home-hero::after,
  .about-hero::after,
  .products-hero::after,
  .gallery-hero::after,
  .contact-hero::after {
    height: 300px !important;
  }

  .hero-title-main {
    font-size: 2.1rem;
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .hero-headline-sub {
    font-size: 1.35rem;
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 0.95rem;
    margin-bottom: 22px;
    line-height: 1.5;
  }

  .inner-hero-title {
    font-size: 2.1rem;
    margin-bottom: 8px;
  }

  .inner-hero-desc {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .hero-actions .btn-gold,
  .hero-actions .btn-whatsapp {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.92rem;
  }

  /* 4 Indicators Row on Mobile (Matching Phone 1) */
  .hero-features-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .hero-feature-item {
    width: 23% !important;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .hero-feature-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  .hero-feature-text {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center;
  }

  .section-title {
    font-size: 1.65rem;
  }

  /* Product Catalog Cards on Mobile (Matching Phone 3) */
  .product-card-catalog {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
  }

  .product-card-catalog .product-media-box {
    height: 95px !important;
    margin-bottom: 0 !important;
    padding: 6px !important;
    border-radius: var(--radius-sm);
  }

  .product-card-catalog .product-media-box img {
    max-height: 80px !important;
    object-fit: contain;
  }

  .product-card-catalog .product-name {
    font-size: 1.05rem;
    margin-bottom: 2px;
  }

  .product-card-catalog .product-short-desc {
    font-size: 0.78rem;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-catalog .product-btn-group {
    flex-direction: row !important;
    gap: 8px !important;
  }

  .product-card-catalog .product-btn-group .btn-gold {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }

  .product-card-catalog .product-btn-group .btn-whatsapp {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    flex-shrink: 0;
  }

  /* Gallery Grid on Mobile (Matching Phone 4) */
  .gallery-filters {
    gap: 6px;
    justify-content: center;
  }

  .filter-btn {
    font-size: 0.75rem;
    padding: 6px 12px;
  }

  .gallery-card {
    border-radius: var(--radius-md);
  }

  .gallery-card img {
    height: 140px;
  }

  /* Stats Banner on Mobile (Matching Phone 1) */
  .stats-banner {
    padding: 22px 0 !important;
  }

  .stat-item {
    border: none !important;
    padding: 2px !important;
  }

  .stat-icon {
    display: none !important;
  }

  .stat-number {
    font-size: 1.5rem !important;
    margin-bottom: 2px !important;
  }

  .stat-label {
    font-size: 0.7rem !important;
  }

  /* Contact Page Items (Matching Phone 5) */
  .contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
  }

  .contact-item-icon {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    background-color: var(--color-gold);
    color: #171717;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .contact-item-text h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }

  .contact-item-text p {
    font-size: 0.85rem;
    margin-bottom: 0;
  }

  .cta-banner {
    padding: 28px 18px;
    border-radius: var(--radius-md);
  }

  .cta-banner h2 {
    font-size: 1.45rem;
  }

  .cta-banner .btn-gold,
  .cta-banner .btn-whatsapp {
    width: 100%;
  }

  .floating-whatsapp {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 26px;
  }

  .map-container {
    height: 250px;
  }
}

/* ========================================================
   SMALL MOBILE SCREENS (<= 390px & 360px)
   ======================================================== */
@media (max-width: 390px) {
  .home-hero,
  .about-hero,
  .products-hero,
  .gallery-hero,
  .contact-hero {
    padding-top: 205px !important;
  }

  .home-hero::before,
  .about-hero::before,
  .products-hero::before,
  .gallery-hero::before,
  .contact-hero::before {
    height: 275px !important;
  }

  .home-hero::after,
  .about-hero::after,
  .products-hero::after,
  .gallery-hero::after,
  .contact-hero::after {
    height: 275px !important;
  }

  .hero-title-main {
    font-size: 1.85rem;
  }

  .hero-headline-sub {
    font-size: 1.2rem;
  }

  .hero-feature-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
  }

  .hero-feature-text {
    font-size: 0.62rem !important;
  }

  .contact-info-card,
  .contact-form-card,
  .contact-map-card {
    padding: 20px 14px;
  }

  .feature-card {
    padding: 18px 12px;
  }
}

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