/* ==========================================================================
   Piros Ász — hero.css
   Full-bleed cinematic style, gradient overlay left-to-right,
   badges, content alignment.
   ========================================================================== */

.pa-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40vh;
    overflow: hidden;
}

.pa-hero--cinematic {
    min-height: 85vh;
}

/* Background image */
.pa-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pa-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay — LEFT to RIGHT */
.pa-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(12, 10, 13, 0.95) 0%,
        rgba(12, 10, 13, 0.7) 40%,
        rgba(12, 10, 13, 0.3) 70%,
        transparent 100%
    );
}

/* Content */
.pa-hero__content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    padding: var(--s-80) var(--s-16);
    padding-top: calc(var(--header-h) + var(--s-48));
}

.pa-hero--cinematic .pa-hero__content {
    padding-top: calc(var(--header-h) + var(--s-64));
    padding-bottom: var(--s-96);
}

.pa-hero__content .pa-eyebrow {
    margin-bottom: var(--s-16);
}

.pa-hero__content h1 {
    color: var(--c-white);
    margin-bottom: var(--s-16);
}

.pa-hero__desc {
    font-size: 1.0625rem;
    color: var(--c-text);
    line-height: 1.7;
    margin-bottom: var(--s-24);
}

/* Hero CTAs — contrast-safe */
.pa-hero .pa-cta-row {
    margin-top: var(--s-24);
}

.pa-hero a:not(.pa-btn) {
    color: var(--c-text);
}

/* Badges row */
.pa-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin-top: var(--s-32);
}

/* Breadcrumbs inside hero */
.pa-hero .pa-breadcrumbs {
    margin-bottom: var(--s-24);
}

/* Hero anchors (contact page etc.) */
.pa-hero__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12);
    margin-top: var(--s-16);
}

.pa-hero__anchors a {
    font-size: 0.875rem;
    color: var(--c-text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pa-hero__anchors a:hover {
    color: var(--c-accent-hover);
}