/* ==========================================================================
   Meridian Foundation - project overrides
   Loaded after the theme CSS so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Even news / event cards
   Cards in the same row keep equal height and their "Read More" links line up,
   regardless of thumbnail aspect ratio or title length.
   -------------------------------------------------------------------------- */
.blog__single-wrapper {
   height: 100%;
}

.blog__single {
   display: flex;
   flex-direction: column;
   height: 100%;
}

/* Normalise thumbnails to a single aspect ratio, so a portrait photo and a
   landscape photo occupy the same box. object-fit: cover crops the overflow
   instead of distorting the image.
   Note: the theme's `.blog .blog__single-thumb a img { min-height: 280px }`
   acts as a floor. Cards in a row share a column width, so the ratio (or the
   floor) resolves to the same height for every card at every breakpoint. */
.blog__single-thumb img {
   width: 100%;
   height: auto;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   object-position: center;
}

/* The content block grows to fill the leftover space... */
.blog__single-inner {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
}

/* ...so the CTA can be pushed to the bottom of every card, keeping every
   "Read More" on the same line regardless of how long the title runs.
   Selector needs two classes to outrank the theme's `.blog .blog__single-cta`
   (which sets margin-top: 32px); padding-top preserves that original gap. */
.blog__single-inner .blog__single-cta {
   margin-top: auto;
   padding-top: 32px;
}

/* --------------------------------------------------------------------------
   About page - foundation information sections.
   Uses the theme's own colour tokens so these blend with the existing design.
   -------------------------------------------------------------------------- */
.mf-info {
   padding: 90px 0;
}

.mf-info--tint {
   background: #faf7fc;
}

.mf-info .section__header h2,
.mf-info .section__content h2 {
   color: var(--primary-color, #370947);
}

.mf-card {
   height: 100%;
   padding: 32px 28px;
   border-radius: 16px;
   background: var(--white, #ffffff);
   box-shadow: var(--shadow, 0px 10px 25px 0px rgba(37, 42, 52, 0.08));
   transition: transform .3s ease, box-shadow .3s ease;
}

.mf-card:hover {
   transform: translateY(-6px);
   box-shadow: 0px 16px 40px 0px rgba(37, 42, 52, 0.14);
}

.mf-card__icon {
   width: 58px;
   height: 58px;
   border-radius: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 20px;
   background: var(--base-color, #ffc107);
   color: var(--primary-color, #370947);
}

.mf-card h5 {
   color: var(--primary-color, #370947);
   margin-bottom: 12px;
}

.mf-card p {
   color: var(--template-color, #667471);
   margin: 0;
}

.mf-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.mf-list li {
   position: relative;
   padding-left: 36px;
   margin-bottom: 20px;
   color: var(--template-color, #667471);
}

.mf-list li strong {
   display: block;
   margin-bottom: 4px;
   color: var(--primary-color, #370947);
}

.mf-list li i {
   position: absolute;
   left: 0;
   top: 5px;
   font-size: 18px;
   color: var(--base-color, #ffc107);
}

.mf-partners {
   list-style: none;
   padding: 0;
   margin: 16px 0 0;
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.mf-partners li {
   padding: 10px 18px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 600;
   color: var(--primary-color, #370947);
   background: var(--white, #ffffff);
   box-shadow: var(--shadow-tertiary, 0px 4px 8px 0px rgba(0, 0, 0, 0.07));
}

/* --------------------------------------------------------------------------
   Brand lockup - logo + foundation name (header, footer, mobile menu)
   Scales down with the viewport; the name is dropped on very narrow phones.
   -------------------------------------------------------------------------- */
.brand-lockup {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
}

.brand-lockup img {
   width: auto;
   height: 48px;
   flex: 0 0 auto;
}

.brand-lockup__name {
   font-family: "Outfit", sans-serif;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: .2px;
   white-space: nowrap;
   color: var(--primary-color, #370947);
   font-size: clamp(15px, 0.6vw + 12px, 22px);
}

.brand-lockup--footer img { height: 56px; }
.brand-lockup--footer .brand-lockup__name { color: var(--white, #ffffff); }
.brand-lockup--menu img { height: 40px; }

@media (max-width: 991.98px) {
   .brand-lockup img { height: 42px; }
}

@media (max-width: 575.98px) {
   .brand-lockup { gap: 8px; }
   .brand-lockup img { height: 36px; }
   .brand-lockup__name { font-size: 15px; }
}

@media (max-width: 359.98px) {
   .brand-lockup__name { display: none; }
}

/* --------------------------------------------------------------------------
   Empty-state ("coming soon") panel - used when no programs are published yet
   -------------------------------------------------------------------------- */
.mf-coming-soon {
   text-align: center;
   padding: 64px 32px;
   border-radius: 20px;
   background: linear-gradient(180deg, #faf7fc 0%, #ffffff 100%);
   border: 1px dashed rgba(55, 9, 71, .18);
}

.mf-coming-soon__icon {
   width: 88px;
   height: 88px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   margin-bottom: 24px;
   background: var(--base-color, #ffc107);
   color: var(--primary-color, #370947);
}

.mf-coming-soon h3 {
   color: var(--primary-color, #370947);
   margin-bottom: 12px;
}

.mf-coming-soon p {
   color: var(--template-color, #667471);
   max-width: 560px;
   margin: 0 auto 28px;
}

.mf-badge {
   display: inline-block;
   margin-bottom: 20px;
   padding: 8px 18px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .6px;
   text-transform: uppercase;
   background: var(--primary-color, #370947);
   color: var(--white, #ffffff);
}

/* --------------------------------------------------------------------------
   Outline button for LIGHT backgrounds.
   The theme's .btn--tertiary is white-on-transparent (built for dark hero
   sections), so it disappears on white panels. Use this instead there.
   -------------------------------------------------------------------------- */
.mf-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 28px;
   border-radius: 999px;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
   color: var(--primary-color, #370947);
   background: transparent;
   border: 2px solid var(--primary-color, #370947);
   transition: background .3s ease, color .3s ease;
}

.mf-btn-outline:hover,
.mf-btn-outline.is-active {
   background: var(--primary-color, #370947);
   color: var(--white, #ffffff);
}

.mf-btn-outline--sm {
   padding: 10px 18px;
   font-size: 14px;
   border-width: 1.5px;
}

/* --------------------------------------------------------------------------
   Gallery - projects as collapsible sections with a photo grid + lightbox
   -------------------------------------------------------------------------- */
.mf-project {
   border: 1px solid rgba(55, 9, 71, .10);
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 24px;
   background: var(--white, #ffffff);
   box-shadow: var(--shadow-tertiary, 0px 4px 8px 0px rgba(0, 0, 0, 0.07));
}

.mf-project__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 20px 28px;
   background: #faf7fc;
}

.mf-project__title {
   margin: 0;
   color: var(--primary-color, #370947);
   font-size: 20px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
}

.mf-project__count {
   font-size: 12px;
   font-weight: 600;
   color: var(--white, #ffffff);
   background: var(--base-color, #ffc107);
   padding: 3px 12px;
   border-radius: 999px;
}

.mf-project__count { color: var(--primary-color, #370947); }

.mf-project__toggle {
   flex: 0 0 auto;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   background: var(--primary-color, #370947);
   color: var(--white, #ffffff);
   font-size: 15px;
   transition: background .3s ease;
}

.mf-project__toggle:hover { background: var(--secondary-color, #490e5e); }

.mf-project__toggle .fa-chevron-down { transition: transform .3s ease; }
.mf-project__toggle[aria-expanded="false"] .fa-chevron-down { transform: rotate(-90deg); }

.mf-project__body { padding: 26px 28px 30px; }

.mf-project__desc {
   color: var(--template-color, #667471);
   margin-bottom: 22px;
}

.mf-gallery-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.mf-gallery-item {
   display: block;
   position: relative;
   border-radius: 10px;
   overflow: hidden;
}

.mf-gallery-item img {
   width: 100%;
   height: 190px;
   object-fit: cover;
   display: block;
   transition: transform .45s ease;
}

.mf-gallery-item:hover img { transform: scale(1.06); }

.mf-gallery-item::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(55, 9, 71, .35);
   opacity: 0;
   transition: opacity .3s ease;
}

.mf-gallery-item:hover::after { opacity: 1; }

@media (max-width: 991.98px) {
   .mf-gallery-grid { grid-template-columns: repeat(3, 1fr); }
   .mf-gallery-item img { height: 165px; }
}

@media (max-width: 575.98px) {
   .mf-project__head { padding: 16px 18px; }
   .mf-project__body { padding: 18px; }
   .mf-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
   .mf-gallery-item img { height: 140px; }
}

/* Pillar detail page */
.mf-pillar-objective {
   padding: 28px 32px;
   border-radius: 16px;
   border-left: 5px solid var(--base-color, #ffc107);
   background: #faf7fc;
   color: var(--primary-color, #370947);
   font-size: 18px;
   margin-bottom: 40px;
}

/* Become a Volunteer — requirement/area list sub-headings */
.volunteer__content .team-details__list { margin-top: 28px; }
.volunteer__list-title {
   font-size: 20px;
   margin-bottom: 16px;
   color: var(--primary-color, #370947);
}