/* ==========================================================
   BANNERS.CSS — FINAL PRO
========================================================== */

:root{
  --banner-radius-desktop: 22px;
  --banner-radius-tablet: 16px;
  --banner-radius-mobile: 12px;

  --banner-margin-top: 24px;
  --banner-margin-bottom: 60px;

  --home-hero-gap-desktop: var(--layout-home-gap-desktop);
  --home-hero-gap-tablet: var(--layout-home-gap-tablet);
  --home-hero-gap-mobile: var(--layout-home-gap-mobile);

  --home-hero-radius-desktop: 26px;
  --home-hero-radius-tablet: 22px;
  --home-hero-radius-mobile: 18px;
}

/* ==========================================================
   BASE HERO / PROFILE
========================================================== */

.hero-banner,
.hero-small,
.profile-banner{
  width: calc(100% - (var(--layout-gap-desktop) * 2));
  max-width: var(--layout-hero-width);
  margin: var(--banner-margin-top) auto var(--banner-margin-bottom);

  border-radius: var(--banner-radius-desktop);
  box-shadow: var(--shadow);

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

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-home{
  --home-hero-inline-gap: var(--home-hero-gap-desktop);
  --home-hero-radius: var(--home-hero-radius-desktop);
  margin-top: var(--layout-home-gap-desktop);
  margin-bottom: var(--layout-home-gap-desktop);
}

body[data-page-chrome="home"] .profile-banner{
  margin-top: 0;
}

body[data-page-chrome="home"] .hero-small{
  margin-top: 0;
}

/* HEIGHTS */

.hero-banner{ min-height: 48vh; }
.hero-small{ min-height: 32vh; }

.profile-banner{
  min-height: 48vh;
  overflow: visible; /* avatar wystaje */
  margin-bottom: 60px;
}

/* ==========================================================
   RESPONSIVE GUTTERS + RADIUS
========================================================== */

@media (max-width: 1024px){
  .hero-banner,
  .hero-small,
  .profile-banner{
    width: calc(100% - (var(--layout-gap-tablet) * 2));
    border-radius: var(--banner-radius-tablet);
  }

  .hero-banner{ min-height: 36vh; }
  .hero-small{ min-height: 28vh; }
  .profile-banner{ min-height: 36vh; margin-bottom: 88px; }

  .hero-home{
    --home-hero-inline-gap: var(--home-hero-gap-tablet);
    --home-hero-radius: var(--home-hero-radius-tablet);
    margin-top: var(--layout-home-gap-tablet);
    margin-bottom: var(--layout-home-gap-tablet);
  }

  body[data-page-chrome="home"] .profile-banner{
    margin-top: 0;
  }

  body[data-page-chrome="home"] .hero-small{
    margin-top: 0;
  }
}

@media (max-width: 768px){
  .hero-banner,
  .hero-small,
  .profile-banner{
    width: calc(100% - (var(--layout-gap-mobile) * 2));
    border-radius: var(--banner-radius-mobile);
  }

  .hero-banner{ min-height: 24vh; }
  .hero-small{ min-height: 20vh; margin-bottom: 30px; }
  .profile-banner{ min-height: 24vh; margin-bottom: 50px; }

  .hero-home{
    --home-hero-inline-gap: 0px;
    --home-hero-radius: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  body[data-page-chrome="home"] .profile-banner{
    margin-top: 5px;
  }

  body[data-page-chrome="home"] .hero-small{
    margin-top: 5px;
  }
}

/* ==========================================================
   OVERLAY
========================================================== */

.hero-banner::before,
.hero-small::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index:0;
}

/* ==========================================================
   HERO CONTENT
========================================================== */

.hero-banner .hero-content,
.hero-small .hero-content{
  position: relative;
  z-index:1;

  text-align:center;
  max-width: 900px;
  padding: 0 24px;
}

/* TYPO */

.hero-banner .hero-content h1,
.hero-small .hero-content h1{
  font-size: clamp(1.6rem, 2.6vw + 0.5rem, 2.3rem);
  color: #fff !important;
  margin: 0 0 12px;
  text-shadow: 0 4px 14px rgba(0,0,0,0.55);
}

.hero-banner .hero-content h2,
.hero-small  .hero-content h2,
.hero-banner .hero-content p,
.hero-small  .hero-content p{
  font-size: clamp(1rem, 1.4vw + 0.2rem, 1.25rem);
  margin: 0 0 16px;
  color:#fff !important;
  text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}

/* ==========================================================
   PROFILE AVATAR
========================================================== */

.profile-avatar{
  position: absolute;
  bottom: -70px;
  width: 150px;
  height: 150px;
}

.profile-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 50%;
  border: 4px solid var(--card-bg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

@media (max-width: 1024px){
  .profile-avatar{
    width: 135px;
    height: 135px;
    bottom: -65px;
  }
}

@media (max-width: 768px){
  .profile-avatar{
    width: 115px;
    height: 115px;
    bottom: -55px;
  }
}