/* ===========================================
   RESPONSIVE STYLES
   Mobile First Enhancements
=========================================== */

/* Large Desktop */
@media (max-width: 1400px) {

    section {
        padding: 100px 7%;
    }

    h1 {
        font-size: 4rem;
    }

}

/* Laptop */
@media (max-width: 1200px) {

    :root {
        --max-width: 1000px;
    }

    h1 {
        font-size: 3.8rem;
    }

    h2 {
        font-size: 2.6rem;
    }

    .two-column {
        gap: 60px;
    }

    .project-grid {
        gap: 30px;
    }

}

/* Tablet Landscape */
@media (max-width: 992px) {

    section {
        padding: 90px 6%;
    }

    header {
        padding: 20px 6%;
    }

    nav {
        gap: 24px;
    }

    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 2.3rem;
    }

    h3 {
        font-size: 1.7rem;
    }

    .hero {
        min-height: 90vh;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-description {
        max-width: 100%;
    }

    .two-column {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

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

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

}

/* Tablet Portrait */
@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    header {

        flex-direction: column;

        gap: 20px;

        position: relative;

        padding: 25px;

    }

    .logo {
        font-size: 1rem;
    }

    nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 18px;

    }

    nav a {

        font-size: .9rem;

    }

    .hero {

        min-height: auto;

        padding-top: 120px;

        text-align: center;

    }

    h1 {

        font-size: 2.7rem;

    }

    h2 {

        font-size: 2rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .btn-primary,
    .btn-secondary {

        width: 230px;

        text-align: center;

    }

    .project-grid {

        grid-template-columns: 1fr;

    }

    .gallery {

        grid-template-columns: 1fr;

    }

    .skills {

        grid-template-columns: 1fr;

    }

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .timeline {

        padding-left: 25px;

    }

    .timeline-item::before {

        left: -33px;

    }

    blockquote {

        font-size: 2rem;

    }

}

/* Mobile */
@media (max-width: 576px) {

    section {

        padding: 70px 24px;

    }

    h1 {

        font-size: 2.2rem;

        line-height: 1.15;

    }

    h2 {

        font-size: 1.8rem;

    }

    h3 {

        font-size: 1.5rem;

    }

    p {

        font-size: .95rem;

    }

    .hero-tag {

        font-size: .8rem;

    }

    .hero-description {

        font-size: 1rem;

    }

    .project-card {

        padding: 30px;

    }

    .project-number {

        font-size: 3rem;

    }

    .section-title {

        margin-bottom: 40px;

    }

    .quote blockquote {

        font-size: 1.7rem;

    }

    .quote p {

        font-size: .85rem;

    }

    .btn-primary,
    .btn-secondary {

        width: 100%;

    }

    .contact-card {

        padding: 28px;

    }

    .about-image {

        border-radius: 12px;

    }

    footer {

        padding: 35px 20px;

    }

}

/* Small Mobile */
@media (max-width: 400px) {

    h1 {

        font-size: 1.9rem;

    }

    h2 {

        font-size: 1.6rem;

    }

    nav {

        gap: 12px;

    }

    nav a {

        font-size: .82rem;

    }

    .project-card {

        padding: 24px;

    }

    .project-number {

        font-size: 2.5rem;

    }

}

/* Ultra-wide Screens */
@media (min-width: 1600px) {

    :root {

        --max-width: 1400px;

    }

    h1 {

        font-size: 5rem;

    }

    section {

        padding-left: calc((100vw - var(--max-width)) / 2);
        padding-right: calc((100vw - var(--max-width)) / 2);

    }

}