/* The shared directory font/ruled text style also applies to source photographs. */
.source-photos-page, .source-detail-gallery, .source-photo-viewer { font-family:var(--directory-font-family); font-size:var(--directory-text-size); font-weight:400; line-height:var(--directory-text-leading); }
.source-photos-page h1 span { margin-left:10px; color:#777; font-size:11px; font-weight:400; letter-spacing:0; }
.source-photos-page .plant-detail-heading p { margin-top:9px; color:#777; font-size:11px; }
.source-photo-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:6px; margin-bottom:12px; border-bottom:1px solid #222; }
.plant-photo-gallery .source-photo-section-heading h2 { border:0; padding:0; margin:0; }
.source-photo-section-heading>a { flex-shrink:0; color:#777; font-size:10px; }
.source-photo-section-heading>a:hover { color:#111; text-decoration:underline; text-underline-offset:3px; }
.source-photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 18px; padding:18px 0; }
.source-photo-grid .source-photo { max-width:none; }
.source-photo-open { display:block; position:relative; width:100%; border:0; padding:0; background:none; text-align:left; cursor:zoom-in; }
.source-photo-viewport { display:block; position:relative; overflow:hidden; width:100%; }
.source-photo-viewport .plant-photo-image { max-width:100%; height:auto; }
.source-photo-grid .source-photo-viewport { aspect-ratio:4/3; background:#fafafa; }
.source-photo-grid .source-photo-viewport:not(.has-display-crop) .plant-photo-image { width:100%; height:100%; max-height:none; object-fit:contain; }
.source-photo-open .plant-photo-image { width:100%; max-height:320px; object-fit:contain; }
.source-detail-gallery .plant-photo-list { display:flex; align-items:flex-start; flex-wrap:wrap; gap:20px; }
.source-detail-gallery .plant-photo { width:fit-content; max-width:calc(50% - 10px); }
.source-detail-gallery .source-photo-open { width:fit-content; max-width:100%; }
.source-detail-gallery .plant-photo-image { width:auto; height:auto; max-height:clamp(160px,24vw,320px); object-fit:contain; object-position:left top; }
.source-detail-gallery .source-photo-cropped { width:calc(clamp(160px,24vw,320px) * var(--photo-crop-ratio)); }
.source-detail-gallery .source-photo-cropped .source-photo-open { width:100%; }
.source-photo-open .has-display-crop { width:100%; }
.source-photo-enlarge { position:absolute; right:6px; bottom:5px; display:flex; justify-content:center; align-items:center; width:21px; height:21px; color:#222; background:rgba(255,255,255,.92); font-size:13px; opacity:0; }
.source-photo-open:hover .source-photo-enlarge,.source-photo-open:focus-visible .source-photo-enlarge { opacity:1; }
.source-photo figcaption>span,.source-photo-title { display:block; }
.source-photo-title { margin-bottom:3px; color:#222; font-size:var(--directory-text-size); font-weight:400; }
.source-photo-status { color:#777; margin-top:3px; }
.source-photo-original { color:#444; margin-bottom:2px; }
.source-reference-section { margin-top:22px; }
.source-reference-section>h3 { padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid #aaa; font-size:11px; font-weight:700; color:#222; }
.source-reference-section>h3 span { margin-left:5px; font-size:10px; color:#777; font-weight:400; }
.source-reference-section>p { margin-bottom:12px; color:#777; font-size:10px; }
.source-photo-controls { display:flex; align-items:flex-end; gap:24px; padding-bottom:18px; }
.source-photo-controls label { display:flex; flex-direction:column; gap:5px; color:#555; font-size:10px; }
.source-photo-search { flex:1; max-width:480px; }
.source-photo-controls input,.source-photo-controls select { height:33px; max-width:100%; padding:5px 0; border:0; border-bottom:1px solid #aaa; border-radius:0; background:#fff; color:#222; font:inherit; font-size:11px; }
.source-photo-controls input { width:100%; }
.source-photo-controls select { min-width:140px; padding-right:18px; }
.photo-pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:8px 0; border-top:1px solid #222; color:#555; font-size:11px; }
.photo-pagination>div { display:flex; align-items:center; gap:18px; }
.photo-pagination button { background:none; padding:4px 0; border:0; color:#222; font:inherit; }
.photo-pagination button:disabled { opacity:.35; cursor:default; }
.source-photos-empty { padding:60px 0; color:#777; }
dialog:has(.source-photo-viewer) { width:min(900px,calc(100vw - 32px)); max-width:900px; }
.source-photo-viewer .plant-photo { max-width:none; }
.source-photo-viewer .source-photo-viewport { width:fit-content; max-width:100%; margin:auto; }
.source-photo-viewer .source-photo-viewport.has-display-crop { width:min(100%,calc(52vh * var(--photo-crop-ratio))); max-width:700px; }
.source-photo-viewer .plant-photo-image { max-height:52vh; max-width:100%; width:auto; }
.source-photo-info { margin-top:18px; }
.source-photo-info>div { border-bottom:1px solid #ddd; padding:5px 0; }
.source-photo-info dt { display:inline; font-weight:700; color:#000; }
.source-photo-info dt span,.source-photo-targets strong span { margin-left:5px; color:#777; font-size:10px; font-weight:400; }
.source-photo-info dd { display:inline; margin-left:9px; color:#444; overflow-wrap:anywhere; }
.source-photo-targets { display:flex; flex-wrap:wrap; gap:8px 15px; margin-top:14px; }
.source-photo-targets strong { width:100%; font-weight:700; }
.source-photo-targets a { text-decoration:underline; text-underline-offset:3px; }
.source-photo-connection-note { color:#777; margin-top:12px; }
@media(max-width:1000px) { .source-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .source-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .source-photo-controls { flex-wrap:wrap; gap:12px 18px; }
  .source-photo-search { flex-basis:100%; max-width:none; }
  .source-photo-controls select { min-width:125px; }
  .source-photo-controls input { font-size:16px; }
  .source-photo-viewer .plant-photo-image { max-height:50vh; }
  .source-photo-enlarge { opacity:1; }
  .source-detail-gallery .plant-photo-list { gap:18px 12px; }
  .source-detail-gallery .plant-photo { max-width:calc(50% - 6px); }
}