/**
 * Expertise Accordion — Block CSS
 *
 * Two-column layout: accordion list on the left (~55%),
 * corresponding image on the right (~45%).
 * First item open by default; smooth max-height transition.
 */

/* Section */
.block--expertise-accordion {
}

/* Section title + subtitle */
.expertise-accordion__title {
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--color-dark);
}

.expertise-accordion__subtitle {
    text-align: center;
    color: #555;
    max-width: 720px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.6;
}

/* Reduce title spacing when subtitle follows */
.expertise-accordion__title + .expertise-accordion__subtitle {
    margin-top: calc(-1 * var(--space-2xl) + var(--space-sm));
}

/* Two-column layout */
.expertise-accordion__layout {
    display: flex;
    gap: var(--space-2xl);
    align-items: flex-start;
}

/* Left column: accordion list */
.expertise-accordion__list {
    flex: 0 0 55%;
    max-width: 55%;
}

/* Right column: images */
.accordion-images {
    flex: 1;
    position: sticky;
    top: calc(var(--space-3xl) + 60px);
    min-height: 300px;
}

.accordion-images__item {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.accordion-images__item.is-visible,
.accordion-images__default.is-visible {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.accordion-images__default {
    opacity: 1;
    position: relative;
    transition: opacity 0.5s ease;
}

.accordion-images__default.is-hidden {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.accordion-images__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}

/* =============================================================================
   Accordion Items
   ============================================================================= */
.accordion-item {
    border-bottom: 1px solid rgba(31, 91, 101, 0.15);
}

.accordion-item:first-child {
    border-top: 1px solid rgba(31, 91, 101, 0.15);
}

/* Header (clickable) */
.accordion-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--space-sm);
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--color-dark);
    transition: color 0.2s;
}

.accordion-header:hover {
    color: var(--color-teal);
}

.accordion-header:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: -2px;
    border-radius: 4px;
}

.accordion-header__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--icon-color, var(--color-orange));
    fill: currentColor;
}

.accordion-header__title {
    flex: 1;
    font-size: clamp(18px, 1.125rem + 0.3vw, 22px);
    font-weight: 600;
    margin: 0;
}

/* Toggle icon (+/-) */
.accordion-header__toggle {
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.accordion-header__toggle::before,
.accordion-header__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-teal);
    border-radius: 1px;
    transition: transform 0.3s ease;
}

/* Horizontal bar (always visible) */
.accordion-header__toggle::before {
    width: 16px;
    height: 2px;
    transform: translate(-50%, -50%);
}

/* Vertical bar (rotates to 0 when open) */
.accordion-header__toggle::after {
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
}

/* Active state: rotate vertical bar to form a minus */
.accordion-item.is-active .accordion-header__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item.is-active .accordion-header {
    color: var(--color-teal);
}

/* Body (hidden by default, revealed with max-height) */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-item.is-active .accordion-body {
    max-height: 600px;
}

.accordion-body__inner {
    padding: 0 var(--space-sm) var(--space-lg) calc(32px + var(--space-md) + var(--space-sm));
}

.accordion-body__desc {
    margin-bottom: var(--space-md);
    line-height: 1.6;
    color: #444;
}

/* Feature list */
.accordion-features {
    list-style: none;
    margin: 0 0 var(--space-lg) 0;
    padding: 0;
}

.accordion-features li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
    color: #444;
}

.accordion-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background-color: var(--color-orange);
    border-radius: 50%;
}

/* CTA link inside body */
.accordion-body .btn {
    margin-top: var(--space-sm);
}

/* =============================================================================
   Image Mask & Badges
   ============================================================================= */
.accordion-images__item.has-overlay {
    overflow: visible;
    border-radius: 0;
}

.accordion-img-wrapper {
    position: relative;
}

.accordion-img-mask {
    display: block;
}

.accordion-img-mask picture {
    display: block;
}

.accordion-img-mask img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Blob mask shape */
.accordion-img-mask--blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.accordion-img-mask--blob img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-height: 480px;
}

/* Wave mask */
.accordion-img-mask--wave {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.accordion-img-mask--wave img {
    aspect-ratio: 638 / 383;
    object-fit: cover;
    max-height: 480px;
}

/* Badges (floating labels on the image) */
.accordion-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    z-index: 10;
    background: #fff;
    border-radius: 20px;
    padding: 5px 15px 5px 5px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    width: 220px;
    gap: 5px;
}

.accordion-badge--left {
    top: 3%;
    left: 5%;
}

.accordion-badge--right {
    bottom: 21%;
    right: 2%;
}

.accordion-badge__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-orange);
    padding: 10px;
    box-sizing: border-box;
    height: 46px;
    width: 46px;
    transform: scale(0.7);
    color: white;
}

.accordion-badge__icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.accordion-badge__text {
    font-weight: 700;
    line-height: 20px;
    font-size: 12px;
    color: var(--color-dark);
}

@media (min-width: 1024px) {
    .accordion-badge {
        width: 260px;
        gap: 10px;
        padding: 5px 20px 5px 5px;
    }

    .accordion-badge__icon {
        transform: scale(1);
    }

    .accordion-badge__text {
        font-size: 14px;
    }
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .expertise-accordion__layout {
        gap: var(--space-xl);
    }

    .expertise-accordion__list {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .expertise-accordion__layout {
        flex-direction: column;
    }

    .expertise-accordion__list {
        flex: 1 1 auto;
        max-width: 100%;
        order: 2;
    }

    .accordion-images {
        position: static;
        order: 1;
        width: 100%;
        min-height: auto;
        margin-bottom: var(--space-lg);
    }

    .accordion-body__inner {
        padding-left: var(--space-sm);
    }

    .accordion-images {
        display: none;
    }

    .accordion-item.is-active .accordion-body {
        max-height: 800px;
    }
}