/* ============================================================
   ASTON MARTIN WATCHES — Master Stylesheet
   Version: 1.0 (en-US master)
   Brand: Aston Martin Watches (Timex Group)
   Font stack: DM Sans → system sans-serif
   ============================================================ */

/* ── Custom Properties ───────────────────────────────────── */
:root {
  /* Brand palette */
  --color-black:        #1a1a1a;
  --color-dark-gray:    #3a3a3a;
  --color-mid-gray:     #6b6b6b;
  --color-light-gray:   #c8c8c8;
  --color-off-white:    #f5f4f2;
  --color-white:        #ffffff;
  --color-accent:       #015851;   /* Aston Martin Aramco racing green */
  --color-accent2:      #DEDB1F;

  /* Typography */
  --font-primary:       "DM Sans", "Avenir Next", "Avenir", Arial, sans-serif;
  --font-size-base:     15px;
  --line-height-base:   1.6;

  /* Spacing */
  --space-xs:  0.4rem;
  --space-sm:  0.75rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;

  /* Layout */
  --content-width:      720px;
  --narrow-width:       560px;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-dark-gray);
  background-color: var(--color-white);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Page Layout ─────────────────────────────────────────── */
.manual-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ── Cover ───────────────────────────────────────────────── */
.cover {
  background-color: var(--color-accent);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.cover .brand-logo {
  width: 100px;
  max-width: 60%;
  margin-bottom: var(--space-lg);
  margin-left: var(--space-md);
}

.cover .cover-logo {
  width: 320px;
  max-width: 70%;
  margin: 0 auto var(--space-lg);
  display: block;
}

.cover h1 {
  font-size: 2rem;
  font-family: Times, serif;
  font-weight: 400;
  letter-spacing: 0.01rem;
  color: var(--color-white);
  text-align: center;
}

.cover .cover-subtitle {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-accent2);
  opacity: 0.75;
  margin-top: var(--space-sm);
  text-transform: uppercase;
}

.cover .cover-watch {
  width: 480px;
  max-width: 85%;
  margin: var(--space-md) 0;
}

/* ── Brand Wordmark ──────────────────────────────────────── */
/*    Text-based lockup used on cover / brand-intro / footer.        */
/*    No raster or vector brand logo asset was extracted from the    */
/*    source PDF (the logo is native vector art on every page), so   */
/*    the brand identity is reproduced here as a styled text lockup. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: var(--space-lg);
}

.brand-lockup .lockup-brand {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-black);
}

.brand-lockup .lockup-product {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--color-accent);
  line-height: 1;
}

.brand-lockup .lockup-team {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
}


/* ── Brand Description ───────────────────────────────────── */
.brand-description {
  max-width: var(--narrow-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.brand-description p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-dark-gray);
  margin-bottom: var(--space-md);
}

.brand-description .tagline {
  font-style: italic;
  font-weight: 600;
  color: var(--color-black);
  margin-top: var(--space-md);
}

/* ── Section Dividers ────────────────────────────────────── */
section + section,
.watch-features,
.strap-section,
.instructions-section {
  border-top: 1px solid var(--color-light-gray);
}

/* ── Watch Features ──────────────────────────────────────── */
.watch-features {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--content-width);
  margin: 0 auto;
}

.watch-features > h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-lg);
}

/* ── Shared Article Styles ───────────────────────────────── */
article {
  margin-bottom: var(--space-xl);
}

article h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-xs);
}

article h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

article h5 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark-gray);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

article p {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}

/* Subtitle / sub-type label under h3 */
.movement-subtitle {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-md);
  display: none;
}

/* Show subtitle inside chronograph variant sub-articles */
.movement-variant .movement-subtitle {
  display: block;
}

/* Chronograph variant group — shared heading */
.movement-group > h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-xs);
}

/* Indent variant sub-articles visually */
.movement-variant {
  border-left: 2px solid var(--color-light-gray);
  padding-left: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* ── Strap & Bezel Section ───────────────────────────────── */
.strap-section {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--content-width);
  margin: 0 auto;
}

/* ── Instructions Section ─────────────────────────────────── */
.instructions-section {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--content-width);
  margin: 0 auto;
}

.instructions-section > h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-lg);
}

/* ── Numbered Steps (ol) ─────────────────────────────────── */
ol.steps {
  list-style: none;
  counter-reset: step-counter;
  padding-left: 0;
  margin-bottom: var(--space-md);
}

ol.steps li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}

ol.steps li::before {
  content: counter(step-counter) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.85rem;
}

/* ── Bullet Lists (ul) ───────────────────────────────────── */
ul.feature-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-md);
}

ul.feature-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}

ul.feature-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* ── Example callouts (button-sequence examples beneath h5 headings) ──── */
p.example {
  font-size: 0.85rem;
  color: var(--color-mid-gray);
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-light-gray);
  margin-bottom: var(--space-sm);
}

[dir="rtl"] p.example {
  padding-left: 0;
  padding-right: var(--space-md);
  border-left: none;
  border-right: 2px solid var(--color-light-gray);
}

/* ── Notes & Warnings ────────────────────────────────────── */
.note {
  background-color: var(--color-off-white);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-dark-gray);
}

.note strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: 0.25rem;
}

/* ── 2×2 Diagram Grid ────────────────────────────────────── */
/*    Used for: Chronograph overview, and similar spreads    */
.diagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md) var(--space-md);
  margin: var(--space-lg) 0;
}

.diagram-grid figure {
  margin: 0;
  text-align: center;
}

.diagram-grid figure img {
  width: 100%;
  max-width: 220px;
  height: auto;         /* natural aspect ratio -- avoids the flex/grid
                            height-resolution issue seen with 3-up PNG grids */
  display: block;
  margin: 0 auto;
}

.diagram-grid figcaption {
  display: block; /* Override base hide — diagram-grid captions are visible */
  margin-top: 16px;
  font-size: 0.8rem;
  font-style: normal;
  text-decoration: none;
  letter-spacing: normal;
  color: var(--color-dark-gray);
  text-transform: none;
}

@media (max-width: 700px) {
  .diagram-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Float-right figure (image beside text) ─────────────── */
/*    Used for: Screw Down Crown illustration, and similar   */
figure.float-right {
  float: right;
  margin: 0 0 var(--space-md) var(--space-lg);
  max-width: 110px;
  clear: right;
}

figure.float-right img {
  width: 100%;
  height: auto;
  display: block;
}

figure.float-right figcaption {
  font-size: 0.7rem;
  text-align: center;
  margin-top: var(--space-xs);
}

/* Clearfix after any article that uses float-right figures */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 480px) {
  figure.float-right {
    float: none;
    max-width: 140px;
    margin: var(--space-md) auto;
  }
}

/* ── Figures & Diagrams ──────────────────────────────────── */
figure {
  margin: var(--space-lg) 0;
  text-align: center;
}

figure img,
figure svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figure.diagram img,
figure.diagram svg {
  /*
   * max-height caps vertical size across all locales without breaking aspect ratio.
   * Translated labels may expand the SVG viewBox horizontally — width:auto lets
   * the image grow wider freely. If the container is too narrow to fit the image
   * at full height, max-width:100% kicks in and BOTH dimensions scale down
   * proportionally, keeping aspect ratio intact. Height target yields to
   * aspect ratio; never the other way around.
   */
  max-height: 320px;
  width: auto;
  max-width: 100%;
}

figcaption {
  display: none; /* Hidden visually; kept in markup for semantic/AI indexing */
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
}

/* ── BA Reference Sheet figures ──────────────────────────── */
figure.caliber-ref {
  border: 1px solid var(--color-light-gray);
  padding: var(--space-sm);
  background: var(--color-off-white);
}

figure.caliber-ref figcaption {
  text-align: left;
  margin-top: var(--space-sm);
}

/* ── Water Resistance Table ──────────────────────────────── */
table.water-resistance {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: 0.85rem;
}

table.water-resistance th,
table.water-resistance td {
  text-align: center;
  padding: var(--space-xs) var(--space-sm);
}

/* Tighter row padding for the Battery Indicator table specifically,
   so the row divider lines sit close to the gauge image bounds
   rather than the default table's more generous vertical padding. */
table.water-resistance.battery-indicator-table tbody td {
  padding-top: 6px;
  padding-bottom: 6px;
}

table.water-resistance th {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-mid-gray);
  background-color: var(--color-off-white);
}

table.water-resistance thead th[colspan]:not([colspan="1"]) {
  text-align: center;
}

table.water-resistance th:not(:empty),
table.water-resistance td:not(:empty) {
  border-top: 1px solid var(--color-light-gray);
  border-bottom: 1px solid var(--color-light-gray);
}

table.water-resistance thead th:empty {
  border-top: none;
  border-bottom: none;
  background-color: var(--color-background);
}

/* ── Full Moon Dates Table ───────────────────────────────── */
table.full-moon-dates {
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.85rem;
  width: 100%;
}

table.full-moon-dates caption {
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-sm);
  background-color: var(--color-light-gray);
  color: var(--color-black);
  caption-side: top;
  margin-bottom: 0;
}

table.full-moon-dates th,
table.full-moon-dates td {
  padding: 0.35rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid var(--color-light-gray);
}

table.full-moon-dates thead th {
  font-weight: 600;
  color: var(--color-mid-gray);
  font-size: 0.78rem;
  border-bottom: 2px solid var(--color-light-gray);
}

/* Month labels — left-aligned, bold */
table.full-moon-dates tbody th[scope="row"] {
  text-align: left;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

table.full-moon-dates tbody td {
  color: var(--color-dark-gray);
  font-variant-numeric: tabular-nums;
}

table.full-moon-dates tbody tr:last-child th,
table.full-moon-dates tbody tr:last-child td {
  border-bottom: none;
}

/* ── Battery Care / Warranty ─────────────────────────────── */
.battery-warranty {
  padding: var(--space-xl) var(--space-md);
  max-width: var(--content-width);
  margin: 0 auto;
}

.battery-warranty h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-md);
}

.battery-warranty h3 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.battery-warranty p {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.battery-warranty ul {
  list-style: none;
  padding-left: 0;
}

.battery-warranty ul li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.battery-warranty ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-mid-gray);
}

/* ── Back Cover ──────────────────────────────────────────── */
.back-cover {
  background-color: var(--color-off-white);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ── Back Page (recycling / contact) ─────────────────────── */
.back-page {
    background-color: var(--color-accent);
    color: var(--color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}
.back-page .cover-logo {
  width: 320px;
  max-width: 70%;
  margin: 0 auto var(--space-lg);
  display: block;
}

.back-page .recycle-icon {
  width: 40px;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

.back-page p {
  font-size: 0.85rem;
  color: var(--color-mid-gray);
  margin-bottom: var(--space-xs);
}

.back-page a {
  font-weight: 600;
  color: var(--color-dark-gray);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

/* ── Utility: Screen-reader only ─────────────────────────── */
.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;
}

/* ── Print Styles ────────────────────────────────────────── */
@media print {
  body {
    font-size: 11pt;
    color: #000;
  }

  .cover {
    min-height: auto;
    page-break-after: always;
  }

  figure {
    page-break-inside: avoid;
  }

  article {
    page-break-inside: avoid;
  }

  .note {
    border-left-color: #999;
    background: #f8f8f8;
  }

  a {
    text-decoration: none;
    color: #000;
  }
}

/* ── RTL Support (Arabic — ar-SA) ───────────────────────── */
/*
 * Applied via dir="rtl" on the <html> element.
 * All LTR-specific properties are mirrored here.
 */
[dir="rtl"] body {
  direction: rtl;
  /* Arabic system fonts as first choices; falls back to the standard stack */
  font-family: "Segoe UI", "Tahoma", "Cairo", "Noto Naskh Arabic",
               "Avenir Next", "Avenir", Arial, sans-serif;
}

/* Note border flips from left to right */
[dir="rtl"] .note {
  border-left: none;
  border-right: 3px solid var(--color-accent);
}

/* Float-right screw-down crown illustration becomes float-left in RTL */
[dir="rtl"] figure.float-right {
  float: left;
  margin: 0 var(--space-lg) var(--space-md) 0;
}

/* Step numbers align to the right */
[dir="rtl"] ol.steps li {
  padding-left: 0;
  padding-right: 2rem;
}

[dir="rtl"] ol.steps li::before {
  left: auto;
  right: 0;
}

/* Bullet list bullets align to the right */
[dir="rtl"] ul.feature-list li {
  padding-left: 0;
  padding-right: 1.2rem;
}

[dir="rtl"] ul.feature-list li::before {
  left: auto;
  right: 0;
}

/* Warranty list dashes align to the right */
[dir="rtl"] .battery-warranty ul li {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .battery-warranty ul li::before {
  left: auto;
  right: 0;
}

/* Full Moon table caption: right-aligned in RTL */
[dir="rtl"] table.full-moon-dates caption {
  text-align: right;
}

/* Full Moon month labels right-aligned in RTL */
[dir="rtl"] table.full-moon-dates tbody th[scope="row"] {
  text-align: right;
}

/* Tables: left-aligned columns become right-aligned */
[dir="rtl"] table.water-resistance th,
[dir="rtl"] table.water-resistance td {
  text-align: right;
}

/* Clearfix still needed */
[dir="rtl"] .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 480px) {
  [dir="rtl"] figure.float-right {
    float: none;
    max-width: 140px;
    margin: var(--space-md) auto;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --font-size-base: 14px;
  }

  .cover h1 {
    font-size: 2rem;
    letter-spacing: 0.01rem;
    margin-left: var(--space-lg);
  }

  table.water-resistance {
    font-size: 0.8rem;
  }

  figure.diagram img,
  figure.diagram svg {
    max-width: 100%;
  }
}


/* ── Jewellery-specific: invert black wordmark logo for dark covers ─── */
.cover .cover-logo,
.back-page .cover-logo {
  filter: brightness(0) invert(1);
}


/* ── Water Resistance table: caption support (reused for other data tables) ── */
table.water-resistance caption {
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-sm);
  background-color: var(--color-light-gray);
  color: var(--color-black);
  caption-side: top;
  margin-bottom: 0;
}

/* ── Table legend (footnote text under data tables) ─────────── */
.table-legend {
  font-size: 0.78rem;
  color: var(--color-mid-gray);
  line-height: 1.6;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* ── Callout list (numbered diagram-part legends, e.g. 1. Hour Hand) ── */
ol.callout-list {
  list-style: none;
  counter-reset: callout-counter;
  padding-left: 0;
  margin-bottom: var(--space-md);
}

ol.callout-list li {
  counter-increment: callout-counter;
  position: relative;
  padding-left: 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}

ol.callout-list li::before {
  content: counter(callout-counter) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.85rem;
}

/* ── Flowchart diagrams (stopwatch button-sequence images) ──── */
figure.diagram.flowchart img,
figure.diagram.flowchart svg {
  max-width: 100%;
  width: 100%;
}

/* Large variant -- used for Accumulated Elapsed Time, Split Time,
   and Two Competitors flowcharts: widened 20% beyond the normal
   content column, bleeding slightly into the side margins.     */
figure.diagram.flowchart.flowchart-lg {
  width: 120%;
  max-width: 120%;
  margin-left: -10%;
  margin-right: -10%;
}


/* ── Vertical Diagram Stack ───────────────────────────────────
   Standalone: a centered single column of stacked diagrams with
   text below (e.g. Basic Models). Also reused as a child of
   .diagram-side-layout below, where it becomes a fixed-width
   flex column sitting beside a text block instead.             */
.diagram-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 220px;
  max-width: 100%;
  margin: var(--space-lg) auto;
}

.diagram-stack figure {
  margin: 0;
  text-align: center;
}

.diagram-stack figure img {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.diagram-stack.diagram-stack-large figure img {
  width: 260px;
}

/* XL variant -- used for Chronograph pairs: each diagram sized to
   match the single diagram in the 4th Chronograph Models section
   (am-watches-chronograph-3fn-standard.svg), which renders at the
   standard figure.diagram max-height of 320px. Widened container
   (instead of the normal 220px column) so images aren't clipped. */
.diagram-stack.diagram-stack-xl {
  width: 100%;
  max-width: var(--content-width);
}

.diagram-stack.diagram-stack-xl figure img {
  width: auto;
  max-width: 100%;
  max-height: 320px;
}

/* Shrink variant -- used for "Size a Link Strap" and "Re-Assembly":
   30% smaller than the standard figure.diagram max-height (320px). */
figure.diagram.diagram-shrink30 img,
figure.diagram.diagram-shrink30 svg {
  max-height: 224px;
}

/* ── Side-by-Side Diagram + Text Layout ──────────────────────
   Used for: Multifunction, Automatic, and 2-diagram Chronograph
   variants. Order in the HTML controls left/right placement --
   put .diagram-stack first for images-left/text-right, or
   .side-text first for text-left/images-right.               */
.diagram-side-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
}

.diagram-side-layout .diagram-stack {
  flex: 0 0 200px;
  width: auto;
  max-width: none;
  margin: 0;
}

/* When the XL (matched-size) variant is used inside a side-by-side
   layout -- e.g. Basic Models -- widen the diagram column with a
   fixed pixel width (rather than the max-height/auto-ratio sizing
   used for the full-width stacked case, which doesn't compute
   reliably for images nested two flex containers deep). 420px is
   as close to the 4th Chronograph diagram's size as this column
   can get while still leaving the text column readable. */
.diagram-side-layout .diagram-stack.diagram-stack-xl {
  flex: 0 0 420px;
  width: auto;
  max-width: none;
}

.diagram-side-layout .diagram-stack.diagram-stack-xl figure img {
  width: 420px;
  max-width: 100%;
  height: auto;
}

/* Vertically center the side-layout columns against each other --
   used for Basic Models, where the text block is shorter than the
   diagram stack and should sit level with the middle diagram.   */
.diagram-side-layout.diagram-side-center {
  align-items: center;
}

/* Large variant -- used for Basic Models: diagrams sized up 30%
   (200px -> 260px) relative to the standard diagram-stack size. */
.diagram-side-layout .diagram-stack.diagram-stack-large {
  flex-basis: 260px;
}


.diagram-side-layout .side-text {
  flex: 1 1 auto;
  min-width: 0;
}

.diagram-side-layout .side-text > h4:first-child {
  margin-top: 0;
}

/* Divided variant -- used for Chronograph pairs, to visually
   separate the diagram column from its related text block, and
   to divide the two stacked diagrams from one another so each
   reads as its own paired illustration rather than one blob.  */
.diagram-side-layout.diagram-side-divided .diagram-stack {
  padding-left: var(--space-lg);
  border-left: 1px solid var(--color-light-gray);
}

.diagram-side-layout.diagram-side-divided .diagram-stack figure:not(:last-child) {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-light-gray);
}

@media (max-width: 700px) {
  .diagram-side-layout {
    flex-direction: column;
  }
  .diagram-side-layout .diagram-stack {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: none;
  }
  .diagram-side-layout .diagram-stack figure {
    flex: 0 0 auto;
    width: 45%;
  }
  .diagram-side-layout.diagram-side-divided .diagram-stack {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-light-gray);
  }
  .diagram-side-layout.diagram-side-divided .diagram-stack figure:not(:last-child) {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ── Battery Gauge Icons (Power Reserve table) ───────────────
   Explicit width, shrunk 30% from their previous rendered size
   in the table (~269px -> 188px). An explicit width (rather than
   max-height/max-width) is used because these sit inside an
   auto-layout table cell, where max-height/max-width alone don't
   reliably control the final rendered size.                  */
figure.diagram.battery-gauge-diagram {
  margin: 0 auto;
}

figure.diagram.battery-gauge-diagram img,
figure.diagram.battery-gauge-diagram svg {
  width: 188px;
  height: auto;
  max-width: 100%;
}