/* ===== ГОРНА СЕКЦИЯ ===== */

.top-section{
    display:flex;
    gap:40px;
    align-items:center;
    margin-bottom:50px;
}

.text-section{
    flex:1;
}

/* ===== СЛАЙДЕР ===== */

.slider{
    flex:1;
    max-width:550px;
    margin:auto;
    position:relative;
}

.slide{
    display:none;
}

.slide img{
    width:100%;
    aspect-ratio: 3 / 2;   /* 1200x800 */
    object-fit:cover;
    border-radius:12px;
    border:4px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.active{
    display:block;
}

.slider-buttons{
    position:absolute;
    top:50%;
    width:100%;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
}

.slider-buttons button{
    background:rgba(0,0,0,0.5);
    color:white;
    border:none;
    padding:8px 12px;
    cursor:pointer;
    border-radius:6px;
}

/* ===== БУТОНИ ЗА СОРТИРАНЕ ===== */

.sort-buttons{
    margin-bottom:15px;
}

.sort-buttons button{
    padding:8px 15px;
    margin-right:10px;
    border:none;
    background:#fbb633;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

.sort-buttons button:hover{
    opacity:0.8;
}

/* ===== ТАБЛИЦА ===== */

table{
    width:100%;
    border-collapse:collapse;
}

th, td{
    padding:10px;
    border:1px solid #ccc;
    text-align:center;
}

th{
    background:#fbb633;
    color:white;
}

/* ===== РЕСПОНСИВ ===== */

@media(max-width:768px){

    .top-section{
        flex-direction:column;
    }

    table, thead, tbody, th, td, tr{
        display:block;
    }

    thead{
        display:none;
    }

    tr{
        margin-bottom:15px;
        border:1px solid #ddd;
        padding:10px;
        border-radius:10px;
        background:#f9f9f9;
    }

    td{
        border:none;
        text-align:left;
        padding:8px 5px;
    }

    td:before{
        font-weight:bold;
        display:block;
        margin-bottom:3px;
    }

    td:nth-of-type(1):before { content: "Име на каньона"; }
    td:nth-of-type(2):before { content: "Дължина (м)"; }
    td:nth-of-type(3):before { content: "Макс. височина (м)"; }
    td:nth-of-type(4):before { content: "Област"; }
    td:nth-of-type(5):before { content: "Река"; }
}