/**
 * Breakpoints MGM (único sistema)
 * - Mobile:  max-width: 767px
 * - Tablet:  768px – 1023px
 * - Desktop: min-width: 1024px
 * (Desktop estreito: 1024px – 1339px · ver components.css)
 */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .mgm-journey__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.25rem;
  }

  .mgm-journey__track::before {
    display: none;
  }

  .mgm-resources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mgm-resources__layout {
    grid-template-columns: 1fr;
  }

  .mgm-resources__sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .mgm-resources-sidebar__cta {
    grid-column: 1 / -1;
  }

  .mgm-resource-card--row .mgm-resource-card__media {
    flex-basis: min(42%, 220px);
    max-width: 220px;
  }

  .mgm-why__pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: .85rem;
  }

  .mgm-objectives .mgm-objectives__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: none;
    margin-inline: 0 !important;
  }

  .mgm-dark-cta--split .mgm-dark-cta__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .mgm-dark-cta--split .mgm-dark-cta__copy h2 {
    max-width: none;
  }

  .mgm-dark-cta__perks {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    grid-template-rows: none;
    align-content: start;
    min-height: 0;
  }

  .mgm-dark-cta--split .mgm-dark-cta__perk {
    display: flex;
  }

  .mgm-dark-cta--split .mgm-dark-cta__perk-icon,
  .mgm-dark-cta--split .mgm-dark-cta__perk-body {
    grid-column: auto;
    grid-row: auto;
  }

  .mgm-dark-cta__perk {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  /*
   * Gutter ~14px: cards em 1-col ficam quase full-bleed
   * (respiro mínimo, sem colar na borda). Desktop/tablet intactos.
   */
  :root {
    --mgm-page-gutter: 0.875rem;
  }

  body {
    --wp--style--root--padding-left: 0.875rem;
    --wp--style--root--padding-right: 0.875rem;
  }

  /* Grades de cards em coluna única: largura útil do rail */
  .mgm-card-grid.wp-block-columns,
  .mgm-path-grid.wp-block-columns,
  .mgm-role-grid.wp-block-columns,
  .mgm-career-grid,
  .mgm-hub-destinations,
  .mgm-hub-destinations--three,
  .mgm-hub-destinations--four,
  .mgm-hub-spotlight__grid,
  .mgm-hub-recent,
  .mgm-hub-specials,
  .mgm-resources__grid,
  .mgm-visa-anchors__grid {
    width: 100%;
    max-width: none;
  }

  .mgm-hero__content .wp-block-buttons,
  body.mgm-assessment-page .mgm-page-hero .wp-block-buttons,
  body.mgm-contact-page .mgm-page-hero .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.85rem;
  }

  body.mgm-assessment-page .mgm-page-hero .wp-block-button,
  body.mgm-contact-page .mgm-page-hero .wp-block-button {
    width: 100%;
  }

  body.mgm-assessment-page .mgm-page-hero .wp-block-button__link,
  body.mgm-contact-page .mgm-page-hero .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  .mgm-hero__content .wp-block-button {
    width: 100%;
  }

  .mgm-hero__content .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }

  .mgm-journey__track {
    grid-template-columns: 1fr 1fr;
  }

  .mgm-journey__icon {
    width: 3.75rem;
    height: 3.75rem;
  }

  .mgm-journey__title {
    font-size: 1rem;
    min-height: 0;
  }

  .mgm-journey__desc {
    font-size: .86rem;
    min-height: 0;
  }

  .mgm-why__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mgm-resources__head {
    flex-direction: column;
    align-items: start;
  }

  .mgm-resources__grid {
    grid-template-columns: 1fr;
  }

  .mgm-resources__sidebar {
    grid-template-columns: 1fr;
  }

  .mgm-resource-card--row .mgm-resource-card__hit {
    flex-direction: column;
  }

  .mgm-resource-card--row .mgm-resource-card__media {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }

  .mgm-resource-card--row .mgm-resource-card__media img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .mgm-dark-cta--split {
    padding-block: 2.5rem !important;
  }
}

/* Tablet + mobile (touch, drawer) */
@media (max-width: 1023px) {
  .mgm-journey__step {
    min-height: 44px;
    padding-block: .35rem;
  }

  .mgm-resources__all {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

.mgm-header .mgm-header__inner,
.mgm-header .wp-block-navigation__responsive-dialog,
.mgm-footer {
  padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
}

/*
 * Safe-area inferior fica no footer (navy), não no body — padding no body
 * criava faixa branca sob o footer no iOS / viewports com inset.
 */

/* Viewports muito estreitos: ritmo de secção (logo fluido fica no components.css) */
@media (max-width: 359px) {
  .mgm-section {
    padding-block: clamp(2.75rem, 10vw, 4rem);
  }
}

.mgm-dark-cta::after {
  pointer-events: none;
}