/* ==========================================================
   HERO BANNER (fejléc) — Design Spec v1.0
   Bal: név (H1 44pt) + pozicionálás (tagline) + idézet + QR + aláírás
   Jobb: portré, ferde átlós éllel (clip-path).
   ========================================================== */

.hero-banner {
    flex: none;
    position: relative;
    width: 210mm;
    height: 68mm;
    background: var(--gradient-banner);
    overflow: hidden;
}

/* ----- Portré-mező: ferde átlós él ----- */
.hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 78mm;
    height: 100%;
    background: var(--gradient-photo-bg);
    -webkit-clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-photo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ----- Bal blokk: név + tagline + vonal ----- */
.hero-intro {
    position: absolute;
    top: var(--page-margin);
    left: var(--page-margin);
    width: 150mm;
}

.hero-name {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: .5px;
    color: var(--color-navy);
    text-transform: uppercase;
    line-height: var(--lh-h1);
    white-space: nowrap;
}

.hero-role {
    margin-top: var(--sp-sm);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    letter-spacing: 3px;
    color: var(--color-gold);
    text-transform: uppercase;
    line-height: var(--lh-h3);
    white-space: nowrap;
}

.hero-divider {
    width: var(--rule-len);
    height: var(--rule-thick);
    background: var(--color-gold);
    margin-top: var(--sp-md);
}

/* ----- Bevezető idézet ----- */
.hero-quote {
    position: absolute;
    left: var(--page-margin);
    top: 36mm;
    width: 120mm;
}

.hero-quote-text {
    font-style: italic;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-ink);
}

.hero-quote-mark {
    font-style: normal;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--color-gold);
    line-height: 0;
}

.hero-quote-mark--open  { margin-right: var(--sp-xs); vertical-align: -0.05em; }
.hero-quote-mark--close { margin-left:  var(--sp-xs); vertical-align: -0.5em; }

/* ----- Alsó sáv: QR + leírás ----- */
.hero-bottombar {
    position: absolute;
    left: var(--page-margin);
    bottom: var(--sp-md);
    right: 82mm;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
}

.hero-qr-frame {
    flex: none;
    width: 15mm;
    height: 15mm;
    border: 1px solid var(--color-gold);
    border-radius: var(--sp-xs);
    padding: 1mm;
}

.hero-qr-frame img { width: 100%; height: 100%; display: block; }

.hero-qr-divider {
    flex: none;
    width: 1.5px;
    height: 11mm;
    background: var(--color-gold);
}

.hero-qr-text {
    flex: 1;
    max-width: 56mm;
    font-size: var(--fs-small);
    line-height: var(--lh-h3);
    color: var(--color-grey);
    font-weight: var(--fw-semibold);
}

/* ----- Kézírásos aláírás ----- */
.hero-signature {
    position: absolute;
    bottom: 8mm;
    left: 92mm;
    width: 38mm;
}

.hero-signature img {
    height: 8mm;
    width: auto;
    display: block;
}