/* =============================================================================
   MÁRKA-NYITÓKÉP (Views/Home/_HeroMarka.cshtml) — nyomdánként kapcsolható (/admin/arculat › Nyitókép).

   Koncepció: a nyomda logója maga is kivágott matrica, ezért a nyitókép a fóliázók világából épül:
   a logó óriási, valódi matricaként „ráragasztva” egy vágóalátéten. Ez az EGYETLEN emlékezetes elem; minden más csendes.
   Színek a nyomda arculati tokenjeiből (ArculatCssEpito): --f-primary (fő), --f-mustard (forma). A matrica kontúrja papírfehér.
   Kontraszt: a fő szín fehérrel legalább 4,5 : 1 (Kontraszt.FoSzinHiba), az alátét ennél is sötétebb (62% fő + fekete), így a papírfehér szöveg
   mindig olvasható; a forma szín alatt a sötét (#1A1A1A) szöveg legalább 4,5 : 1 (Kontraszt.FormaSzinHiba).
   ============================================================================= */
.pp-hero--marka {
    --pp-papir: #FBFAF5;
    --pp-ujj: 3px;
    margin: -0.75rem 0 1.5rem;
}

/* --- Vágóalátét: 1 cm-es (≈ 40 px) finom rács + 5 cm-enként (≈ 200 px) erősebb vonal, kép nélkül --- */
.pp-marka__alatet {
    --pp-rács-finom: color-mix(in srgb, var(--f-mustard) 13%, transparent);
    --pp-rács-eros: color-mix(in srgb, var(--f-mustard) 30%, transparent);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
    justify-items: center;
    padding: clamp(1.75rem, 4vw, 3.25rem) 16px;
    border-radius: var(--f-radius-section);
    background-color: var(--f-primary); /* tartalék, ha a color-mix nem támogatott */
    background-color: color-mix(in srgb, var(--f-primary) 62%, #000);
    background-image:
        linear-gradient(var(--pp-rács-eros) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--pp-rács-eros) 1.5px, transparent 1.5px),
        linear-gradient(var(--pp-rács-finom) 1px, transparent 1px),
        linear-gradient(90deg, var(--pp-rács-finom) 1px, transparent 1px);
    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
    background-position: -1px -1px;
    color: var(--pp-papir);
}

/* --- Matrica: papírfehér kontúr (eltolt, élesen vágott drop-shadow-k láncolata) + fóliaárnyék --- */
.pp-marka__matrica { display: flex; justify-content: center; width: 100%; }
.pp-marka__logo {
    --pp-kontur:
        drop-shadow(var(--pp-ujj) 0 0 var(--pp-papir)) drop-shadow(calc(var(--pp-ujj) * -1) 0 0 var(--pp-papir))
        drop-shadow(0 var(--pp-ujj) 0 var(--pp-papir)) drop-shadow(0 calc(var(--pp-ujj) * -1) 0 var(--pp-papir))
        drop-shadow(var(--pp-ujj) var(--pp-ujj) 0 var(--pp-papir)) drop-shadow(calc(var(--pp-ujj) * -1) calc(var(--pp-ujj) * -1) 0 var(--pp-papir))
        drop-shadow(var(--pp-ujj) calc(var(--pp-ujj) * -1) 0 var(--pp-papir)) drop-shadow(calc(var(--pp-ujj) * -1) var(--pp-ujj) 0 var(--pp-papir));
    display: block;
    width: min(72vw, 320px);
    height: auto;
    transform: rotate(-4deg);
    filter: var(--pp-kontur) drop-shadow(0 10px 14px rgb(0 0 0 / .35));
    animation: pp-matrica-rasimul 600ms cubic-bezier(.2, .8, .2, 1) both;
}

/* Egy mozdulat: a matrica oldalbetöltéskor egyszer „rásimul”; a kontúr listája végig azonos, így a szűrő simán áll át. */
@keyframes pp-matrica-rasimul {
    from { transform: rotate(-9deg) scale(1.06); filter: var(--pp-kontur) drop-shadow(0 22px 30px rgb(0 0 0 / .3)); }
    to   { transform: rotate(-4deg) scale(1);    filter: var(--pp-kontur) drop-shadow(0 10px 14px rgb(0 0 0 / .35)); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-marka__logo { animation: none; }
}

/* --- Főcím: a jelmondat, egységes szedéssel (nincs kiemelt szó) --- */
.pp-marka__szoveg { width: 100%; }
.pp-marka__cim {
    max-width: 18ch;
    margin: 0;
    color: var(--pp-papir);
    font-family: var(--f-font);
    font-weight: 700;
    font-stretch: 112%;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: normal;
    text-wrap: balance;
    text-transform: none;
}
.pp-marka__gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }

/* --- Gombok a sötét alátéten: elsődleges a forma színével, sötét szöveggel; másodlagos körvonalas, papírfehér.
       Nincs hover-mozgás; a billentyűzetfókusz papírfehér gyűrű (az ink gyűrű a sötét alátéten nem látszana). --- */
.pp-marka__gomb {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: none;
}
.pp-marka__gomb:hover, .pp-marka__gomb:active { transform: none; text-decoration: none; }
.pp-marka__gomb--elso,
.pp-marka__gomb--elso:hover {
    background: var(--f-mustard);
    border-color: var(--f-mustard);
    color: #1A1A1A;
    box-shadow: none;
}
.pp-marka__gomb--masodik,
.pp-marka__gomb--masodik:hover {
    background: transparent;
    border: 2px solid var(--pp-papir);
    color: var(--pp-papir);
    box-shadow: none;
}
.pp-marka__gomb:focus-visible {
    outline: 3px solid var(--pp-papir);
    outline-offset: 3px;
    box-shadow: none;
}
.pp-marka__gomb .ikon { color: currentColor; }

/* --- Asztal (≥ 900 px): kétoszlopos rács, fele-fele: a matrica a nyitókép fő eleme (legfeljebb 500 px), mellette a főcím + gombok --- */
@media (min-width: 900px) {
    .pp-marka__alatet {
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        gap: clamp(1.5rem, 4vw, 3.5rem);
        justify-items: stretch;
        padding-inline: clamp(1.5rem, 4vw, 3.5rem);
    }
    .pp-marka__matrica { justify-content: center; }
    .pp-marka__logo { width: min(100%, 500px); min-width: 380px; }
    .pp-marka__cim { font-size: clamp(2rem, 3.9vw, 3.3rem); }
    .pp-marka__szoveg { text-align: left; }
}
@media (min-width: 900px) and (max-width: 1099px) {
    .pp-marka__logo { min-width: 0; }
}