/* ==========================================================================
   RESPONSIVE.CSS
   Breakpoints:
   - Tablet:        <= 1024px
   - Small Tablet:  <= 768px
   - Mobile:        <= 480px
   - Small Mobile:  <= 360px
   ========================================================================== */

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {
    main {
        flex-direction: column;
    }

    .input-section,
    .result-section {
        width: 100%;
        min-width: 0;
    }

    .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- SMALL TABLET / LARGE PHONE (<= 768px) ---------- */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .application-info .info-text h4 {
        font-size: 13pt;
    }

    .application-info .info-text p {
        font-size: 9pt;
    }

    main {
        padding: 8px;
        gap: 8px;
    }

    .box {
        padding: 12px;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .result-card {
        padding: 10px;
        gap: 8px;
    }

    .result-card .card-icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .card-text p {
        font-size: 9pt;
    }

    .card-text h5 {
        font-size: 11pt;
        word-break: break-word;
    }

    /* Binary table becomes horizontally scrollable per row instead of
       squeezing every byte cell down to nothing */
    .binary-table {
        padding: 12px;
        gap: 10px;
    }

    .binary-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .binary-result-row h4 {
        width: auto;
    }

    .binary-result-row .bytes {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .byte-cell {
        min-width: 70px;
        font-size: 9pt;
        padding: 10px 8px;
        flex: none;
    }

    .binary-table-header {
        display: none; /* labels repeat awkwardly once rows stack; hide on small screens */
    }
}

/* ---------- MOBILE (<= 480px) ---------- */
@media (max-width: 480px) {
    header {
        justify-content: space-between;
        align-items: center;
    }

    .application-info {
        gap: 8px;
    }

    .application-info .info-logo {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .application-info .info-text h4 {
        font-size: 12pt;
    }

    .application-info .info-text p {
        display: none; /* tagline drops out to save space on phones */
    }

    main {
        padding: 8px;
    }

    .input-section {
        min-width: 0;
    }

    .input-box label {
        font-size: 12px;
    }

    .input-container {
        height: 38px;
    }

    .input-container i {
        width: 38px;
        height: 38px;
        font-size: 9pt;
    }

    .input-container input {
        font-size: 10pt;
    }

    .calculate-actions button {
        height: 38px;
        font-size: 10pt;
    }

    .tips-list {
        font-size: 8pt;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding-top: 12px;
    }

    .result-card {
        flex-direction: row;
        padding: 8px;
    }

    .result-card .card-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .binary-header h4 {
        font-size: 12pt;
    }

    .byte-cell {
        min-width: 62px;
        font-size: 8pt;
        padding: 8px 6px;
    }
}

/* ---------- SMALL MOBILE (<= 360px) ---------- */
@media (max-width: 360px) {
    .cards-container {
        grid-template-columns: 1fr 1fr;
    }

    .card-text h5 {
        font-size: 10pt;
    }

    .card-text p {
        font-size: 8pt;
    }

    .byte-cell {
        min-width: 56px;
        font-size: 7.5pt;
        padding: 6px 4px;
    }

    .application-actions {
        gap: 4px;
    }
}

/* ---------- Global helpers ---------- */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    * {
        -webkit-tap-highlight-color: transparent;
    }
}