/* SKYLOTUS contact and footer reflow 20260915.1. */

/* Keep the three contact cards equal in height while using the information
   card's available space for a balanced contact matrix. */
@media (min-width: 768px) {
  .skylotus-contact-info.skylotus-contact-info--compact {
    justify-content: flex-start;
    gap: 0;
    padding: 18px;
  }

  .skylotus-contact-info--compact > .skylotus-contact-detail:first-child {
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e9df;
  }

  .skylotus-contact-info--compact .skylotus-contact-list {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    gap: 0 16px;
    padding-top: 14px;
    border-top: 0;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-detail {
    min-height: 0;
    padding: 11px 0;
    align-items: center;
    border-bottom: 1px solid #eef2eb;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-detail:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-value {
    line-height: 1.35;
  }

  /* The footer now has two content groups: brand and navigation. */
  body > footer > div > div:first-child {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    gap: clamp(28px, 5vw, 68px) !important;
  }

  body > footer > div > div:first-child > div:first-child {
    padding-right: 20px;
  }

  body > footer > div > div:first-child > div:nth-child(2) > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px !important;
    row-gap: 8px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .skylotus-contact-info.skylotus-contact-info--compact {
    padding: 16px;
  }

  .skylotus-contact-info--compact .skylotus-contact-list {
    column-gap: 12px;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-detail {
    gap: 7px;
    padding-block: 10px;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 460px) and (max-width: 767px) {
  .skylotus-contact-info--compact .skylotus-contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }
}

@media (max-width: 767px) {
  .skylotus-contact-info.skylotus-contact-info--compact {
    gap: 0;
  }

  .skylotus-contact-info--compact > .skylotus-contact-detail:first-child {
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e9df;
  }

  .skylotus-contact-info--compact .skylotus-contact-list {
    padding-top: 14px;
    border-top: 0;
  }

  .skylotus-contact-info--compact .skylotus-contact-list .skylotus-contact-detail {
    padding-block: 4px;
  }
}

/* SKYLOTUS contact matrix vertical order 20260916.2. */
.skylotus-contact-info--compact .skylotus-contact-list {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
}
.skylotus-contact-info--compact .skylotus-contact-list > .skylotus-contact-detail {
  min-height: 0;
  padding: 10px 0 !important;
  border-bottom: 1px solid #eef2eb !important;
}
.skylotus-contact-info--compact .skylotus-contact-list > .skylotus-contact-instagram {
  min-height: 0;
  padding: 14px 0 4px !important;
  border-bottom: 0 !important;
}
.skylotus-contact-info--compact .skylotus-contact-list > :last-child {
  border-bottom: 0 !important;
}


/* SKYLOTUS contact order and stronger Instagram QR 20260916.3. */
.skylotus-contact-info--compact > .skylotus-contact-list {
  order: 1;
}
.skylotus-contact-info--compact > .skylotus-contact-detail {
  order: 2;
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid #e3e9df !important;
  border-bottom: 0 !important;
}