/* =========================================================================
   Modern Teknoloji — responsive.css
   Mobile-first breakpoints (§5, §122–126). Base styles in base/layout/
   components.css already target mobile; this file layers on tablet+desktop.
   ========================================================================= */

/* ---------------------------------------------------------------------
   Tablet (≥ 700px)
   --------------------------------------------------------------------- */
@media (min-width: 700px) {
  .mt-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .mt-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mt-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .mt-hero {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
  }

  .mt-hero__secondary {
    grid-template-columns: 1fr;
  }

  .mt-footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .mt-card--horizontal .mt-media {
    width: 200px;
    flex: 0 0 200px;
  }
}

/* ---------------------------------------------------------------------
   Desktop (≥ 960px)
   --------------------------------------------------------------------- */
@media (min-width: 960px) {
  .mt-primary-nav {
    display: block;
  }

  .mt-mobile-menu-toggle {
    display: none;
  }

  .mt-header-actions__cta {
    display: inline-flex;
  }

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

  .mt-content-layout {
    grid-template-columns: 1fr 320px;
  }

  .mt-content-layout--no-sidebar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .mt-footer-top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }

  .mt-comparison-table {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------
   Large desktop (≥ 1280px)
   --------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .mt-hero {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* ---------------------------------------------------------------------
   Ad zone device visibility (§46)
   --------------------------------------------------------------------- */
@media (max-width: 699px) {
  .mt-ad--hide-mobile { display: none !important; }
}

@media (min-width: 700px) and (max-width: 959px) {
  .mt-ad--hide-tablet { display: none !important; }
}

@media (min-width: 960px) {
  .mt-ad--hide-desktop { display: none !important; }
}

/* ---------------------------------------------------------------------
   Small-mobile refinements (≤ 400px)
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  .mt-card--horizontal {
    flex-direction: column;
  }

  .mt-card--horizontal .mt-media {
    width: 100%;
    flex: none;
  }

  .mt-review-block__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Pros/cons side-by-side once there's room */
@media (min-width: 600px) {
  .mt-pros-cons {
    grid-template-columns: 1fr 1fr;
  }
}