/* ================================================
   Salon Services Accordion - Frontend Styles v2.0
   Structure: 3-column grid, feature image top,
   heading below, sub-service accordions at bottom
   ================================================ */

/* Wrapper */
.ssa-wrap {
    background: var(--ssa-bg);
    color: var(--ssa-text);
    width: 100%;
    font-family: inherit;
}

.ssa-inner {
    max-width: var(--ssa-max-width);
    margin: 0 auto;
    padding: 48px 38px;
}

/* 3-column grid */
.ssa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 28px;
    align-items: start;
}

/* Single service card */
.ssa-service-card {
    display: flex;
    flex-direction: column;
}

/* Feature image */
.ssa-card-image {
/*     width: 100%;
    aspect-ratio: 4 / 3; */
    overflow: hidden;
    margin-bottom: 0;
}

.ssa-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ssa-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--ssa-line);
    opacity: 0.25;
}

/* Main service heading */
.ssa-card-title {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 18px 0 14px;
    color: inherit;
    border-bottom: 1px solid var(--ssa-line);
    padding-bottom: 14px;
}

/* Sub-service list */
.ssa-sub-list {
    flex: 1;
}

/* Individual sub-service row */
.ssa-sub-service {
    border-bottom: 1px solid var(--ssa-line);
}

/* Sub-service toggle button */
.ssa-sub-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 20px;
    gap: 10px;
    align-items: center;
    text-align: left;
    padding: 13px 0;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.ssa-sub-toggle:hover {
    opacity: 0.75;
}

/* Sub title text */
.ssa-sub-title {
    flex: 1;
}

/* Sub price */
.ssa-sub-price {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Chevron arrow indicator */
.ssa-chevron {
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
    justify-self: end;
    flex: 0 0 12px;
}

.ssa-chevron:before {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.22s ease;
}

/* Open state - chevron flips up */
.ssa-sub-service.is-open > .ssa-sub-toggle .ssa-chevron:before {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* Sub panel (accordion content) */
.ssa-sub-panel {
    padding: 0 24px 14px 0;
    font-size: 14px;
    line-height: 1.65;
    overflow: hidden;
    transition: height 0.32s ease, opacity 0.28s ease;
}

.ssa-sub-panel p {
    margin: 0 0 10px;
}

.ssa-sub-panel p:last-child {
    margin-bottom: 0;
}

/* Hidden state - panel fully collapsed */
.ssa-sub-panel[hidden] {
    display: none !important;
}

/* =============================
   Responsive - tablet 2 columns
   ============================= */
@media (max-width: 960px) {
    .ssa-inner {
        padding: 36px 22px;
    }

    .ssa-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 22px;
    }

    .ssa-card-title {
        font-size: 19px;
    }
}

/* ================================
   Responsive - mobile single column
   ================================ */
@media (max-width: 600px) {
    .ssa-inner {
        padding: 28px 16px;
    }

    .ssa-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ssa-card-title {
        font-size: 20px;
    }

    .ssa-sub-toggle {
        font-size: 14px;
        grid-template-columns: 1fr 18px;
    }

    .ssa-sub-price {
        grid-column: 1 / 2;
        font-size: 13px;
    }

    .ssa-sub-toggle .ssa-chevron {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}