/* ============================================================
   EV Profile Banner (Cover-style) — Fixed + Mobile Friendly
   ============================================================ */

/* Banner wrapper */
.ev-profile-banner{
  position: relative;
  width: 100%;

  /* Smooth responsive height:
     desktop ~400px, tablet ~260px, mobile ~200px */
  height: clamp(200px, 32vw, 400px);

  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.55);
  background: #000;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);

  /* Overlap the profile panel (adjusted responsively below) */
  margin: 0 0 -70px 0;
}

/* Cinematic shading for readability */
.ev-profile-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.20) 45%,
    rgba(0,0,0,0.55) 80%,
    rgba(0,0,0,0.85) 100%
  );
}

/* Banner image (no stretching) */
.ev-profile-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------
   Attach the first panel to the banner
   (phpBB markup varies, so keep selectors flexible)
   ------------------------------------------------------------ */

/* Remove the "double rounded" look where panel meets banner */
.ev-profile-banner + form .panel:first-of-type,
.ev-profile-banner + form > .panel:first-of-type{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* If your style uses .inner rounded corners, flatten those too */
.ev-profile-banner + form .panel:first-of-type .inner{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ------------------------------------------------------------
   Avatar overlap (safe + responsive)
   ------------------------------------------------------------ */

.ev-profile-banner + form .profile-avatar{
  position: relative;
  z-index: 3;

  /* Pull into banner area */
  margin-top: -95px;
}

.ev-profile-banner + form .profile-avatar img{
  display: inline-block;
  max-width: 100%;
  height: auto;

  border: 3px solid rgba(0,0,0,0.75);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(176, 68, 122, 0.25);
}

/* Keep text/rank from getting hidden behind overlap */
.ev-profile-banner + form .avatar-rank-container,
.ev-profile-banner + form .profile-details{
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   Hint text (UCP upload page)
   ------------------------------------------------------------ */
.ev-banner-hint{
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9em;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   Responsive tuning
   ------------------------------------------------------------ */

/* Tablet */
@media (max-width: 900px){
  .ev-profile-banner{
    margin-bottom: -55px;
  }
  .ev-profile-banner + form .profile-avatar{
    margin-top: -70px;
  }
}

/* Phones */
@media (max-width: 600px){
  .ev-profile-banner{
    margin-bottom: -40px;
    border-radius: 7px;
  }
  .ev-profile-banner + form .profile-avatar{
    margin-top: -55px;
  }
}

/* Very small phones */
@media (max-width: 420px){
  .ev-profile-banner{
    margin-bottom: -30px;
  }
  .ev-profile-banner + form .profile-avatar{
    margin-top: -45px;
  }
}

/* ================================
   MOBILE FIX (put at VERY bottom)
   ================================ */

/* Phones/tablets */
@media (max-width: 700px){

  /* Make banner behave like a normal cover on mobile */
  .ev-profile-banner{
    height: 220px !important;     /* adjust if you want: 200–240 */
    margin-bottom: 0 !important;  /* IMPORTANT: stop the big overlap on mobile */
    border-radius: 8px !important;
  }

  /* Keep the image centered nicely */
  .ev-profile-banner img{
    object-position: center center !important;
  }

  /* Reduce avatar pull-up so it doesn't fight the banner */
  .ev-profile-banner + form .profile-avatar{
    margin-top: -35px !important;
  }
}

/* Small phones */
@media (max-width: 480px){

  .ev-profile-banner{
    height: 190px !important;
  }

  .ev-profile-banner + form .profile-avatar{
    margin-top: -28px !important;
  }
}

/* ===============================
   Show FULL banner image on mobile
   =============================== */

@media (max-width: 700px){

  .ev-profile-banner{
    height: auto !important;      /* let image control height */
    margin-bottom: -20px !important;  /* slight overlap only */
  }

  .ev-profile-banner img{
    height: auto !important;
    object-fit: contain !important;  /* SHOW FULL IMAGE */
    background: #000;                /* fills empty space nicely */
  }

  /* reduce avatar pull-up */
  .ev-profile-banner + form .profile-avatar{
    margin-top: -40px !important;
  }
}

@media (max-width: 480px){

  .ev-profile-banner + form .profile-avatar{
    margin-top: -30px !important;
  }
}