/**
 * Bootstrap Blocks CSS - Public Styles
 */

/* Viewport-height utilities not shipped by Bootstrap 5.
 * Bootstrap natively ships only .vh-100 and .min-vh-100 / .vh-auto / .min-vh-auto.
 * The hero_height advanced setting in BootstrapHeroBlock offers 25/50/75 variants,
 * so we ship those utilities here. */
.vh-25 { height: 25vh !important; }
.vh-50 { height: 50vh !important; }
.vh-75 { height: 75vh !important; }
.min-vh-25 { min-height: 25vh !important; }
.min-vh-50 { min-height: 50vh !important; }
.min-vh-75 { min-height: 75vh !important; }

/* Extended spacing utilities for page recipes. */
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-7 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
.my-6 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-7 { margin-top: 8rem !important; margin-bottom: 8rem !important; }

/* Hero block layout primitives.
 * The hero template uses absolute-positioned overlays and stretches a flex
 * column inside .hero-bg. Set the positioning context here so the overlay
 * fills the hero rather than the nearest positioned ancestor outside the
 * block. */
.hero-section { position: relative; }
.hero-section .hero-bg {
    position: relative;
    width: 100%;
    flex-direction: column;
}
.hero-section .hero-overlay { z-index: 1; }
.hero-section .hero-content { position: relative; z-index: 2; }

/* Figure Block (.bsb-figure) */
.bsb-figure {
    display: inline-block;
    margin-bottom: 1rem;
}

.bsb-figure-frame {
    background: #fff;
    padding: 14px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    line-height: 0;
}

.bsb-figure-frame img {
    border-radius: 1px;
}

.bsb-figure-frame a {
    display: block;
    cursor: zoom-in;
}

.bsb-figure-caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
}