
/* County lake cards - compact mobile layout v2 */

@media (max-width: 760px) {

    .fluk-county-lake-grid {
        gap: .7rem !important;
    }

    .fluk-county-lake-grid > article.fluk-county-lake-card {
        min-height: 0 !important;

        padding: .85rem !important;

        border-radius: 16px !important;
    }

    .fluk-county-lake-card__main {
        gap: .4rem !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .fluk-county-lake-card__badge {
        margin: 0 0 .1rem !important;

        padding: .28rem .5rem !important;

        font-size: .62rem !important;
        line-height: 1.2 !important;
    }

    .fluk-county-lake-card__title {
        font-size: 1.05rem !important;
        line-height: 1.18 !important;
    }

    .fluk-county-lake-card__text {
        display: -webkit-box !important;

        margin: .15rem 0 0 !important;

        overflow: hidden !important;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        font-size: .82rem !important;
        line-height: 1.4 !important;
    }

    .fluk-county-lake-card__tags {
        gap: .32rem !important;

        margin: .6rem 0 0 !important;
        padding: 0 !important;
    }

    .fluk-county-lake-card__tags span {
        padding: .28rem .48rem !important;

        font-size: .66rem !important;
        line-height: 1.2 !important;
    }

    .fluk-county-lake-card__tags span:nth-child(n+4) {
        display: none !important;
    }

    .fluk-county-lake-card__actions {
        margin: .65rem 0 0 !important;
        padding: 0 !important;
    }

    main .fluk-county-lake-grid
    article.fluk-county-lake-card
    .fluk-county-lake-card__actions
    a[href^="/lake/"] {
        min-height: 40px !important;

        padding: .48rem .75rem !important;

        border-radius: 12px !important;

        font-size: .8rem !important;
    }
}

/* County lake listings - two columns on mobile */

@media (max-width: 760px) {

    .fluk-county-lake-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: .7rem !important;
    }

    .fluk-county-lake-card {
        min-width: 0 !important;
    }

    .fluk-county-lake-card__title {
        overflow-wrap: anywhere !important;

        font-size: .98rem !important;
        line-height: 1.18 !important;
    }

    .fluk-county-lake-card__text {
        font-size: .76rem !important;
        line-height: 1.35 !important;
    }

    .fluk-county-lake-card__badge {
        max-width: 100% !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    main .fluk-county-lake-grid
    article.fluk-county-lake-card
    .fluk-county-lake-card__actions
    a[href^="/lake/"] {
        padding-left: .4rem !important;
        padding-right: .4rem !important;

        font-size: .74rem !important;
    }
}

@media (max-width: 350px) {

    .fluk-county-lake-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FLUK force county lake grid to two columns on mobile/tablet */

@media (max-width: 900px) {

    #main .lake-grid.fluk-county-lake-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: .7rem !important;
    }

    #main .lake-grid.fluk-county-lake-grid
    > .fluk-county-lake-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 340px) {

    #main .lake-grid.fluk-county-lake-grid {
        grid-template-columns: 1fr !important;
    }
}
