/* Standalone preview picker. Include once per page; fonts come from the host. */
.p20-gallery {
  --p20-gallery-gold: #d8b66a;
  --p20-gallery-text: #f0eaf4;
  --p20-gallery-muted: #bdb0c8;
  --p20-gallery-line: #433047;
  inline-size: 100%;
  max-inline-size: 480px;
  min-inline-size: 0;
  color: var(--p20-gallery-text);
  font: inherit;
  display: grid;
  grid-template-areas: "heading" "preview" "tabs" "note";
}
.p20-gallery,
.p20-gallery * { box-sizing: border-box; }

.p20-gallery .p20-gallery-heading {
  grid-area: heading;
  margin: 0 0 12px;
  color: var(--p20-gallery-gold);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
}
.p20-gallery .p20-gallery-preview,
.p20-gallery .p20-gallery-panel { min-inline-size: 0; }
.p20-gallery .p20-gallery-preview { grid-area: preview; }
.p20-gallery .p20-gallery-panel[hidden] { display: none !important; }
.p20-gallery .p20-gallery-figure { margin: 0; }
.p20-gallery .p20-gallery-figure > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 480px;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.p20-gallery .p20-gallery-figure > figcaption {
  margin: 0;
  padding: 12px 0 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.p20-gallery .p20-gallery-tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-inline-size: 0;
  padding: 14px 0 0;
  border-block-start: 1px solid var(--p20-gallery-line);
}
.p20-gallery .p20-gallery-tab {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-inline-size: 0;
  min-block-size: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--p20-gallery-muted);
  font: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
  transform: none;
  transition: none;
}
.p20-gallery .p20-gallery-tab > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.p20-gallery .p20-gallery-tab[aria-selected="false"] > img { opacity: .6; }
.p20-gallery .p20-gallery-tab[aria-selected="true"] > img { opacity: 1; }
.p20-gallery .p20-gallery-tab > span {
  display: block;
  min-block-size: 3.4em;
  padding: 8px 2px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.p20-gallery .p20-gallery-tab[aria-selected="true"] {
  border-block-end-color: var(--p20-gallery-gold);
  color: var(--p20-gallery-gold);
}
.p20-gallery .p20-gallery-tab:hover { color: var(--p20-gallery-gold); transform: none; }
.p20-gallery .p20-gallery-tab:focus-visible,
.p20-gallery .p20-gallery-panel:focus-visible {
  outline: 2px solid var(--p20-gallery-gold);
  outline-offset: 4px;
}
.p20-gallery .p20-gallery-note {
  grid-area: note;
  margin: 10px 0 0;
  color: var(--p20-gallery-muted);
  font-size: 12px;
  line-height: 1.7;
}
.p20-gallery .p20-gallery-panel.is-selected-by-user {
  animation: p20-gallery-selection 180ms ease-out;
}
@keyframes p20-gallery-selection {
  from { opacity: .62; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .p20-gallery .p20-gallery-panel.is-selected-by-user { animation: none; }
}
@media (min-width: 900px) {
  .p20-gallery { max-inline-size:620px; grid-template-columns:minmax(0,1fr) 124px; grid-template-areas:"heading heading" "preview tabs"; column-gap:16px; align-items:start; }
  .p20-gallery .p20-gallery-tabs { grid-template-columns:minmax(0,1fr); gap:12px; padding:0; border:0; }
  .p20-gallery .p20-gallery-tab { position:relative; border:2px solid transparent; }
  .p20-gallery .p20-gallery-tab[aria-selected=true] { border-color:#d8b66a; box-shadow:0 0 0 2px #241430,0 0 0 3px #d8b66a; }
  .p20-gallery .p20-gallery-tab>span { position:absolute; width:1px; height:1px; min-block-size:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; padding:0; }
  .p20-gallery .p20-gallery-figure>figcaption { font-size:13px; }
}