/*
 * Rollo Privado footer map correction.
 *
 * The exported Next.js markup places the Google Business map after the
 * five-column footer grid. On desktop, reuse the grid row and position the map
 * beneath Contact and Social so it no longer creates a tall standalone row.
 */
@media (min-width: 1024px) {
  footer:has([data-google-business-map="rollo-privado"])
    > div
    > div.flex.flex-col.gap-12 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    column-gap: 2rem;
    row-gap: 3rem;
  }

  footer:has([data-google-business-map="rollo-privado"])
    > div
    > div.flex.flex-col.gap-12
    > :nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  footer:has([data-google-business-map="rollo-privado"])
    > div
    > div.flex.flex-col.gap-12
    > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  footer:has([data-google-business-map="rollo-privado"])
    > div
    > div.flex.flex-col.gap-12
    > :nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  footer [data-google-business-map="rollo-privado"] {
    grid-column: 4 / 6;
    grid-row: 3;
    align-self: start;
    justify-self: stretch;
    margin-top: 10rem;
  }

  footer [data-google-business-map="rollo-privado"] iframe {
    width: 100%;
    max-width: none;
    height: 220px;
  }

  footer:has([data-google-business-map="rollo-privado"])
    > div
    > div.flex.flex-col.gap-12
    > :nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}