/* ======================================================
   Trinity Auburn Shared Ministry Page Styles
   File location: wwwroot/css/ministry.css
   ====================================================== */

:root {
    --trinity-cream: #FDF5EB;
    --trinity-brown: #6B4E36;
    --trinity-dark-brown: #4F3D2D;
    --trinity-gold: #B08A4A;
    --trinity-blue: #477E89;
}

/* Page header / hero area */
.ministry-page-header {
    color: var(--trinity-cream) !important;
    background-color: var(--trinity-brown) !important;
    background: linear-gradient(180deg, var(--trinity-dark-brown) 0%, var(--trinity-brown) 100%);
    padding: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

.ministry-page-header .breadcrumb,
.ministry-page-header .breadcrumb a,
.ministry-page-header .breadcrumb li {
    color: var(--trinity-cream);
}

.ministry-page-header h1 {
    color: var(--trinity-cream);
    font-weight: 700;
}

.ministry-page-header img {
    margin-bottom: 0 !important;
}

/* Main cream page area */
.ministry-page-wrapper {
    background-color: var(--trinity-cream);
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 3rem;
}

.ministry-page-content {
    background-color: var(--trinity-cream);
    padding: 2.5rem 1.5rem;
}

/* Shared section title */
.ministry-title {
    color: var(--trinity-dark-brown);
    text-align: center;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1.25rem;
}

/* Image + text card */
.ministry-layout-card {
    background: linear-gradient(
        90deg,
        var(--trinity-dark-brown) 0%,
        var(--trinity-brown) 42%,
        var(--trinity-cream) 72%,
        var(--trinity-cream) 100%
    );
    border-radius: 0 0 0 2rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.ministry-img,
.ministry-gallery-img {
    width: 100%;
    display: block;
}

.ministry-gallery-img {
    height: 100%;
    object-fit: cover;
}

.ministry-content {
    color: var(--trinity-dark-brown);
    font-size: clamp(1.1rem, 2vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.ministry-content .scripture {
    font-weight: 700;
}

.ministry-content ul {
    list-style-type: "☒ ";
    text-align: left;
    margin-top: 1.5rem;
    padding-left: 1.5rem;
}

.ministry-content li {
    margin-bottom: 1.25rem;
}

/* Optional banner, such as Grades 6-12 */
.ministry-banner {
    background-color: var(--trinity-blue);
    color: var(--trinity-cream);
    border-radius: 0 0 0 2rem;
    padding: 1.25rem 1rem;
    text-align: center;
    margin: 2rem 0;
}

.ministry-banner h2 {
    color: var(--trinity-cream);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.ministry-bottom-text {
    color: var(--trinity-dark-brown);
    font-size: clamp(1.2rem, 2vw, 1.75rem);
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    margin-top: 1.75rem;
}

/* Trinity pills / tab buttons */
.btn-trinity {
    color: var(--trinity-cream);
    background-color: var(--trinity-brown);
    border: 1px solid var(--trinity-brown);
    transition: all .25s ease;
}

.btn-trinity:hover,
.btn-trinity:focus {
    color: var(--trinity-cream);
    background-color: var(--trinity-gold);
    border-color: var(--trinity-gold);
}

.btn-trinity:focus {
    box-shadow: 0 0 0 .25rem rgba(176, 138, 74, .35);
}

.btn-trinity.active,
.btn-trinity:active {
    color: var(--trinity-cream);
    background-color: var(--trinity-dark-brown);
    border-color: var(--trinity-dark-brown);
}

.nav-pills.trinity-pills {
    --bs-nav-pills-link-active-color: var(--trinity-cream);
    --bs-nav-pills-link-active-bg: var(--trinity-dark-brown);
}

.nav-pills.trinity-pills .nav-link.btn-trinity {
    color: var(--trinity-cream);
    background-color: var(--trinity-brown);
    border: 1px solid var(--trinity-brown);
    border-radius: .75rem;
    padding: .5rem .35rem;
    min-height: 3rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-pills.trinity-pills .nav-link.btn-trinity:hover {
    color: var(--trinity-cream);
    background-color: var(--trinity-gold);
    border-color: var(--trinity-gold);
}

.nav-pills.trinity-pills .nav-link.btn-trinity.active,
.nav-pills.trinity-pills .show > .nav-link.btn-trinity {
    color: var(--trinity-cream);
    background-color: var(--trinity-dark-brown);
    border-color: var(--trinity-dark-brown);
}

/* Small phones and up */
@media (min-width: 576px) {
    .nav-pills.trinity-pills .nav-link.btn-trinity {
        padding: .65rem .55rem;
        min-height: 3.5rem;
        font-size: .85rem;
        border-radius: 1rem;
    }
}

/* Tablets and up */
@media (min-width: 768px) {
    .ministry-layout-card {
        padding: 2rem;
    }

    .nav-pills.trinity-pills .nav-link.btn-trinity {
        padding: 1rem 1.1rem;
        min-height: 4.5rem;
        font-size: 1rem;
        border-radius: 1.25rem;
        text-align: left;
        justify-content: flex-start;
    }
}

/* Desktop and up */
@media (min-width: 992px) {
    .nav-pills.trinity-pills .nav-link.btn-trinity {
        padding: 1.25rem 1.5rem;
        min-height: 5rem;
        font-size: 1.2rem;
        border-radius: 1.5rem;
    }
}

/* Mobile stacked layout */
@media (max-width: 991.98px) {
    .ministry-layout-card {
        background: var(--trinity-cream);
        border-radius: 1.5rem;
        padding: 1rem;
    }

    .ministry-content {
        font-size: 1.15rem;
        margin-top: 1rem;
    }

    .ministry-banner {
        border-radius: 1.5rem;
    }
}