/* ===== Date container: no distortion, mobile-first ===== */

/* ===== Mobile: stack vertically, scale text safely ===== */
@media (max-width: 768px) {
    .date-container {
        grid-auto-flow: row; /* stack items */
        justify-items: center;
        gap: 4px;
    }

        /* Use clamp to avoid overflow or tiny text */
        .date-container .month {
            font-size: clamp(14px, 4.2vw, 16px);
        }

        .date-container .date {
            font-size: clamp(20px, 6vw, 24px);
        }

        .date-container .day {
            font-size: clamp(12px, 3.8vw, 14px);
        }
}


/* mobile adjustment: smaller text only */
@media (max-width: 768px) {
  .date-meta-text {
    font-size: 14px;      /* slightly smaller text on mobile */
  }
  .date-meta-text .arrow-icon {
    width: 35px;          /* scale icon proportionally */
  }
  
}
@media (max-width: 768px) {
    .job-section .date-label {
        font-size: 14px !important; /* beats inline/global rules */
        text-align:center;
    }
    .job-section .month-label {
        font-size: 12px !important; /* beats inline/global rules */
    }
}

@media (max-width: 768px) {
    .transactions-section .small-label {
        font-size: 14px !important; /* beats inline/global rules */
    }

    .transactions-section .small-circle {
        width: 15% !important; /* beats inline/global rules */
        height: 25% !important;
    }

    @media (max-width: 768px) {
        .job-card {
            margin: 0;
            padding: 0;
        }

        .job-card-image-wrapper {
            margin: 0;
            padding: 0;
        }

        .card-content {
            margin-top: 0;
            padding-top: 0;
        }
    }

    .job-card-image-wrapper img {
        display: block;
        width: 100%;
    }

    .job-card,
    .job-card * {
        margin: 0;
        padding: 0;
    }
    /* === FIX IMAGE ↔ TEXT GAP ON MOBILE === */
    @media (max-width: 768px) {

        /* Remove any flex/grid gaps */
        .job-cards,
        .job-card {
            gap: 0 !important;
        }

        /* Kill margins/padding everywhere inside the card */
        .job-card,
        .job-card-image-wrapper,
        .card-content,
        .card-text,
        .card-text h3,
        .card-text p,
        .card-text a {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Remove space under image (inline gap fix) */
        .job-card-image-wrapper {
            line-height: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
            }

        /* Ensure no spacing between image and content */
        .card-content {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
    }
    @media (max-width: 768px) {
        .card-text p {
            margin: 0 !important;
        }

        .card-text br {
            display: none;
        }
    }

    /* ===== Remove the gap between the image and the first text on mobile ===== */
    @media (max-width: 768px) {

        .job-card,
        .job-card-image-wrapper,
        .job-card-image-wrapper img,
        .card-content,
        .card-text,
        .card-actions,
        .card-actions a,
        .card-text h3,
        .card-text p {
            margin: 0 !important;
            padding: 0 !important;
            gap: 0 !important;
        }

        .job-card-image-wrapper {
            line-height: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
            }

        .card-content {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .card-text > *:first-child,
        .card-actions > *:first-child,
        .card-text h3:first-child,
        .card-actions a:first-child,
        .card-actions a:first-child h3 {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .card-text h3,
        .card-actions h3,
        .card-text p {
            margin-block-start: 0 !important;
            margin-block-end: 0 !important;
        }

        .job-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
        }
    }

    @media (max-width: 768px) {
        .card-text br:first-child {
            display: none !important;
        }

        .card-text p:first-child,
        .card-text a:first-child,
        .card-text div:first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
    }

    /* ===== Force-remove the gap under card images on small screens ===== */
    @media (max-width: 768px) {

        .job-card {
            display: flex !important;
            flex-direction: column !important;
        }

        .job-card-image-wrapper,
        .job-card-image-wrapper img,
        .card-content,
        .card-text,
        .card-actions {
            margin: 0 !important;
            padding: 0 !important;
            gap: 0 !important;
        }

        .job-card-image-wrapper {
            line-height: 0 !important;
            font-size: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                vertical-align: top !important;
            }

            /* Remove any top space before the first text item */
            .job-card-image-wrapper + .card-content {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

        .card-content > :first-child,
        .card-text > :first-child,
        .card-actions > :first-child,
        .card-text a:first-child,
        .card-text h3:first-child,
        .card-text p:first-child,
        .card-actions a:first-child,
        .card-actions h3:first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .card-text h3,
        .card-text p,
        .card-actions h3,
        .card-actions a {
            margin: 0 !important;
            padding: 0 !important;
        }

        /* If Html.Raw outputs empty breaks/paragraphs */
        .card-text br,
        .card-content br {
            display: none !important;
        }

        .card-text p:empty,
        .card-text a:empty,
        .card-content p:empty,
        .card-content a:empty,
        .card-content div:empty,
        .card-text div:empty {
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }

    @media (max-width: 768px) {
        .job-card-image-wrapper,
        .job-card-image-wrapper img,
        .card-content,
        .card-text,
        .card-actions,
        .card-actions a,
        .card-text h3,
        .card-text p,
        .card-actions h3 {
            margin: 0 !important;
            padding: 0 !important;
        }

        .job-card-image-wrapper {
            line-height: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
            }

        .card-content {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .card-text > *:first-child,
        .card-actions > *:first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
    }

    @media (max-width: 768px) {
        .job-card-image-wrapper,
        .job-card-image-wrapper img,
        .card-content,
        .card-text,
        .card-actions,
        .card-text h3,
        .card-text p,
        .card-actions h3,
        .card-actions a,
        a.js-csb-download {
            margin: 0 !important;
            padding: 0 !important;
        }

        .job-card-image-wrapper {
            line-height: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
            }

        .card-content {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        a.js-csb-download {
            display: block !important;
            line-height: normal !important;
        }

            a.js-csb-download h3,
            .card-actions a h3 {
                margin: 0 !important;
            }

        .card-text > a:first-child,
        .card-actions > a:first-child {
            margin-top: 0 !important;
        }
    }

    a.js-csb-download {
        display: inline-block;
    }

    @media (max-width: 768px) {
        .job-card {
            display: block !important;
            height: auto !important;
            min-height: 0 !important;
        }

        .job-card-image-wrapper {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .job-card-image-wrapper img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
            }

        .card-content {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
        }

        .card-text,
        .card-actions {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .card-text h3,
            .card-actions h3,
            .card-text p,
            .card-text a,
            .card-actions a {
                margin-top: 0 !important;
            }

        a.js-csb-download {
            display: block !important;
        }
    }

    @media (max-width: 768px) {
        .job-card {
            display: block !important;
            height: auto !important;
            min-height: 0 !important;
        }

        .job-card-image-wrapper {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .job-card-image-wrapper > img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
            }

        .card-content {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
        }

        .card-text,
        .card-actions {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .card-text h3,
            .card-actions h3,
            .card-text p,
            .card-text a,
            .card-actions a {
                margin-top: 0 !important;
            }

        a.js-csb-download {
            display: block !important;
        }

        .card-icon {
            width: 20px !important;
            height: auto !important;
            display: inline-block !important;
        }

        a.js-csb-download .card-icon {
            width: 20px !important;
        }
    }

    @media (max-width: 768px) {
        .job-card {
            display: block !important;
            height: auto !important;
            min-height: 0 !important;
        }

        .job-card-image-wrapper {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .job-card-image-wrapper > img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
            }

        .card-content {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
        }

        .card-text,
        .card-actions {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 0 !important;
        }

            .card-text h3,
            .card-actions h3,
            .card-text p,
            .card-text a,
            .card-actions a {
                margin-top: 0 !important;
            }

        a.js-csb-download {
            display: block !important;
        }

        .card-icon {
            width: 20px !important;
            height: auto !important;
            display: inline-block !important;
        }

        a.js-csb-download .card-icon {
            width: 20px !important;
        }
    }
}