/*
 * Pacific -- design pack for the oneclick theme.
 *
 * Loaded dead last in the cascade (functions.php oneclick_assets()), only when
 * oneclick_site('design_template') is 'pacific'. Everything here is geometry,
 * spacing, surfaces and art direction. COLOUR AND TYPE ARE NOT OURS TO SET --
 * they belong to the customer's brand tokens (--ocf-primary, --ocf-bg-dark,
 * --ocf-heading, ...) and to the chosen skin. There is deliberately not one
 * literal hex value in this file.
 *
 * What makes Pacific Pacific:
 *   - the hero is a full-bleed photograph under a dark, directional gradient
 *   - there is NO form in the hero (Lightning keeps its "Send a Request" card);
 *     the form still exists, on the contact page, exactly as before
 *   - square edges: zero-radius surfaces, a barely-rounded card, a soft button
 *   - eyebrows are sentence-case with a short accent underline
 *   - services sit on a faint brand-tinted wash instead of a flat panel
 */

.ocf-hero {
    display: grid;
    min-height: clamp(37rem, 56vw, 50rem);
    align-items: center;
    border-radius: 0;
    background: var(--ocf-bg-dark);
    overflow: hidden;
    isolation: isolate;
}

:root {
    /* Square edges. Cards and images keep a hairline radius so photos do not
       fight the surrounding rules. */
    --radius-sm: 0;
    --radius: 0;
    --radius-lg: 0;
    --button-radius: 10px;
    --card-radius: 4px;
    --card-radius-lg: 4px;

    /* Reused by the mobile hero shade and by page headers, which paint the
       same directional dark-to-brand gradient over their own images. */
    --pacific-shade: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ocf-bg-dark) 90%, var(--ocf-primary)) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 70%, var(--ocf-primary)) 42%,
        color-mix(in srgb, var(--ocf-bg-dark) 30%, transparent) 68%,
        transparent 96%
    );
    --pacific-shade-mobile: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocf-bg-dark) 78%, var(--ocf-primary)) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 88%, var(--ocf-primary)) 100%
    );
    --pacific-accent-width: clamp(2.75rem, 4vw, 3.5rem);
}

.ocf-hero__media {
    position: absolute;
    inset: 0;
    opacity: 1;
}

.ocf-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ocf-hero__shade {
    position: absolute;
    inset: 0;
    /* Opaque where the copy sits, gone by the right edge, so the photograph
       is genuinely visible rather than merely implied. Built from the site's
       own dark token, tinted toward the brand colour -- never a literal hex. */
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ocf-bg-dark) 90%, var(--ocf-primary)) 0%,
        color-mix(in srgb, var(--ocf-bg-dark) 70%, var(--ocf-primary)) 42%,
        color-mix(in srgb, var(--ocf-bg-dark) 30%, transparent) 68%,
        transparent 96%
    );
    opacity: 1;
}

/* One column: the form column is gone, so the copy is free to breathe. */
.ocf-hero__grid,
.ocf-hero .ocf-hero__grid {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: inherit;
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.ocf-hero__content {
    width: 65%;
    max-width: none;
}

.ocf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ocf-heading-alt);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ocf-hero__headline {
    margin-top: 1.5rem;
    color: var(--ocf-heading-alt);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.ocf-hero__intro {
    max-width: 46ch;
    margin-top: 1.85rem;
    color: var(--ocf-body-alt);
    line-height: 1.7;
}

.ocf-hero__actions {
    align-items: center;
    margin-top: 2.35rem;
}

.ocf-hero__actions .btn-primary {
    min-height: 4.25rem;
    padding-inline: clamp(1.75rem, 4vw, 2.5rem);
    background: var(--ocf-primary);
    color: var(--ocf-primary-contrast);
    border-radius: var(--button-radius);
    box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--ocf-primary) 16%, transparent);
}

.ocf-hero__actions .btn-primary:hover {
    background: color-mix(in srgb, var(--ocf-primary) 86%, var(--ocf-heading));
    color: var(--ocf-primary-contrast);
    box-shadow: 0 0.8rem 1.45rem color-mix(in srgb, var(--ocf-primary) 24%, transparent);
}

.ocf-hero__form,
.ocf-hero__checks {
    /* No form in the hero. Task 3 also stops rendering it server-side; this
       rule guarantees the look even on a site whose theme PHP predates that
       change. */
    display: none;
}

/* --- Section furniture ------------------------------------------------- */

.eyebrow,
.ocf-about__eyebrow,
.ocf-services-eyebrow,
.ocf-service-areas__eyebrow,
.ocf-cta__eyebrow {
    color: var(--ocf-heading);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.ocf-about__eyebrow::after,
.ocf-services-eyebrow::after,
.ocf-service-areas__eyebrow::after,
.ocf-cta__eyebrow::after {
    display: block;
    width: var(--pacific-accent-width);
    height: 3px;
    margin-top: 0.6rem;
    background: var(--ocf-primary);
    content: "";
}

.ocf-services:not(.ocf-services--embedded) {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ocf-primary) 3%, var(--ocf-bg-alt)) 0%,
        color-mix(in srgb, var(--ocf-primary) 8%, var(--ocf-bg-alt)) 100%
    );
}

/* Page headers reuse the hero's directional shade over the page image. */
.ocf-page-header:not([data-ocf-tone="light"])::before {
    background-image: var(--pacific-shade), var(--page-header-image);
    opacity: 1;
}

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 860px) {
    .ocf-hero {
        min-height: clamp(28rem, 90vw, 34rem);
    }

    .ocf-hero__shade {
        background: var(--pacific-shade-mobile);
    }

    .ocf-hero__content {
        width: 100%;
    }

    .ocf-hero__grid,
    .ocf-hero .ocf-hero__grid {
        padding-block: clamp(3rem, 12vw, 4.5rem);
    }
}

/* --- What Makes Us Different (Pacific only) ---------------------------- */

.ocf-difference__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.ocf-difference__eyebrow::after {
    display: block;
    width: var(--pacific-accent-width);
    height: 3px;
    margin-top: 0.6rem;
    background: var(--ocf-primary);
    content: "";
}

.ocf-difference__headline {
    margin-top: 1.1rem;
}

.ocf-difference__body {
    margin-top: 1.4rem;
    line-height: 1.7;
}

.ocf-difference__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--card-radius);
    box-shadow: 0 5px 5px color-mix(in srgb, var(--ocf-heading) 5%, transparent);
}

@media (max-width: 860px) {
    .ocf-difference__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}