@import url('base-styles.css');

.keypad {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    grid-template-rows: repeat(4, minmax(65px, auto)) minmax(85px, auto);
}

/* Explicitly define grid positions for clarity */
.btn[data-value="7"] { grid-column: 1; grid-row: 1; }
.btn[data-value="8"] { grid-column: 2; grid-row: 1; }
.btn[data-value="9"] { grid-column: 3; grid-row: 1; }
.btn-del { grid-column: 4; grid-row: 1; }

.btn[data-value="4"] { grid-column: 1; grid-row: 2; }
.btn[data-value="5"] { grid-column: 2; grid-row: 2; }
.btn[data-value="6"] { grid-column: 3; grid-row: 2; }
.btn[data-value="+"] { grid-column: 4; grid-row: 2; }

.btn[data-value="1"] { grid-column: 1; grid-row: 3; }
.btn[data-value="2"] { grid-column: 2; grid-row: 3; }
.btn[data-value="3"] { grid-column: 3; grid-row: 3; }
.btn[data-value="-"] { grid-column: 4; grid-row: 3; }

.btn[data-value="."] { grid-column: 1; grid-row: 4; }
.btn[data-value="0"] { grid-column: 2; grid-row: 4; }
.btn[data-value="/"] { grid-column: 3; grid-row: 4; }
.btn[data-value="x"] { grid-column: 4; grid-row: 4; }

.btn-reset {
    grid-column: 1 / span 2;
    grid-row: 5;
}

.btn-equals {
    grid-column: 3 / span 2;
    grid-row: 5;
}

@media (max-width: 600px) {
    .calculator {
        padding: 15px;
    }
    
    .keypad {
        gap: 12px;
        grid-template-rows: repeat(4, minmax(55px, auto)) minmax(75px, auto);
    }
}