/* ======================================================
   mosque
====================================================== */

    .mosque-card{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		/* border: 1px solid #eeeeee; */
		box-shadow: 0 3px 10px rgba(0,0,0,.08);
		transition: .3s;
	}
	.mosque-card:hover{
		transform: translateY(-3px);
		box-shadow: 0 7px 15px rgba(0,0,0,.15);
	}
	.mosque-image{
		height: 100%;
	}
	.mosque-image img{
		width: 100%;
		height: 100%;
		/* min-height: 260px; */
		object-fit: cover;
		display: block;
	}
	.mosque-body{
		padding: 10px;
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.mosque-title{
		color:var(--green);
		/* font-weight: 600; */
	}
	.mosque-desc{
		color: #555;
		flex:1;
	}
	.mosque-meta{
		/* display:flex; */
		/* flex-wrap:wrap; */
		gap: 10px;
		margin-top: 10px;
		padding-top: 5px;
		border-top: 1px solid #e5e5e5;
		color: #777;
	}
	.mosque-meta span{
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.mosque-meta i{
		/* color:#0b6b63; */
	}

	/* Tablet */
	@media (min-width:576px){
		.mosque-image img{
			/* min-height: 100%; */
		}

	}
	/* Mobile */
	@media (max-width:575px){
		.mosque-card{
			background: #fff;
			border-radius: 7px;
			overflow: hidden;
			border: 1px solid #f9f9f9;
			border-bottom: 1px solid #eeeeee;
			box-shadow: none;
			transition: .3s;
		}
		.mosque-title{
			/* font-size: 1.25rem; */
		}
		.mosque-body{
			padding: 5px;
		}
		.mosque-meta{
			gap: 12px;
			font-size: .9rem;
		}
	}


    .card-marquee {
        width: 100%;
        overflow: hidden;
        position: relative;
        cursor: grab;
        user-select: none;
        touch-action: pan-y;
    }

    .card-marquee:active {
        cursor: grabbing;
    }

    /* Track */

    .card-marquee-track {
        display: flex;
        gap: 20px;
        padding: 20px 0;
        width: max-content;
        will-change: transform;
    }

    /* Card */

    .card-slide {
        flex: 0 0 250px;
    }


    /* Card Design */
    .modern-card {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 135px;
        background: #fff;
        border-radius: 15px;
        box-shadow:
            0 8px 25px rgba(0, 0, 0, .10);
    }

    /* รูปภาพเต็ม Card */
    .modern-card img {
        display: block;
        width: 100%;
        height: auto;

        object-fit: cover;

        pointer-events: none;

        transition: transform .5s ease;
    }


    /* Overlay ข้อความด้านล่าง */
    .modern-card-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 13px 13px;
        color: #fff;
        background: linear-gradient(
            to top,
            rgba(0, 55, 38, .92) 0%,
            rgba(0, 55, 38, .70) 55%,
            rgba(0, 55, 38, 0) 100%
        );
        min-height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }


    /* หัวข้อ */
    .modern-card-caption h5 {
        margin: 0 0 5px;
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
    }


    /* รายละเอียด */
    .modern-card-caption p {
        margin: 0;
        color: rgba(255,255,255,.85);
        font-size: .88rem;
        line-height: 1;
    }


    /* Hover */
    .modern-card:hover img {
        transform: scale(1.06);
    }

    /* =========================
    Desktop
    ========================= */

    @media (min-width: 1200px) {

        .card-slide {
            flex: 0 0 180px;
        }

        .modern-card {
            height: 135px;
        }

    }


    /* =========================
    Tablet
    ========================= */

    @media (min-width: 576px) and (max-width: 1199px) {

        .card-marquee-track {
            padding: 16px 0;
            gap: 16px;
        }
        .card-slide {
            flex: 0 0 180px;
        }
        .modern-card {
            height: 135px;
        }

    }


    /* =========================
    Mobile
    ========================= */

    @media (max-width: 575px) {

        .card-marquee-track {
            padding: 12px 0;
            gap: 12px;
        }

        .card-slide {
            /* ประมาณ 1–2 Card */
            flex: 0 0 40vw;
        }
        .modern-card {
            height: 105px;
            border-radius: 12px;
        }
        .modern-card-caption h5 {
            font-size: .85rem;
        }

        .modern-card-caption p {
            font-size: .8rem;
        }

    }