/* ================================================================
   harmonies_site/static/css/profile.css
   ---------------------------------------------------------------
   PROFILE — ONLY PROFILE-SPECIFIC STYLES
   ----------------------------------------------------------------
   Global owns:
   - Forms, inputs, checkboxes/radios, card borders
   - Shared utilities: .bh-card, .thumb, .file-preview, .file-pill, etc.
   - Global buttons, alerts, navbar
   ----------------------------------------------------------------
   This file keeps ONLY:
   - Wagtail richtext sizing in the profile form layout
   - BH2026 promo carousel sizing + counter + arrows
   ================================================================ */


/* ================================================================
   1) RichText editors sizing (Wagtail Draftail)
   ================================================================ */
.profile-wide .w-richtext,
.profile-wide .Draftail-Editor,
.profile-wide .DraftEditor-root{
  width: 100%;
  min-height: 220px;
}

/* Ensures any plain textarea in the profile-wide column fills */
.profile-wide textarea{
  width: 100%;
}


/* ================================================================
   2) Promo carousel (BH2026 profile section)
   ================================================================ */

/* Carousel images inside slides */
.promo-carousel-img{
  width: 100%;
  height: 320px;
  object-fit: contain;

  border-radius: 12px;

  /* Use GLOBAL border + surface tokens (prevents mismatch across pages) */
  border: 1px solid var(--bh-surface-border);
  background: rgba(0,0,0,.03);

  display: block;
}

/* Carousel arrows (keep your red) */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color: #dc3545;
  filter: none;
}

/* Slide counter (top-right) */
.promo-counter{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;

  padding: .25rem .5rem;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .85rem;

  user-select: none;
}

/* Keep buttons above carousel overlays */
.promo-btn-row{
  position: relative;
  z-index: 5;
}

/* Small spacing so carousel doesn't touch button row */
#promoCarousel{
  padding-bottom: .25rem;
}

/* =========================================
   Album cover (public album detail)
   ========================================= */
.bh-album-cover{
  width: 100%;
  max-height: 300px;        /* desktop limit */
  object-fit: contain;
  object-position: center;
}

@media (max-width: 576px){
  .bh-album-cover{
    max-height: 280px;
  }
}