/*=============================================================
  BREAKPOINTS
  Mobile-first overrides live under max-width: 1149px.
  Desktop sidebar offset + large-screen scaling live above that.
=============================================================*/

/*=============== MOBILE (< 1150px) ===============*/
@media (width < 1150px) {

  /* Mobile sidebar shows full labels for profile block + 9 links,
     but padding/gaps were tuned for the collapsed desktop icon-only
     view. On shorter phone screens this overflows past the visible
     area with no scroll — Download CV / LinkedIn get silently
     clipped off. Tighten spacing and add scroll as a safety net. */
  .sidebar {
    padding: 1.5rem 1.5rem 1rem;
    row-gap: 1.5rem;
    overflow-y: auto;
  }

  .sidebar__data {
    row-gap: 0.25rem;
  }

  .sidebar__perfil {
    width: 64px;
  }

  .sidebar__name {
    font-size: 1rem;
  }

  .sidebar__menu {
    row-gap: 1.5rem;
  }

  .sidebar__content {
    gap: 0.5rem;
  }

  .sidebar__link {
    height: 42px;
  }

  .sidebar__bottom {
    row-gap: 0.5rem;
  }

  /* Section padding is tuned for desktop (4rem top/bottom) — 
     scale down so mobile doesn't feel like scrolling through
     giant empty gaps between sections. */
  .about,
  .experience,
  .skills,
  .work,
  .contact {
    padding: 2.5rem 1.25rem;
  }

  .section__title {
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
  }

  /* Sidebar is already off-canvas by default in main.css (left: -120%),
     so .main needs no offset down here — it sits full-width. */

  /* Boot overlay: sidebar takes no horizontal space on mobile,
     so the fixed left: 110px gap in main.css would leave an
     awkward blank strip on the left. Pull it to the full edge. */
  .boot {
    left: 0;
    padding: 1.25rem;
    font-size: 0.7rem;
  }

  /* Background web: 70vw/70vh is fine on desktop but overwhelms
     a small viewport and can visually fight with hero text. */
  .web-bg {
    width: 60vw;
    height: 60vh;
    opacity: 0.12;
  }

  /* Home + About use fixed two-column grids (280px 1fr / 1fr 260px)
     that don't naturally stack. Force single column, center everything. */
  .home {
    min-height: 80vh;
    padding-inline: 1.25rem;
  }

  .home__layout {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  .home__img-wrap {
    max-width: 160px;
  }

  .home__content {
    text-align: center;
    justify-items: center;
    row-gap: 0.75rem;
  }

  .home__greeting {
    font-size: 1rem;
    margin-bottom: -0.5rem;
  }

  .home__name {
    font-size: 1.8rem;
  }

  .home__tagline {
    font-size: 0.85rem;
    max-width: none;
  }

  .home__buttons,
  .home__social {
    justify-content: center;
  }

  .button {
    padding: 0.6rem 1.1rem;
    font-size: 0.7rem;
  }

  .home__terminal {
    text-align: left;
    width: 100%;
    font-size: 0.7rem;
  }

  .about__layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about__title {
    text-align: center;
  }

  .about__text {
    font-size: 0.85rem;
  }

  .about__badges {
    justify-content: center;
  }

  .about__image {
    max-width: 150px;
    margin-inline: auto;
  }

  .pill {
    padding: 0.3rem 0.7rem;
    font-size: 0.65rem;
  }

  /* Experience container is a fixed 3-column grid in main.css so
     the burst filler always lands in the correct spot on desktop —
     but a fixed 3-column grid doesn't stack on its own like
     auto-fit would. Force single column here so mobile doesn't
     try to cram 3 columns into a phone screen. */
  .experience__container {
    grid-template-columns: 1fr;
  }

  /* Experience card image+header row can get cramped on very
     narrow phones — let it wrap rather than compress, and center
     the image on its own line when it does. */
  .experience__card {
    padding: 1.1rem;
  }

  .experience__top {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .experience__header {
    align-items: center;
  }

  .experience__icon {
    font-size: 1.5rem;
  }

  .experience__role {
    font-size: 1rem;
  }

  .experience__text {
    font-size: 0.8rem;
  }

  .experience__filler-img {
    max-width: 160px;
  }

  .skills__terminal,
  .skills__row {
    font-size: 0.8rem;
  }

  .skills__category {
    font-size: 0.9rem;
  }

  .work__card {
    padding: 1.1rem;
  }

  .work__header-image {
    width: 70px;
  }

  .work__title {
    font-size: 0.95rem;
  }

  .work__text {
    font-size: 0.8rem;
  }

  .contact__intro {
    font-size: 0.85rem;
  }

  /* Contact's image sits in a plain grid column with no centering
     of its own — fine on desktop next to the form, but looks
     off-balance floating left once the columns stack. */
  .contact__image {
    max-width: 130px;
    margin-inline: auto;
  }

  .contact__info {
    text-align: center;
    justify-items: center;
  }

  .contact__chips {
    justify-content: center;
  }

  .contact__input {
    font-size: 0.85rem;
    padding: 0.6rem 0.85rem;
  }

  .project-modal__box {
    padding: 1.5rem;
    max-height: 90vh;
  }

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

  /* Scroll indicator: was position:absolute anchored to the whole
     .home section, so it ignored actual content height and
     overlapped the terminal line once mobile spacing shrank.
     Switching to static flow (see HTML change) means it just
     naturally sits after the terminal instead of floating over it. */
  .home__scroll {
    position: static;
    transform: none;
    margin-top: 1.25rem;
  }

  .home__scroll-mouse {
    width: 18px;
    height: 28px;
    border-width: 1.5px;
  }

  .home__scroll-dot {
    width: 3px;
    height: 6px;
  }

  .home__scroll-label {
    font-size: 0.55rem;
  }

  /* Footer is position:fixed for desktop (where there's usually
     empty space beneath page content), but on mobile that means
     it hovers over whatever's at the bottom of the viewport while
     scrolling — including overlapping section headings. Return
     it to normal flow so it only appears at the true end of the page. */
  .footer {
    position: static;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.25rem 2rem;
  }
}

/*=============== DESKTOP (>= 1150px) ===============*/
@media (width >= 1150px) {

  /* Missing offset fix: sidebar is fixed and takes real width,
     so .main must shift right to avoid sitting underneath it.
     JS adds .sidebar-expand on load (collapsed, 96px), so that's
     the default state; the wider 250px applies only if a user
     manually expands it. */
  .main {
    margin-left: 96px;
    transition: margin-left 0.3s;
  }

  .sidebar:not(.sidebar-expand) ~ .main {
    margin-left: 250px;
  }
}

/*=============== LARGE DESKTOP (>= 1600px) ===============*/
@media (width >= 1600px) {

  /* Section max-widths already prevent line-length from getting
     silly on wide screens; this just gives a bit more breathing
     room and slightly larger type where it earns its keep. */
  .home__layout,
  .about,
  .experience,
  .skills,
  .work,
  .contact {
    max-width: 1300px;
  }

  .home__name {
    font-size: 4rem;
  }

  .home__img-wrap {
    max-width: 320px;
  }

  .section__title {
    font-size: 2.5rem;
  }

  /* At 1300px max-width, auto-fit minmax() grids can stretch
     individual cards wider than feels intentional (e.g. only
     2 columns of very wide cards instead of 3 balanced ones).
     Bumping the minmax floor keeps card proportions sane. */
  .work__container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .skills__container {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/*=============== ULTRA-WIDE / LARGE DISPLAYS (>= 2200px) ===============*/
@media (width >= 2200px) {
  .project-modal__box {
    max-width: 52rem;
  }
}