/* ==========================================================================
   GeekFriends real content imagery
   GF-WEB-2E-2C
   ========================================================================== */


/* --------------------------------------------------------------------------
   FIELD EXPERIENCE — real field photographs
   -------------------------------------------------------------------------- */

.field-image {
    background-repeat: no-repeat;
    background-size: cover;
}

.field-image::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(12, 14, 18, .50) 0%,
            rgba(12, 14, 18, .10) 48%,
            rgba(12, 14, 18, .02) 100%
        );
}

.field-image::after {
    display: none;
}

.field-image span {
    position: relative;
    z-index: 2;

    text-shadow:
        0 1px 10px
        rgba(0, 0, 0, .30);
}


/* Soil sensor installed in an actual farm */

.field-image.soil {
    background-image:
        url("/images/content/soil-field-card-v4.jpg");

    background-position:
        center center;
}


/* IoT flow meter installed in irrigation piping */

.field-image.water {
    background-image:
        url("/images/content/flow-field-card-v4.jpg");

    background-position:
        center center;
}


/* Actual organization/group monitoring screen */

.field-image.group {
    background-color: #ffffff;

    background-image:
        url("/images/content/monitoring-group-card-v3.png");

    background-position:
        center top;
}


/* --------------------------------------------------------------------------
   WEB MONITORING — actual PlantDo Web Control screen
   -------------------------------------------------------------------------- */

.monitoring .dashboard {
    aspect-ratio: 8 / 5;

    min-height: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        #e7e2f1;

    background:
        #ffffff
        url("/images/content/monitoring-farm-main-v2.webp")
        center top /
        cover
        no-repeat;

    box-shadow:
        0 28px 80px
        rgba(35, 24, 58, .11);
}


/*
 * The HTML mock dashboard is intentionally retained in the document
 * for easy rollback, but the private Preview now displays the
 * actual Web Control screenshot.
 */

.monitoring .dashboard > * {
    display: none;
}


/* --------------------------------------------------------------------------
   PLANTDo HOME — actual product photograph
   -------------------------------------------------------------------------- */

.plantdo-visual {
    background:
        #f5f4f8
        url("/images/content/plantdo-home.webp")
        center center /
        cover
        no-repeat;
}


/*
 * Hide the temporary CSS illustration while retaining
 * the original markup for rollback.
 */

.plantdo-visual > * {
    display: none;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .monitoring .dashboard {
        aspect-ratio: 8 / 5;
    }

    .plantdo-visual {
        background-position:
            center center;
    }

}


@media (max-width: 650px) {

    .field-image.soil {
        background-position:
            50% 58%;
    }

    .field-image.water {
        background-position:
            50% 54%;
    }

    .field-image.group {
        background-position:
            center top;
    }

    .monitoring .dashboard {
        aspect-ratio: 4 / 3;

        background-position:
            center top;
    }

    .plantdo-visual {
        min-height: 390px;

        background-position:
            50% 50%;
    }

}


/* GF-WEB-HOME-IMG-1E START */
/* FIELD EXPERIENCE focal-point correction */

.field-image.soil {
    background-position: center center;
}

.field-image.water {
    background-position: center center;
}

.field-image.group {
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

/* GF-WEB-HOME-IMG-1E END */

/* GF-WEB-HOME-IMG-1O START */
/*
 * Corrected source photographs are already cropped to 8:5.
 * Override earlier card-specific zoom rules and display them
 * using the normal CSS cover behavior.
 */

.field-image.soil {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.field-image.water {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* GF-WEB-HOME-IMG-1O END */