/* ============================================================================
   ADVOKE CV — templates/family-banner.css
   Layout family: banner
   Full-width hero banner with the avatar overlapping the content card
   below. Used by Visual Portfolio.
   ============================================================================ */

.resume--banner {
  padding: 0;
}

.resume--banner > .layout--banner {
  display: block;
  padding: 0;
  min-height: inherit;
  position: relative;
}

.layout--banner .resume-banner {
  position: relative;
  min-height: var(--t-banner-height);
  padding: var(--t-band-pad) var(--t-page-pad);
  background: var(--t-band-bg);
  color: var(--t-band-fg);
  overflow: hidden;
}

/* Optional decorative dot pattern — driven by a data attribute so the
 * template controls whether it appears. */
.layout--banner .resume-banner[data-pattern="dots"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 12px 12px;
  color: var(--t-band-fg);
  opacity: var(--t-banner-pattern-opacity, 0.12);
  pointer-events: none;
}

.layout--banner .resume-banner__inner {
  position: relative;
  z-index: 1;
}

.layout--banner .resume-banner .resume-header__name,
.layout--banner .resume-banner .resume-header__title {
  color: var(--t-band-fg);
}

.layout--banner .resume-banner .resume-header__title {
  color: color-mix(in srgb, var(--t-band-fg) 78%, transparent);
}

.layout--banner .resume-banner .resume-header__contact,
.layout--banner .resume-banner .resume-header__contact-link,
.layout--banner .resume-banner .resume-header__contact-static,
.layout--banner .resume-banner .resume-header__contact-text,
.layout--banner .resume-banner .resume-header__contact-sep {
  color: color-mix(in srgb, var(--t-band-fg) 88%, transparent);
}

.layout--banner .resume-banner .resume-header__contact-icon {
  color: var(--t-band-fg);
  opacity: 1;
}

/* Card overlapping the banner bottom. */
.layout--banner .resume-banner__card {
  position: relative;
  margin: calc(var(--t-banner-overlap) * -1) var(--t-page-pad) var(--t-page-pad);
  padding: var(--t-page-pad);
  background: var(--t-paper);
  border: 1px solid var(--t-rule);
  border-radius: 8px;
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.18);
}

.layout--banner .resume-banner__avatar {
  position: absolute;
  top: calc(var(--t-banner-overlap) * -1 - var(--t-avatar-size) / 2);
  right: calc(var(--t-page-pad) + 8px);
  z-index: 2;
}

.layout--banner .resume-banner__card-body {
  display: block;
  padding-top: calc(var(--t-banner-overlap) - 4px);
}

.layout--banner .resume-banner__card-body .resume-section + .resume-section {
  margin-top: var(--t-section-gap);
}

/* Print safety: no shadow, no rounded corners, keep the overlap small. */
@media print {
  .layout--banner .resume-banner__card {
    box-shadow: none;
    border-radius: 0;
  }
}