/* ============================================================
   SIGA Frontend Responsive Shared Styles
   Breakpoints: 768px (tablet) / 480px (mobile)
   ============================================================ */

/* --- Full-width mobile buttons --- */
.btn-mobile-full {
    transition: width 0.3s;
}
@media (max-width: 480px) {
    .btn-mobile-full {
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* --- Responsive form rows --- */
.form-row-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 991px) {
    .form-row-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .form-row-responsive {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- Course card grid --- */
.courses-grid-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991px) {
    .courses-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .courses-grid-responsive {
        grid-template-columns: 1fr;
    }
}

/* --- Card padding reduction on mobile --- */
.card-mobile {
    padding: 20px;
}
@media (max-width: 480px) {
    .card-mobile {
        padding: 14px;
    }
}

/* --- Mobile box/panel padding --- */
@media (max-width: 480px) {
    .box-body-mobile {
        padding: 10px !important;
    }
    .box-header-mobile {
        padding: 10px 12px !important;
    }
    .form-group-mobile {
        margin-bottom: 10px;
    }
    .form-group-mobile label {
        font-size: 13px;
    }
    .form-group-mobile .form-control {
        font-size: 16px; /* prevents iOS zoom on focus */
        height: 42px;
    }
}

/* --- Full-width inputs on mobile --- */
@media (max-width: 480px) {
    .col-xs-mobile-full {
        width: 100% !important;
    }
}

/* --- Touch-friendly links and buttons (min 44px) --- */
@media (max-width: 480px) {
    .touch-friendly,
    .touch-friendly a,
    .touch-friendly .btn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* --- Page header responsive --- */
@media (max-width: 480px) {
    .page-header h2 {
        font-size: 18px;
    }
    .page-header i {
        font-size: 22px;
    }
}

/* --- Hidden on mobile / visible on mobile --- */
.mobile-hidden {
    display: block;
}
.mobile-visible {
    display: none;
}
@media (max-width: 480px) {
    .mobile-hidden {
        display: none;
    }
    .mobile-visible {
        display: block;
    }
}