/* =========================================================

   PNG BAZAR - RESPONSIVE CSS

   Works for:

   1. index.html

   2. category.html

   3. image.html

   ========================================================= */





/* =========================================================

   LARGE TABLET / SMALL LAPTOP

   ========================================================= */



@media (max-width: 1100px) {



    /* ---------- HEADER ---------- */



    .header-container {

        padding: 0 20px;

    }



    .main-nav {

        gap: 18px;

    }



    .main-nav a {

        font-size: 14px;

    }



    .header-search {

        width: 180px;

    }





    /* ---------- INDEX PAGE ---------- */



    .content-container {

        grid-template-columns: 190px minmax(0, 1fr);

    }



    .preview-panel {

        display: none;

    }



    .png-grid {

        grid-template-columns: repeat(3, 1fr);

    }





    /* ---------- CATEGORY PAGE ---------- */



    .categories-grid {

        grid-template-columns: repeat(3, 1fr);

    }





    /* ---------- IMAGE DETAIL PAGE ---------- */



    .image-detail-layout {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .image-information {

        max-width: 100%;

    }



    .related-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 800px) {



    /* ---------- HEADER ---------- */



    .site-header {

        height: auto;

    }



    .header-container {

        min-height: 70px;

        padding: 10px 18px;

    }



    .main-nav {

        display: none;

    }



    .header-actions {

        gap: 8px;

    }



    .header-search {

        display: none;

    }



    .mobile-menu-button {

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

    }


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

    .mobile-nav {

        display: none;

        flex-direction: column;

        width: 100%;

        padding: 10px 18px 16px;

        background: #ffffff;

        border-top: 1px solid #edf0f5;

        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);

    }


    .mobile-nav.mobile-open {

        display: flex;

    }


    .mobile-nav a {

        display: flex;

        align-items: center;

        min-height: 48px;

        padding: 0 14px;

        border-radius: 10px;

        color: #344054;

        font-size: 15px;

        font-weight: 600;

        text-decoration: none;

    }


    .mobile-nav a:hover,

    .mobile-nav a:active {

        background: #f1f5ff;

        color: #1769ff;

    }





    /* ---------- HERO ---------- */



    .hero-section {

        min-height: 430px;

        padding: 70px 20px;

    }



    .hero-content h2 {

        font-size: 42px;

    }



    .hero-content p {

        font-size: 16px;

    }



    .hero-search {

        max-width: 600px;

    }





    /* ---------- CATEGORY STRIP ---------- */



    .category-strip {

        overflow-x: auto;

    }



    .category-container {

        width: max-content;

        min-width: 100%;

    }



    .category-item {

        flex-shrink: 0;

    }





    /* ---------- INDEX CONTENT ---------- */



    .content-container {

        grid-template-columns: 1fr;

        padding: 25px 18px;

    }



    .sidebar {

        display: none;

    }



    .png-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 16px;

    }





    /* ---------- CATEGORY PAGE ---------- */



    .category-hero {

        min-height: 350px;

        padding: 60px 20px;

    }



    .category-hero-content h1 {

        font-size: 38px;

    }



    .categories-section {

        padding: 45px 18px;

    }



    .categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 16px;

    }



    .category-card {

        padding: 20px;

    }



    .popular-category-list {

        grid-template-columns: repeat(2, 1fr);

    }





    /* ---------- IMAGE PAGE ---------- */



    .image-page-section {

        padding: 25px 18px 60px;

    }



    .image-detail-layout {

        grid-template-columns: 1fr;

    }



    .image-preview-box {

        min-height: 400px;

    }



    .image-information h1 {

        font-size: 32px;

    }



    .meta-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .related-grid {

        grid-template-columns: repeat(2, 1fr);

    }





    /* ---------- FOOTER ---------- */



    .footer-container {

        grid-template-columns: repeat(2, 1fr);

        gap: 35px;

    }

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 520px) {



    /* ---------- GLOBAL ---------- */



    body {

        overflow-x: hidden;

    }





    /* ---------- HEADER ---------- */



    .header-container {

        padding: 9px 14px;

    }



    .brand-text p {

        display: none;

    }



    .brand-text h1 {

        font-size: 20px;

    }



    .brand-icon {

        width: 38px;

        height: 38px;

    }



    .header-actions {

        margin-left: auto;

    }



    .theme-toggle,

    .favorites-button {

        width: 36px;

        height: 36px;

    }





    /* ---------- HERO ---------- */



    .hero-section {

        min-height: 390px;

        padding: 55px 15px;

    }



    .hero-content {

        width: 100%;

    }



    .hero-content h2 {

        font-size: 32px;

        line-height: 1.15;

    }



    .hero-content p {

        font-size: 14px;

        line-height: 1.6;

    }



    .hero-search {

        height: 52px;

        border-radius: 12px;

    }



    .hero-search input {

        font-size: 14px;

    }



    .popular-searches {

        gap: 7px;

    }



    .tag {

        font-size: 12px;

        padding: 7px 10px;

    }





    /* ---------- CATEGORY STRIP ---------- */



    .category-container {

        gap: 8px;

        padding: 10px 14px;

    }



    .category-item {

        min-width: 70px;

        padding: 8px 10px;

    }



    .category-item span {

        font-size: 11px;

    }





    /* ---------- INDEX PAGE ---------- */



    .content-container {

        padding: 20px 14px;

    }



    .section-header {

        margin-bottom: 16px;

    }



    .section-header h2 {

        font-size: 22px;

    }



    .png-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

    }



    .png-card {

        border-radius: 12px;

    }



    .png-card-content {

        padding: 10px;

    }



    .png-card-title {

        font-size: 13px;

    }



    .png-card-meta {

        font-size: 11px;

    }


    /* ---------- LOAD MORE ---------- */

    #loadMoreButton {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        max-width: 320px;

        min-height: 48px;

        margin: 24px auto 10px;

        padding: 12px 20px;

        border-radius: 10px;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

    }





    /* ---------- CATEGORY PAGE ---------- */



    .category-hero {

        min-height: 330px;

        padding: 50px 15px;

    }



    .category-hero-content h1 {

        font-size: 30px;

        line-height: 1.2;

    }



    .category-eyebrow {

        font-size: 11px;

    }



    .category-hero-content p {

        font-size: 14px;

    }



    .category-search {

        height: 50px;

    }



    .categories-section {

        padding: 35px 14px;

    }



    .categories-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }



    .categories-header h2 {

        font-size: 24px;

    }



    .categories-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .category-card {

        padding: 16px;

        border-radius: 14px;

    }



    .category-card-icon {

        width: 46px;

        height: 46px;

    }



    .category-card-content h3 {

        font-size: 15px;

    }



    .category-card-content p {

        font-size: 12px;

    }



    .popular-categories-section {

        padding: 35px 14px;

    }



    .popular-category-list {

        grid-template-columns: 1fr;

    }





    /* ---------- IMAGE DETAIL PAGE ---------- */



    .image-page-section {

        padding: 18px 14px 50px;

    }



    .breadcrumb {

        font-size: 12px;

        margin-bottom: 18px;

    }



    .image-detail-layout {

        gap: 22px;

    }



    .image-preview-box {

        min-height: 300px;

        border-radius: 14px;

    }



    .transparent-preview img {

        max-width: 90%;

        max-height: 300px;

    }



    .image-information h1 {

        font-size: 27px;

        line-height: 1.2;

    }



    .image-description {

        font-size: 14px;

        line-height: 1.6;

    }



    .image-tags {

        gap: 6px;

    }



    .image-tag {

        font-size: 11px;

        padding: 5px 8px;

    }



    .main-download-button {

        width: 100%;

        justify-content: center;

        height: 50px;

    }



    .image-actions {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }



    .secondary-action {

        width: 100%;

        justify-content: center;

    }



    .meta-grid {

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }



    .meta-item {

        padding: 12px;

    }



    .meta-item strong {

        font-size: 13px;

    }



    .meta-item span {

        font-size: 11px;

    }



    .image-license {

        padding: 15px;

    }



    .related-section {

        margin-top: 40px;

    }



    .related-header h2 {

        font-size: 22px;

    }



    .related-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }





    /* ---------- FOOTER ---------- */



    .footer-container {

        grid-template-columns: 1fr;

        gap: 28px;

        padding: 35px 18px;

    }



    .footer-logo {

        width: 130px;

    }



    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 8px;

    }

}





/* =========================================================

   VERY SMALL MOBILE

   ========================================================= */



@media (max-width: 360px) {



    .brand-text h1 {

        font-size: 18px;

    }



    .brand-icon {

        width: 34px;

        height: 34px;

    }



    .hero-content h2 {

        font-size: 27px;

    }



    .png-grid {

        gap: 9px;

    }



    .image-actions {

        grid-template-columns: 1fr;

    }



    .meta-grid {

        grid-template-columns: 1fr;

    }



    .related-grid {

        grid-template-columns: 1fr 1fr;

        gap: 9px;

    }

}