/* Wczytaj PO szeroka-strona.css i pozostałych stylach strony. */
#gora .chw-hero { display: none; }
#gora .chw-hero-mobile { display: block; }
@media screen and (min-width: 801px) {
    #gora { width: 100%; height: auto; margin: 0 0 25px; padding: 0; top: 0; }
    #gora .chw-hero-mobile { display: none; }
    #gora .chw-hero {
        display: block;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: clamp(300px, 34vh, 380px);
        overflow: hidden;
        /* Przy zmianie fotografii wystarczy podmienić plik poniżej. */
        background: #42705a url('images/hero_tlo_chwalowice.png') center 60% / cover no-repeat;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }
    #gora .chw-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(10,32,45,.42), rgba(10,32,45,.16) 55%, transparent 80%);
        pointer-events: none;
    }
    #gora .chw-hero::after {
        content: '';
        position: absolute;
        z-index: 3;
        inset: auto 0 0;
        height: 34px;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 40C220 4 400 35 720 55S1160 70 1440 16V80H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
    #gora .chw-hero-srodek {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        width: 100%;
        max-width: 1100px;
        height: 100%;
        margin: 0 auto;
        padding: 0 24px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #gora a.chw-hero-marka { display: inline-flex; width: auto; max-width: 70%; gap: 18px; align-items: center; color: #fff; text-decoration: none; }
    #gora .chw-hero-logo { width: clamp(66px, 6vw, 92px); height: auto; flex: 0 0 auto; border: 0; margin: 0; }
    #gora .chw-hero-teksty { display: block; min-width: 0; }
	#gora .chw-hero-nazwa {
		display: block;
		font-family: "OCR A Extended", "Consolas", "Lucida Console", monospace;
		font-size: clamp(29px, 3.6vw, 52px);
		font-weight: normal;
		line-height: 1.15;
		letter-spacing: 2px;
		text-shadow: 0 2px 8px rgba(0,0,0,.7);
		white-space: nowrap;
	}
    #gora .chw-hero-haslo { display: block; margin-top: 10px; color: #ffe376; font: italic clamp(17px, 1.7vw, 23px)/1.3 Georgia, serif; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
    #gora .chw-hero-opis { margin: 20px 0 0; max-width: 58%; color: #fff; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.6; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
    #gora .chw-hero-leniwiec {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        width: clamp(250px, 32vw, 460px);
        max-width: none;
        height: calc(100% - 12px);
        object-fit: contain;
        object-position: right top;
        border: 0;
        margin: 0;
        pointer-events: none;
    }
    #gora .chw-hero-marka:focus-visible { outline: 3px solid #ffe376; outline-offset: 8px; border-radius: 6px; }
}