/**
 * Brand Segments Block Styles
 * Based on home-industries section from EverSmith HTML
 */

/* Brand Segments Block - unified background effect matching text-4-columns-block */
.brand-segments-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 72px;
    padding: 100px 80px 80px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    /* Base light teal background - unified with text-4-columns-block */
    background: #E9F7F8;
}

/* Light teal tinted background with texture - unified effect across all blocks */
.brand-segments-block__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.brand-segments-block__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.24; /* Unified opacity with text-4-columns-block */
    max-width: none;
    transform-origin: center center;
}

/* Two-column header — constrained and centered */
.brand-segments-block__header {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1280px;
}

.brand-segments-block__header-left,
.brand-segments-block__header-right {
    flex: 1 1 0;
    min-width: 0;
}

.brand-segments-block__header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Label styling - matches .home-section-label from HTML */
.brand-segments-block__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.brand-segments-block__label span {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: #0097a7;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Label crown: theme .es-icon-titles */

/* Section h2 uses theme .es-section-title / .serif-teal */

/* Intro text styling - matches .home-industries-text from HTML */
.brand-segments-block__text {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--text-medium);
    line-height: 1.5;
    color: var(--smith-grey);
}

/* Right column paragraphs - matches .home-industries-header-right p from HTML */
.brand-segments-block__header-right p {
    margin: 0 0 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--text-medium);
    line-height: 1.5;
    color: var(--smith-grey);
}

.brand-segments-block__header-right p:last-child {
    margin-bottom: 0;
}

/* 6 segment cards — horizontal row */
.brand-segments-block__cards {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1280px;
}

/* Card styling - matches .home-industries-card from HTML */
.brand-segments-block__card {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 24px;
    border-radius: 8px;
}

/* Card icon - matches home-industries-card icon styling */
.brand-segments-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
}

.brand-segments-icon-wrap img {
    display: block;
    width: 40px;
    height: 40px;
}

/* Card text - matches home-industries-card p from HTML */
.brand-segments-block__card p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--text-regular);
    line-height: 1.5;
    color: var(--smith-grey);
}

.brand-segments-block__card strong {
    font-weight: 700;
}

/* Container for the CTA button — same max-width as header */
.brand-segments-block__cta-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
}

/* CTA Button styling - matches .home-cta-btn from HTML exactly */
.brand-segments-block__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 8px 32px;
    border-radius: 8px;
    background: var(--btn-primary-rest, #e57440);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.brand-segments-block__cta-btn:hover {
    background-color: var(--btn-primary-hover, #f26828);
    box-shadow: 0px 6px 14px rgba(1, 13, 20, 0.1);
}

.brand-segments-block__cta-btn:active {
    background-color: var(--btn-primary-pressed, #c87400);
    box-shadow: none;
}

.brand-segments-block__cta-btn:focus-visible {
    outline: 2px solid var(--btn-primary-pressed, #c87400);
    outline-offset: 2px;
}

/* ==========================================================================
   Tablet Styles (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .brand-segments-block {
        padding: 60px 32px;
        gap: 48px;
    }

    .brand-segments-block__header {
        flex-direction: column;
        gap: 24px;
    }

    .brand-segments-block__cards {
        flex-wrap: wrap;
    }

    .brand-segments-block__cta-wrap {
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .brand-segments-block__card {
        flex: 1 1 calc(33% - 16px);
        min-width: 180px;
    }
}

/* ==========================================================================
   Mobile Styles (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .brand-segments-block {
        padding: 48px 20px;
        gap: 32px;
    }

    .brand-segments-block__cards {
        flex-direction: column;
        align-items: center;
    }

    .brand-segments-block__card {
        min-width: 0;
        width: 231px;
    }

    .brand-segments-block__cta-wrap {
        display: flex;
        justify-content: center;
    }

}

/* ==========================================================================
   Small Mobile Styles (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .brand-segments-block {
        padding: 40px 16px;
    }

    .brand-segments-block__card {
        width: 100%;
        max-width: 280px;
    }
}