/* =========================================================
   AGAPE TRUST
   GLOBAL RESPONSIVE FOUNDATION
========================================================= */

/* ---------------------------------------------------------
   1. GLOBAL BOX SIZING
--------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   2. PREVENT HORIZONTAL OVERFLOW
--------------------------------------------------------- */

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}


/* ---------------------------------------------------------
   3. RESPONSIVE IMAGES
--------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   4. RESPONSIVE CONTAINERS
--------------------------------------------------------- */

.container {
    width: 92%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   TABLET
   769px - 1100px
========================================================= */

@media (max-width: 1100px) {

    /* Containers */

    .container {
        width: 90%;
    }


    /* Typography */

    h1 {
        font-size: clamp(40px, 6vw, 64px);
    }

    h2 {
        font-size: clamp(32px, 5vw, 48px);
    }

    h3 {
        font-size: clamp(24px, 4vw, 34px);
    }


    /* General grids */

    .grid,
    .cards-grid,
    .projects-grid,
    .services-grid,
    .impact-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* General two-column sections */

    .two-column,
    .split-section,
    .content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* Large sections */

    section {
        padding-left: 0;
        padding-right: 0;
    }


    /* Buttons */

    .btn-primary,
    .btn-outline,
    .mega-btn {
        max-width: 100%;
    }


    /* Hero */

    .hero-content {
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE
   481px - 768px
========================================================= */

@media (max-width: 768px) {

    /* Container */

    .container {
        width: 90%;
    }


    /* Typography */

    h1 {
        font-size: clamp(34px, 9vw, 52px);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(28px, 7vw, 42px);
        line-height: 1.15;
    }

    h3 {
        font-size: clamp(22px, 6vw, 32px);
    }

    p {
        font-size: 15px;
        line-height: 1.75;
    }


    /* General grids */

    .grid,
    .cards-grid,
    .projects-grid,
    .services-grid,
    .impact-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }


    /* Two-column layouts */

    .two-column,
    .split-section,
    .content-grid,
    .about-grid,
    .project-grid,
    .testimonial-content,
    .testimonials-content {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }


    /* Hero */

    .hero,
    .project-hero,
    .page-hero {
        min-height: 520px;
    }

    .hero-content,
    .project-hero .hero-content {
        max-width: 100%;
        padding: 60px 0;
    }

    .hero-content h1,
    .project-hero .hero-content h1 {
        font-size: clamp(36px, 10vw, 52px);
        word-break: normal;
        overflow-wrap: break-word;
    }

    .hero-content p,
    .project-hero .hero-content p {
        max-width: 100%;
        font-size: 15px;
    }


    /* Hero buttons */

    .hero-buttons,
    .cta-buttons,
    .testimonial-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-buttons a,
    .cta-buttons a,
    .testimonial-buttons a {
        width: 100%;
        text-align: center;
    }


    /* Cards */

    .card,
    .project-card,
    .cta-card {
        width: 100%;
    }


    /* Images inside cards */

    .card img,
    .project-card img,
    .cta-card img {
        width: 100%;
        max-width: 100%;
    }


    /* Forms */

    form {
        width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    input,
    textarea,
    select {
        width: 100%;
        max-width: 100%;
    }

    textarea {
        min-height: 160px;
    }


    /* Sections */

    section {
        width: 100%;
    }


    /* Tables */

    .table-wrapper {
        width: 100%;
        overflow-x: auto;
    }


    table {
        min-width: 600px;
    }


    /* Footer */

    .footer-grid,
    .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }

}


/* =========================================================
   SMALL PHONES
   320px - 480px
========================================================= */

@media (max-width: 480px) {

    .container {
        width: 92%;
    }


    /* Typography */

    h1 {
        font-size: clamp(32px, 10vw, 44px);
    }

    h2 {
        font-size: clamp(27px, 8vw, 36px);
    }

    h3 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* Section spacing */

    section {
        padding-top: 55px;
        padding-bottom: 55px;
    }


    /* Hero */

    .hero,
    .project-hero,
    .page-hero {
        min-height: 500px;
    }

    .hero-content,
    .project-hero .hero-content {
        padding: 50px 0;
    }

    .hero-content h1,
    .project-hero .hero-content h1 {
        font-size: clamp(32px, 10vw, 42px);
    }


    /* Buttons */

    .btn-primary,
    .btn-outline,
    .mega-btn {
        width: 100%;
        padding: 13px 20px;
    }


    /* Cards */

    .card,
    .project-card,
    .cta-card {
        padding: 20px;
    }


    /* Images */

    img {
        max-width: 100%;
    }


    /* Prevent long text from breaking layout */

    h1,
    h2,
    h3,
    h4,
    p,
    a,
    span {
        overflow-wrap: break-word;
    }

}


/* =========================================================
   VERY SMALL PHONES
   320px and below
========================================================= */

@media (max-width: 320px) {

    .container {
        width: 94%;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    p {
        font-size: 13px;
    }

    .btn-primary,
    .btn-outline {
        font-size: 13px;
        padding: 12px 16px;
    }

}