/* ============================================
   Responsive — Mobile First Breakpoints
   ============================================ */

/* === Max 767px — Mobile === */
@media (max-width: 767px) {
  /* Header */
  .nav { display: none; }
  .header__cta { display: none; }
  .menu-toggle { display: flex; }

  /* Hero Slider */
  .hero { min-height: 90vh; }
  .hero__content {
    bottom: 80px;
    padding: 0 var(--space-md);
    max-width: 100%;
  }
  .hero__title { font-size: clamp(1.8rem, 7vw, 3rem); }
  .hero__description { font-size: var(--fs-body); }
  .hero__subtitle::before,
  .hero__subtitle::after { width: 30px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__dots { bottom: 24px; gap: 8px; }
  .hero__dot { width: 24px; }
  .hero__dot--active { width: 36px; }
  .hero__scroll { display: none; }

  /* Inner Page Hero — Mobile Fix */
  .hero--inner {
    min-height: 35vh !important;
    flex-direction: column;
  }
  .hero--inner .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .hero--inner .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero--inner .hero__content {
    bottom: auto;
    padding: 0 var(--space-md);
  }
  .hero--inner .hero__title {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
  .hero--inner .hero__description {
    font-size: var(--fs-small);
    margin-bottom: var(--space-md);
  }

  /* Grids */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--services,
  .grid--education,
  .grid--blog,
  .grid--features,
  .grid--testimonials,
  .grid--contact {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

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

  /* Split Layout */
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .split--reverse {
    direction: ltr;
  }

  /* Services Showcase */
  .services-showcase {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .services-showcase__item {
    flex-direction: column;
  }

  .services-showcase__image {
    width: 100%;
    min-height: 200px;
  }

  .services-showcase__content {
    padding: var(--space-lg);
  }

  /* Brand Credentials */
  .brand-credentials__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .brand-credentials__divider {
    display: none;
  }

  .brand-credentials__number {
    font-size: 1.8rem;
  }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Process Steps */
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  /* Section Spacing */
  .section {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  /* Container */
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* WhatsApp Button */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
    right: var(--space-md);
  }

  .whatsapp-float__tooltip {
    display: none;
  }

  /* Accordion */
  .accordion__trigger {
    padding: var(--space-md) var(--space-md);
    font-size: var(--fs-small);
  }

  .accordion__content {
    padding: 0 var(--space-md) var(--space-md);
  }

  /* CTA Band */
  .cta-band {
    padding: var(--space-2xl) var(--space-md);
  }

  /* Page Header */
  .page-header {
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
  }

  /* Breadcrumb */
  .breadcrumb {
    justify-content: center;
  }

  /* About — Intro Grid (photo + text) */
  .about-intro-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .about-intro-grid > div:first-child {
    max-width: 280px;
    margin: 0 auto;
  }

  /* About — Certificate Dark Card */
  .about-cert-inner {
    grid-template-columns: 1fr !important;
  }

  .about-cert-inner > div:first-child {
    min-height: 250px;
  }

  .about-cert-inner > div:last-child {
    padding: var(--space-xl) !important;
  }

  .about-cert-stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* About — Values Grid */
  .about-values-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Min 768px — Tablet === */
@media (min-width: 768px) {
  .services-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

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

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

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

/* === Min 1024px — Desktop === */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .nav { display: flex; }
  .header__cta { display: inline-flex; }

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

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

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

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

  .grid--instagram {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* === Min 1280px — Large Desktop === */
@media (min-width: 1280px) {
  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* === Dark Mode Media Query Fallback === */
@media (prefers-color-scheme: dark) {
  /* This is handled by JS, but provides initial flash prevention */
}