/* Booking & Beyond — aplicações oficiais do kit de marca. */
.bb-brand-signature {
  position: relative;
  z-index: 4;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  aspect-ratio: 1 / 1;
  color: inherit;
  text-decoration: none;
}

.bb-brand-signature picture,
.bb-brand-signature img {
  display: block;
  width: 100%;
  height: 100%;
}

.bb-brand-signature img {
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-header {
  --bb-nav-header-height: calc(144px + var(--bb-safe-top, 0px));
  height: calc(144px + var(--bb-safe-top, 0px));
}

html { scroll-padding-top: calc(152px + var(--bb-safe-top, 0px)); }

.site-header > .bb-brand-signature--header {
  width: 128px;
  height: 128px;
  margin-right: clamp(8px, 1.1vw, 18px);
  overflow: hidden;
  background: #050505;
}

/* The official file contains a large empty black perimeter. This safe 1.30x
   presentation keeps every white pixel inside the square while making the
   supplied lettering readable; the source file itself remains untouched. */
.site-header > .bb-brand-signature--header img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

.bb-brand-signature--footer {
  width: 168px;
  height: 168px;
}

/* The supplied artwork is square. Every placement preserves the full image,
   including its black breathing room and the two lines in the signature. */
.about-signature > img {
  width: 184px;
  height: 184px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.about-signature .about-mark { margin-left: 0; }

.bb-brand-signature:focus-visible {
  outline: 3px solid #78e6a4;
  outline-offset: 5px;
  border-radius: 4px;
}

/* Readable supporting copy on dark brand surfaces. */
.site-footer,
.site-footer p,
.site-footer button,
.site-footer a,
.about-tag,
.profile-note,
.press-note,
.contact-grid p {
  --bb-readable-muted: #9da09b;
}

.site-footer p,
.site-footer button,
.site-footer a,
.about-tag,
.profile-note,
.press-note,
.contact-grid p { color: var(--bb-readable-muted) !important; }

.featured-role,
.featured-edition { color: #555953 !important; }
.featured .kicker,
.artists .press-note { color: #555953 !important; }
.featured-copy h2 .featured-qualifier {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(23px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.featured-rail button:not(.active) { color: #525650 !important; }
.featured-rail button.active { color: #fff !important; }
.service-summary > b { color: #969b96 !important; }
.bb-nav-intro-copy button { min-height: 44px !important; }
.social-link[hidden],
.footer-network a[hidden] { display: none !important; }

/* WCAG-sized controls. */
.chat-close,
.close-cookie-settings,
.artist-modal-v2 .close,
.featured-nav button,
.service-toggle,
.studio-action,
.sidebar-close,
.group-navigation button,
.field-reset,
.image-upload-button,
.sidebar-open,
.viewport-switcher button,
.open-preview,
.dialog-close,
.dialog-actions button,
.catalog-primary-button,
.catalog-secondary-button,
.catalog-delete-button,
.catalog-back-button,
.catalog-icon-button,
.catalog-toggle,
.category-row > .catalog-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
}

.field-reset { display: inline-flex; align-items: center; justify-content: flex-end; }
.studio-connection small,
.field-group > summary small,
.field-meta,
.image-hint span,
.image-upload-control small,
.save-state small,
.sidebar-footer > p,
.stage-title small,
.preview-chrome small,
.stage-footer,
.catalog-field-hint,
.catalog-rights-note,
.catalog-image-tools small,
.catalog-stats span,
.catalog-artist-main small { color: #9ba19d !important; }

@media (max-width: 1180px) {
  html { scroll-padding-top: calc(128px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(120px + var(--bb-safe-top, 0px));
    height: calc(120px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header { width: 104px; height: 104px; }
  .bb-brand-signature--footer { width: 152px; height: 152px; }
  .about-signature > img { width: 144px; height: 144px; }
}

@media (min-width: 700px) and (max-width: 1180px) {
  .site-header > .header-support { display: none !important; }
  .site-header > .header-cta {
    display: inline-flex !important;
    max-width: 138px;
    padding-inline: 13px 5px !important;
    font-size: 11px;
  }
}

@media (max-width: 699px) {
  html { scroll-padding-top: calc(106px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(100px + var(--bb-safe-top, 0px));
    height: calc(100px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header {
    width: 84px;
    min-width: 84px;
    height: 84px;
    margin-right: auto;
  }

  .site-header > .header-support { display: none !important; }
  .site-header > .header-cta {
    display: inline-flex !important;
    width: clamp(100px, 27vw, 108px) !important;
    min-width: 0 !important;
    flex: 0 1 clamp(100px, 27vw, 108px) !important;
    gap: 3px;
    padding: 4px 3px 4px 8px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .site-header > .header-cta > span:last-child {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .site-header > .header-account[data-account-open],
  .site-header > .header-cta,
  .site-header .bb-nav-trigger {
    height: 44px !important;
    min-height: 44px !important;
  }

  .bb-brand-signature--footer { width: 136px; height: 136px; }
  .about-signature > img { width: 128px; height: 128px; }
}

@media (max-width: 420px) {
  .about-signature > img {
    display: block;
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 380px) {
  html { scroll-padding-top: calc(94px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(88px + var(--bb-safe-top, 0px));
    height: calc(88px + var(--bb-safe-top, 0px));
    padding-inline: max(8px, var(--bb-safe-left, 0px)) max(8px, var(--bb-safe-right, 0px)) !important;
    column-gap: 2px !important;
  }
  .site-header > .bb-brand-signature--header {
    width: 72px;
    min-width: 72px;
    height: 72px;
  }

  .bb-brand-signature--footer { width: 120px; height: 120px; }
  .about-signature > img { width: 112px; height: 112px; }
}

@media (max-width: 350px) {
  .site-header {
    padding-inline: max(5px, var(--bb-safe-left, 0px)) max(5px, var(--bb-safe-right, 0px)) !important;
    column-gap: 1px !important;
  }

  .site-header > .header-cta {
    width: 100px !important;
    flex-basis: 100px !important;
  }
}

/* 280 px ainda aparece em alguns telemóveis, janelas divididas e ampliação
   do navegador. Mantemos todas as cinco entradas do cabeçalho, mas o CTA
   passa a usar a sua seta com o nome acessível completo fora do ecrã. */
@media (max-width: 300px) {
  .site-header > .header-cta {
    width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50%;
  }

  .site-header > .header-cta > span:first-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .site-header > .header-cta > span:last-child {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}

@media (min-width: 1920px) {
  html { scroll-padding-top: calc(172px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(164px + var(--bb-safe-top, 0px));
    height: calc(164px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header { width: 148px; height: 148px; }
  .bb-brand-signature--footer { width: 192px; height: 192px; }
  .about-signature > img { width: 208px; height: 208px; }
}

@media (min-width: 2560px) {
  html { scroll-padding-top: calc(200px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(192px + var(--bb-safe-top, 0px));
    height: calc(192px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header { width: 176px; height: 176px; }
  .bb-brand-signature--footer { width: 216px; height: 216px; }
  .about-signature > img { width: 240px; height: 240px; }
}

@media (min-width: 3200px) {
  html { scroll-padding-top: calc(232px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(224px + var(--bb-safe-top, 0px));
    height: calc(224px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header { width: 208px; height: 208px; }
  .bb-brand-signature--footer { width: 256px; height: 256px; }
  .about-signature > img { width: 280px; height: 280px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  html { scroll-padding-top: calc(76px + var(--bb-safe-top, 0px)); }
  .site-header {
    --bb-nav-header-height: calc(68px + var(--bb-safe-top, 0px));
    height: calc(68px + var(--bb-safe-top, 0px));
  }
  .site-header > .bb-brand-signature--header {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { will-change: auto !important; }
}

@media (forced-colors: active) {
  .bb-brand-signature { outline: 1px solid CanvasText; }
}