/* ==========================================================================
   Dive Hard Tours - Kartago Tours Szállodaleírás Külső Stíluslap
   Fájlnév: style.hotel.kartago.css
   KIZÁRÓLAG HIVATALOS DIVE HARD TOURS MÁRKASZÍNEK:
     - Alap betűszín:  #5D5D5D (.betu-alap)
     - Másodlagos szürke: #969696
     - Türkiz:         #00BFBB (.betu-turkiz, .hatter-turkiz)
     - Sárga:          #F1B800 (.betu-sarga, .hatter-sarga)
     - Szürke háttér:  #F8F8F8 (.hatter-szurke)
     - Világos keret:  #E2E8F0
     - Fehér háttér:   #FFFFFF
   ========================================================================== */

/* Fő kép és videó méretezése (nem foglalja el a fél oldalt, nincsenek elcsúszások) */
.maincntr.h .section.description .mainimg,
.section.description img.mainimg,
.section.description .box > img.mainimg,
.maincntr.h .section.description .mainvid,
.section.description iframe.mainvid,
.section.description video.mainvid,
.section.description .box > .mainvid {
    width: 44% !important;
    max-width: 500px !important;
    border-radius: 16px !important;
    margin: 0 20px 16px 0 !important;
    float: left !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 0 !important;
    display: block !important;
}

.maincntr.h .section.description .mainimg,
.section.description img.mainimg,
.section.description .box > img.mainimg {
    height: 390px !important;
    max-height: 440px !important;
    object-fit: cover !important;
}

.maincntr.h .section.description .mainvid,
.section.description iframe.mainvid,
.section.description video.mainvid,
.section.description .box > .mainvid {
    aspect-ratio: 16/9 !important;
    height: auto !important;
}

/* Álló tájolású videók (Shorts, Reels, TikTok) */
.maincntr.h .section.description .mainvid.mainvid-portrait,
.section.description iframe.mainvid-portrait,
.section.description video.mainvid-portrait,
.section.description .box > .mainvid.mainvid-portrait {
    width: 280px !important;
    max-width: 100% !important;
    aspect-ratio: 9/16 !important;
    height: auto !important;
}

.section.description .subtitle {
    display: flow-root !important;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5D5D5D !important;
    line-height: 1.4 !important;
}

@media (max-width: 860px) {
    .maincntr.h .section.description .mainimg,
    .section.description img.mainimg,
    .section.description .box > img.mainimg {
        width: 100% !important;
        max-width: 100% !important;
        height: 230px !important;
        float: none !important;
        margin: 0 0 14px 0 !important;
    }

    .maincntr.h .section.description .mainvid,
    .section.description iframe.mainvid,
    .section.description video.mainvid,
    .section.description .box > .mainvid {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: auto !important;
        float: none !important;
        display: block !important;
        margin: 0 0 14px 0 !important;
        border-radius: 16px !important;
    }

    .maincntr.h .section.description .mainvid.mainvid-portrait,
    .section.description iframe.mainvid-portrait,
    .section.description video.mainvid-portrait,
    .section.description .box > .mainvid.mainvid-portrait {
        width: 100% !important;
        max-width: 320px !important;
        aspect-ratio: 9/16 !important;
        margin: 0 auto 14px auto !important;
        float: none !important;
    }

    .section.description .subtitle {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
    }
}

/* Fő konténer */
.dht-k-container {
    background-color: transparent;
    color: #5D5D5D;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Kép jobb oldalán lévő egységes blokk: Bevezető + 4 Távolság + All Inclusive ellátás */
.dht-k-hero-right {
    display: flow-root !important;
    margin-bottom: 12px;
}

@media (max-width: 860px) {
    .dht-k-hero-right {
        display: block !important;
        margin-bottom: 16px;
    }
}

.dht-k-hero-right .dht-k-card {
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
}

.dht-k-hero-right .dht-k-card-title {
    margin: 0 0 10px 0 !important;
    padding-bottom: 6px !important;
}

/* Bevezető doboz (Lead) a kép jobb oldalán */
.dht-k-lead {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    padding: 14px 18px;
    border-radius: 16px !important;
    margin-bottom: 12px;
    box-shadow: 0 0 0 3px #ffffff, 0 1px 5px rgba(0, 0, 0, 0.05);
}

.dht-k-lead-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5D5D5D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 6px 0 !important;
}

.dht-k-lead-text {
    font-size: 14px !important;
    color: #5D5D5D !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Főbb távolságok rács a fehér boxon belül (4 db egy sorban) */
.dht-k-dist-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

@media (max-width: 960px) {
    .dht-k-dist-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 420px) {
    .dht-k-dist-grid {
        grid-template-columns: 1fr !important;
    }
}

.dht-k-dist-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 8px !important;
    padding: 7px 6px;
    text-align: center;
}

.dht-k-dist-label {
    display: block;
    font-size: 11px;
    color: #969696;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dht-k-dist-val {
    display: block;
    font-size: 14px !important;
    font-weight: 700;
    color: #5D5D5D;
    line-height: 1.3;
}

/* Törés a felső szekció után: a szobák és a többi szekció teljes szélességben indul */
.dht-k-clear-hero {
    clear: both !important;
    height: 12px;
}

/* Kártya alapblokk */
.dht-k-card {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px !important;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 0 0 3px #ffffff, 0 1px 5px rgba(0, 0, 0, 0.05);
}

.dht-k-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5D5D5D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding-bottom: 8px !important;
}

/* Fontello ikonok stílusa a címsorokban */
.dht-k-card-title [class^="icon-"],
.dht-k-card-title [class*=" icon-"],
.dht-k-lead-title [class^="icon-"],
.dht-k-lead-title [class*=" icon-"],
.dht-k-rating-note [class^="icon-"],
.dht-k-rating-note [class*=" icon-"] {
    color: #00BFBB !important;
    font-size: 15px !important;
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: -1px !important;
}

/* Szoba felszereltség chipek / tagek */
.dht-k-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.dht-k-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 14px !important;
    font-weight: 500;
    background-color: #ffffff;
    color: #5D5D5D;
    border: 1px solid #E2E8F0;
    line-height: 1.4;
}

.dht-k-tag::before {
    content: "✓";
    color: #00BFBB;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}

/* További szobatípusok elegáns doboza */
.dht-k-extra-room {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px !important;
    padding: 14px 18px;
    margin-top: 10px;
    box-shadow: 0 0 0 2px #ffffff;
}

.dht-k-extra-room-title {
    font-weight: 700;
    color: #5D5D5D;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 0.5px;
}

.dht-k-extra-room-text {
    font-size: 14px !important;
    color: #5D5D5D;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* SZÁLLODA FELSZERELTSÉGE: Kártyán belüli 3 oszlopos reszponzív rács! */
.dht-k-facility-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .dht-k-facility-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 18px !important;
    }
}

@media (max-width: 550px) {
    .dht-k-facility-grid {
        grid-template-columns: 1fr !important;
        gap: 6px 0 !important;
    }
}

/* Kétoszlopos elrendezés (Sportok kiegyensúlyozva) */
.dht-k-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 860px) {
    .dht-k-two-col {
        grid-template-columns: 1fr;
    }
}

/* Tiszta listák (NINCS DUPLA PÖTTY, TÖKÉLETES IGAZÍTÁS ÉS TÁVOLSÁG!) */
.section.description .dht-k-list,
.section.description .dht-k-facility-grid,
.dht-k-list,
.dht-k-facility-grid {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.section.description .dht-k-list li::marker,
.section.description .dht-k-facility-grid li::marker,
.dht-k-list li::marker,
.dht-k-facility-grid li::marker,
.dht-k-list-item::marker {
    display: none !important;
    content: "" !important;
}

.section.description .dht-k-list li,
.section.description .dht-k-facility-grid li,
.section.description li.dht-k-list-item,
.dht-k-list li,
.dht-k-facility-grid li,
li.dht-k-list-item {
    list-style: none !important;
    list-style-type: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    color: #5D5D5D !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.section.description .dht-k-list li::before,
.section.description .dht-k-facility-grid li::before,
.section.description li.dht-k-list-item::before,
.dht-k-list li::before,
.dht-k-facility-grid li::before,
li.dht-k-list-item::before {
    content: "•" !important;
    color: #00BFBB !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    flex-shrink: 0 !important;
    width: 8px !important;
    display: inline-block !important;
}

/* Ellátás kártya */
.dht-k-catering {
    background-color: #ffffff;
}

.dht-k-hero-right .dht-k-catering {
    margin-bottom: 0 !important;
}

/* Besorolás sáv */
.dht-k-rating-note {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px !important;
    padding: 12px 18px;
    font-size: 14px !important;
    color: #5D5D5D;
    margin-top: 10px;
    box-shadow: 0 0 0 3px #ffffff, 0 1px 5px rgba(0, 0, 0, 0.04);
}

.dht-k-rating-note strong {
    color: #5D5D5D;
}