@import url("/assets/agency-original.css");

/* Real template screenshots used anywhere the three example cards appear. */
.agency-site .browser-preview--amber {
  background: #fff url("/assets/template-card-northline.png") center center / contain no-repeat;
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.agency-site .browser-preview--rose {
  background: #fff url("/assets/template-card-stillpoint.png") center center / contain no-repeat;
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.agency-site .browser-preview--red {
  background: #fff url("/assets/template-card-belmont.png") center center / contain no-repeat;
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.agency-site .browser-preview > .browser-preview__bar,
.agency-site .browser-preview > .browser-preview__hero,
.agency-site .browser-preview > .browser-preview__cards {
  visibility: hidden;
}

/* Homepage hero uses the layered three-template showcase generated for this site. */
.agency-hero__visual > .agency-hero__screen {
  visibility: hidden;
}

.agency-hero__visual {
  background-image: url("/assets/homepage-template-showcase.webp");
  background-image: image-set(
    url("/assets/homepage-template-showcase.avif") type("image/avif"),
    url("/assets/homepage-template-showcase.webp") type("image/webp")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Homepage hero: enlarge the showcase on desktop only */
@media (min-width: 1021px) {
  .agency-hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
  }

  .agency-hero__visual {
    min-height: 38rem;
  }
}

/* Desktop footer only: restore separation between direct anchor children and hide the mobile quick-action bar. */
@media (min-width: 761px) {
  .agency-footer__grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .agency-footer__grid > div:not(:first-child) > a {
    display: block;
    line-height: 1.35;
  }

  .mobile-sticky-actions {
    display: none;
  }
}

/* Mobile footer: the rendered footer uses direct anchor children, so stack those links with real spacing. */
@media (max-width: 760px) {
  .agency-footer__grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
  }

  .agency-footer__grid > div:not(:first-child) > a {
    display: block;
    line-height: 1.35;
    padding-block: .1rem;
  }

  .agency-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
  }
}