/* ============================================================
   AboutDigitalCameras.com — Responsive Breakpoints
   /css/responsive.css
   ============================================================ */

/*
  Breakpoint reference (mobile-first):
  ─────────────────────────────────────
  sm:  480px   (large phones)
  md:  768px   (tablets)
  lg:  900px   (small laptops / Version C max-width)
  xl: 1200px   (wide desktop)
*/

/* ── sm: 480px ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Typography scale-down */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; }

  /* Hero */
  .hero {
    padding: var(--space-10) var(--gutter);
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    text-align: center;
    justify-content: center;
  }

  /* Grids collapse to single column */
  .grid,
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Pros/Cons */
  .pros-cons {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .site-footer {
    padding: 40px var(--gutter);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Pagination */
  .pagination__btn {
    min-width: 36px;
    height:    36px;
    font-size: var(--text-xs);
  }

  /* Layout sidebar → stacked */
  .layout-sidebar {
    grid-template-columns: 1fr;
  }

  .layout-sidebar .sidebar {
    position: static;
  }

  /* Page header */
  .page-header__title {
    font-size: 1.75rem;
  }

  /* Nav padding */
  .main-nav {
    padding: var(--space-3) var(--space-4);
  }
}

/* ── md: 768px ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav → mobile hamburger mode */
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display:        none;
    flex-direction: column;
    width:          100%;
    padding:        var(--space-4) 0;
    border-top:     1px solid var(--clr-border);
    background:     var(--clr-nav-bg);
  }

  .nav-links.open {
    display: flex;
  }

  .main-nav {
    flex-wrap: wrap;
    height:    auto;
    padding:   var(--space-3) var(--gutter);
  }

  /* Grids */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sidebar layout */
  .layout-sidebar {
    grid-template-columns: 1fr;
  }

  .layout-sidebar .sidebar {
    position: static;
  }

  /* Footer */
  .site-footer {
    padding: 48px var(--gutter);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Spec table → horizontal scroll on mobile */
  .spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Section spacing */
  .section     { padding: var(--space-10) 0; }
  .section--lg { padding: var(--space-12) 0; }
}

/* ── lg: 900px (Version C content max-width) ─────────────── */
@media (max-width: 900px) {

  /* Nav */
  .main-nav {
    padding: var(--space-3) var(--gutter);
  }

  /* Content containers respect side padding */
  .container,
  header,
  main,
  footer {
    padding: 0 var(--gutter);
  }

  /* Footer inner */
  .site-footer {
    padding: 48px var(--gutter);
  }
}

/* ── xl: 1200px (wide desktop) ───────────────────────────── */
/* @media (min-width: 1200px) { */

  /* Wider grids on large screens */
  /*.grid--auto-xl { */
   /* grid-template-columns: repeat(4, 1fr);  */
  /*} */

  /* Wider sidebar */
  /*.layout-sidebar { */
    /* grid-template-columns: 1fr 320px; */
  /*} */

  /* Nav stays padded */
  /*.main-nav { */
/*    padding: 0 var(--gutter-lg); */
/*  } */
/* }*/

@media (min-width: 1200px) {
  .main-nav {
    padding: 1rem 2rem !important;
  }
}


/* ── Print ───────────────────────────────────────────────── */
@media print {

  .main-nav,
  .site-footer,
  .pagination,
  .breadcrumbs,
  .dark-toggle,
  .nav-toggle,
  .sidebar,
  .widget {
    display: none !important;
  }

  body {
    background: #fff !important;
    color:      #000 !important;
    font-size:  12pt;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  table {
    border-collapse: collapse !important;
  }

  table th,
  table td {
    border: 1px solid #ccc !important;
  }
}