/* ==========================================================================
   Services page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Our Comprehensive Range of Legal Expertise — practice areas laid out on a
   hairline grid. Resting state shows the icon; on hover the icon fades out,
   the copy slides up and the "Learn More" link fades in beneath it.
   -------------------------------------------------------------------------- */

.expertise {
    padding: 120px 0 100px;
    background-color: var(--color-white);
}

.expertise__inner {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 15px;
}

.expertise__title {
    max-width: 50%;
    margin: 0 auto 60px;
    text-align: center;
}

.expertise__grid {
    display: grid;
    /* The middle column is wider to absorb its own 50px of inner padding */
    grid-template-columns: 32fr 36fr 32fr;
}

.expertise-card {
    padding: 50px 0 20px;
    border-right: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
    transition: padding 0.3s;
}

/* Hairlines run between cells only, never around the outside */
.expertise-card:nth-child(3n) {
    border-right: 0;
}

.expertise-card:nth-child(n + 7) {
    border-bottom: 0;
}

.expertise-card:nth-child(3n + 2) {
    padding-inline: 50px;
}

.expertise-card__body {
    max-width: 81%;
    margin-inline: auto;
    text-align: center;
}

.expertise-card__icon {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    color: var(--color-maroon-dark);
    transition: color 0.3s;
}

.expertise-card__icon svg {
    width: 100%;
    height: 100%;
}

.expertise-card__title {
    margin-bottom: 15px;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-secondary);
}

.expertise-card__text {
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

.expertise-card__link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: capitalize;
    color: var(--color-maroon-dark);
    transition: color 0.3s;
}

.expertise-card__link svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

/* The hover reveal: the icon fades out, the copy slides up into the space it
   leaves and the link fades in. Only for pointers that can actually hover —
   on a touch screen the link would otherwise stay invisible for good. */
@media (hover: hover) {

    .expertise-card__link {
        color: transparent;
    }

    .expertise-card:hover .expertise-card__link,
    .expertise-card__link:focus-visible {
        color: var(--color-maroon-dark);
    }

    .expertise-card:hover .expertise-card__icon,
    .expertise-card:focus-within .expertise-card__icon {
        color: transparent;
    }

    .expertise-card:hover,
    .expertise-card:focus-within {
        padding-top: 0;
        padding-bottom: 70px;
    }
}

/* --------------------------------------------------------------------------
   Frequently Asked Questions — photograph on the left under a dark wash,
   accordion on the right. Built on <details>/<summary>, so it opens and
   closes without any JavaScript.
   -------------------------------------------------------------------------- */

.faq {
    display: flex;
    max-width: 1140px;
    margin-inline: auto;
    padding: 100px 15px 0;
}

.faq__media {
    position: relative;
    flex: 0 0 50%;
    min-height: 600px;
    background-image: url("../../images/general-images/lawyer-talks-to-client.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faq__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-secondary);
    opacity: 0.6;
}

.faq__content {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    justify-content: center;
    margin-left: 50px;
}

.faq__eyebrow {
    margin-bottom: 5px;
}

.faq__title {
    margin-bottom: 50px;
}

/* Borders overlap by 1px so neighbouring items share a single hairline */
.faq-item + .faq-item {
    margin-top: -1px;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 15px 25px;
    border: 1px solid var(--color-faq-border);
    font-family: var(--font-card-title);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-maroon-dark);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    /* Replace the browser's default disclosure triangle with the plus below */
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item[open] .faq-item__question {
    position: relative;
    background-color: var(--color-maroon-dark);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

/* The plus turns into a cross on open — the same two states as the live site */
.faq-item__icon {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    stroke-width: 2;
    color: var(--color-accent);
    transition: transform 0.3s;
}

.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__answer {
    padding: 25px 40px 15px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .expertise {
        padding: 80px 10px;
    }

    .expertise__inner {
        padding-inline: 0;
    }

    .expertise__title {
        max-width: 64%;
        margin-bottom: 50px;
    }

    .expertise__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Two columns, so the desktop nth-child rules no longer describe the grid */
    .expertise-card:nth-child(3n),
    .expertise-card:nth-child(n + 7) {
        border-right: 1px solid var(--color-divider);
        border-bottom: 1px solid var(--color-divider);
    }

    .expertise-card:nth-child(2n),
    .expertise-card:last-child {
        border-right: 0;
    }

    .expertise-card:last-child {
        border-bottom: 0;
    }

    /* Even inline padding both sides, so centred content reads level across
       the divider rather than sitting off-centre in one column */
    .expertise-card,
    .expertise-card:nth-child(3n + 2) {
        padding-inline: 15px;
    }

    .expertise-card {
        padding-top: 50px;
        padding-bottom: 0;
    }

    .expertise-card__body {
        max-width: 80%;
    }

    .expertise-card__title {
        font-size: 26px;
    }

    .faq {
        padding: 70px 30px 0;
    }

    .faq__media {
        min-height: 720px;
    }

    .faq__content {
        margin-left: 30px;
    }

    .faq-item__question {
        font-size: 15px;
    }

    .faq-item__answer {
        font-size: 17px;
    }

}

@media (max-width: 1024px) and (hover: hover) {

    .expertise-card:hover,
    .expertise-card:focus-within {
        padding-top: 0;
        padding-bottom: 50px;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .expertise {
        padding: 70px 20px;
    }

    .expertise__title {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .expertise__grid {
        grid-template-columns: 1fr;
    }

    .expertise-card:nth-child(n),
    .expertise-card:nth-child(3n),
    .expertise-card:nth-child(n + 7) {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-divider);
    }

    .expertise-card:last-child {
        border-bottom: 0;
    }

    .expertise-card__body {
        max-width: 100%;
    }

    .faq {
        flex-direction: column;
        padding: 70px 20px 0;
    }

    .faq__media {
        flex: 0 0 auto;
        min-height: 300px;
    }

    .faq__content {
        flex: 0 0 auto;
        margin: 30px 0 20px;
    }

    .faq__title {
        margin-bottom: 30px;
    }

    .faq-item__question {
        font-size: 14px;
    }

    .faq-item__answer {
        padding-inline: 25px;
        font-size: 16px;
    }

}