/* =========================================
   LAYOUT — Responsive utilities
   Breakpoints: 640 / 768 / 1024 / 1280 / 1440
   ========================================= */

/* --- Visibilidade por breakpoint --- */
.hide-mobile  { display: none !important; }
.hide-tablet  { display: block; }
.hide-desktop { display: block; }

@media (min-width: 640px) {
  .hide-mobile { display: revert !important; }
}

@media (max-width: 768px) {
  .hide-tablet { display: none !important; }
}

@media (max-width: 1024px) {
  .hide-desktop { display: none !important; }
}

/* --- Flex utilitários responsive --- */
.flex-col-mobile {
  display: flex;
  align-items: center;
}

@media (max-width: 640px) {
  .flex-col-mobile {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Espaçamento responsive --- */
@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-16);
    --navbar-height: 64px;
  }
}

/* --- Container padding responsive --- */
@media (max-width: 640px) {
  .container,
  .container--narrow,
  .container--wide {
    padding: 0 var(--space-4);
  }
}

/* --- Full width em mobile --- */
@media (max-width: 640px) {
  .full-width-mobile {
    width: 100%;
  }
}

/* --- Text align responsive --- */
@media (max-width: 768px) {
  .text-center-mobile { text-align: center; }
  .text-left-mobile   { text-align: left; }
}

/* --- Gap responsive --- */
@media (max-width: 768px) {
  .gap-reduce { gap: var(--space-4) !important; }
}