/* ============================================
   LUCÍA PIRIS PORTFOLIO — RESPONSIVE
   Tablet (up to 1024px) and mobile (up to 768px).
   Loaded last, so these rules override the rest.
   ============================================ */

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .nav__menu {
        display: none;
    }

    .hero {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .hero__column {
        flex: none;
        height: 100vh;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .hero__column:last-child {
        border-bottom: none;
    }

    .hero__column:hover {
        flex: none;
    }

    .hero__title {
        --letter-height: min(10vw, 56px);
    }

    .side-menu__pages {
        display: block;
    }

    .footer-copy {
        left: 20px;
    }

    .section {
        flex-direction: column;
    }

    .section__intro {
        position: relative;
        width: 100%;
        height: 75vh;
    }

    .projects {
        padding: 48px 20px 32px;
    }

    .page-aside {
        position: relative;
        width: 100%;
        height: auto;
        padding: calc(var(--nav-height) + 28px) 20px 40px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .page-content {
        gap: 56px;
        padding: 48px 20px 32px;
    }
    /* The portrait needs more height than the section columns */
    .about__portrait {
        height: calc(85vh + var(--nav-height));
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 0 20px;
    }

    .nav__logo-img {
        height: 18px;
    }

    .nav__lang {
        display: none;
    }

    .hero__column {
        height: 85vh;
    }

    .hero__column-inner {
        padding: 24px 20px;
    }

    .footer-copy {
        position: relative;
        left: auto;
        bottom: auto;
        text-align: center;
        padding: 20px;
    }

    .hero__deco-lines {
        display: none;
    }

    .side-menu {
        padding: calc(var(--nav-height) + 32px) 20px 32px;
    }

    /* Same drawing area as the home's columns on mobile (85vh below the nav) */
    .section__intro {
        height: calc(85vh + var(--nav-height));
    }

    .section__intro .hero__column-inner {
        padding-top: calc(var(--nav-height) + 24px);
    }

    .projects__link {
        gap: 16px;
    }

    .projects__link-name {
        font-size: 1rem;
    }

    .project-page__block,
    .project-page__gallery,
    .project-page__gallery--storyboard,
    .project-page__pager {
        grid-template-columns: 1fr;
    }

    .project-page__pager-link--next {
        align-items: flex-start;
        text-align: left;
    }

    .contact__row {
        grid-template-columns: 1fr;
    }

    .about__facts {
        grid-template-columns: 1fr;
    }

    .cv,
    .cv__item {
        grid-template-columns: 1fr;
    }

    .cv > :not(.cv__title) {
        grid-column: auto;
    }

    .gallery {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cv__title {
        padding-top: 0;
    }

    .about__portrait .hero__image {
        inset: calc(var(--nav-height) + 130px) 20px 100px;
    }
}