/* Rule-specific visual instruction, shared design language across Texas and federal education.
   Existing brand palettes and licensed fonts remain authoritative. */
.visual-lesson{
 display:grid;grid-template-columns:minmax(0,1.06fr) minmax(280px,.94fr);
 gap:clamp(18px,3vw,42px);align-items:start;padding:clamp(18px,2.8vw,34px);
 margin:22px 0;background:var(--card,var(--paper,#fffdf7));border:1px solid var(--line,#d6d8cb);
 border-radius:17px;box-shadow:0 6px 24px rgba(32,62,52,.06);
}
.visual-lesson-copy{min-width:0}
.visual-lesson-copy h2,.visual-lesson-copy h3{margin-top:0}
.visual-lesson-copy p{line-height:1.72}
.visual-lesson-media{min-width:0;margin:0}
.visual-lesson-label{font-size:10px;letter-spacing:.14em;font-weight:700;margin:0 0 10px;color:var(--gold,#ad8952)}
.visual-lesson-gallery{border:1px solid var(--line,#d6d8cb);border-radius:12px;overflow:hidden;background:var(--surface,var(--paper,#eeede4))}
.visual-lesson-gallery figure{margin:0!important;padding:12px;border:0!important;box-shadow:none!important;background:transparent!important;max-width:100%}
.visual-lesson-gallery figure[hidden]{display:none!important}
.visual-lesson-gallery figure>a{display:block;text-align:center}
.visual-lesson-gallery figure img{display:block;margin:0 auto;width:auto!important;height:auto!important;max-width:100%!important;max-height:min(600px,68vh);object-fit:contain;border-radius:5px}
.visual-lesson-gallery figcaption{font-size:.82rem;line-height:1.55;margin:10px 0 0;color:var(--ink,#203e34);display:flex;gap:.35rem;flex-wrap:wrap}
.visual-lesson-gallery figcaption strong{display:block;width:100%;font-weight:650}
.visual-lesson-gallery figcaption a{color:var(--ink,#203e34);text-decoration:underline;text-decoration-color:var(--gold,#ad8952);text-underline-offset:3px}
.visual-lesson-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:12px 0 0}
.visual-lesson-btn{
 appearance:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--line,#d6d8cb);border-radius:999px;padding:.55rem 1rem;background:var(--card,var(--paper,#fffdf7));
 color:var(--ink,#203e34);font-weight:650;font-size:12px;
 box-shadow:0 2px 0 rgba(32,62,52,.1);cursor:pointer;
 transition:transform 150ms ease,box-shadow 150ms ease;
}
.visual-lesson-btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.visual-lesson-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 13px rgba(32,62,52,.12)}
.visual-lesson-count{font-size:12px;color:var(--muted,#5a665e);white-space:nowrap}
.visual-lesson a:focus-visible,.visual-lesson button:focus-visible,
.visual-learning-dialog button:focus-visible{outline:3px solid var(--gold,#ad8952);outline-offset:3px}
.visual-learning-dialog{
 border:1px solid var(--line,#d6d8cb);border-radius:14px;
 background:var(--card,var(--paper,#fffdf7));color:var(--ink,#203e34);
 box-shadow:0 26px 70px #0006;max-width:min(1000px,96vw);max-height:95vh;padding:18px;
}
.visual-learning-dialog::backdrop{background:rgba(12,24,20,.84)}
.visual-learning-dialog-close{display:block;margin:0 0 12px auto;border-radius:999px;
 background:var(--deep,#203e34);border:0;color:var(--on-deep,#f8f6f0);padding:9px 22px;min-height:44px;cursor:pointer}
.visual-learning-dialog-body{overflow:auto;max-height:calc(95vh - 105px)}
.visual-learning-expanded-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(95vh - 158px);margin:auto}
.visual-learning-dialog-body p{font-size:.9rem;text-align:center;line-height:1.4}
.visual-source-note{margin-top:20px}
@media(max-width:800px){.visual-lesson{grid-template-columns:1fr;gap:16px;padding:18px}.visual-lesson-gallery figure img{max-height:65vh}}
@media(max-width:420px){.visual-lesson{padding:13px;border-radius:12px}.visual-lesson-controls{gap:6px}.visual-lesson-btn{padding:8px 12px}.visual-lesson-gallery figure{padding:8px}}
@media(prefers-reduced-motion:reduce){.visual-lesson-btn{transition:none}.visual-lesson-btn:hover{transform:none}}

/* Align the whole rule explanation with the artwork on desktop; let mobile
   readers see the image immediately after the opening explanation. */
.visual-reading-column{min-width:0;display:flex;flex-direction:column;gap:18px}
.visual-reading-column .visual-reading-rest{min-width:0}
.visual-lesson-media{position:sticky;top:20px}
@media(max-width:800px){
 .visual-lesson{display:flex;flex-direction:column}
 .visual-reading-column{display:contents}
 .visual-lesson-copy{order:1}
 .visual-lesson-media{position:static;order:2;width:100%}
 .visual-reading-rest{order:3;width:100%}
}

/* Give the illustration enough room in the original OurObjection guides,
   where the old prose-only layout restricted the whole teaching card to 880px. */
@media(min-width:960px){
 .rule-prose:has(>.visual-lesson){max-width:min(1200px,100%)}
}