/* ============================================
   PROJECT BASE CSS
   Shared layout for ALL project pages.
   Use these class names in every project HTML.
   Only put project-specific overrides in each
   project's own CSS file (e.g. anglo-aryan.css)
   ============================================ */


/* --- Page wrapper --- */
section.project-home {
    overflow-x: hidden;
}

/* --- Main content area --- */
.project-main {
    display: block;
    margin: 0 2rem;
    overflow-x: hidden;
    color: var(--color-2);
}

.project-main p {
      font-weight: 300;
}


/* --- Hero image: full width, top of page --- */
.project-img-1 img {
    width: 100%;
    height: auto;
}


/* --- Text block 1: project title + intro --- */
.project-p-1 h1 {
    font-weight: 600;
    text-align: left;
    font-size: 2rem;
    padding-top: 4.3vmin;
    padding-left: 17vw;
    line-height: 1.4em;
    overflow-x: hidden;
    margin: 0;
}

.project-p-1 p {
    text-align: left;
    font-size: 1.5rem;
    width: 78%;
    padding-top: 1vmin;
    padding-bottom: 10vmin;
    padding-left: 17vw;
    line-height: 1.4em;
    overflow-x: hidden;
}


/* --- Logo / centred showcase image --- */
.project-img-2 {
    display: flex;
    justify-content: center;
}

.project-img-2 img {
    width: 70vmin;
    height: auto;
    padding-top: 4em;
    padding-bottom: 4em;
}


/* --- Text block 2: process / outcome description --- */
.project-p-2 p {
    text-align: left;
    font-size: 1.5rem;
    width: 78%;
    padding: 3.2vmin;
    padding-top: 3.8vmin;
    padding-bottom: 10vmin;
    padding-left: 17vw;
    line-height: 1.4em;
    overflow-x: hidden;
}


/* --- Side-by-side image pair --- */
.project-img-34 {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.project-img-3,
.project-img-4 {
    width: 50%;
}

.project-img-3 img,
.project-img-4 img {
    object-fit: cover;
    width: 100%;
    height: auto;
}


/* --- Full width image (use as many times as needed) --- */
.project-img-5 img {
    margin-top: 0.75rem;
    width: 100%;
    height: auto;
}


/* ============================================
   RESPONSIVE — Tablet (~950px)
   ============================================ */
@media only screen and (max-width: 950px) and (min-width: 551px) {

    .project-main {
        margin: 0 1.5rem;
    }

   

    .project-p-1 p,
    .project-p-2 p {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1.4rem;
    }

    .project-p-1 h1 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1.7rem;
    }
    
    
     .project-img-34 {
        margin-top: 0.5rem;
        gap: 0.75rem;
    }

    .project-img-5 img {
        margin-top: 0.5rem;
    }


}


/* ============================================
   RESPONSIVE — Mobile (~550px)
   ============================================ */
@media (max-width: 550px) {

    .project-main {
        margin: 0 1rem;
    }

    .project-p-1 p,
    .project-p-2 p {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1.3rem;
    }

    .project-p-1 h1 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 1.5rem;
    }

    .project-img-2 img {
        width: 60vmin;
    }
    
      .project-img-5 img {
        margin-top: 0.25rem;
    }

    .project-img-34 {
        margin-top: 0.25rem;
        gap: 0.5rem;
    }

   
}