/* BRADOBREY — позиціонування, навігація та сторінка «Хто він?» */
:root {
  --sv-header-height: 5.9rem;
  --sv-header-gap: 1.8rem;
  --sv-about-avatar-size: 195px;
  --sv-about-section-gap: 0.6rem;
  --sv-about-content-width: 850px;
}

html {
  scroll-padding-top: calc(var(--sv-header-height) + var(--sv-header-gap));
}
body {
  padding-top: 0 !important;
}
section.menu {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
}

section.image3,
section.image01,
#about,
#contacts,
#page-intro {
  scroll-margin-top: calc(var(--sv-header-height) + var(--sv-header-gap));
}

.bradobrey-page-intro {
  margin: 0 !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.65rem !important;
}
.bradobrey-page-intro h1 {
  margin-bottom: 0.25rem !important;
}

/* Сторінка «Хто він?»: однакова права межа всіх текстів. */
.about-hero {
  padding-top: 0.75rem !important;
  padding-bottom: 0.55rem !important;
}
.about-hero > .container,
.about-section > .container {
  max-width: var(--sv-about-content-width) !important;
}
.about-hero .row {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.about-avatar {
  flex: 0 0 30% !important;
  max-width: 30% !important;
  padding-left: 0 !important;
  padding-right: 0.7rem !important;
}
.about-avatar img {
  width: var(--sv-about-avatar-size) !important;
  max-width: var(--sv-about-avatar-size) !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}
.about-lead {
  flex: 0 0 70% !important;
  max-width: 70% !important;
  padding: 0.2rem 0 0.2rem 0.7rem !important;
}
.about-lead h1 {
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  margin-bottom: 0.4rem !important;
}
.about-lead p,
.about-text p {
  text-align: justify !important;
  text-align-last: left;
}
.about-section {
  padding-top: var(--sv-about-section-gap) !important;
  padding-bottom: var(--sv-about-section-gap) !important;
}
.about-text h2 {
  margin-bottom: 0.3rem !important;
}
.about-text p {
  margin-bottom: 0.4rem !important;
}

@media (max-width: 991.98px) {
  :root {
    --sv-header-height: 4.1rem;
    --sv-header-gap: 0.85rem;
    --sv-about-avatar-size: 165px;
  }
  .about-avatar,
  .about-lead {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .about-lead {
    padding-top: 0.45rem !important;
  }
  .about-lead h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
}

/* Додатковий запас над цільовим постером під час переходу з меню. */
section.image3,
section.image01 {
  scroll-margin-top: calc(var(--sv-header-height) + var(--sv-header-gap)) !important;
}


/* BRADOBREY v8 — прибрати тонку смугу під навігаційною панеллю. */
section.menu,
section.menu .navbar,
section.menu .navbar-dropdown {
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
section.menu::after,
section.menu .navbar::after {
  content: none !important;
  display: none !important;
}


/* BRADOBREY — додаткові параметри оформлення постерів і аватара. */
:root {
  --sv-poster-shadow-x: 0px;
  --sv-poster-shadow-y: 0px;
  --sv-poster-shadow-blur: 9px;
  --sv-poster-shadow-spread: 0px;
  --sv-poster-shadow-color: rgba(0, 0, 0, 0.32);
  --sv-poster-outline-width: 1px;
  --sv-poster-outline-color: rgba(255, 245, 210, 0.12);
  --sv-avatar-rotation-duration: 32s;
}

section.image3 .image-wrapper,
section.image01 .image-wrapper {
  box-shadow:
    var(--sv-poster-shadow-x)
    var(--sv-poster-shadow-y)
    var(--sv-poster-shadow-blur)
    var(--sv-poster-shadow-spread)
    var(--sv-poster-shadow-color) !important;
  outline: var(--sv-poster-outline-width) solid var(--sv-poster-outline-color);
}

.about-avatar img.bradobrey-spinning-avatar {
  display: block;
  animation-name: bradobrey-avatar-spin !important;
  animation-duration: var(--sv-avatar-rotation-duration) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}
.about-avatar img.bradobrey-spinning-avatar:hover { animation-play-state: paused !important; }
@keyframes bradobrey-avatar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* BRADOBREY v16 — параметри плавності інтерфейсу. */
:root {
  --sv-story-transition-duration: 420ms;
  --sv-story-transition-easing: ease-in-out;
  --sv-playlist-scroll-duration: 720ms;
}

/* Плавніше розгортання та згортання історій без зміни логіки Bootstrap. */
.panel-collapse.collapsing {
  transition-property: height !important;
  transition-duration: var(--sv-story-transition-duration) !important;
  transition-timing-function: var(--sv-story-transition-easing) !important;
}


/* BRADOBREY — мобильная кнопка разворота постеров на весь экран. */
.poster-fullscreen-toggle {
  display: none;
}

.poster-fullscreen-overlay {
  display: none;
}

@media (max-width: 991.98px) {
  .audio-poster,
  .video-poster {
    position: relative;
  }

  .poster-fullscreen-toggle {
    position: absolute;
    right: 10px;
    bottom: 12px;
    z-index: 30;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .poster-fullscreen-toggle svg,
  .poster-fullscreen-close svg {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
  }

  .poster-fullscreen-overlay,
  .poster-fullscreen-overlay:fullscreen,
  .poster-fullscreen-overlay:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    width: var(--poster-fs-width, 100vw) !important;
    height: var(--poster-fs-height, 100vh) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #000 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .poster-fullscreen-overlay.is-open,
  .poster-fullscreen-overlay:fullscreen,
  .poster-fullscreen-overlay:-webkit-full-screen {
    display: flex !important;
  }

  .poster-fullscreen-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .poster-fullscreen-play {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 2147483647 !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  .poster-fullscreen-play img {
    display: block !important;
    width: 56px !important;
    height: auto !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  .poster-fullscreen-overlay.media-playing .poster-fullscreen-play {
    opacity: .28 !important;
  }

  .poster-fullscreen-video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
  }

  .poster-fullscreen-overlay.media-started .poster-fullscreen-image {
    display: block !important;
    pointer-events: none !important;
  }

  .poster-fullscreen-overlay.media-started .poster-fullscreen-video {
    display: block !important;
  }

  .poster-fullscreen-close {
    position: fixed !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.62) !important;
    color: #fff !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.poster-fullscreen-open {
    overflow: hidden !important;
    touch-action: none;
  }
}

/* BRADOBREY — прогресс полноэкранного мобильного плейлиста. */
@media (max-width: 991.98px) {
  .poster-fullscreen-progress {
    position: fixed !important;
    left: var(--poster-progress-left, max(18px, env(safe-area-inset-left))) !important;
    right: var(--poster-progress-right, max(18px, env(safe-area-inset-right))) !important;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)) !important;
    z-index: 2147483647 !important;
    height: 5px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.32) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  .poster-fullscreen-progress-fill {
    display: block !important;
    width: 0;
    height: 100% !important;
    background: #d71920 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
  }
}