/*
 * Awakening Eden · Educational board component
 * Shared by the Work With Benjy page and the Living Guides.
 *
 * Boards carry fine printed labels, so they are never cropped (object-fit:
 * contain) and every board gets a real expand affordance. The central claim
 * of each board is always repeated as HTML nearby for mobile, accessibility
 * and search.
 */

.board-figure { margin: 0; }
.board-figure img { display: block; width: 100%; height: auto; object-fit: contain; padding: .5rem; border: 1px solid rgb(105 112 82 / .3); border-radius: 1.2rem; background: #fdfaf2; box-shadow: var(--shadow); }
.board-figure figcaption { margin-top: .9rem; color: var(--umber); font-size: .85rem; line-height: 1.55; }
.board-figure figcaption strong { color: var(--forest); }
.board-figure--center { width: min(100%, 54rem); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.board-figure--inset { margin-top: 1.4rem; }

.board-note { margin-top: 1.2rem; color: var(--olive); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.board-note.center { margin-top: 1rem; text-align: center; }

.board-details { margin-top: 1.5rem; padding: .2rem 1.15rem; border: 1px solid rgb(105 112 82 / .3); border-radius: 1.1rem; background: rgb(255 253 247 / .72); }
.board-details summary { padding: .9rem 0; color: var(--forest); font-family: var(--display); font-size: 1.22rem; font-weight: 600; cursor: pointer; }
.board-details[open] summary { margin-bottom: .9rem; border-bottom: 1px solid rgb(105 112 82 / .22); }
.board-details > figure { margin-bottom: 1.1rem; }
.board-details--center { width: min(100%, 54rem); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }

/* Tap-to-expand: the printed labels are too fine to read at inline size. */
.board-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.board-zoom:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 4px; border-radius: 1.2rem; }
.board-zoom::after { content: "Tap to enlarge"; display: block; margin-top: .5rem; color: var(--olive); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
@media (hover: hover) { .board-zoom::after { content: "Click to enlarge"; } }

.board-lightbox { width: min(96vw, 1500px); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: 1rem; background: transparent; overflow: auto; overscroll-behavior: contain; }
.board-lightbox::backdrop { background: rgb(20 31 23 / .9); }
/* Narrow screens: size the board by height and let the reader pan across it,
   so the printed labels stay legible instead of shrinking to fit. */
.board-lightbox img { display: block; width: auto; max-width: none; height: 82vh; border-radius: .8rem; background: #fdfaf2; }
.board-lightbox__close { position: fixed; z-index: 2; top: 1rem; right: 1rem; padding: .5rem 1.15rem; border: 1px solid rgb(255 253 247 / .5); border-radius: 999px; color: var(--paper-light); background: rgb(35 49 38 / .88); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.board-lightbox__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (min-width: 48rem) {
  .board-lightbox img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; }
  .board-lightbox__close { position: absolute; top: .8rem; right: .8rem; }
}

/* Guide usage: a board sits as a full-width teaching pause inside the reading
   column, with its claim restated underneath. */
.guide-board { width: min(100%, 48rem); margin: clamp(2rem, 5vw, 3.4rem) auto; }
.guide-board figcaption { margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--gold); }