/* =========================================================================
   RESPONSIVE.CSS — Breakpoint Adjustments (mobile-first overrides)
   ========================================================================= */

/* ---------- Laptop / small desktop (<=1200px) ---------- */
@media (max-width: 1200px) {
    .achievements__grid { grid-template-columns: repeat(2, 1fr); }
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .expertise__grid { grid-template-columns: repeat(2, 1fr); }
    .skills__grid { grid-template-columns: repeat(2, 1fr); }
    .offerings__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
    .site-nav__links { display: none; }
    .site-nav__cta { display: none; }
    .site-nav__burger { display: grid; }

    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__cta-group, .hero__social, .hero__typing { justify-content: center; }
    .hero__intro { margin-inline: auto; }
    .hero__visual { order: -1; margin-bottom: 20px; }
    .hero__portrait { width: min(280px, 70vw); }

    .about__grid { grid-template-columns: 1fr; }
    .about__philosophy { position: static; }

    .journey__stages { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .journey__stage-connector { display: none; }

    .timeline::before { inset-inline-start: 24px; }
    .timeline__item,
    .timeline__item--left,
    .timeline__item--right {
        width: 100%;
        margin-inline-start: 60px;
        margin-inline-end: 0;
    }
    .timeline__item--left .timeline__marker,
    .timeline__item--right .timeline__marker {
        inset-inline-start: -60px;
        inset-inline-end: auto;
    }
}

/* ---------- Large phones (<=768px) ---------- */
@media (max-width: 768px) {
    :root { --section-y: clamp(56px, 12vw, 88px); }

    .achievements__grid,
    .services__grid,
    .expertise__grid,
    .skills__grid,
    .offerings__grid { grid-template-columns: 1fr; }

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

    .site-footer__top { flex-direction: column; align-items: flex-start; }
    .site-footer__bottom { flex-direction: column; }

    .contact__actions { flex-direction: column; align-items: stretch; }
    .contact__actions .btn { width: 100%; }

    .hero { padding-block: 120px 60px; }
    .hero__portrait-tag { font-size: 0.72rem; padding: 7px 12px; }
    .hero__portrait-badge { padding: 10px 16px; }

    .back-to-top { bottom: 18px; inset-inline-end: 18px; width: 42px; height: 42px; }
}

/* ---------- Small phones (<=480px) ---------- */
@media (max-width: 480px) {
    .container { padding-inline: 18px; }

    .hero__eyebrow { font-size: 0.78rem; padding: 6px 14px; }
    .hero__typing { font-size: 0.95rem; flex-wrap: wrap; }
    .hero__cta-group { flex-direction: column; width: 100%; }
    .hero__cta-group .btn { width: 100%; }

    .journey__stages { grid-template-columns: 1fr; }
    .journey__stage { padding-inline: 0; }

    .timeline::before { inset-inline-start: 18px; }
    .timeline__item { margin-inline-start: 48px; margin-bottom: 36px; }
    .timeline__item--left .timeline__marker,
    .timeline__item--right .timeline__marker {
        inset-inline-start: -48px;
        width: 34px; height: 34px;
    }
    .timeline__card { padding: 20px; }

    .contact__box { padding: 36px 20px; border-radius: 22px; }

    .site-footer__nav ul { gap: 14px 18px; }
}

/* ---------- Touch target comfort ---------- */
@media (hover: none) and (pointer: coarse) {
    .btn, .social-icon, .lang-switcher__toggle, .site-nav__burger, a[href] {
        min-height: 40px;
    }
}