/* ============================================================
   Geo Article Nav Widget  |  prefix: geo-an-
   All critical properties use !important to prevent theme /
   Bootstrap / plugin CSS overrides.
   ============================================================ */

/* ---- Wrapper ---- */
.geo-an-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---- Card ---- */
.geo-an-card {
    background: #f7f3ef !important;
    border: 1px solid #e4dbd3 !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ---- Each Side (prev / next) ---- */
.geo-an-side {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 28px 32px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.25s ease !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.geo-an-side:hover {
    background: #ede7e0 !important;
    text-decoration: none !important;
}

/* Next side: image on right, text aligned right */
.geo-an-side.geo-an-next {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

/* ---- Thumbnail ---- */
.geo-an-thumb {
    width: 76px !important;
    height: 76px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Placeholder when post has no featured image */
.geo-an-no-thumb {
    width: 76px !important;
    height: 76px !important;
    border-radius: 10px !important;
    background: #e8dfd8 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ---- Text group ---- */
.geo-an-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

/* ---- Label (arrow + "Previous Article") ---- */
.geo-an-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #8B4A2A !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.geo-an-label svg {
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ---- Title ---- */
.geo-an-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1e1410 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    letter-spacing: normal !important;
    transition: color 0.25s ease !important;
}

.geo-an-side:hover .geo-an-title {
    color: #8B4A2A !important;
}

/* ---- Vertical Divider ---- */
.geo-an-divider {
    width: 1px !important;
    background-color: #ddd4cb !important;
    flex-shrink: 0 !important;
    align-self: stretch !important;
    margin: 20px 0 !important;
}

/* ---- Editor placeholder ---- */
.geo-an-placeholder {
    padding: 24px !important;
    color: #7a6d65 !important;
    font-size: 13px !important;
    font-style: italic !important;
    text-align: center !important;
    width: 100% !important;
    line-height: 1.6 !important;
}

/* ============================================================
   TABLET  (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    .geo-an-side {
        padding: 22px !important;
        gap: 14px !important;
    }

    .geo-an-title {
        font-size: 1.1rem !important;
    }
}

/* ============================================================
   MOBILE  (≤575px)
   ============================================================ */
@media (max-width: 575px) {
    .geo-an-card {
        flex-direction: column !important;
    }

    .geo-an-side {
        padding: 20px !important;
    }

    /* On mobile, next reverts to left-aligned row */
    .geo-an-side.geo-an-next {
        flex-direction: row !important;
        text-align: left !important;
        border-top: 1px solid #ddd4cb !important;
    }

    /* Hide vertical divider when stacked */
    .geo-an-divider {
        display: none !important;
    }

    /* Hide thumbnails on mobile */
    .geo-an-thumb,
    .geo-an-no-thumb {
        display: none !important;
    }

    .geo-an-title {
        font-size: 1rem !important;
    }
}