/**
 * O nás – vinařství a penzion
 * page-o-nas.php
 *
 * Hero a lightbox dědí styly z kontakt.css / galerie.css.
 * Zde jsou pouze styly specifické pro tuto stránku.
 */

/* ═══════════════════════════════════════════════════════
   SEKCE 0 – Hero
   Vlastní pozadí (vinice_2), ostatní ze sp-kontakt-hero
   ═══════════════════════════════════════════════════════ */
.sp-onas-hero {
    background-image: url('assets/img/02_vinice_2_1920.jpg');
}


/* ═══════════════════════════════════════════════════════
   SEKCE 1 – Úvod: text + foto
   ═══════════════════════════════════════════════════════ */
.sp-onas-intro {
    background: #fff;
    padding: 60px 0;
}

.sp-onas-intro__row {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp-onas-intro__left,
.sp-onas-intro__right {
    flex: 1 1 50%;
}

.sp-onas-intro__text h3 {
    color: #323c6e;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.sp-onas-intro__right .et_pb_image_wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════
   SEKCE 2 – Pás fotek (4 thumbnaily)
   Dědí .sp-gallery__grid, jen omezení na 4 sloupce
   ═══════════════════════════════════════════════════════ */
.sp-onas-photos {
    padding: 40px 0;
    background: #fff;
}

.sp-onas-photos__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .sp-onas-photos__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sp-onas-photos__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   SEKCE 3 – Degustace (tmavé pozadí)
   ═══════════════════════════════════════════════════════ */
.sp-onas-degustace {
    background-color: #ffffff;
    background-image: url('assets/img/menu_bg-2-.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
}

.sp-onas-degustace__row {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp-onas-degustace__photo-col,
.sp-onas-degustace__text-col {
    flex: 1 1 50%;
}

.sp-onas-degustace__photo-col .et_pb_image_wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}


.sp-onas-degustace__text h3 {
    color: #323c6e;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.sp-onas-degustace__text p {
        color: var(--sp-text);
}




.sp-onas-degustace__text .sp-btn {
    margin-top: 1.5rem;
    display: inline-block;
}


/* ═══════════════════════════════════════════════════════
   SEKCE 4 – Penzion (bílé pozadí)
   ═══════════════════════════════════════════════════════ */
.sp-onas-penzion {
    background: #fff;
    padding: 60px 0;
}

.sp-onas-penzion__row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 40px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp-onas-penzion__photo-col,
.sp-onas-penzion__text-col {
    flex: 1 1 50%;
}

.sp-onas-penzion__photo-col .et_pb_image_wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.sp-onas-penzion__logo {
    margin-bottom: 1.25rem;
}

.sp-onas-penzion__logo img {
    max-width: 220px;
    height: auto;
}

.sp-onas-penzion__text h3 {
    color: #323c6e;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.sp-onas-penzion__text .sp-btn {
    margin-top: 1.5rem;
    display: inline-block;
}


/* ═══════════════════════════════════════════════════════
   RESPONZIVITA – sekce 1, 3, 4 (společná)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sp-onas-intro__row,
    .sp-onas-degustace__row,
    .sp-onas-penzion__row {
        flex-direction: column;
    }

    .sp-onas-intro__left,
    .sp-onas-intro__right,
    .sp-onas-degustace__photo-col,
    .sp-onas-degustace__text-col,
    .sp-onas-penzion__photo-col,
    .sp-onas-penzion__text-col {
        flex: 1 1 100%;
    }
}

.sp-onas-degustace__text .sp-btn ,
.sp-onas-penzion__text .sp-btn
{
        font-size: 16px;
    background-color: #46b464;
    border-width: 0px;
    color: #ffffff;
    border-color: #323c6e;
    border-radius: 0px;
    font-weight: bold;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    padding: .3em 1em;
}