/* Környezetfüggetlen konténer – balra zárt, max szélesség nélkül is jól viselkedik */
.hero-title{
display:inline-block;
text-align:left;
/* kis „lélegzet”, hogy mobilon se tapadjon a szélekhez */
padding: clamp(4px, 1vw, 8px);
}

/* Főcím – Playfair, fluid méret: mobiltól desktopig */
.hero-headline{
margin:0 0 clamp(8px, 1.8vw, 14px) 0;
font-family: "Playfair Display", serif;
font-weight:800;
line-height:1.06;
letter-spacing: clamp(0.5px, 0.2vw, 2px);
color:#ffffff;
/* „3D” hatás (finomítva mobilon) */
text-shadow:
0 1px 0 rgba(255,255,255,.35),
0 2px 0 rgba(11,74,59,.65),
0 3px 0 rgba(9,60,48,.65),
0 4px 0 rgba(7,47,37,.65),
0 6px 8px rgba(0,0,0,.35);
-webkit-text-stroke: .3px rgba(0,0,0,.25);
/* fluid font-size: min 36px, ideális viewporttal nő, max 80px */
font-size: clamp(36px, 7.2vw, 80px);
}

/* Két sor külön elemen – pontos tördelés */
.hero-headline .line{
display:block;
}

/* Alcím – Poppins, arany */
.hero-subtitle{
margin: clamp(6px, 1.2vw, 12px) 0 0 0;
font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-weight:700;
line-height:1.25;
letter-spacing: clamp(0.4px, 0.15vw, 1px);
color:#FFD700;
/* fluid méret: min 16px, max 32px */
font-size: clamp(16px, 3.2vw, 32px);
text-wrap: balance; /* modern böngészőkben szebb tördelés */
}

/* Csak mobilon erőltetett sortörés az alcímhez */
.m-only{ display:none; }

/* Finom reszponzív hangolás */
@media (max-width: 768px){
/* kicsit tágabb sorköz, kevesebb stroke/shadow, hogy tiszta maradjon a kis kijelzőn */
.hero-headline{
line-height:1.08;
-webkit-text-stroke: .2px rgba(0,0,0,.22);
text-shadow:
0 1px 0 rgba(255,255,255,.30),
0 2px 0 rgba(11,74,59,.55),
0 3px 6px rgba(0,0,0,.28);
}
.m-only{ display:inline; }
}

@media (max-width: 420px){
/* nagyon keskeny mobilon kicsit sűrítjük a betűközt, hogy ne törjön rosszul */
.hero-headline{ letter-spacing:.5px; }
.hero-subtitle{ letter-spacing:.4px; }
}