/* ============================================================
   AboutDigitalCameras.com — Layout System
   /css/layout.css
   ============================================================ */

/* ── Page Wrapper ────────────────────────────────────────── */
/* .page-wrapper { */
/*   display:        flex; */
/*   flex-direction: column; */
/*   min-height:     100vh; */
/* } */
.page-wrapper {
  padding: 0 1rem;
}

.page-main {
  flex: 1;
}

/* ── Content Container ───────────────────────────────────── */
.container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* .container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 1rem; /* FIXED */
} */

.container--wide {
  max-width: var(--max-width-wide);
}

.container--narrow {
  max-width: 680px;
}

/* ── Header / Main / Footer centering (Version C) ────────── */
header,
main,
footer {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* Nav overrides — full-width sticky bar */
.main-nav {
  max-width: none;
  padding:   0; /* inner padding handled inside nav.css */
}

/* Footer overrides — full-width dark bar */
.site-footer {
  max-width: none;
  padding:   0; /* inner padding handled inside components.css */
}

/* ── Grid System ─────────────────────────────────────────── */

/* Auto-fit card grid */
.grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--space-6);
}

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

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

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

/* ── Content + Sidebar ───────────────────────────────────── */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap:     var(--space-8);
  align-items: start;
}

.layout-sidebar .sidebar {
  position: sticky;
  top:      calc(var(--nav-height) + var(--space-4));
}

/* ── Section Spacing ─────────────────────────────────────── */
.section {
  padding: var(--space-12) 0;
}

.section--sm {
  padding: var(--space-8) 0;
}

.section--lg {
  padding: var(--space-16) 0;
}

/* ── Flex Utilities ──────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-4         { gap: var(--space-4); }
.gap-6         { gap: var(--space-6); }
.gap-8         { gap: var(--space-8); }

/* ── Spacing Utilities ───────────────────────────────────── */
.mt-4  { margin-top:    var(--space-4); }
.mt-6  { margin-top:    var(--space-6); }
.mt-8  { margin-top:    var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ── Typography Utilities ────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--clr-text-muted); }
.text-sm      { font-size: var(--text-sm); }
.text-lg      { font-size: var(--text-lg); }
.font-bold    { font-weight: var(--fw-bold); }

/* ── Visibility Utilities ────────────────────────────────── */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ── Page Header Block ───────────────────────────────────── */
.page-header {
  padding:     var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: var(--space-8);
}

.page-header__label {
  display:       inline-block;
  font-size:     var(--text-sm);
  font-weight:   var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:         var(--clr-primary);
  margin-bottom: var(--space-2);
}

.page-header__title {
  font-size:   var(--text-2xl);
  margin-top:  0;
  margin-bottom: var(--space-3);
}

.page-header__intro {
  font-size:  var(--text-md);
  color:      var(--clr-text-muted);
  max-width:  65ch;
  line-height: var(--leading-loose);
}

/* ── Article Body ────────────────────────────────────────── */
.article-body {
  max-width: 72ch;
}

.article-body p {
  margin-bottom: var(--space-4);
}

.article-body h2 {
  padding-top:   var(--space-6);
  border-top:    1px solid var(--clr-border);
  margin-top:    var(--space-10);
}

.article-body img {
  width:         100%;
  border-radius: var(--radius-md);
  margin:        var(--space-4) 0;
}

.article-body ul,
.article-body ol {
  margin-bottom: var(--space-4);
}
/* ────────────────────────────────────────────────
   Global Hero Image Normalization
   Ensures all review hero images render identically
   regardless of source dimensions or metadata.
   ──────────────────────────────────────────────── */

.article-body .diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;        /* Forces consistent layout height */
  object-fit: cover;           /* Crops gracefully if aspect ratio differs */
  object-position: center;     /* Centers subject in frame */
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
/* Hero image wrapper: fixed 16:9 box */
/* .hero-image {
  position: relative;
  width: 100%;
  max-width: 900px;          /* match your design width */
  margin: 0 auto var(--space-6);
  aspect-ratio: 16 / 9;      /* same height on every page */
  overflow: hidden;
}

/* Actual image: fills the box consistently */
.hero-image .diagram {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* no stretching, just clean crop */
  object-position: center;
  display: block;
} */

/* ── Intro Block ─────────────────────────────────────────── */
.intro {
  margin:    var(--space-4) 0 var(--space-8);
  font-size: var(--text-md);
  color:     var(--clr-text-muted);
  line-height: var(--leading-loose);
}