﻿.profile-album { position: relative; margin-block: 16px 28px; }
.profile-album-stage { position: relative; overflow: hidden; border-radius: 18px; background: #0c0b0e; }
.profile-album-image { display: block; width: 100%; height: clamp(320px, 55vw, 520px); object-fit: cover; }
.profile-album-toolbar { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.profile-album-toolbar span { position: absolute; top: 18px; left: 18px; padding: 8px 12px; border-radius: 99px; background: #0b090bbb; color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; }
.profile-album-toolbar button { position: absolute; top: 45%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff66; background: #0b090bbb; color: #fff; cursor: pointer; font-size: 1.3rem; pointer-events: auto; }
.profile-album-toolbar button:first-child { left: 12px; }
.profile-album-toolbar button:last-child { right: 12px; }
.profile-album-toolbar button:hover { background: #0b090bee; }
.profile-album button:focus-visible { outline: 2px solid var(--accent-2, #f4ccbc); outline-offset: 3px; }
.dialog-profile-hero.profile-carousel-hero { display: block; padding: 0; min-height: 0; margin: 0 -18px 24px; }
.profile-carousel-hero .profile-album-stage { border-radius: 5px; }
.dialog-profile-hero.profile-carousel-hero::after { z-index: 0; pointer-events: none; }
.profile-carousel-hero .dialog-profile-identity { position: absolute; bottom: 30px; left: 30px; right: 24px; max-width: none; z-index: 1; pointer-events: none; }
.profile-carousel-hero .dialog-bite-counter { z-index: 3; }
@media (max-width: 600px) {
  .profile-album-image { height: clamp(340px, 110vw, 480px); }
  .profile-carousel-hero .dialog-profile-identity { bottom: 24px; left: 22px; right: 22px; }
}
