/* =========================================================
   SR AGENCIES — FOUNDERS RESPONSIVE POSITIONING FIX

   Purpose:
   Reduce excessive overlap between founder portraits
   on iPad Pro and MacBook Air screen sizes.

   Original HTML and founders.css remain unchanged.
========================================================= */


/* =========================================================
   TABLET LANDSCAPE & LAPTOP SCREENS
   1025px – 1600px
========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1600px) {

    /* Founder image area */

    .founders-visual {

        position: relative;

        min-height: clamp(540px, 42vw, 660px);

    }


    /* Both founder cards */

    .founders-visual .founder-profile {

        position: absolute;

        width: min(52%, 330px);

        max-width: 330px;

    }


    /* First founder — Siraj */

    .founders-visual .founder-profile-primary {

        top: 20px;

        left: 0;

        right: auto;

        z-index: 3;

        margin: 0;

    }


    /* Second founder — Rayees */

    .founders-visual .founder-profile-secondary {

        top: 98px;

        right: 0;

        left: auto;

        z-index: 4;

        margin: 0;

    }


    /* Preserve image proportions */

    .founders-visual .founder-profile-image {

        width: 100%;

        aspect-ratio: 4 / 5;

        overflow: hidden;

    }


    .founders-visual .founder-profile-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }


    /* Keep founder information readable */

    .founders-visual .founder-profile-details {

        min-height: 100px;

        padding: 16px 15px;

    }


    .founders-visual .founder-profile-details h3 {

        font-size: clamp(12px, 1.05vw, 16px);

    }


    .founders-visual .founder-profile-details p {

        font-size: clamp(10px, 0.85vw, 12px);

    }

}


/* =========================================================
   MEDIUM LAPTOPS — ADDITIONAL REFINEMENT
   1025px – 1200px
========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1200px) {

    .founders-visual {

        min-height: 540px;

    }

    .founders-visual .founder-profile {

        width: 52%;

    }

    .founders-visual .founder-profile-primary {

        top: 18px;

        left: 0;

    }

    .founders-visual .founder-profile-secondary {

        top: 88px;

        right: 0;

    }

}


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

@media (prefers-reduced-motion: reduce) {

    .founders-visual .founder-profile,
    .founders-visual .founder-profile-image img {

        transition: none;

    }

}