/* ================================================================
   Secretary Pack — Brand color tokens (single source of truth)
   Layered into @layer overrides so it wins over @layer theme.
   Enqueued separately by assets.php (not @imported from main.css)
   so main.css stays generic and reusable across packs.

   This file owns ALL pack-specific brand colors. The generic
   theme.css consumes them via --color-* and never declares any
   colored values itself — so theme.css is reusable as-is for every
   future pack (hairdresser, plumber, etc.).

   At runtime the cascade is:
     --color-primary → consumed by theme.css to build --bs-primary,
                       --surface-link, --bs-heading-color, etc.
     --bs-*-rgb      → consumed by rgba()-based rules in
                       bootstrap-fixes.css and others.

   When the Customizer overrides a color, it writes directly to
   --color-primary / --color-secondary / --color-accent (and their
   matching *-rgb triplets). No bridge layer needed.
   ================================================================ */

@layer overrides {

    :root {
        /* ── Brand hex (Customizer-driven) ────────────────────── */
        --color-primary:   #274a31;
        --color-secondary: #1D1E1C;
        --color-accent:    #c9a96e;

        /* RGB triplets — kept in sync with the hex values above.
           Used by rgba() rules; the Customizer recomputes them
           from the hex via hex_to_rgb_triplet(). */
        --color-primary-rgb:   39, 74, 49;     /* #274a31 */
        --color-secondary-rgb: 29, 30, 28;     /* #1D1E1C */
        --color-accent-rgb:    201, 169, 110;  /* #c9a96e */

        /* ── Pack-specific neutral tones ──────────────────────── */
        --color-bg-light: #f7fafd;  /* off-white section background */

        /* ── Bridges to Bootstrap rgb triplets ────────────────── */
        --bs-primary-rgb:    var(--color-primary-rgb);
        --bs-secondary-rgb:  var(--color-secondary-rgb);
        --bs-accent-rgb:     var(--color-accent-rgb);
        --bs-link-color-rgb: var(--color-primary-rgb);
    }

    /* ════════════════════════════════════════════════════════════════
       Services grid — grouped sections + image-overlay cards
       (used by /templates/template-parts/services-grid.php)
    ════════════════════════════════════════════════════════════════ */

    /* ── Section grouping a parent's children ───────────────────── */

    .services-group {
        margin-bottom: 4.5rem;
    }
    .services-group:last-child {
        margin-bottom: 0;
    }

    .services-group__header {
        max-width: 42rem;
        margin-bottom: 2rem;
    }

    .services-group__title {
        margin: 0 0 .5rem;
        font-size: clamp(1.5rem, 2.5vw, 2.25rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.01em;
        position: relative;
        padding-bottom: .75rem;
    }
    .services-group__title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 48px;
        height: 3px;
        background: var(--color-accent);
        border-radius: 2px;
    }

    .services-group__title-link {
        color: var(--color-primary);
        text-decoration: none;
        transition: color .2s ease;
    }
    .services-group__title-link:hover,
    .services-group__title-link:focus-visible {
        color: var(--color-accent);
    }

    .services-group__lead {
        color: var(--surface-muted, rgba(0, 0, 0, .6));
        font-size: 1rem;
        margin: 0;
        line-height: 1.55;
    }

    /* ── Image-overlay card ─────────────────────────────────────── */

    .service-overlay-card {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 4px;
        aspect-ratio: 4 / 5;
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
        transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                    box-shadow .35s ease;
        will-change: transform;
        /*height: 100%;*/
        width: 100%;
    }
    .service-overlay-card:hover,
    .service-overlay-card:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    }

    .service-overlay-card__link {
        position: absolute;
        inset: 0;
        display: block;
        color: #fff;
        text-decoration: none;
    }
    .service-overlay-card__link:hover,
    .service-overlay-card__link:focus-visible {
        color: #fff;
    }

    .service-overlay-card__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2, .8, .2, 1),
                    filter .35s ease;
        filter: saturate(.95);
    }
    .service-overlay-card:hover .service-overlay-card__img,
    .service-overlay-card:focus-within .service-overlay-card__img {
        transform: scale(1.06);
        filter: saturate(1.05);
    }

    .service-overlay-card__gradient {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0)    35%,
            rgba(0, 0, 0, .35) 60%,
            rgba(0, 0, 0, .85) 100%
        );
        pointer-events: none;
    }

    /* When the card has no thumbnail, intensify the gradient overlay
       on top of the brand gradient background for a richer look. */
    .service-overlay-card--no-image .service-overlay-card__gradient {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0)     0%,
            rgba(0, 0, 0, .15) 60%,
            rgba(0, 0, 0, .55) 100%
        );
    }

    .service-overlay-card__content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1.5rem 1.5rem 1.25rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .service-overlay-card__title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.25;
        color: #fff;
        letter-spacing: -.005em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    }

    .service-overlay-card__excerpt {
        margin: 0;
        font-size: .9rem;
        line-height: 1.45;
        color: rgba(255, 255, 255, .88);
        /* Limit excerpt to 3 lines for visual consistency across cards. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .service-overlay-card__cta {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        margin-top: .25rem;
        font-size: .85rem;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--color-accent);
        text-transform: uppercase;
        transition: gap .25s ease, color .2s ease;
    }
    .service-overlay-card:hover .service-overlay-card__cta,
    .service-overlay-card:focus-within .service-overlay-card__cta {
        gap: .65rem;
        color: #fff;
    }

    /* Mobile: relax the aspect ratio so cards aren't overly tall. */
    @media (max-width: 575.98px) {
        .service-overlay-card {
            aspect-ratio: 16 / 10;
        }
        .service-overlay-card__content {
            padding: 1.25rem 1.25rem 1rem;
        }
    }
}