/* ── INSTAGRAM (css/instagram.css) ───────────────────────── */

.kn-instagram {
  padding: var(--kn-section-pad);
  background: var(--kn-black);
  position: relative; z-index: 1;
}

.kn-instagram__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
}
.kn-instagram__header h2 a {
  color: inherit; text-decoration: none;
  transition: color var(--kn-transition);
}
.kn-instagram__header h2 a:hover { color: var(--kn-gold-light); }

.kn-instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(201,168,76,0.08);
}

.kn-insta-tile {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
}
.kn-insta-tile__inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  transition: transform 0.5s ease;
}
.kn-insta-tile:hover .kn-insta-tile__inner { transform: scale(1.08); }

/* Tile colour variants */
.kn-it--1 { background: linear-gradient(135deg, #0d2b1e, #1a3d2b); }
.kn-it--2 { background: linear-gradient(135deg, #1a2b1e, #0d3328); }
.kn-it--3 { background: linear-gradient(135deg, #2b1a0d, #3d2b1a); }
.kn-it--4 { background: linear-gradient(135deg, #0d1a2b, #1a2b3d); }
.kn-it--5 { background: linear-gradient(135deg, #1a0d2b, #2b1a3d); }
.kn-it--6 { background: linear-gradient(135deg, #0d2b2b, #1a3d3d); }

.kn-insta-tile__overlay {
  position: absolute; inset: 0;
  background: rgba(6,11,9,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.kn-insta-tile:hover .kn-insta-tile__overlay { opacity: 1; }
.kn-insta-tile__icon { color: var(--kn-gold-light); font-size: 1.4rem; }

@media (max-width: 1100px) {
  .kn-instagram__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kn-instagram { padding: var(--kn-section-pad-mobile); }
  .kn-instagram__header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .kn-instagram__grid { grid-template-columns: repeat(3, 1fr); }
}