/* ---- Full-bleed: let banner + container escape the layout's default width ---- */
.hero-banner,
.custom-layout-container {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

/* ---- Hero banner: real photo background with a frosted "glass" text panel ---- */
.hero-banner {
    height: 380px;
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(rgba(15,60,30,0.55), rgba(15,60,30,0.55)),
                url('/images/gallery/uniforms.jpeg') center 30%/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-glass {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 18px;
    padding: 2.2rem 3rem;
    max-width: 820px;
    margin: 0 20px;
}

.hero-banner .display-3 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.hero-banner .lead {
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* ---- Custom width container: ~1.6in side margins on large screens ---- */
.custom-layout-container {
    padding: 0 1.6in;
}

@media (max-width: 991px) {
    .custom-layout-container { padding: 0 1.5rem; }
}

@media (max-width: 575px) {
    .custom-layout-container { padding: 0 0.75rem; }
}

.custom-layout-container .card-img-top {
    height: 180px;
    object-fit: cover;
}

.custom-layout-container .btn {
    border-radius: 5px;
    font-weight: bold;
}

/* ---- Executive Committee cards ----
   Photo height/zoom is set per-image via an inline style in Index.cshtml
   (3in for the Chairman/Secretary General row, 2in for the rest) so it's
   guaranteed to apply regardless of any other card/image CSS on the page. */
.exco-card img {
    border-radius: inherit;
}

/* Extra breathing room between each row of the Executive Committee */
.exco-row {
    margin-bottom: 2.5rem;
}