/* ═══════════════════════════════════════════════════════
   RESPONSIVE FIX — divingsecrets.com.sa
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════
   ALL SCREENS 768px+: 5 columns
   ═══════════════════════════════════ */
.courses-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
}
.courses-grid .course-card {
    overflow: hidden !important;
}
.courses-grid .course-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}
.courses-grid .course-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-top: auto !important;
}
.courses-grid .course-description {
    font-size: 10px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 0 !important;
}
.courses-grid .course-card a.cta-secondary {
    margin-top: auto !important;
    margin-bottom: 15px !important;
    font-size: 11px !important;
    padding: 5px 20px !important;
}
.courses-grid .course-icon {
    width: 45px !important;
    height: 45px !important;
}

/* Yoga card — darker overlay */
.courses-grid .course-card:last-child .card-background::before,
.courses-grid .course-card:nth-child(5) .card-background::before {
    background: linear-gradient(to bottom, rgba(36,64,72,0.8) 0%, rgba(25,58,68,0.95) 100%) !important;
}

/* ═══════════════════════════════════
   iPad (768px - 1199px)
   Logo stays normal, nav links tighter
   ═══════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {

    /* Nav links — slightly smaller, tighter spacing, one line */
    header .nav-link {
        font-size: 13px !important;
        margin-right: 2px !important;
        padding: 8px 5px !important;
        white-space: nowrap !important;
    }
    .sl-nav li {
        font-size: 13px !important;
        margin-right: 8px !important;
    }

    /* Community cards — smaller text */
    section.service-one.darkbg .service-sldi h3 {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    section.service-one.darkbg .service-sldi p {
        font-size: 12px !important;
    }
}

/* ═══════════════════════════════════
   MOBILE ONLY (up to 767px)
   ═══════════════════════════════════ */
@media (max-width: 767px) {
    .courses-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .courses-grid .course-title { font-size: 18px !important; }
    .courses-grid .course-description {
        font-size: 13px !important;
        -webkit-line-clamp: 4 !important;
    }
    .courses-grid .course-card a.cta-secondary {
        font-size: 14px !important;
        padding: 10px 30px !important;
    }
    .courses-grid .course-icon { width: 55px !important; height: 55px !important; }

    /* Phone input fix */
    .iti.iti--allow-dropdown.iti--separate-dial-code { width: 100% !important; }
    .iti input[type="tel"] { padding-left: 80px !important; width: 100% !important; }
}

/* ═══════════════════════════════════
   SMALL MOBILE (up to 414px)
   ═══════════════════════════════════ */
@media (max-width: 414px) {
    .courses-grid .course-title { font-size: 17px !important; }
    .courses-grid .course-description { font-size: 12px !important; }
}

/* ═══════════════════════════════════
   VERY SMALL (up to 375px) — iPhone SE
   ═══════════════════════════════════ */
@media (max-width: 375px) {
    .courses-grid .course-title { font-size: 16px !important; }
    .courses-grid .course-card a.cta-secondary { font-size: 12px !important; padding: 8px 22px !important; }
}