/* Guide visual explanations and product photography (all 17 guides).
   Scoped to .wa-guide-page; shared home/product styles are untouched. */
.wa-guide-page {
  --wa-g-ink: #283c32;
  --wa-g-green: #2b4d3c;
  --wa-g-muted: #526155;
  --wa-g-line: #d2d5c8;
  --wa-g-paper: #fffefa;
  --wa-g-cream: #f7f5ee;
  --wa-g-warm: #a25f3c;
  --wa-g-cool: #4f7482;
}
.wa-guide-page [id] { scroll-margin-top: 140px; }
.wa-guide-page :is(a, summary, [tabindex]):focus-visible { outline: 2px solid var(--wa-g-green); outline-offset: 4px; }

/* Contents: two readable columns instead of one long list. */
.wa-guide-page--visual .wa-guide-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 36px; }
.wa-guide-page--visual .wa-guide-toc li { min-width: 0; break-inside: avoid; }
.wa-guide-page--visual .wa-guide-toc a { display: inline-block; padding: 6px 0; line-height: 1.5; overflow-wrap: anywhere; }
.wa-guide-page--visual .wa-guide-article > section { max-width: 80ch; }
.wa-guide-page--visual:not(.wa-guide-page--wifi) .wa-guide-article > section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--wa-g-line); }

/* Direct answer with real WetAir interior photography. */
.wa-guide-page .wa-guide-band--answer .wa-guide-answer--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 56px;
  align-items: center;
  max-width: var(--wa-content, 1680px);
}
.wa-guide-page .wa-guide-answer--photo.wa-guide-answer--photos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.wa-guide-page .wa-guide-answer__text { min-width: 0; max-width: 820px; }
.wa-guide-page .wa-guide-photos { display: grid; grid-template-columns: 1fr; gap: 20px; min-width: 0; }
.wa-guide-page .wa-guide-answer--photos-2 .wa-guide-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-guide-page .wa-guide-photo { margin: 0; min-width: 0; }
.wa-guide-page .wa-guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wa-g-line);
  background: var(--wa-g-cream);
}
.wa-guide-page .wa-guide-photo figcaption { margin-top: 10px; color: var(--wa-g-muted); font-size: 14px; line-height: 1.55; }

/* Shared visual band. */
.wa-guide-page .wa-guide-visual { background: var(--wa-g-cream); }
.wa-guide-page .wa-guide-visual + .wa-guide-visual { background: var(--wa-g-paper); }
.wa-guide-page .wa-guide-visual__intro { max-width: 75ch; margin: -16px 0 28px; color: var(--wa-g-ink); font-size: 17px; line-height: 1.7; }
.wa-guide-page .wa-guide-visual__note { max-width: 80ch; margin: 28px 0 0; padding-left: 18px; border-left: 2px solid #8a987f; color: var(--wa-g-muted); font-size: 15px; line-height: 1.7; }

/* Readable care and placement facts, without schematic drawings or markers. */
.wa-guide-page .wa-guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin: 0; padding: 0; }
.wa-guide-page .wa-guide-facts__item { min-width: 0; padding-top: 18px; border-top: 1px solid var(--wa-g-line); }
.wa-guide-page .wa-guide-facts dt { margin: 0 0 8px; color: var(--wa-g-ink); font-size: 18px; font-weight: 600; line-height: 1.45; }
.wa-guide-page .wa-guide-facts dd { margin: 0; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }

/* Comparison table; becomes labelled cards on small screens. */
.wa-guide-page .wa-guide-compare { max-width: 100%; overflow-x: auto; }
.wa-guide-page .wa-guide-compare table { width: 100%; border-collapse: collapse; background: var(--wa-g-paper); border: 1px solid var(--wa-g-line); }
.wa-guide-page .wa-guide-compare th, .wa-guide-page .wa-guide-compare td { padding: 16px 20px; border-bottom: 1px solid var(--wa-g-line); text-align: left; vertical-align: top; font-size: 16px; line-height: 1.6; }
.wa-guide-page .wa-guide-compare thead th { color: var(--wa-g-green); font-family: var(--wa-serif, Georgia, serif); font-size: 21px; font-weight: 600; border-bottom: 2px solid var(--wa-g-green); }
.wa-guide-page .wa-guide-compare tbody th { width: 22%; color: var(--wa-g-ink); font-weight: 600; }
.wa-guide-page .wa-guide-compare tbody td { width: 39%; }
.wa-guide-page .wa-guide-compare tbody tr:last-child > * { border-bottom: 0; }

/* Decision aid: condition -> action rows. */
.wa-guide-page .wa-guide-decision { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wa-guide-page .wa-guide-decision li {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.4fr); gap: 16px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--wa-g-line); border-left: 3px solid var(--wa-g-green); background: var(--wa-g-paper);
}
.wa-guide-page .wa-guide-decision p { margin: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.wa-guide-page .wa-guide-decision__if { font-weight: 600; color: var(--wa-g-ink); }
.wa-guide-page .wa-guide-decision__arrow { color: var(--wa-g-green); font-size: 22px; text-align: center; }

/* Formula: term cards with operators between them. */
.wa-guide-page .wa-guide-formula { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.wa-guide-page .wa-guide-formula--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-guide-page .wa-guide-formula li { position: relative; min-width: 0; padding: 22px; border: 1px solid var(--wa-g-line); border-top: 3px solid var(--wa-g-green); background: var(--wa-g-paper); }
.wa-guide-page .wa-guide-formula li:last-child { background: #eef0e9; }
.wa-guide-page .wa-guide-formula h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; }
.wa-guide-page .wa-guide-formula p { margin: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.wa-guide-page .wa-guide-formula__op { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); color: var(--wa-g-green); font-size: 24px; font-weight: 600; }

@media (max-width: 1100px) {
  .wa-guide-page .wa-guide-band--answer .wa-guide-answer--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 36px; }
  .wa-guide-page .wa-guide-answer--photo.wa-guide-answer--photos-2 { grid-template-columns: 1fr; }
  .wa-guide-page .wa-guide-answer--photos-2 .wa-guide-photos { max-width: 640px; }
  .wa-guide-page .wa-guide-formula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-guide-page .wa-guide-formula li:nth-child(2n) .wa-guide-formula__op { display: none; }
}
@media (max-width: 720px) {
  .wa-guide-page .wa-guide-facts { grid-template-columns: 1fr; gap: 20px; }
  .wa-guide-page .wa-guide-facts dt { font-size: 17px; }
  .wa-guide-page [id] { scroll-margin-top: 110px; }
  .wa-guide-page--visual .wa-guide-toc ol { grid-template-columns: 1fr; gap: 2px; }
  .wa-guide-page--visual .wa-guide-toc a { padding: 10px 0; }
  .wa-guide-page--visual:not(.wa-guide-page--wifi) .wa-guide-article > section + section { margin-top: 32px; padding-top: 24px; }
  .wa-guide-page .wa-guide-band--answer .wa-guide-answer--photo { grid-template-columns: 1fr; gap: 28px; }
  .wa-guide-page .wa-guide-photo:not(.wa-guide-photo--wide) { max-width: 420px; }
  .wa-guide-page .wa-guide-answer--photos-2 .wa-guide-photo { max-width: none; }
  .wa-guide-page .wa-guide-visual__intro { margin-top: -12px; font-size: 16px; }
  .wa-guide-page .wa-guide-compare { overflow: visible; }
  .wa-guide-page .wa-guide-compare table, .wa-guide-page .wa-guide-compare tbody, .wa-guide-page .wa-guide-compare tr, .wa-guide-page .wa-guide-compare th, .wa-guide-page .wa-guide-compare td { display: block; width: auto; }
  .wa-guide-page .wa-guide-compare table { border: 0; background: transparent; }
  .wa-guide-page .wa-guide-compare thead { display: none; }
  .wa-guide-page .wa-guide-compare tbody tr { margin-bottom: 14px; border: 1px solid var(--wa-g-line); border-top: 3px solid var(--wa-g-green); background: var(--wa-g-paper); }
  .wa-guide-page .wa-guide-compare tbody th { width: auto; padding: 14px 16px 6px; border: 0; font-size: 17px; }
  .wa-guide-page .wa-guide-compare tbody td { width: auto; padding: 8px 16px 12px; border: 0; font-size: 15px; }
  .wa-guide-page .wa-guide-compare tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--wa-g-green); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .wa-guide-page .wa-guide-compare tbody td + td { border-top: 1px dashed var(--wa-g-line); padding-top: 12px; }
  .wa-guide-page .wa-guide-decision li { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .wa-guide-page .wa-guide-decision__arrow { transform: rotate(90deg); width: 22px; text-align: left; line-height: 1; }
  .wa-guide-page .wa-guide-formula, .wa-guide-page .wa-guide-formula--3 { grid-template-columns: 1fr; gap: 34px; }
  .wa-guide-page .wa-guide-formula__op, .wa-guide-page .wa-guide-formula li:nth-child(2n) .wa-guide-formula__op { display: block; top: auto; bottom: -32px; right: 50%; transform: translateX(50%); }
}