/* =============================================================================
   BANNER
   -----------------------------------------------------------------------------
   Heights and colours come from include/config/settings/banner/banner_settings.php,
   emitted as custom properties on the banner element by banner_css_vars(). The
   fallbacks after each var() are what you get if that inline style is missing.

   This file must contain ONE copy of each rule below. If .banner-identity or
   .profile-photo-wrap appears more than once, a later duplicate wins and the
   layout silently reverts — check with:
       grep -n "banner-identity\|profile-photo-wrap" banner.css
   ============================================================================= */


/* ---- the banner ---------------------------------------------------------- */

.responsive-banner {
    position: relative;
    width: 100%;

    /* The height follows the width at the crop ratio, so what the person
       framed is exactly what shows. A fixed height on a full-width element
       cannot do this — cover would trim whatever does not fit. */
    aspect-ratio: var(--banner-ratio, 3);
    height: auto;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* No banner uploaded. Without this the element has no background at all, so
   white identity text lands on the page background and disappears. */
.responsive-banner.is-empty {
    background-color: var(--banner-empty, #2b3440);
}

/* A photo can be pale wherever the text happens to sit, so darken the bottom
   rather than trying to detect the image's colour. */
.responsive-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top,
    rgba(0, 0, 0, var(--banner-scrim, 0.55)),
    rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* Keep the photo, name and controls above the scrim. */
.responsive-banner > .container {
    position: relative;
    z-index: 1;
    height: 100%;
}


/* ---- photo + name -------------------------------------------------------- */

/* The row that puts the name to the RIGHT of the photo. Its direct children
   are .profile-photo-wrap and .banner-name — if anything else wraps the photo
   on the way in from Profile::gen_banner(), that wrapper becomes the flex item
   instead and the name drops underneath. */
.banner-identity {
    display: inline-flex;      /* shrinks to the photo instead of filling */
    flex-direction: column-reverse;
    align-items: center;       /* name and photo share a centre axis */
    gap: 8px;
    min-width: 0;
}
.banner-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.banner-name-text {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---- banner edit control (the banner's own camera) ----------------------- */

/* Top-right of the banner, clear of the identity row.

   This used to also match .responsive-banner .btn-upload-image, which caught
   the PROFILE PHOTO camera as well — same class, same specificity as the
   .profile-photo-wrap rules below, so which one won came down to file order.
   Scoped to the wrapper only, the two controls can no longer collide. */
.banner-edit-control {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
}


/* ---- crop editor --------------------------------------------------------- */

/* Replaces the banner while cropping, so it needs a comparable height or the
   crop box opens too small to aim with. Cropper.js sizes the image itself —
   do NOT set width/height on the <img> inside. */
[id^="cropper-container-"] {
    width: 100%;
    max-height: 420px;
    background: #1b1f24;
}

[id^="cropper-container-"] > img {
    display: block;
    max-width: 100%;
}

[id^="btn-control-"] {
    padding: 8px 0;
}


/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 768px) {
    .banner-name-text             { font-size: 18px; }
    .banner-identity              { gap: 10px; }
    [id^="cropper-container-"]    { max-height: 260px; }
}

@media (max-width: 480px) {
    .banner-name-text             { font-size: 16px; }
}

/* =============================================================================
   BANNER EDIT MENU
   -----------------------------------------------------------------------------
   The single "Edit cover photo" button and its dropdown, sitting at the
   banner's top-right.
   ============================================================================= */

/* The wrapper is positioned by .banner-edit-control above. This keeps the
   dropdown itself above the banner's scrim and the identity row, which both
   sit at z-index 1. */
.banner-edit-menu {
    position: relative;
    z-index: 3;
}

.banner-edit-menu > .btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.banner-edit-menu > .btn:hover {
    background: #fff;
}

/* The upload item is a <label> wrapping a hidden file input, so it needs the
   pointer and alignment a dropdown-item link gets for free. */
.banner-edit-menu .banner-menu-upload {
    cursor: pointer;
    margin: 0;
}

/* Hidden when the action no longer applies — e.g. Remove after removing. */
.banner-edit-menu li.hide {
    display: none !important;
}

@media (max-width: 576px) {
    /* On a phone the label costs more than it explains; the icon carries it. */
    .banner-edit-menu > .btn        { padding: 4px 8px; }
    .banner-edit-menu > .btn .label { display: none; }
}

/* ---- profile photo + its camera ------------------------------------------ */

/* Written by core/profile/main.php as
   <div class="profile-photo-wrap shape-circle|shape-square" id="profile-photo-container">.
   The class carries the layout; the id stays for the croppie plugin. */
.profile-photo-wrap {
    position: relative;
    display: inline-block;
    flex: none;              /* the name takes the leftover width, not the photo */
    line-height: 0;          /* kills the inline-block descender gap */
}

/* Top-right corner of the photo. Scoped to the wrapper so it cannot catch the
   banner's own upload control, which uses the same class. */
.profile-photo-wrap .btn-upload-image,
.profile-photo-wrap > label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;            /* in case an older bottom-right copy is still around */
    left: auto;
    margin: 0;
    z-index: 2;
    line-height: 1;
}

/* A round avatar has nothing at the bounding-box corner, so a button at 0,0
   floats off the edge of the disc. Inset it to where the curve actually is. */
.profile-photo-wrap.shape-circle .btn-upload-image,
.profile-photo-wrap.shape-circle > label {
    top: 6%;
    right: 6%;
}

.profile-photo-wrap .btn,
.profile-photo-wrap .btn-primary {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}