/* ============================================
   RESPONSIVE
   Mobile-first breakpoints:
   - Mobile:        max-width 767px
   - Tablet:        min-width 768px
   - Desktop:       min-width 1024px
   - Large Desktop: min-width 1280px
   ============================================ */

/* ------------------------------------------
   1. Mobile Overrides (max-width: 767px)
   ------------------------------------------ */

@media (max-width: 767px) {

    /* Hero */
    .hero-cta {
        flex-direction: column;
    }

    /* About Preview */
    .about-preview {
        grid-template-columns: 1fr;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card-image img {
        height: 250px;
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-content {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Timeline - Left-aligned */
    .timeline::before {
        left: 0;
    }

    .timeline-item {
        width: 100%;
        margin-left: 0;
        padding-left: var(--space-lg, 2rem);
    }

    .timeline-marker {
        left: 0;
    }

    /* Skills */
    .skills-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery */
    .gallery-item--wide,
    .gallery-item--large {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Art */
    .art-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Certifications */
    .cert-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------
   2. Tablet (min-width: 768px)
   ------------------------------------------ */

@media (min-width: 768px) {

    .container {
        padding: 0 var(--space-md);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-content {
        grid-template-columns: 1fr 1.5fr;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-preview {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ------------------------------------------
   3. Desktop (min-width: 1024px)
   ------------------------------------------ */

@media (min-width: 1024px) {

    .hamburger {
        display: none;
    }

    .main-nav {
        display: flex;
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------
   4. Large Desktop (min-width: 1280px)
   ------------------------------------------ */

@media (min-width: 1280px) {

    .container {
        max-width: var(--max-width);
        margin: 0 auto;
    }
}

/* ------------------------------------------
   5. Small Mobile (max-width: 480px)
   ------------------------------------------ */

@media (max-width: 480px) {

    /* Portfolio images */
    .portfolio-card-image img {
        height: 200px;
    }

    /* Blog images */
    .blog-card-image img {
        height: 160px;
    }

    /* Gallery rows */
    .gallery-grid {
        grid-auto-rows: 180px;
    }

    /* Contact icon */
    .contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* Lightbox */
    .lightbox-nav {
        width: 36px;
        height: 36px;
    }
    .lightbox-close {
        width: 36px;
        height: 36px;
        top: 0.5rem;
        right: 0.5rem;
    }

    /* Post navigation */
    .post-nav {
        flex-direction: column;
        gap: 1rem;
    }
    .post-nav a {
        max-width: 100%;
    }

    /* Art grid - single column pe telefoane foarte mici */
    .art-grid {
        grid-template-columns: 1fr;
    }
}