/* =============================================================================
   Homepage Specific Styles
   Erik Korte Theme - Home
   ========================================================================== */

/* Homepage Intro
 * TODO: Replace with Bootstrap utilities:
 * .hero → .pt-5 .pb-5 (or custom .py-6 for larger spacing)
 * .homepage-intro → .text-center
 */
.hero {
    padding-top: 40px;
    padding-bottom: 6rem;
}

.homepage-intro {
    text-align: center;
}

/* TODO: Migrate to Bootstrap typography:
 * .h4 → .h6 .text-body .opacity-75 .fw-normal
 * .site-title → .display-4 .fw-bold .text-uppercase .text-body
 * .site-subtitle → .lead .text-body .fw-normal
 */
.homepage-intro .h4 {
    color: var(--theme-color4);
    opacity: 0.6;
    font-weight: 400;
    line-height: 25px;
    font-size: 16px;
}

.homepage-intro .site-title {
    color: var(--theme-color4);
    margin: 0;
    padding: 0;
    line-height: 40px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.homepage-intro .site-subtitle {
    color: var(--theme-color4);
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 35px;
    font-size: 16px;
}

.homepage-intro p {
    text-align: center;
    font-family: var(--main-font);
    margin: 10px 0 20px;
}

.title-h4 {
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.3px;
}
/* Team Member Component
 * TODO: Replace with Bootstrap card:
 * .team-member → .card .border .border-bottom .border-danger .border-5 .p-3
 * .team-member-image → .card-img-top .mb-4
 * .team-member-name → .card-title .fs-2 .fw-light .text-center
 * .team-member-position → .card-text .text-muted .text-center .mb-4
 */
.team-member {
    border: 1px solid #dfe5e8;
    border-bottom: 6px solid #b3211f;
    padding: 20px;
}

.team-member-image {
    max-width: 100%;
    vertical-align: top;
    margin-bottom: 45px;
}

.team-member-image img {
    margin: 0 auto;
    display: block;
    height: auto;
}

.team-member-name {
    text-align: center;
    font-size: 36px;
    line-height: 37px;
    font-weight: 300;
}

.team-member-position {
    font-size: 0.875em;
    margin-bottom: 3px;
    text-align: center;
    color: #99a9b5;
    margin: 0 0 28px;
}

.separator {
    border-bottom: 1px solid #e8e6e6;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.team-link {
    font-size: 13px;
    display: block;
    text-align: center;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.team-link:hover {
    color: #384554;
}

/* Services Section
 * TODO: Bootstrap already provides flexbox utilities:
 * .services .row → .row .g-4 (Bootstrap handles flex)
 * .services .row > [class*="col-"] → .d-flex .flex-column (if needed)
 * Remove redundant flex styles, use Bootstrap's .d-flex utilities
 */
.services {
    background-image: url('https://erikkorte.nl/wp-content/uploads/2018/11/gray.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
    padding-top: 6rem;
    padding-bottom: 8rem;
}

.wpb_wrapper h1 {
    color: var(--theme-color4);
    line-height: 69px;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.wpb_wrapper h2 {
    color: var(--theme-color4);
    margin: 0;
    padding: 0;
    line-height: 53px;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wpb_wrapper .section-intro {
    text-align: center;
    max-width: 600px;
    margin: 40px auto 0;
    line-height: 25px;
    color: var(--theme-color-2);
    font-size: 16px;
    font-family: var(--main-font);
}

.services .row {
    display: flex;
    flex-wrap: wrap;
}

.services .row > [class*="col-"] {
    display: flex;
}

.services .row > [class*="col-"] .links_info {
    display: flex;
    width: 100%;
}

.services .row > [class*="col-"] .quickfinder-item-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.links_info {
    text-decoration: none;
}

/* Carousel / Testimonial */
.carousel-inner {
    max-width: 600px;
    margin: auto;
}
.carousel-item {
    border: 1px solid #dfe5e8;
    border-radius: 4px;
    padding: 4rem;
}
.carousel-item.active {
    border-bottom: 6px solid #b3211f;
}
.testimonial-header {
    margin-bottom: 0;
}
.testimonial-header h3 {
    line-height: 1.7;
    margin-left: 20px;
}
/* Responsive */
@media screen and (max-width: 768px) {
    .wpb_wrapper h1 {
        font-size: 32px;
        line-height: 1.3;
    }

    .wpb_wrapper h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .services {
        padding-top: 150px;
        padding-bottom: 80px;
    }
}