/* Super Stubborn — Instagram
   GEGENEREERD uit de mockup (sectie `instagram`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

.ssx-instagram{ overflow-x:clip; }

.ssx-instagram__head{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-5);
  align-items:flex-start;
}
@media (min-width:820px){
  .ssx-instagram__head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--ss-sp-7);
  }
}
.ssx-instagram__head-lead{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-4);
  max-width:52ch;
  min-width:0;
}
.ssx-instagram__title{
  overflow-wrap:anywhere;
  max-width:100%;
}
.ssx-instagram__intro{
  margin-top:var(--ss-sp-1);
}
.ssx-instagram__head-cta{ flex:none; }

.ssx-instagram__rule{
  margin-block:var(--ss-sp-6) var(--ss-sp-6);
}

/* ---------- Masonry gallery ---------- */
.ssx-instagram__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-flow:dense;
  gap:var(--ss-sp-4);
}
@media (min-width:720px){
  .ssx-instagram__grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--ss-sp-5);
  }
}

.ssx-instagram__tile{
  position:relative;
  min-width:0;
}
/* Tall tiles span two rows, wide tiles span two columns on wide layouts */
@media (min-width:720px){
  .ssx-instagram__tile--tall{ grid-row:span 2; }
  .ssx-instagram__tile--wide{ grid-column:span 2; }
}

.ssx-instagram__link{
  position:relative;
  display:block;
  height:100%;
  border-radius:var(--ss-r-md);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--ss-shadow-sm);
  transition:box-shadow var(--ss-dur-2) var(--ss-ease),
             transform var(--ss-dur-2) var(--ss-ease);
}
.ssx-instagram__link:hover{
  box-shadow:var(--ss-shadow-md);
}
.ssx-instagram__link:focus-visible{
  outline:2px solid var(--ss-orange);
  outline-offset:3px;
}

.ssx-instagram__photo{
  border-radius:var(--ss-r-md);
  height:100%;
}
/* Make photos fill their tile so tall/wide spans stay flush */
.ssx-instagram__tile--tall .ssx-instagram__photo,
.ssx-instagram__tile--wide .ssx-instagram__photo{
  --ar:auto;
  height:100%;
}

/* Zoom the real photo on hover/focus via the shared scale hook */
.ssx-instagram__link:hover .ss-photo,
.ssx-instagram__link:focus-visible .ss-photo{ --_scale:1.05; }

/* ---------- Hover overlay ---------- */
.ssx-instagram__overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--ss-sp-3);
  color:var(--ss-white);
  background:color-mix(in srgb, var(--ss-ground) 62%, transparent);
  opacity:0;
  transition:opacity var(--ss-dur-2) var(--ss-ease);
  text-align:center;
  padding:var(--ss-sp-4);
}
.ssx-instagram__overlay svg{
  width:1.6rem;
  height:1.6rem;
  color:var(--ss-orange);
}
.ssx-instagram__handle{
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-weight:600;
  color:var(--ss-beige);
}
.ssx-instagram__link:hover .ssx-instagram__overlay,
.ssx-instagram__link:focus-visible .ssx-instagram__overlay{ opacity:1; }

/* ---------- Footer row ---------- */
.ssx-instagram__foot{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-4);
  align-items:flex-start;
  margin-top:var(--ss-sp-6);
}
@media (min-width:600px){
  .ssx-instagram__foot{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--ss-sp-5);
  }
}
.ssx-instagram__foot-tag{ color:var(--ss-text-muted); }
.ssx-instagram__foot-strong{ color:var(--ss-orange); letter-spacing:inherit; }

@media (prefers-reduced-motion: reduce){
  .ssx-instagram__link:hover .ss-photo,
  .ssx-instagram__link:focus-visible .ss-photo{ --_scale:1; }
  .ssx-instagram__overlay{ transition:none; }
}