/* Instagram feed section (homepage) + footer social links (all pages) */

.ig-feed__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .ig-feed__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.ig-feed__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ig-feed__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: var(--radius-btn, 0.5rem);
  padding: 0.95rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ig-feed__btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.ig-feed__btn--primary { background: var(--color-primary); color: #fff; }
.ig-feed__btn--primary:hover { background: var(--color-primary-dark); }
.ig-feed__btn--ghost {
  border: 1px solid rgba(22, 22, 26, 0.25);
  color: var(--color-ink);
}
.ig-feed__btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ig-feed__card {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-line-ink-soft);
  background: #fff;
  box-shadow: 0 18px 50px rgba(22, 22, 26, 0.10);
}
.ig-feed__frame {
  display: block;
  width: 100%;
  height: 560px; /* replaced by script once width is known */
  border: 0;
  background: #fff;
}

/* Header Instagram icon beside the logo.
   White over the transparent hero header; ink once the header turns solid ([data-solid]). */
.nav-ig {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
/* logo.svg's artwork ends at ~59% of its width (viewBox 540, art to ~320), so the
   <img> carries ~41% blank space on its right. Pull the icon back over that space,
   per the header's logo sizes: 145px wide (mobile), 200px (sm), 225px (md+). */
.nav-ig { position: relative; margin-left: -53px; }
@media (min-width: 640px) { .nav-ig { margin-left: -75px; } }
@media (min-width: 768px) { .nav-ig { margin-left: -86px; } }
.nav-ig:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-solid] .nav-ig { border-color: var(--color-line-ink); color: var(--color-ink-soft); }
[data-solid] .nav-ig:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nav-ig svg { width: 1.05rem; height: 1.05rem; }

/* Footer social icons */
.footer-social {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-line);
  color: var(--color-fg-soft);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.footer-social:hover {
  color: #fff;
  border-color: var(--color-primary-light);
  background: var(--color-primary);
}
.footer-social svg { width: 1.1rem; height: 1.1rem; }