/* =============================================================
   KENTAROS — responsive layer
   Desktop 1440+  ·  Laptop 1200  ·  Tablet 1024/768  ·  Mobile 320
   Mobile is composed intentionally, not shrunk.
   ============================================================= */

/* ---------- ≤ 1440 ------------------------------------------ */
@media (max-width: 1440px) {
    .hero__title      { grid-column: 1 / span 9; }
    .hero__roles      { grid-column: 10 / span 3; }
    .project-info__facts { grid-column: 1 / span 5; }
    .project-info__text  { grid-column: 7 / span 6; }
}

/* ---------- ≤ 1200 ------------------------------------------ */
@media (max-width: 1200px) {
    .nav__links { gap: 20px; }
    .nav__link  { font-size: 10px; letter-spacing: 0.16em; }

    .work__pair .work__item:nth-child(1) { grid-column: 1 / span 7; }
    .work__pair .work__item:nth-child(2) { grid-column: 8 / span 5; }

    .about-cols__bio    { grid-column: 1 / span 7; }
    .about-cols__skills { grid-column: 9 / span 4; }
}

/* ---------- ≤ 1024  (tablet: mobile nav takes over) --------- */
@media (max-width: 1024px) {
    .nav__links  { display: none; }
    .nav__toggle { display: block; }

    .cursor      { display: none !important; }
    .client-preview { display: none !important; }

    .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
    .hero__title { grid-column: 1 / -1; font-size: clamp(52px, 15vw, 150px); }
    .hero__roles {
        grid-column: 1 / -1;
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 18px;
    }
    .hero__caption { display: none; }
    .hero__scroll  { display: none; }

    .section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    .section__meta { text-align: left; padding-bottom: 0; }

    .work__item--offset,
    .work__pair,
    .grid-photo {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .work__item--offset .work__media,
    .work__item--offset-l .work__media,
    .work__item--offset-r .work__media,
    .work__pair .work__item:nth-child(1),
    .work__pair .work__item:nth-child(2),
    .grid-photo .work__item:nth-child(4n + 1),
    .grid-photo .work__item:nth-child(4n + 2),
    .grid-photo .work__item:nth-child(4n + 3),
    .grid-photo .work__item:nth-child(4n + 4) {
        grid-column: 1 / -1;
    }

    .work__pair .work__item:nth-child(2) { padding-top: 0; }

    /* The offset caption must leave its 9/4 column too, or it creates
       implicit columns and pushes the page sideways. */
    .work__item--offset .work__caption,
    .work__item--offset-l .work__caption,
    .work__item--offset-r .work__caption { grid-column: 1 / -1; }

    .work__item--offset .work__media { height: clamp(260px, 46vh, 420px); }
    .work__pair .work__media         { height: clamp(240px, 44vh, 400px); }

    .grid-photo .work__item:nth-child(4n + 1) .work__media,
    .grid-photo .work__item:nth-child(4n + 4) .work__media { aspect-ratio: 4 / 3; }
    .grid-photo .work__item:nth-child(4n + 2) .work__media,
    .grid-photo .work__item:nth-child(4n + 3) .work__media { aspect-ratio: 3 / 4; }

    .project-info,
    .credits,
    .about-cols,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .project-info__facts,
    .project-info__text,
    .credits__label,
    .credits__list,
    .about-cols__bio,
    .about-cols__skills,
    .contact-info,
    .contact-form { grid-column: 1 / -1; }

    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    .footer__brand { grid-column: 1 / -1; }
    .footer__col,
    .footer__col:nth-of-type(1) { grid-column: span 1; }
}

/* ---------- ≤ 768  (mobile) --------------------------------- */
@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --space-lg: clamp(64px, 16vw, 120px);
    }

    body { font-size: 14px; }

    .hero { height: 100svh; min-height: 520px; }
    .hero__title { font-size: clamp(46px, 17vw, 92px); }
    .hero__roles { font-size: 10px; letter-spacing: 0.18em; }

    /* Long single words (HYPERLAPSE, COMMERCIAL) must fit the viewport. */
    .section__title { font-size: clamp(30px, 11.2vw, 88px); }

    .clients__label { flex-direction: column; gap: 8px; }
    .client { font-size: clamp(34px, 13vw, 64px); gap: 24px; padding-inline: 12px; }

    .work__item--full .work__media { height: clamp(320px, 62vh, 520px); }

    .work__info {
        flex-wrap: wrap;
        gap: 6px 14px;
    }
    .work__title { flex: 1 1 100%; order: 2; }
    .work__index { order: 1; }
    .work__year  { order: 3; }

    .gallery-row { grid-template-columns: 1fr; }
    .gallery-item--full .gallery-item__media { height: clamp(300px, 60vh, 520px); }

    .project-hero { height: 84svh; min-height: 460px; }
    .project-hero__title { font-size: clamp(38px, 14vw, 82px); }

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

    .statement p { font-size: clamp(22px, 8vw, 40px); max-width: none; }

    .about-hero__title { font-size: clamp(56px, 22vw, 130px); }
    .contact-hero__title { font-size: clamp(44px, 13.5vw, 130px); }

    .reel__overlay { padding: 16px; }
    .reel__controls { gap: 18px; }
    .reel__meta { flex-direction: column; gap: 10px; }
    .reel__list { grid-template-columns: 1fr; }

    .form-actions { flex-direction: column; align-items: flex-start; gap: 18px; }

    .footer__grid { grid-template-columns: 1fr; }
    .footer__col,
    .footer__col:nth-of-type(1) { grid-column: 1 / -1; }
    .footer__base {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .footer__time { display: none; }

    .menu__item { font-size: clamp(32px, 11vw, 56px); }
}

/* ---------- ≤ 480 ------------------------------------------- */
@media (max-width: 480px) {
    .hero__title { font-size: clamp(40px, 18vw, 72px); }
    .section__title { font-size: clamp(26px, 10.8vw, 64px); }
    .contact-hero__title { font-size: clamp(38px, 13vw, 80px); }
    .err__code { font-size: clamp(80px, 34vw, 180px); }
    .project-info__facts { grid-template-columns: 1fr; }
    .related__grid { grid-template-columns: 1fr; }
}

/* ---------- ≤ 360 ------------------------------------------- */
@media (max-width: 360px) {
    :root { --gutter: 16px; }
    .client { font-size: 34px; }
    .menu__item { font-size: 30px; gap: 10px; }
}

/* ---------- Landscape phones -------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: 420px; }
    .about-hero,
    .contact-hero { min-height: 100svh; }
    .menu { justify-content: flex-start; overflow-y: auto; }
    .menu__item { font-size: 28px; }
}

/* ---------- Coarse pointers (no hover) ---------------------- */
@media (hover: none) {
    .cursor { display: none !important; }
    .clients:hover .client { opacity: 0.88; }
    .work__item:hover .work__media img,
    .work__item:hover .work__media video { transform: scale(1.02); }
}

/* ---------- Print ------------------------------------------- */
@media print {
    .nav, .menu, .loader, .transition, .cursor, .footer__top { display: none !important; }
    body { background: #fff; color: #000; }
}