/* =========================================================
   RAVEN OFFERINGS
========================================================= */

.raven-offerings {
    position: relative;
    isolation: isolate;

    padding:
        clamp(6rem, 10vw, 10rem)
        var(--page-gutter)
        clamp(7rem, 11vw, 11rem);

    overflow: hidden;

    background: var(--color-black);
    color: var(--color-white);
}

.raven-offerings__inner {
    width: min(100%, 78.75rem);
    margin-inline: auto;
}

/* =========================================================
   TITLE
========================================================= */

.raven-offerings__title {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(3.1rem, 6.75vw, 6rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: uppercase;

    will-change:
        opacity,
        transform,
        filter;
}

/* =========================================================
   GRID
========================================================= */

.raven-offerings__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-areas:
        "research content results"
        "mark-left design mark-right"
        "branding sales consulting";

    align-items: center;

    column-gap: clamp(0.75rem, 2vw, 1.75rem);
    row-gap: clamp(2.2rem, 4vw, 3.75rem);

    margin-top: clamp(4rem, 7vw, 6.5rem);
}

/* =========================================================
   OFFERING LINKS
========================================================= */

.raven-offering {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: clamp(3rem, 5vw, 4.25rem);

    color: var(--color-white);

    text-decoration: none;
    text-align: center;

    outline: none;

    will-change:
        opacity,
        transform,
        filter;
}

.raven-offering--research {
    grid-area: research;
}

.raven-offering--content {
    grid-area: content;
}

.raven-offering--results {
    grid-area: results;
}

.raven-offering--design {
    grid-area: design;
}

.raven-offering--branding {
    grid-area: branding;
}

.raven-offering--sales {
    grid-area: sales;
}

.raven-offering--consulting {
    grid-area: consulting;
}

.raven-offering__label {
    position: relative;
    z-index: 2;

    display: block;

    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.4vw, 3.125rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    white-space: nowrap;

    transition:
        color 320ms ease,
        transform 450ms var(--ease-premium);
}

.raven-offering__hover-icon {
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: calc(100% - 0.15rem);

    width: clamp(3.25rem, 5.2vw, 5.6rem);
    height: auto;

    opacity: 0;

    pointer-events: none;
    user-select: none;

    transform:
        translate(-50%, 1.25rem)
        scale(0.88);

    filter: blur(5px);

    transition:
        opacity 380ms ease,
        transform 500ms var(--ease-premium),
        filter 450ms ease;
}

/* =========================================================
   DESKTOP HOVER / FOCUS
========================================================= */

.raven-offering:hover .raven-offering__label,
.raven-offering:focus-visible .raven-offering__label {
    color: var(--color-raven-red);
    transform: translateY(0.2rem);
}

.raven-offering:hover .raven-offering__hover-icon,
.raven-offering:focus-visible .raven-offering__hover-icon {
    opacity: 1;

    transform:
        translate(-50%, 0)
        scale(1);

    filter: blur(0);
}

.raven-offering:focus-visible {
    border-radius: 0.4rem;

    outline: 2px solid var(--color-raven-red);
    outline-offset: 0.45rem;
}

/* =========================================================
   MOBILE ACTIVE-IN-VIEW STATE
========================================================= */

.raven-offering.is-in-view .raven-offering__label {
    color: var(--color-raven-red);
    transform: translateY(0.2rem);
}

.raven-offering.is-in-view .raven-offering__hover-icon {
    opacity: 1;

    transform:
        translate(-50%, 0)
        scale(1);

    filter: blur(0);
}

/* =========================================================
   STATIC WHITE MARKS
========================================================= */

.raven-offerings__mark {
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    will-change:
        opacity,
        transform,
        filter;
}

.raven-offerings__mark--left {
    grid-area: mark-left;
}

.raven-offerings__mark--right {
    grid-area: mark-right;
}

.raven-offerings__mark img {
    width: clamp(1.8rem, 2.8vw, 2.45rem);
    height: auto;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
    .raven-offerings__grid {
        column-gap: clamp(0.5rem, 1.4vw, 1.25rem);
    }

    .raven-offering__label {
        font-size: clamp(1.55rem, 2.8vw, 2.35rem);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .raven-offerings {
        padding:
            clamp(5rem, 17vw, 7rem)
            var(--page-gutter)
            clamp(6rem, 20vw, 8rem);
    }

    .raven-offerings__title {
        font-size: clamp(2.75rem, 13vw, 4.3rem);
    }

    .raven-offerings__grid {
        grid-template-columns: 1fr;

        grid-template-areas:
            "research"
            "content"
            "results"
            "design"
            "branding"
            "sales"
            "consulting";

        row-gap: clamp(4rem, 17vw, 6rem);

        margin-top: clamp(4rem, 16vw, 6rem);
    }

    .raven-offerings__mark {
        display: none;
    }

    .raven-offering {
        min-height: clamp(4rem, 18vw, 5.75rem);
    }

    .raven-offering__label {
        font-size: clamp(2rem, 9vw, 3rem);
        white-space: normal;
    }

    .raven-offering__hover-icon {
        display: block;

        bottom: calc(100% - 0.35rem);

        width: clamp(3.25rem, 19vw, 5rem);
    }

    /*
     * Στο mobile δεν βασιζόμαστε στο hover.
     * Το offerings.js προσθέτει is-in-view στην υπηρεσία
     * που βρίσκεται πιο κοντά στο κέντρο του viewport.
     */
    .raven-offering.is-in-view .raven-offering__label {
        color: var(--color-raven-red);
        transform: translateY(0.2rem);
    }

    .raven-offering.is-in-view .raven-offering__hover-icon {
        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1);

        filter: blur(0);
    }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none), (pointer: coarse) {
    .raven-offering__hover-icon {
        display: block;
    }

    /*
     * Αποφεύγουμε sticky hover states σε touch browsers.
     * Η οπτική ενεργοποίηση γίνεται μόνο μέσω is-in-view.
     */
    .raven-offering:hover .raven-offering__label {
        color: var(--color-white);
        transform: none;
    }

    .raven-offering:hover .raven-offering__hover-icon {
        opacity: 0;

        transform:
            translate(-50%, 1.25rem)
            scale(0.88);

        filter: blur(5px);
    }

    .raven-offering.is-in-view .raven-offering__label {
        color: var(--color-raven-red);
        transform: translateY(0.2rem);
    }

    .raven-offering.is-in-view .raven-offering__hover-icon {
        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1);

        filter: blur(0);
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .raven-offering__label,
    .raven-offering__hover-icon {
        transition: none;
    }
}