/* === essence.css === */

.essence-section {
    background: #edf2f2;
    padding: 60px 0 0;
    padding-top: 36px;
}

.essence-heading {
    font-size: 36px;
    font-weight: 700;
    color: #074158;
    text-align: center;
    padding: 0 24px 40px;
    margin: 0;
    line-height: 36px;
    padding-bottom: 30px;
}

/* ── Grid: 4 equal columns, NO flex change on hover ─────── */
.essence-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: 420px;
    background-color: #081b24;
}

/* Hide individual panel images since bg handles it */
.essence-face--img img {
    display: none;
}

.essence-face--img {
    background: transparent;
    /* let grid bg show through */
}

/* ── Panel ───────────────────────────────────────────────── */
.essence-panel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* ── IMAGE FACE — default state, always fills panel ─────── */
.essence-face--img {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.35s ease;
    background: #081b24;
    /* fallback */
}

.essence-face--img img {
    width: 100%;
    height: 117%;
    object-fit: contain;
    /* show full illustration, no crop */
    object-position: center top;
    /* anchor to top so figures aren't cut */
    background: #081b24;
    display: block;
    margin-top: -4px;
}

.essence-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 40, 55, 0.45);
}

/* Teal label bar at bottom */
.essence-img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #61c5b8;
    color: #f2f2f2;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 18px 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

/* ── TEXT FACE — shown only while hovering ──────────────── */
.essence-face--text {
    position: absolute;
    inset: 0;
    /* Figma 9:1690 builds the hovered card as this translucent wash OVER the card's
       own line art, not as a fill — the art stays visible underneath. The old
       #496573 was exactly what this composites to over the #021c25 card, i.e. the
       art had been flattened out of it. */
    background: rgba(80, 121, 137, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    z-index: 3;
    /* Starts below, slides up on hover */
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.2s ease;
}

/* Slide up into view on hover */
.essence-panel:hover .essence-face--text {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: all;
}

/* The art face STAYS on hover — it is the hovered card's background in Figma, read
   through the wash above. It used to drop to 0.5, which the opaque wash hid anyway.
   The two layers the design's hovered card does not have go instead: its own teal
   name bar (the wash carries the name) and the resting state's dark tint, which
   would double up with the wash and bury the art. */
.essence-panel:hover .essence-face--img {
    opacity: 1;
    transition: opacity 0.3s ease 0.1s;
}

.essence-panel:hover .essence-img-overlay,
.essence-panel:hover .essence-img-label {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.essence-img-overlay,
.essence-img-label {
    transition: opacity 0.3s ease;
}

/* ── Text content ─────────── */
.essence-text-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.essence-label-text {
    font-size: 2rem;
    font-weight: 800;
    color: #f2f2f2;
    margin: 0;
    padding-top: 32px;
    align-self: center;
}

.essence-icon {
    display: none;
}

.essence-icon svg {
    width: 100%;
    height: 100%;
}

/* Bottom group: desc + button pinned to bottom */
.essence-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 32px;
    width: 100%;
}

.essence-desc {
    font-size: 0.98rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

.essence-btn {
    display: inline-block;
    margin-top: 0;
    background: #f2f2f2;
    color: #021c25;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: 40px;
    text-decoration: none;
    border: none;
    transition:
        background 0.2s,
        border-color 0.2s;
}

.essence-btn:hover {
    background: #507989;
    border-color: #f2f2f2;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .essence-grid {
        height: 420px;
    }

    .essence-desc {
        font-size: 0.78rem;
    }

    /* The People illustration (720x994) carries ~30% empty canvas below the
       figures' legs; contain rendered it small with a dark gap above the label.
       Cover + a high crop point fills the card and drops that dead space. */
    #essPanel3 .essence-face--img img {
        height: 100%;
        margin-top: 0;
        object-fit: cover;
        object-position: center 18%;
    }
}

@media (max-width: 640px) {
    .essence-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 700px;
    }
}

@media (max-width: 420px) {
    .essence-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        height: auto;
    }

    .essence-panel {
        height: 240px;
    }
}
/* Full-bleed the Essence band past the 16" cap; the heading is centred text and
   the grid line-art uses object-fit:contain, so neither spreads/stretches. */
@media (min-width: 1729px) {
    .essence-section {
        width: var(--bleed-w);
        margin-left: var(--bleed-left);
        margin-right: 0;
    }
}