.maranatha-post-carousel {
    --post-carousel-content-width: 1280px;
    --post-carousel-gap: 24px;
    --post-carousel-double-gap: 48px;
    --post-carousel-arrow-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2014%2014%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7.36549%201.96397C7.28755%202.07055%207.20962%202.18151%207.19106%202.20138C6.76634%202.65449%206.75252%202.73622%207.12426%203.14487C7.50314%203.56151%208.00849%203.91686%208.43111%204.29732C8.55039%204.41367%208.86862%204.68526%208.86862%204.68526C8.98789%204.84042%209.14703%204.95684%209.30612%205.0732C9.38569%205.15082%209.54475%205.26716%209.54475%205.26716C9.6932%205.42333%209.842%205.57107%209.99071%205.72162C9.03752%205.69889%208.14537%205.99734%207.20917%205.9528C6.00174%205.89538%204.80309%205.88764%203.59431%205.90498C2.90652%205.91483%202.14054%205.72187%201.47192%205.94791C0.779386%206.18196%200.316432%207.02847%200.750725%207.70736C1.00369%208.10101%201.92631%207.8051%202.27897%207.76166C2.82512%207.69414%203.26018%207.82345%203.79608%207.86016C5.36359%207.96775%207.06308%207.86201%208.6303%207.74996C9.16532%207.69768%209.68212%207.71401%2010.1932%207.70778C10.0832%207.85081%209.97317%207.99175%209.86313%208.09908C9.66428%208.29305%209.22678%208.64216%209.22678%208.68098C9.1472%208.7586%208.94836%208.91376%208.94836%208.91376C8.312%209.41805%207.67568%209.92242%207.0394%2010.4267C6.92013%2010.543%206.76099%2010.6595%206.6815%2010.8146C6.64171%2010.8922%206.60192%2011.0474%206.60192%2011.0474L6.65233%2010.9364C6.56619%2011.2367%206.68598%2011.5305%206.96442%2011.6999C6.96312%2011.7023%206.96096%2011.7046%206.95993%2011.7069V11.9397L6.97451%2011.8825C6.98012%2012.0783%207.11899%2012.25%207.39743%2012.25C7.5565%2012.2112%207.79514%2012.0172%207.8747%2011.9397C7.91449%2011.9009%207.99398%2011.7845%208.03377%2011.7845C8.39168%2011.7457%208.82918%2011.2802%209.1076%2011.0475C9.18717%2010.9698%209.30645%2010.9311%209.38601%2010.8147C9.4258%2010.7759%209.54508%2010.6207%209.54508%2010.6207C9.74393%2010.4656%209.90299%2010.3104%2010.0621%2010.1164C10.1019%2010.0776%2010.2211%2010.0001%2010.2211%2010.0001C10.579%209.7285%2011.0563%209.457%2011.3745%209.1466C11.5335%208.95263%2011.7324%208.75866%2011.8914%208.60351C12.0107%208.48717%2012.1699%208.29319%2012.1699%208.29319C12.4323%208.03717%2012.6593%207.77881%2012.8844%207.45781C13.1983%207.5111%2013.5504%207.33161%2013.363%206.93541C13.1243%206.50866%2012.488%206.12072%2012.1301%205.84922C11.096%204.95699%2010.1017%203.98715%209.02797%203.13366C8.75438%202.91612%207.87861%201.66651%207.53976%201.75442C7.51836%201.75939%207.44213%201.8595%207.36549%201.96397ZM11.6525%207.4393C11.6389%207.45252%2011.618%207.47449%2011.5986%207.4952C11.6079%207.46262%2011.6127%207.4393%2011.6127%207.4393C11.6127%207.41784%2011.6238%207.39847%2011.6344%207.3834C11.648%207.39477%2011.6614%207.40512%2011.6753%207.41573C11.6684%207.42432%2011.6591%207.4308%2011.6525%207.4393Z%27%20fill%3D%27black%27/%3E%3C/svg%3E");
    --post-carousel-slide-width: calc(
        (var(--post-carousel-content-width) - var(--post-carousel-double-gap)) / 3
    );
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    background: var(--post-carousel-surface, transparent);
}

.maranatha-post-carousel.is-preview {
    width: 100%;
    margin: 0;
    padding: 0;
}

.maranatha-post-carousel__placeholder {
    border: 1px dashed #c3d6e2;
    border-radius: 12px;
    padding: 18px;
    background: rgba(39, 88, 122, 0.06);
    color: #18454B;
    font-family: var(--Typeface-Montserrat, Montserrat), sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    max-width: 1000px;
    margin: 0 auto;
}

.maranatha-post-carousel__placeholder-heading {
    font-weight: 700;
}

.maranatha-post-carousel__placeholder-meta {
    margin: 0;
    color: #27587A;
    font-size: 0.95rem;
}

.maranatha-post-carousel__outer {
    position: relative;
    overflow: visible;
}

.maranatha-post-carousel__swiper {
    overflow: visible;
    padding-left: max(calc((100vw - var(--post-carousel-content-width)) / 2), 0px);
}

.maranatha-post-carousel__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--post-carousel-gap);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

article.maranatha-post-carousel__slide {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 var(--post-carousel-slide-width);
            flex: 0 0 var(--post-carousel-slide-width);
    max-width: var(--post-carousel-slide-width);
    min-height: 22rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
		background: transparent;
}

article.maranatha-post-carousel__slide--cta {
    background: transparent;
    padding: 0;
}

.maranatha-post-carousel__cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    height: 100%;
    background: #18454B;
    color: #FFFFFF;
    border-radius: 16px;
    padding: 48px 32px;
}

.maranatha-post-carousel__cta-title {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--Typeface-Montserrat, Montserrat), sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.maranatha-post-carousel__cta-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.6;
}

.maranatha-post-carousel__cta-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    background: transparent;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -ms-flex-item-align: start;
        align-self: flex-start;
    width: auto;
}

/* ponytail: arrow removed from carousel buttons per client; video play icon kept below */

.maranatha-post-carousel__cta-button:hover,
.maranatha-post-carousel__cta-button:focus-visible {
    background: #FFFFFF;
    color: #27587A;
    border-color: #FFFFFF;
    outline: none;
}

.maranatha-post-carousel__location {
	display: block;
}

.maranatha-post-carousel__body {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 12px;
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
}

.maranatha-post-carousel__media {
    border-radius: 16px;
		aspect-ratio: 16/10;
		overflow: hidden;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
}

.maranatha-post-carousel__img, .maranatha-post-carousel__featured-image {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
}

.maranatha-post-carousel__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.maranatha-post-carousel__title {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.3;

		color: var(--Text-Primary-Primary, #18454B);

/* Headings/Small */
font-family: var(--Typeface-Montserrat, Montserrat);
/* Reduced slightly per client (was 24px) — now matches the theme's H4 (1.33rem).
   Covers both the Posts and Volunteers carousels (same block/title class). */
font-size: 1.33rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.maranatha-post-carousel__excerpt {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(24, 69, 75, 0.75);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.maranatha-post-carousel__link {
    margin-top: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-item-align: start;
        align-self: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: #27587A;
    text-decoration: none;
    padding-bottom: 0.28em;
    border-bottom: 1px solid transparent;
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__title,
.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__excerpt,
.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__link,
.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__location {
    color: #FFFFFF;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__cta {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__cta-button {
    padding: 0 0 0.28em;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    color: #FFFFFF;
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__cta-button:hover,
.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__cta-button:focus-visible {
    background: transparent;
    color: #FFFFFF;
    border-color: transparent;
    border-bottom-color: currentColor;
}

.maranatha-post-carousel__link:hover,
.maranatha-post-carousel__link:focus-visible {
    border-bottom-color: currentColor;
}

/* Read-more links carry the arrow indicator (not the three-dot "…" — per client
   it should be the arrow/playhead). Rendered as a currentColor mask so it's the
   link blue on light carousels and white on the latest-news-dark variant. The
   video rule below overrides this with the play icon for "Watch Video". */

.maranatha-post-carousel__link::after {
    content: '';
    width: 14px;
    height: 14px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--post-carousel-arrow-mask) center / 14px no-repeat;
    mask: var(--post-carousel-arrow-mask) center / 14px no-repeat;
}

/* Only the "Watch Video" link keeps a trailing icon (play); the arrow is gone
   from regular carousel card links per client. The mask below is overridden to
   the play icon by .maranatha-post-carousel__link--video::after further down. */

.maranatha-post-carousel__link--video::after {
    content: '';
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: var(--post-carousel-arrow-mask);
    mask-image: var(--post-carousel-arrow-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
}

.maranatha-post-carousel__link--video::after {
    background-size: 14px 14px;
    width: 14px;
    height: 14px;
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 14 14%27 fill=%27none%27%3E%3Cpath d=%27M6.9987 0.583252C8.16283 0.583252 9.23645 0.870108 10.2196 1.44382C11.2027 2.01753 11.9811 2.79594 12.5548 3.77905C13.1285 4.76216 13.4154 5.83578 13.4154 6.99992C13.4154 8.16405 13.1285 9.23768 12.5548 10.2208C11.9811 11.2039 11.2027 11.9823 10.2196 12.556C9.23645 13.1297 8.16283 13.4166 6.9987 13.4166C5.83456 13.4166 4.76094 13.1297 3.77783 12.556C2.79472 11.9823 2.01631 11.2039 1.4426 10.2208C0.868887 9.23768 0.582031 8.16405 0.582031 6.99992C0.582031 5.83578 0.868887 4.76216 1.4426 3.77905C2.01631 2.79594 2.79472 2.01753 3.77783 1.44382C4.76094 0.870108 5.83456 0.583252 6.9987 0.583252ZM10.207 7.45945C10.3853 7.35918 10.4744 7.20601 10.4744 6.99992C10.4744 6.79383 10.3853 6.64065 10.207 6.54039L5.66189 3.86678C5.48922 3.76095 5.31098 3.75817 5.12717 3.85843C4.94893 3.96426 4.85981 4.12022 4.85981 4.32631V9.67353C4.85981 9.87962 4.94893 10.0356 5.12717 10.1414C5.21629 10.186 5.30541 10.2083 5.39453 10.2083C5.48922 10.2083 5.57834 10.1832 5.66189 10.1331L10.207 7.45945Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 14 14%27 fill=%27none%27%3E%3Cpath d=%27M6.9987 0.583252C8.16283 0.583252 9.23645 0.870108 10.2196 1.44382C11.2027 2.01753 11.9811 2.79594 12.5548 3.77905C13.1285 4.76216 13.4154 5.83578 13.4154 6.99992C13.4154 8.16405 13.1285 9.23768 12.5548 10.2208C11.9811 11.2039 11.2027 11.9823 10.2196 12.556C9.23645 13.1297 8.16283 13.4166 6.9987 13.4166C5.83456 13.4166 4.76094 13.1297 3.77783 12.556C2.79472 11.9823 2.01631 11.2039 1.4426 10.2208C0.868887 9.23768 0.582031 8.16405 0.582031 6.99992C0.582031 5.83578 0.868887 4.76216 1.4426 3.77905C2.01631 2.79594 2.79472 2.01753 3.77783 1.44382C4.76094 0.870108 5.83456 0.583252 6.9987 0.583252ZM10.207 7.45945C10.3853 7.35918 10.4744 7.20601 10.4744 6.99992C10.4744 6.79383 10.3853 6.64065 10.207 6.54039L5.66189 3.86678C5.48922 3.76095 5.31098 3.75817 5.12717 3.85843C4.94893 3.96426 4.85981 4.12022 4.85981 4.32631V9.67353C4.85981 9.87962 4.94893 10.0356 5.12717 10.1414C5.21629 10.186 5.30541 10.2083 5.39453 10.2083C5.48922 10.2083 5.57834 10.1832 5.66189 10.1331L10.207 7.45945Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
}

@media (max-width: 1400px) {
    .maranatha-post-carousel {
        --post-carousel-content-width: 1120px;
    }
}

@media (max-width: 1024px) {
    .maranatha-post-carousel {
        --post-carousel-content-width: 960px;
    }

    article.maranatha-post-carousel__slide {
        -ms-flex-preferred-size: min(65vw, 360px);
            flex-basis: min(65vw, 360px);
        max-width: min(65vw, 360px);
    }
}

/* Navigation arrows */

.maranatha-post-carousel__nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 20;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #00427a;
    background: white;
    color: #00427a;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.maranatha-post-carousel__nav:hover {
    opacity: 1;
    background: #0072ba;
    color: white;
}

.maranatha-post-carousel__nav.swiper-button-disabled {
    opacity: 0.15;
    cursor: default;
    pointer-events: none;
}

.maranatha-post-carousel__nav i {
    font-size: 18px;
}

.maranatha-post-carousel__nav--prev {
    left: 24px;
}

.maranatha-post-carousel__nav--next {
    right: 24px;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__nav {
    border-color: rgba(255, 255, 255, 0.8);
    background: transparent;
    color: white;
}

.maranatha-post-carousel--latest-news-dark .maranatha-post-carousel__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

@media (max-width: 640px) {
    .maranatha-post-carousel {
        --post-carousel-content-width: 100vw;
        padding: 2.5rem 0;
    }

    .maranatha-post-carousel__swiper {
        padding-left: 1rem;
    }

    .maranatha-post-carousel__wrapper {
        gap: 0;
    }

    article.maranatha-post-carousel__slide {
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        max-width: none;
    }

    .maranatha-post-carousel__nav {
        width: 52px;
        height: 52px;
    }

    .maranatha-post-carousel__nav i {
        font-size: 16px;
    }

    .maranatha-post-carousel__nav--prev {
        left: 8px;
    }

    .maranatha-post-carousel__nav--next {
        right: 8px;
    }
}