.galeria-page {
  background: var(--color-ink-950);
}

.galeria-page .section {
  position: relative;
}

.galeria-hero {
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 9rem);
  background: linear-gradient(135deg, var(--color-ink-950) 0%, var(--color-ink-900) 54%, var(--color-forest-800) 100%);
}

.galeria-hero::after {
  position: absolute;
  inset: auto -8rem -12rem auto;
  width: 36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(145 184 163 / .16), transparent 70%);
  content: "";
  pointer-events: none;
}

.galeria-hero__grid,
.galeria-board__grid,
.galeria-challenge__grid,
.galeria-detail__grid,
.galeria-faq__grid {
  display: grid;
  min-width: 0;
}

.galeria-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-6);
}

.galeria-hero__copy {
  z-index: 1;
  grid-column: 1 / 2;
  min-width: 0;
  max-width: 48ch;
}

.galeria-hero__copy > :last-child { margin-block-end: 0; }
.galeria-hero__copy h1 { max-width: 13ch; }
.galeria-hero__copy .button { margin-block-end: var(--space-3); }
.galeria-hero__note { display: block; color: var(--color-text-muted); }

.galeria-hero__figure {
  z-index: 1;
  grid-column: 3 / 4;
  width: min(100%, 32.5rem);
  min-width: 0;
  margin: var(--space-6) 0 0;
  justify-self: start;
}

.galeria-frame { display: block; overflow: hidden; border-radius: 6px; }
.galeria-frame--hero { border-radius: var(--radius-hero); }
.galeria-frame > img { width: 100%; height: 100%; object-fit: cover; }
.galeria-frame--hero { aspect-ratio: 4 / 5; }
.galeria-frame--wide { aspect-ratio: 16 / 10; }

.galeria-media { min-width: 0; }
.galeria-media__open { position: relative; display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.galeria-media__open .frame { transition: transform var(--transition-base), filter var(--transition-base), border-color var(--transition-base); }
.galeria-media__open:hover .frame { transform: translateY(-2px); filter: brightness(1.06); border-color: rgb(242 232 213 / .34); }
.galeria-media__hint { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid rgb(242 232 213 / .22); border-radius: var(--radius-control); background: rgb(8 12 20 / .8); color: var(--color-ivory-100); font-size: var(--text-small); font-weight: 650; line-height: 1.2; opacity: .94; }
.galeria-media figcaption span { margin-inline-end: var(--space-2); color: var(--color-gold-400); font-weight: 700; letter-spacing: .08em; }

.galeria-board__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); }
.galeria-board__intro { grid-column: 1 / span 4; min-width: 0; max-width: 44ch; }
.galeria-board__figure { grid-column: 6 / span 7; width: 100%; min-width: 0; }
.galeria-board__figure .galeria-frame { aspect-ratio: 4 / 5; }
.galeria-annotations { grid-column: 1 / span 4; display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); }
.galeria-annotation { min-width: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line-dark); }
.galeria-annotation__number { display: block; margin-block-end: var(--space-2); color: var(--color-gold-400); font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .14em; }
.galeria-annotation h3 { margin-block-end: var(--space-2); }
.galeria-annotation p { max-width: 54ch; margin-block-end: 0; }
.galeria-board__disclaimer { max-width: 52ch; margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }

.galeria-landscape { overflow: hidden; }
.galeria-landscape__intro { max-width: var(--container); }
.galeria-landscape__intro > :not(.eyebrow) { max-width: 52ch; }
.galeria-landscape__figure { width: min(100% - (2 * var(--gutter)), var(--container-wide)); margin-block: var(--space-12); }
.galeria-landscape__figure figcaption { width: min(100% - (2 * var(--gutter)), var(--container)); margin-inline: auto; }
.galeria-landscape__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.galeria-landscape__notes > article { min-width: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-sage-300); }
.galeria-landscape__notes h3 { max-width: 20ch; }
.galeria-landscape__notes p { max-width: 42ch; margin-block-end: 0; }

.galeria-challenge__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-12); }
.galeria-challenge__copy { grid-column: 1 / span 5; min-width: 0; max-width: 56ch; }
.galeria-number-list { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); margin-block-end: 0; padding: 0; list-style-position: inside; }
.galeria-number-list li { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-line-dark); }
.galeria-challenge__media { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); align-items: start; gap: var(--space-6); min-width: 0; }
.galeria-challenge__media > figure { min-width: 0; width: 100%; }
.galeria-challenge__media > figure:first-child .galeria-frame { aspect-ratio: 3 / 2; }
.galeria-challenge__secondary { margin-block-start: var(--space-12); }
.galeria-challenge__secondary .galeria-frame { aspect-ratio: 4 / 5; }
.galeria-challenge__closing { grid-column: 1 / span 5; min-width: 0; max-width: 54ch; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-gold-400); }
.galeria-challenge__closing p { margin-block-end: 0; }

.galeria-detail__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); align-items: start; }
.galeria-detail__copy { grid-column: 8 / span 5; min-width: 0; max-width: 56ch; }
.galeria-detail__figure { grid-column: 1 / span 6; grid-row: 1 / span 3; min-width: 0; width: 100%; }
.galeria-detail__figure .galeria-frame { aspect-ratio: 1 / 1; }
.galeria-detail__panel { grid-column: 8 / span 5; min-width: 0; max-width: 34rem; }
.galeria-detail__panel p { margin-block-end: 0; }
.galeria-detail__transition { grid-column: 8 / span 5; max-width: 56ch; margin: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-sage-300); }

.galeria-sequence__intro { max-width: 50ch; margin-inline-start: max(0px, calc((100% - var(--container)) / 2)); }
.galeria-sequence__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-block-start: var(--space-12); }
.galeria-sequence__grid > figure { min-width: 0; width: 100%; margin: 0; }
.galeria-sequence__primary { grid-column: 1 / span 7; }
.galeria-sequence__primary .galeria-frame { aspect-ratio: 4 / 5; max-height: 42rem; }
.galeria-sequence__land { grid-column: 8 / span 5; }
.galeria-sequence__land .galeria-frame { aspect-ratio: 16 / 10; }
.galeria-sequence__challenge { grid-column: 9 / span 3; margin-block-start: var(--space-12) !important; }
.galeria-sequence__challenge .galeria-frame { aspect-ratio: 4 / 5; }
.galeria-sequence__note { margin-block: var(--space-8) 0; color: var(--color-text-muted); font-size: var(--text-small); }

.galeria-facts__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(21.25rem, 5fr); gap: var(--space-12); min-width: 0; padding: var(--space-12); border: 1px solid rgb(145 184 163 / .38); border-radius: var(--radius-panel); background: var(--color-forest-800); box-shadow: var(--shadow-inset), var(--shadow-panel); }
.galeria-facts__main, .galeria-facts__aside { min-width: 0; }
.galeria-facts__main { max-width: 58ch; }
.galeria-facts__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.galeria-facts__aside > * { min-width: 0; margin: 0; }
.galeria-purchase { padding-inline-start: var(--space-6); border-inline-start: 2px solid var(--color-gold-400); max-width: 52ch; }
.galeria-purchase h3 { margin-block-end: var(--space-3); }
.galeria-purchase p { margin-block-end: 0; }
.galeria-facts__cta-copy { max-width: 48ch; }

.galeria-faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-8); }
.galeria-faq__intro { grid-column: 1 / span 5; min-width: 0; max-width: 50ch; }
.galeria-faq__items { grid-column: 1 / span 8; min-width: 0; max-width: 51.25rem; }
.galeria-faq__items details { margin: 0 0 var(--space-3); padding-inline: var(--space-4); border: 1px solid var(--color-line-dark); border-radius: var(--radius-control); background: rgb(16 24 39 / .46); }
.galeria-faq__items summary { min-height: 3.25rem; }
.galeria-faq__items details > :not(summary) { max-width: 60ch; }
.galeria-faq__items p { margin-block-end: 0; }

.galeria-final { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-28); text-align: center; }
.galeria-final__backdrop { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgb(8 12 20 / .72), rgb(23 60 56 / .58)), url('/src/media/solitaire-country-days-alkonyati-vilag.webp'); background-position: center; background-size: cover; }
.galeria-final::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 42%, rgb(184 115 74 / .18), transparent 45%); content: ""; }
.galeria-final__content { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-6); }
.galeria-final__content > * { min-width: 0; margin: 0; }
.galeria-final__content h2 { max-width: 16ch; }
.galeria-final__content p { max-width: 46ch; }
.galeria-final__content .button { min-width: 17.5rem; }

.galeria-lightbox { width: min(100% - 2rem, 70rem); max-width: 70rem; padding: 0; border: 1px solid var(--color-line-dark); border-radius: var(--radius-panel); background: var(--color-ink-900); color: var(--color-text); box-shadow: var(--shadow-elevated); }
.galeria-lightbox::backdrop { background: rgb(8 12 20 / .88); }
.galeria-lightbox__shell { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.galeria-lightbox__bar, .galeria-lightbox__controls { display: flex; min-width: 0; justify-content: space-between; align-items: center; gap: var(--space-3); }
.galeria-lightbox__bar > *, .galeria-lightbox__controls > * { min-width: 0; }
.galeria-lightbox__count, .galeria-lightbox__caption { margin: 0; }
.galeria-lightbox__count { color: var(--color-gold-400); font-size: var(--text-small); font-weight: 700; }
.galeria-lightbox__close { min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-sage-300); border-radius: var(--radius-control); background: transparent; color: var(--color-ivory-100); font-weight: 650; }
.galeria-lightbox__image { width: 100%; max-height: min(68vh, 48rem); object-fit: contain; border-radius: 6px; background: var(--color-ink-950); }
.galeria-lightbox__caption { max-width: 64ch; color: var(--color-text-muted); font-size: var(--text-small); }

@media (max-width: 67.5rem) {
  .galeria-hero__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .galeria-hero__copy { grid-column: 1 / span 3; }
  .galeria-hero__figure { grid-column: 4 / span 5; }
  .galeria-challenge__copy { grid-column: 1 / span 4; }
  .galeria-challenge__media { grid-column: 5 / span 8; }
  .galeria-challenge__closing { grid-column: 1 / span 4; }
  .galeria-detail__copy, .galeria-detail__panel, .galeria-detail__transition { grid-column: 7 / span 6; }
}

@media (max-width: 61.25rem) {
  .galeria-board__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .galeria-board__intro { grid-column: 1 / -1; max-width: 52ch; }
  .galeria-board__figure { grid-column: 3 / span 4; }
  .galeria-annotations { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria-annotations > * { min-width: 0; }
  .galeria-board__disclaimer { grid-column: 1 / -1; }
  .galeria-detail__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .galeria-detail__copy { grid-column: 1 / -1; grid-row: 1; max-width: 56ch; }
  .galeria-detail__figure { grid-column: 1 / span 4; grid-row: 2; }
  .galeria-detail__panel { grid-column: 5 / span 4; grid-row: 2; align-self: center; }
  .galeria-detail__transition { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 56.25rem) {
  .galeria-landscape__notes { grid-template-columns: 1fr; gap: var(--space-6); }
  .galeria-facts__panel { grid-template-columns: 1fr; gap: var(--space-8); }
  .galeria-faq__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .galeria-faq__intro { grid-column: 1 / span 5; }
  .galeria-faq__items { grid-column: 1 / -1; }
}

@media (max-width: 53.75rem) {
  .galeria-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .galeria-hero__copy, .galeria-hero__figure { grid-column: 1; }
  .galeria-hero__figure { margin: 0; }
  .galeria-challenge__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .galeria-challenge__copy { grid-column: 1 / -1; }
  .galeria-challenge__media { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria-challenge__secondary { margin-block-start: 0; }
  .galeria-challenge__closing { grid-column: 1 / -1; }
}

@media (max-width: 47.9375rem) {
  .galeria-hero { padding-block: var(--space-16); }
  .galeria-hero__copy h1 { max-width: 12ch; font-size: clamp(2.625rem, 12vw, 3.625rem); }
  .galeria-hero__figure { width: min(100%, 32.5rem); }
  .galeria-board__grid,
  .galeria-challenge__grid,
  .galeria-detail__grid,
  .galeria-faq__grid,
  .galeria-sequence__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .galeria-board__intro, .galeria-board__figure, .galeria-annotations, .galeria-challenge__copy, .galeria-challenge__media, .galeria-challenge__closing, .galeria-detail__copy, .galeria-detail__figure, .galeria-detail__panel, .galeria-detail__transition, .galeria-faq__intro, .galeria-faq__items, .galeria-sequence__primary, .galeria-sequence__land, .galeria-sequence__challenge { grid-column: 1; grid-row: auto; }
  .galeria-board__figure { width: min(100%, 32.5rem); }
  .galeria-annotations { display: flex; gap: var(--space-6); }
  .galeria-landscape__figure { margin-block: var(--space-8); }
  .galeria-challenge__media { display: flex; flex-direction: column; gap: var(--space-8); }
  .galeria-challenge__media > figure { width: 100%; }
  .galeria-challenge__secondary { margin: 0; }
  .galeria-detail__figure { width: min(100%, 27.5rem); }
  .galeria-detail__panel { max-width: none; }
  .galeria-sequence__intro { margin-inline: 0; }
  .galeria-sequence__grid { margin-block-start: var(--space-8); }
  .galeria-sequence__challenge { margin: 0 !important; }
  .galeria-facts__panel { padding: var(--space-6); }
  .galeria-purchase { padding-block-start: var(--space-4); padding-inline-start: 0; border-block-start: 2px solid var(--color-gold-400); border-inline-start: 0; }
  .galeria-facts__aside { align-items: stretch; }
  .galeria-faq__items details { padding-inline: var(--space-3); }
  .galeria-final { padding-block: var(--space-16); }
  .galeria-final__backdrop { background-image: linear-gradient(rgb(8 12 20 / .82), rgb(23 60 56 / .72)), url('/src/media/solitaire-country-days-alkonyati-vilag.webp'); background-position: center bottom; }
  .galeria-final__content .button { width: 100%; min-width: 0; }
  .galeria-lightbox { width: min(100% - 1rem, 70rem); }
  .galeria-lightbox__bar, .galeria-lightbox__controls { align-items: stretch; flex-direction: column; }
  .galeria-lightbox__close, .galeria-lightbox__controls .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-media__open .frame { transition: none; }
  .galeria-media__open:hover .frame { transform: none; }
}
