/* =================================================================== PAGE DETAIL section css =================================================================== */
/* Service inner page body: main column (image, lead, numbered notch cards or
   question rows) beside a sticky sidebar with the All Services list and a contact form. */
.page-detail {
    & .page-detail__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 440px;
        align-items: start;
        gap: var(--sp50);
    }

    & .page-detail__main {
        display: flex; flex-direction: column;
        gap: var(--sp30);
    }

    & .page-detail__media {
        overflow: hidden;
        border-radius: var(--r-lg);
    }

    & .page-detail__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

    & .page-detail__heading {
        margin-top: var(--sp20);
        font-size: var(--f35);
        letter-spacing: var(--lsSnug);
    }

    /* numbered cards, icon top-left, number in the top-right notch */
    & .page-detail__cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--g30);
    }

    & .page-detail__card {
        position: relative;
        display: flex; flex-direction: column;
        gap: var(--sp15);
        padding: var(--sp30);
        background: var(--white);
        border-radius: var(--r-lg);
        transition: var(--transition);

        &:hover { box-shadow: var(--shadow-lg); }
        &:hover .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .page-detail__num .notch-badge { width: 50px; height: 50px; font-size: var(--f14); }

    & .page-detail__icon { display: flex; margin-bottom: var(--sp10); color: var(--primary); }

    & .page-detail__card-title { font-size: var(--f25); }

    & .page-detail__card-foot { margin-top: auto; padding-top: var(--sp5); }

    /* icon badge in the notch: used instead of 01/02 when the page already has a numbered section */
    & .page-detail__badge .notch-badge { color: var(--primary); }

    /* keep the title and first line of copy clear of the top-right notch when it sits beside them */
    & .page-detail__card > .page-detail__card-title:nth-child(2),
    & .page-detail__card > .page-detail__card-title:nth-child(2) + p { padding-right: var(--sp70); }

    & .page-detail__tags-label {
        display: block;
        margin-top: var(--sp5);
        font-size: var(--f12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--primary);
    }

    & .page-detail__tags {
        display: flex; flex-wrap: wrap;
        gap: var(--sp5);
    }

    /* question rows */
    & .page-detail__faq {
        display: flex; flex-direction: column;
        gap: var(--sp15);
    }

    & .page-detail__item {
        background: var(--white);
        border-radius: var(--r-lg);

        &[open] .page-detail__toggle { background: var(--primary); color: var(--white); transform: rotate(45deg); }
    }

    & .page-detail__summary {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp20);
        padding: var(--sp20) var(--sp30);
        font-family: var(--font-mona);
        font-size: var(--f18);
        font-weight: 500;
        color: var(--ink);
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker { display: none; }
        &:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-lg); }
    }

    & .page-detail__toggle {
        display: flex; flex-shrink: 0; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        background: var(--surface-light);
        border-radius: var(--r-full);
        color: var(--ink);
        transition: var(--transition);
    }

    & .page-detail__answer {
        margin-inline: var(--sp30);
        padding-block: var(--sp15) var(--sp25);
        border-top: 1px solid var(--line);
    }

    /* sidebar */
    & .page-detail__aside {
        position: sticky; top: 120px;
        display: flex; flex-direction: column;
        gap: var(--sp30);
    }

    & .page-detail__widget {
        padding: var(--sp40) var(--sp35);
        background: var(--white);
        border-radius: var(--r-lg);
    }

    & .page-detail__widget-title {
        display: flex; align-items: center;
        gap: var(--sp10);
        margin-bottom: var(--sp25);
        font-size: var(--f25);
        letter-spacing: var(--lsSnug);

        & svg { color: var(--primary); }
    }

    & .page-detail__list {
        display: flex; flex-direction: column;
        gap: var(--sp10);
        list-style: none;
    }

    & .page-detail__link {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--sp15);
        padding: var(--sp12) var(--sp15) var(--sp12) var(--sp20);
        border: 1px solid var(--line);
        border-radius: var(--r-btn);
        font-family: var(--font-mona);
        font-size: var(--f16);
        font-weight: 500;
        color: var(--ink);
        transition: var(--transition);

        & svg { flex-shrink: 0; transition: var(--transition); }
        &:hover, &[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--white); }
        &:hover svg { transform: translateX(4px); }
    }

    & .page-detail__form {
        display: flex; flex-direction: column;
        gap: var(--sp12);
    }

    & .page-detail__submit { align-self: flex-start; margin-top: var(--sp10); }
}

/* =================================================================== PAGE DETAIL responsive =================================================================== */
@media (max-width: 1365.98px) {
    .page-detail {
        & .page-detail__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp40); }
    }
}

@media (max-width: 1199.98px) {
    .page-detail {
        & .page-detail__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp30); }
        & .page-detail__widget { padding: var(--sp30) var(--sp25); }
    }
}

@media (max-width: 991.98px) {
    .page-detail {
        & .page-detail__grid { grid-template-columns: 1fr; }
        & .page-detail__aside {
            position: static;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: start;
        }
    }
}

@media (max-width: 767.98px) {
    .page-detail {
        & .page-detail__aside { grid-template-columns: 1fr; }
        & .page-detail__summary { padding: var(--sp15) var(--sp20); font-size: var(--f16); }
        & .page-detail__answer { margin-inline: var(--sp20); }
    }
}

@media (max-width: 575.98px) {
    .page-detail {
        & .page-detail__cards { grid-template-columns: 1fr; }
        & .page-detail__card { padding: var(--sp25); }
        & .page-detail__submit { align-self: stretch; }
    }
}