/* ============================================================================
   PROJECT RESPONSIVE STYLES — Canopus.lk
   Enhances responsiveness for project pages
   ============================================================================ */

/* ------------------------------
   GLOBAL TYPOGRAPHY ADJUSTMENTS
------------------------------ */
@media (max-width: 768px) {
    .project-title {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .info-card h4 {
        font-size: 1.15rem;
    }

    .info-card p,
    .info-card li {
        font-size: 0.92rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .project-title {
        font-size: 1.45rem;
    }

    .info-card {
        padding: 22px;
    }

    .info-card p,
    .info-card li {
        font-size: 0.9rem;
    }
}


/* ------------------------------
   HERO IMAGE BEHAVIOR
------------------------------ */
@media (max-width: 992px) {
    .project-hero {
        height: 420px;
    }
}

@media (max-width: 768px) {
    .project-hero {
        height: 300px;
        background-position: top;
    }
}

@media (max-width: 480px) {
    .project-hero {
        height: 240px;
        background-position: center top;
    }
}


/* ------------------------------
   META BOX RESPONSIVE GRID
------------------------------ */
@media (max-width: 768px) {
    .meta-box {
        padding: 20px 15px;
    }

    .meta-item i {
        font-size: 1.5rem;
    }

    .meta-item h6 {
        font-size: 0.95rem;
    }

    .meta-item p {
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .meta-item {
        margin-bottom: 18px;
    }
}


/* ------------------------------
   INFO CARD RESPONSIVE
------------------------------ */
@media (max-width: 768px) {
    .info-card {
        padding: 24px;
        margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    .info-card {
        padding: 20px;
        border-radius: 12px;
    }

    .info-card h4 {
        font-size: 1.05rem;
    }
}


/* ------------------------------
   PROJECT LINKS LIST
------------------------------ */
@media (max-width: 576px) {
    .info-card ul li a {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .project-video-wrapper {
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    }

    .video-title {
        font-size: 1.05rem;
    }
}