/*
 * Vocab boxes for pages inside vocab_boxes/ (same box as vocab.php, hover word inside the box).
 * Selectors are scoped to #vocab-sctn-4-1 so they beat the fixed widths in style/style.css
 * and the small-screen grid rules in style/toggle.css without touching other pages.
 */

/* ---------- Containers: full width, no fixed min-widths ---------- */
#vocab-sctn-4-1,
#vocab-sctn-4-1 > .grid-column-3 {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#vocab-sctn-4-1 #vocab-new-grid {
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#vocab-sctn-4-1 .two_col_div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    box-sizing: border-box;
}

#vocab-sctn-4-1 #vocab-main-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    gap: 0.75rem !important;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

#vocab-sctn-4-1 .parent_div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#vocab-sctn-4-1 .parent_div #category-1 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box;
}

/* ---------- The box ---------- */
#vocab-sctn-4-1 #vocab-new-each-item.chckbx-group {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.35rem;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 105px;
    margin: 0 !important;
    padding: 0 1.2rem;
    background: #fff;
    border: 1px solid cornflowerblue;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Hover word: top row, full width of the box, text centered */
#vocab-sctn-4-1 #vocab-new-each-item .tooltip-text.hover-el {
    grid-column: 1 / -1;
    grid-row: 1;
    order: 0;
    display: block !important;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

/* Checkbox, word, audio: second row */
#vocab-sctn-4-1 #vocab-new-each-item .checkbox_button,
#vocab-sctn-4-1 #vocab-new-each-item .check_type {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
}

#vocab-sctn-4-1 #vocab-new-each-item .main-text.hover-el {
    grid-column: 2;
    grid-row: 2;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    text-align: left;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

#vocab-sctn-4-1 #vocab-new-each-item .audio-group {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    padding: 0;
}

/*
 * "voc" button injected by js/take_back_to_vocab.js (inline position:absolute on the box border).
 * That script also removes the audio icon, so the button takes the audio slot instead.
 */
#vocab-sctn-4-1 #vocab-new-each-item > div[id^="heading-"] {
    position: static !important;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
}

#vocab-sctn-4-1 #vocab-new-each-item > div[id^="heading-"] > a {
    margin: 0 !important;
}

/* ---------- Breakpoints ---------- */
@media (max-width: 900px) {
    #vocab-sctn-4-1 .two_col_div {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 600px !important;
        margin: 0 auto;
    }
}

@media (max-width: 650px) {
    section#v .v-container {
        padding-left: 0 !important;
    }

    #vocab-sctn-4-1 .two_col_div,
    #vocab-sctn-4-1 #vocab-main-items {
        padding: 0 0.5rem !important;
    }

    #vocab-sctn-4-1 #vocab-new-each-item.chckbx-group {
        padding: 0 0.75rem;
    }

    #vocab-sctn-4-1 #vocab-new-each-item .main-text.hover-el,
    #vocab-sctn-4-1 #vocab-new-each-item .tooltip-text.hover-el {
        font-size: 16px !important;
    }
}