/*
 * LOGISS Quick Links v1.1.0
 * Isolated from Study Circle Pro's .one_third/.one_fifth layout rules.
 */

.logiss-quick-links {
    width: 68%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 5.5%;
    row-gap: 52px;
    align-items: start;
    box-sizing: border-box;
    padding: 15px 0 25px;
}

.logiss-quick-links,
.logiss-quick-links * {
    box-sizing: border-box;
}

.logiss-quick-link {
    min-width: 0;
    text-align: center;
    color: #444;
}

.logiss-quick-link-icon {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
}

.logiss-quick-link-icon .fa {
    font-size: 55px;
    line-height: 1;
    color: #444;
}

.logiss-quick-link-icon img {
    display: block;
    width: 64px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto;
}

.logiss-quick-link-title {
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 6px;
}

.logiss-quick-link-desc {
    font-size: 15px;
    line-height: 1.35;
    min-height: 40px;
    margin-bottom: 5px;
}

.logiss-quick-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 7px 26px;
    border: 1px solid #2d452d;
    border-radius: 8px;
    background: #405e40;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        0 2px 0 #263b26,
        0 4px 7px rgba(0,0,0,.18);
    color: #fff !important;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 600;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px #000;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.logiss-quick-link-button:hover,
.logiss-quick-link-button:focus {
    background: #365236;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.28),
        0 3px 0 #263b26,
        0 5px 9px rgba(0,0,0,.2);
}

.logiss-quick-link-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Tablet: retain the exact three-column structure. */
@media screen and (max-width: 980px) {
    .logiss-quick-links {
        width: 72%;
        column-gap: 3%;
        row-gap: 34px;
    }

    .logiss-quick-link-title {
        font-size: 18px;
    }

    .logiss-quick-link-desc {
        font-size: 13px;
    }

    .logiss-quick-link-button {
        min-height: 36px;
        padding: 6px 13px;
        font-size: 14px;
    }
}

/*
 * Mobile: three columns x three rows.
 * Explicit order converts the original desktop physical columns into:
 * Entrance | Payment | Live
 * Result   | Tech    | Calendar
 * Study    | Forum   | Help
 */
@media screen and (max-width: 767px) {
    .logiss-quick-links {
        width: 72%;
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 22px 5px;
        padding: 8px 0 18px;
    }

    .logiss-quick-link-1 { grid-column: 1; grid-row: 1; }
    .logiss-quick-link-4 { grid-column: 2; grid-row: 1; }
    .logiss-quick-link-7 { grid-column: 3; grid-row: 1; }

    .logiss-quick-link-2 { grid-column: 1; grid-row: 2; }
    .logiss-quick-link-5 { grid-column: 2; grid-row: 2; }
    .logiss-quick-link-8 { grid-column: 3; grid-row: 2; }

    .logiss-quick-link-3 { grid-column: 1; grid-row: 3; }
    .logiss-quick-link-6 { grid-column: 2; grid-row: 3; }
    .logiss-quick-link-9 { grid-column: 3; grid-row: 3; }

    .logiss-quick-link-icon {
        height: 42px;
        margin-bottom: 4px;
    }

    .logiss-quick-link-icon .fa {
        font-size: clamp(27px, 8vw, 38px);
    }

    .logiss-quick-link-icon img {
        width: clamp(34px, 10vw, 45px);
        height: 42px;
    }

    .logiss-quick-link-title {
        font-size: clamp(10px, 3vw, 14px);
        line-height: 1.1;
        overflow-wrap: anywhere;
        margin-bottom: 4px;
    }

    .logiss-quick-link-desc {
        min-height: 0;
        font-size: clamp(8px, 2.25vw, 10.5px);
        line-height: 1.18;
        overflow-wrap: anywhere;
        margin-bottom: 5px;
    }

    .logiss-quick-link-button {
        width: auto;
        max-width: 100%;
        min-height: 25px;
        padding: 4px 6px;
        border-radius: 6px;
        font-size: clamp(7.5px, 2.15vw, 10px);
        line-height: 1.1;
        white-space: normal;
    }
}

@media screen and (max-width: 430px) {
    .logiss-quick-links {
        width: 74%;
        gap: 18px 3px;
    }

    .logiss-quick-link-button {
        padding-left: 4px;
        padding-right: 4px;
    }
}


/* ============================================================
   v1.0.1 - DYNAMIC CENTERLINE ALIGNMENT
   Centers the complete 3-column arrangement on desktop/mobile
   and keeps all three tracks mathematically equal.
   ============================================================ */

.logiss-quick-links {
    width: min(100%, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(12px, 2vw, 28px) !important;
    padding-right: clamp(12px, 2vw, 28px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(18px, 4vw, 64px) !important;
    justify-content: center !important;
    justify-items: stretch !important;
}

.logiss-quick-link {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
}

.logiss-quick-link-title,
.logiss-quick-link-desc {
    width: 100% !important;
    text-align: center !important;
}

.logiss-quick-link-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media screen and (max-width: 767px) {
    .logiss-quick-links {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(8px, 2.5vw, 14px) !important;
        padding-right: clamp(8px, 2.5vw, 14px) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: clamp(5px, 2vw, 12px) !important;
        row-gap: clamp(24px, 7vw, 38px) !important;
        justify-content: center !important;
        justify-items: stretch !important;
    }

    .logiss-quick-link {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 clamp(1px, .8vw, 4px) !important;
    }

    .logiss-quick-link-title,
    .logiss-quick-link-desc {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .logiss-quick-link-title {
        font-size: clamp(10px, 3.25vw, 14px) !important;
    }

    .logiss-quick-link-desc {
        font-size: clamp(8px, 2.45vw, 10.5px) !important;
    }

    .logiss-quick-link-button {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* v1.0.2: compact mobile descriptions for cleaner aligned rows */
@media screen and (max-width: 767px) {
    .logiss-quick-link-desc {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        min-height: 2.36em !important;
        max-height: 2.36em !important;
        line-height: 1.18 !important;
        margin-bottom: 5px !important;
    }

    /* Keep the action buttons aligned at the same level in each grid row. */
    .logiss-quick-link-button {
        margin-top: auto !important;
    }
}


/* v1.0.3: normalize mobile title + description + button baselines */
@media screen and (max-width: 767px) {

    /* Every title gets exactly two lines of vertical space.
       One-line titles remain centered within the same title zone. */
    .logiss-quick-link-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 2.30em !important;
        max-height: 2.30em !important;
        line-height: 1.15 !important;
        margin: 0 0 4px !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    /* Descriptions also share a fixed two-line zone. */
    .logiss-quick-link-desc {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        min-height: 2.36em !important;
        max-height: 2.36em !important;
        line-height: 1.18 !important;
        overflow: hidden !important;
        margin: 0 0 6px !important;
        text-align: center !important;
    }

    /* Each card uses the same internal vertical structure. */
    .logiss-quick-link {
        height: 100% !important;
    }

    /* Buttons settle on a common baseline within each grid row. */
    .logiss-quick-link-button {
        margin-top: auto !important;
    }
}