/* Long-form guide extras (blog/how-to-photograph-jewelry). Loaded after main.css on the pages that use it. */

/* Short answer box under the intro (also the sellers' notes above the button) */
.article .guide-answer{background:var(--card);border-radius:12px;padding:20px 24px;margin:32px 0 0}
.article .guide-answer p{margin:0;font-size:17px}
.article .guide-answer p+p{margin-top:10px}

/* Bordered data tables; main.css already makes article tables scroll sideways on phones */
.article table.guide-table{border-collapse:collapse;width:100%}
.article table.guide-table th,.article table.guide-table td{border:1px solid #E2E2E2;vertical-align:top}
.article table.guide-table th{background:var(--card);font-weight:600}
.article table.guide-table td:first-child{font-weight:600}
@media (max-width:809px){
  .article table.guide-table th,.article table.guide-table td{min-width:150px}
}

/* Figures with captions, single or as a before/after pair */
.article figure{margin:32px 0 0}
.article figure img{margin:0 auto;display:block}
.article figcaption{font-size:14px;line-height:1.5;color:var(--muted);margin-top:10px;text-align:center}
.article .guide-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 0}
.article .guide-pair figure{margin:0}
.article .guide-pair img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;max-height:none;border-radius:12px}
.article .guide-pair .is-upload img,.article .guide-pair .on-white img{border:1px solid #ECECEC;background:#fff}
/* A pair with one caption under both: <figure class="guide-compare"><div class="guide-pair">...</div><figcaption> */
.article figure.guide-compare .guide-pair{margin:0}
.article figure.guide-compare .guide-pair figcaption{font-weight:600;color:var(--ink)}
.article figure.guide-compare>figcaption{margin-top:12px}
@media (max-width:480px){
  .article .guide-pair{gap:10px}
  .article .guide-pair figcaption{font-size:13px}
}

/* Sources list at the end of a guide */
.article .guide-sources{font-size:15px;line-height:1.5}
.article .guide-sources li{margin:6px 0}