/* Плашка и галерея Digital Design. */
.site-canvas > .digital-section { width: 100%; height: auto; min-height: 0; padding: 5px 64px 36px; }
.digital-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; min-height: 300px; padding: 32px; border: 0; border-radius: 24px; background: #1b1722; overflow: hidden; }
.digital-kicker { font-size: 12px; color: #b99aff; letter-spacing: .06em; margin-bottom: 12px; }
.digital-banner h2, .digital-dialog h2 { font-size: 32px; font-weight: 400; margin-bottom: 16px; }
.digital-banner__copy > p:not(.digital-kicker), .digital-intro { font-size: 14px; line-height: 1.8; font-weight: 300; color: #c6becd; }
.digital-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 24px; padding: 14px 24px; border: 2px solid var(--color-accent); border-radius: 100px; background-color: transparent; color: var(--color-text); font-size: 14px; font-weight: 500; line-height: normal; transition: background-color 260ms ease, color 260ms ease; }
.digital-button:hover, .digital-button:focus-visible { background: #b99aff; color: #141218; }
.digital-dialog { margin: auto; width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 36px; overflow: auto; background: #141218; color: #f5f1f7; border: 0; border-radius: 24px; scrollbar-color: #8f74bb #141218; scrollbar-width: thin; color-scheme: dark; }
.digital-dialog::backdrop { background: #09070fcc; }
.digital-close { position: absolute; right: 12px; top: 8px; width: 40px; height: 40px; font-size: 26px; }
.digital-intro { max-width: 720px; margin-bottom: 28px; }
@media(max-width: 999px) { .site-canvas > .digital-section { padding: 0 var(--page-padding) 36px; } }
@media(max-width: 700px) { .digital-banner { grid-template-columns: 1fr; padding: 24px; gap: 20px; } .digital-grid { grid-template-columns: 1fr; } .digital-dialog { padding: 28px 20px; } .digital-banner h2, .digital-dialog h2 { font-size: 26px; } }

.digital-posters { margin-bottom: 36px; }
.digital-dashboard { margin-bottom: 36px; }
.digital-dashboard h3 { font-size: 20px; font-weight: 400; margin-bottom: 10px; }
.digital-dashboard p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--color-muted); margin-bottom: 20px; }
.digital-dashboard img { display: block; width: 100%; height: auto; border-radius: 12px; }
.digital-posters > h3 { font-size: 20px; font-weight: 400; margin-bottom: 20px; }
.digital-posters__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1008px; margin-inline: auto; }
.digital-posters figure { margin: 0; min-width: 0; }
.digital-posters img { display: block; width: 100%; height: auto; border-radius: 12px; }
.digital-posters figcaption { margin-top: 12px; font-size: 14px; font-weight: 300; color: var(--color-muted); }
@media(max-width: 700px) { .digital-posters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media(max-width: 440px) { .digital-posters__grid { grid-template-columns: 1fr; max-width: 240px; } }

/* Один крупный экран и переключение коллекций без изменения высоты галереи. */
.digital-profile__screen { margin: 0; }
.digital-profile__screen > img { aspect-ratio: 16 / 9; object-fit: contain; background: #0b0e15; }
.digital-profile figcaption { margin-top: 12px; color: var(--color-muted); font-size: 14px; }
.digital-profile__thumbnails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.digital-profile__thumbnails button { min-width: 0; padding: 6px; text-align: left; border: 1px solid transparent; border-radius: 10px; }
.digital-profile__thumbnails button:is(:hover, :focus-visible, [aria-pressed="true"]) { border-color: var(--color-accent); }
.digital-profile__thumbnails img { aspect-ratio: 16 / 9; object-fit: contain; border-radius: 6px; }
.digital-profile__thumbnails span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; }
@media(max-width: 700px) { .digital-profile__thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.digital-intro a { color: inherit; text-decoration: underline; text-decoration-color: #b99aff80; text-underline-offset: 4px; }
.digital-intro a:hover, .digital-intro a:focus-visible { color: #b99aff; }

/* Компактные серии баннеров; используется также для будущих подборок. */
.digital-banners h3 { line-height: 1.5; margin-bottom: 20px; }
.digital-banners__screen { max-width: 780px; margin: 0 auto; }
.digital-banners__screen img { aspect-ratio: 2.5; object-fit: contain; background: #111; }
.digital-banners__screen figcaption { margin-top: 10px; font-size: 12px; color: var(--color-muted); }
.digital-banners__thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 780px; margin: 16px auto 0; }
.digital-banners__thumbnails button { min-width: 0; padding: 4px; border: 1px solid transparent; border-radius: 10px; }
.digital-banners__thumbnails button:is(:hover, :focus-visible, [aria-pressed="true"]) { border-color: var(--color-accent); }
.digital-banners__thumbnails img { aspect-ratio: 2.5; object-fit: contain; border-radius: 6px; }
@media(max-width: 700px) { .digital-banners__thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.digital-elysium > h3 { margin-bottom: 20px; }
.digital-elysium__cover { margin-bottom: 32px; }
.digital-elysium h4 { font-size: 16px; font-weight: 400; line-height: 1.5; margin-bottom: 20px; }
.digital-elysium > section:last-child { margin-bottom: 0; }

#digital-futurama .digital-banners__screen img, #digital-futurama .digital-banners__thumbnails img { aspect-ratio: 1920 / 639; }

/* Отобранные работы Elysium: три строки по пять баннеров. */
.digital-elysium .digital-banners__thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.digital-elysium__reset { color: var(--color-accent); font-size: 12px; text-decoration: underline; }
@media(max-width: 700px) { .digital-elysium .digital-banners__thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.digital-banner__preview { min-width: 0; }
.digital-banner__preview img { display: block; width: 100%; height: auto; border-radius: 11px; }

@media(max-width: 999px) { .site-canvas > .works__section { padding-bottom: 20px; } }