/**
 * Plumber Services — frontend styles.
 * Colours, fonts and column count come in as CSS custom properties on the
 * .plumber-services element (see render()).
 */

.plumber-services {
    --ps-section-bg: #f5f8fb;
    --ps-accent: #e07a3f;
    --ps-heading: #0a2540;
    --ps-text: #52617a;
    --ps-card-bg: #ffffff;
    --ps-card-title: #0a2540;
    --ps-icon: #0a2540;
    --ps-icon-bg: #eaf1f8;
    --ps-cols: 3;
    --ps-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Full-bleed coloured band, even when dropped inside the content column. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background: var(--ps-section-bg);
}

.plumber-services * {
    box-sizing: border-box;
}

/* Force Astra to drop all automatic underlines inside this section */
.plumber-services a,
.plumber-services a:hover,
.plumber-services a:focus,
.plumber-services a:active,
.plumber-services a *,
.plumber-services__card,
.plumber-services__link {
    text-decoration: none !important;
}

.plumber-services__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* --- Section header --------------------------------------------------- */
.plumber-services__head {
    max-width: var(--ps-head-width, 640px);
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
    text-align: center;
}

.plumber-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 0.85rem;
    font-family: var(--ps-font-eyebrow, var(--ps-font-body)), var(--ps-fallback);
    font-size: var(--ps-size-eyebrow, 0.78rem);
    font-weight: 700;
    line-height: var(--ps-lh-eyebrow, normal);
    letter-spacing: var(--ps-ls-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--ps-eyebrow-color, var(--ps-accent));
}

.plumber-services__eyebrow::before,
.plumber-services__eyebrow::after {
    content: "";
    width: 1.6rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ps-eyebrow-color, var(--ps-accent));
    opacity: 0.6;
}

.plumber-services__title {
    margin: 0 0 0.85rem;
    font-family: var(--ps-font-heading), var(--ps-fallback);
    font-size: var(--ps-size-heading, clamp(1.9rem, 4.5vw, 2.9rem));
    font-weight: 800;
    line-height: var(--ps-lh-heading, 1.1);
    letter-spacing: var(--ps-ls-heading, -0.02em);
    color: var(--ps-heading);
    text-wrap: balance;
}

.plumber-services__subtitle {
    margin: 0;
    font-family: var(--ps-font-subheading, var(--ps-font-body)), var(--ps-fallback);
    font-size: var(--ps-size-subheading, clamp(1.02rem, 2vw, 1.18rem));
    line-height: var(--ps-lh-subheading, 1.6);
    letter-spacing: var(--ps-ls-subheading, normal);
    color: var(--ps-subheading-color, var(--ps-text));
}

/* --- Grid ------------------------------------------------------------- */
.plumber-services__grid {
    display: grid;
    grid-template-columns: repeat(var(--ps-cols), minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.6rem);
}

/* --- Card ------------------------------------------------------------- */
.plumber-services__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.6rem, 3vw, 2.1rem);
    background: var(--ps-card-bg);
    border: 1px solid color-mix(in srgb, var(--ps-heading) 9%, transparent);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04);
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Cards that are links lift on hover. */
a.plumber-services__card:hover,
a.plumber-services__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(10, 37, 64, 0.35);
    border-color: color-mix(in srgb, var(--ps-accent) 45%, transparent);
}

a.plumber-services__card:focus-visible {
    outline: 3px solid var(--ps-accent);
    outline-offset: 3px;
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .plumber-services__card {
        border-color: rgba(10, 37, 64, 0.1);
    }
}

/* --- Icon badge ------------------------------------------------------- */
.plumber-services__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: var(--ps-icon-bg);
    color: var(--ps-icon);
    transition: background 0.22s ease, color 0.22s ease;
}

.plumber-services__icon-svg {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
}

.plumber-services__icon i {
    font-size: 1.7rem;
    line-height: 1;
}

a.plumber-services__card:hover .plumber-services__icon,
a.plumber-services__card:focus-visible .plumber-services__icon {
    background: var(--ps-accent);
    color: #fff;
}

/* --- Text ------------------------------------------------------------- */
.plumber-services__card-title {
    margin: 0 0 0.5rem;
    font-family: var(--ps-font-cardtitle), var(--ps-fallback);
    font-size: var(--ps-size-cardtitle, clamp(1.15rem, 2vw, 1.3rem));
    font-weight: 700;
    line-height: var(--ps-lh-cardtitle, 1.25);
    letter-spacing: var(--ps-ls-cardtitle, normal);
    color: var(--ps-card-title);
}

.plumber-services__card-desc {
    margin: 0 0 1.25rem;
    font-family: var(--ps-font-body), var(--ps-fallback);
    font-size: var(--ps-size-body, 0.98rem);
    line-height: var(--ps-lh-body, 1.6);
    letter-spacing: var(--ps-ls-body, normal);
    color: var(--ps-text);
}

/* --- Learn more link -------------------------------------------------- */
.plumber-services__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-family: var(--ps-font-link), var(--ps-fallback);
    font-size: var(--ps-size-link, 0.95rem);
    font-weight: 700;
    line-height: var(--ps-lh-link, normal);
    letter-spacing: var(--ps-ls-link, normal);
    color: var(--ps-link-color, var(--ps-accent));
}

.plumber-services__arrow {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform 0.22s ease;
}

a.plumber-services__card:hover .plumber-services__arrow,
a.plumber-services__card:focus-visible .plumber-services__arrow {
    transform: translateX(4px);
}

/* --- Entrance animation ----------------------------------------------- */
.plumber-services__card {
    opacity: 0;
    transform: translateY(20px);
    animation: plumber-services-rise 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

.plumber-services__card:nth-child(2) { animation-delay: 0.08s; }
.plumber-services__card:nth-child(3) { animation-delay: 0.16s; }
.plumber-services__card:nth-child(4) { animation-delay: 0.24s; }
.plumber-services__card:nth-child(5) { animation-delay: 0.32s; }
.plumber-services__card:nth-child(6) { animation-delay: 0.40s; }
.plumber-services__card:nth-child(n+7) { animation-delay: 0.48s; }

@keyframes plumber-services-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 980px) {
    .plumber-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .plumber-services__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .plumber-services__card {
        /* A touch more horizontal feel on phones: icon beside nothing, full width. */
        padding: 1.5rem 1.4rem;
    }
    .plumber-services__icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }
    .plumber-services__link {
        /* Bigger tap area on touch screens. */
        padding: 0.35rem 0;
    }
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .plumber-services__card,
    .plumber-services__arrow,
    .plumber-services__icon {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        transform: none;
    }
}


/* --- Buttons below the grid ------------------------------------------- */
.plumber-services__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}
.plumber-services__btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85em 1.6em;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
    border-radius: var(--ps-btn-radius, 10px);
    font-family: var(--ps-font-btn, var(--ps-font-body)), var(--ps-fallback);
    font-size: var(--ps-size-btn, 1rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ps-btn-ls, normal);
    text-decoration: none;
    cursor: pointer;
    /* Keep the button on its own compositor layer so the hover lift moves a
       pre-rendered layer rather than repainting the icon glyph each frame
       (which is what made the icon appear to wiggle). */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.plumber-services__btn:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--ps-btn-hover-shadow, 0 14px 26px -14px rgba(10, 37, 64, 0.5));
}
/* Spacing between the icon and label when a button has an icon. The order
   (icon left or right of the text) is set in the markup. */
.plumber-services__btn--icon { gap: 0.55em; }
/* The icon is decorative. Letting it catch pointer events makes it flicker as
   the button lifts on hover (the cursor crosses the glyph as it moves), so the
   glyph ignores the pointer and the link itself handles the hover. */
.plumber-services__btn i,
.plumber-services__btn svg {
    pointer-events: none;
}
.plumber-services__btn:active { transform: translate3d(0, 0, 0); }
.plumber-services__btn:focus-visible {
    outline: 3px solid var(--ps-accent);
    outline-offset: 3px;
}
.plumber-services__btn--1 {
    background: var(--ps-btn1-bg, var(--ps-accent));
    color: var(--ps-btn1-text, #fff);
    border-width: var(--ps-btn1-bw, 0px);
    border-color: var(--ps-btn1-border, transparent);
}
.plumber-services__btn--1:hover {
    background: var(--ps-btn1-hbg, var(--ps-btn1-bg, var(--ps-accent)));
    color: var(--ps-btn1-htext, var(--ps-btn1-text, #fff));
    border-color: var(--ps-btn1-hborder, var(--ps-btn1-border, transparent));
}
.plumber-services__btn--2 {
    background: var(--ps-btn2-bg, #eef3f8);
    color: var(--ps-btn2-text, var(--ps-heading));
    border-width: var(--ps-btn2-bw, 0px);
    border-color: var(--ps-btn2-border, transparent);
}
.plumber-services__btn--2:hover {
    background: var(--ps-btn2-hbg, var(--ps-btn2-bg, #eef3f8));
    color: var(--ps-btn2-htext, var(--ps-btn2-text, var(--ps-heading)));
    border-color: var(--ps-btn2-hborder, var(--ps-btn2-border, transparent));
}
@media (max-width: 480px) {
    .plumber-services__cta { flex-direction: column; align-items: stretch; }
    .plumber-services__btn { width: 100%; }
}