/**
 * Repair guides, styled after the PrestaShop pages (#module-repair-hollywood in the
 * MegaShop theme): full width green header carrying the title and three white cards,
 * then the step cards with the picture beside the body.
 *
 * Plain CSS on purpose. The theme compiles Tailwind ahead of time by scanning the
 * templates, so arbitrary utilities written here would never reach styles.css unless
 * the build is run again; these rules ship with the module instead.
 */

.repair {
    --repair-green: #0cb38c;
    --repair-green-dark: #169679;
    --repair-grey: #f7f7f7;
    --repair-text: #2b2b2b;

    color: var(--repair-text);
}

.repair a {
    color: inherit;
}

/* The green band and the grey area have to reach both edges of the window while the
   text stays aligned with the rest of the site.
   Widening the blocks themselves (width: 100vw plus a negative margin) breaks under
   zoom, because 50% of the container and 50vw of the window drift apart once the
   scrollbar is in the picture. The blocks keep their normal width here and the colour
   is spread sideways by a shadow, which takes no part in the layout: a spread rather
   than an offset, so the paint starts at the edge of the block instead of leaving a
   gap beside it, and clip-path keeps that spread from bleeding above and below. */
.repair-hero,
.repair-content {
    position: relative;
    clip-path: inset(0 -100vmax);
}

.repair-hero {
    background-color: var(--repair-green);
    box-shadow: 0 0 0 100vmax var(--repair-green);
    color: #fff;
    padding: 0.75rem 0 2rem;
}

.repair-content {
    background-color: var(--repair-grey);
    box-shadow: 0 0 0 100vmax var(--repair-grey);
    padding: 2rem 0 3rem;
}

.repair-container {
    width: 100%;
}

.repair-breadcrumb {
    font-size: 0.875rem;
    padding: 0.5rem 0 0.75rem;
}

.repair-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.repair-breadcrumb a:hover {
    text-decoration: underline;
}

.repair-hero-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.75rem;
}

/* The lead card over the green. */
.repair-hero-cards {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

/* The step index travels with the page while the steps scroll past it. */
.repair-columns {
    display: grid;
    /* The index takes a third of the row, the steps the rest. */
    grid-template-columns: minmax(33.333%, 1fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: start;
}

/* Pages without steps (the video call landing) have no index to show. */
.repair-columns.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.repair-index-card {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.repair-card {
    background: #fff;
    color: var(--repair-text);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 2px 18px rgb(0 0 0 / 8%);
}

.repair-card-title {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 500;
    margin: 0 0 1.25rem;
}

.repair-step-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repair-step-nav li + li {
    margin-top: 0.9rem;
}

.repair-step-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.25;
    text-decoration: none;
}

.repair-step-nav a:hover {
    color: var(--repair-green-dark);
}

.repair-step-nav-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 50%;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--repair-green);
}

.repair-lead-text {
    font-size: 1rem;
    line-height: 1.55;
    max-height: 11.5rem;
    overflow: hidden;
    position: relative;
}

.repair-lead-text.is-expanded {
    max-height: none;
}

.repair-lead-text ul,
.repair-lead-text ol {
    padding-left: 1.25rem;
    list-style: disc;
}

.repair-lead-text p:last-child {
    margin-bottom: 0;
}

.repair-lead-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ececec;
    background: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.repair-lead-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--repair-green);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
}

.repair-cover {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.repair-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.repair-step {
    list-style: none;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 2px 18px rgb(0 0 0 / 10%);
    border-radius: 20px;
    scroll-margin-top: 90px;
}

.repair-step + .repair-step {
    margin-top: 1.5rem;
}

.repair-step-head {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
}

.repair-step-num {
    width: 42px;
    height: 42px;
    font-size: 24px;
    line-height: 42px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-right: 15px;
    flex: 0 0 auto;
    background-color: var(--repair-green);
}

.repair-step-title {
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 500;
    margin: 0;
}

/* Picture on the left, body on the right, as on the legacy cards. */
.repair-step-body {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.repair-step-body > .repair-step-text:only-child {
    grid-column: 1 / -1;
}

/* One picture at a time with the round green arrows of the old Splide slider. */
.repair-slider {
    position: relative;
}

.repair-slider-window {
    overflow: hidden;
    border-radius: 12px;
}

.repair-slider-track {
    display: flex;
    transition: transform 0.3s ease;
}

.repair-slider-slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.repair-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--repair-green);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.repair-slider-arrow:hover {
    opacity: 1;
}

.repair-slider-arrow.is-prev {
    left: 5px;
}

.repair-slider-arrow.is-next {
    right: 5px;
}

.repair-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.repair-slider-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d4d4d4;
    cursor: pointer;
}

.repair-slider-dot.is-active {
    background: var(--repair-green);
}

.repair-step-text,
.repair-body {
    font-size: 1rem;
    line-height: 1.55;
}

/* Free body pages: white card, and the accordions of the old shop as <details>. */
.repair-body {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 18px rgb(0 0 0 / 10%);
    padding: 1.5rem;
}

.repair-body .m1 {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 1.25rem;
}

.repair-body .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.repair-faq {
    border-bottom: 2px solid #dee2e6;
    padding: 1.25rem 0;
}

.repair-faq:last-child {
    border-bottom: none;
}

.repair-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.25rem;
    color: #555;
    cursor: pointer;
    list-style: none;
}

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

/* The chevron of the old accordion, drawn with a border so it needs no icon font. */
.repair-faq-question::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--repair-green);
    border-bottom: 2px solid var(--repair-green);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.repair-faq[open] .repair-faq-question::after {
    transform: rotate(-135deg);
}

.repair-faq-answer {
    padding-top: 0.75rem;
}

.repair-faq-answer p:last-child {
    margin-bottom: 0;
}

.repair-step-text ul,
.repair-body ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.repair-step-text ol,
.repair-body ol {
    padding-left: 1.25rem;
    list-style: decimal;
}

.repair-step-text li,
.repair-body li,
.repair-lead-text li {
    margin-bottom: 0.35rem;
}

.repair-step-video {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--repair-green-dark);
    font-weight: 600;
}

/* Related guides, the legacy end-of-page box. */
.repair-related {
    margin-top: 2.5rem;
}

.repair-related-title {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.repair-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.repair-related-list a {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding: 0.9rem 1rem;
    box-shadow: 0 3px 0 rgb(0 0 0 / 10%);
    text-decoration: none;
    font-weight: 600;
}

.repair-related-list a:hover {
    color: var(--repair-green-dark);
}

/* Index page: green header, then one card per appliance group. */
.repair-index-hero .repair-hero-title {
    margin-bottom: 0.5rem;
}

.repair-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.repair-group {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 18px rgb(0 0 0 / 10%);
    overflow: hidden;
}

.repair-group-head {
    background: var(--repair-green);
    color: #fff;
    padding: 15px 20px;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.repair-group-list {
    list-style: none;
    margin: 0;
    padding: 10px 20px 20px;
}

.repair-group-list li + li {
    border-top: 1px solid #ececec;
}

.repair-group-list a {
    display: block;
    padding: 0.7rem 0;
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
}

.repair-group-list a:hover {
    color: var(--repair-green-dark);
}

/* Phones and small tablets: everything stacks and the cards go flat, the way the
   legacy media queries handled it. */
@media (max-width: 992px) {
    .repair-hero {
        padding-bottom: 1.5rem;
    }

    .repair-hero-title {
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }

    .repair-hero-cards {
        gap: 1rem;
    }


    /* No room for a rail: the index goes back above the steps and stops sticking. */
    .repair-columns {
        display: block;
    }

    .repair-index-card {
        position: static;
        max-height: none;
        margin-bottom: 1rem;
    }

    .repair-content {
        padding: 1.25rem 0 2rem;
    }

    .repair-card {
        padding: 1.25rem;
    }

    .repair-card-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .repair-step {
        padding: 1.25rem;
    }

    .repair-step-title {
        font-size: 1.2rem;
    }

    .repair-step-num {
        width: 37px;
        height: 37px;
        font-size: 18px;
        line-height: 37px;
        margin-right: 12px;
    }

    .repair-step-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .repair-slider {
        max-width: 100%;
    }
}