/* =============================================================
   "ZOBACZ CO U NAS" — Instagram strip
   Shared by the PHP page and the exported static HTML.
   Tokens, container width and easing all come from the existing site.
   ============================================================= */

.socials {
  /* same vertical rhythm as #menu (py-16 / md:py-24) */
  padding-block: 64px;
  background: var(--green, #8e1b1a);
  /* Now that the cards reach the viewport edges, the outer glow (inset -20%)
     would stick out horizontally. `clip` — not `hidden` — so the vertical bleed
     of the hover lift/glow still paints outside the section. */
  overflow-x: clip;
}

/* full-bleed: the strip is meant to run the whole width, not sit in the container.
   The wrapper itself carries no padding — the heading is aligned to the site
   container while the strip below it bleeds to the viewport edges. */
.socials__inner {
  width: 100%;
  padding-inline: 0;
}

/* Heading row: title on the left, "Obserwuj nas" on the right, both aligned to
   .container (max-width 1200 + 24px padding) like every other section heading,
   even though the strip underneath runs full-bleed. */
.socials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap; /* narrow screens: the button drops under the title */
  max-width: var(--container, 1200px);
  /* generous breathing room before the strip — the cards carry a ±20px
     translateY, so the nearest one still clears the heading comfortably */
  margin: 0 auto clamp(56px, 5vw, 88px);
  padding-inline: 24px;
}

.socials__title {
  margin: 0;
  font-family: var(--font-sora, "Poppins", sans-serif);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--cream, #f3eadd);
}

/* Secondary action — outlined, so it never competes with the filled "ZAMÓW"
   pill in the header. Fills in on hover. */
.socials__follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 26px;
  border: 1px solid rgba(243, 234, 221, 0.45);
  border-radius: 999px;
  font-family: var(--font-switzer, "Poppins", sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream, #f3eadd);
  background: transparent;
  transition:
    background-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
    color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.socials__follow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.socials__follow:hover,
.socials__follow:focus-visible {
  background: var(--cream, #f3eadd);
  border-color: var(--cream, #f3eadd);
  color: var(--green, #8e1b1a);
}

.socials__follow:focus-visible {
  outline: 3px solid var(--cream, #f3eadd);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .socials__follow {
    transition: none;
  }
}

/* ---------- resting strip ---------- */
.socials__strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  /* Six squares across the viewport hit a hard geometric ceiling, so the cards
     now overlap slightly instead of sitting apart: every pixel of overlap is
     redistributed as card width (flex-basis 0 + grow shares the freed space).
     The tilt makes the interleaved corners read as a deliberate fan. */
  gap: 0;
  /* The strip is deliberately WIDER than the viewport, so the first and last
     photo run off the screen edges and get cut — the fan reads as continuing
     beyond the page. `.socials` clips the overhang (overflow-x: clip), so this
     never creates a horizontal scrollbar. */
  margin: 0 calc(-1 * clamp(24px, 3vw, 72px));
  padding: 0;
  list-style: none;
}

/* The overlap. Negative margin, so the width it frees goes back into the cards. */
.socials__item + .socials__item {
  margin-left: calc(-1 * clamp(20px, 2.2vw, 56px));
}

.socials__item {
  position: relative;
  z-index: 1;
  /* grow to fill the full width; the tilt + dy keep the scattered look.
     No max-width cap — on wide screens the cards keep scaling with the viewport. */
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  transform: rotate(var(--rot)) translateY(var(--dy));
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.socials__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* brand surface stays visible while the image loads and if it never arrives */
  background: var(--red-deep, #74151a);
  border-radius: 0;
  transition:
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.socials__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The decorative cream halo was removed — the hover effect is the lift plus a
   soft black shadow, nothing else. The <span class="socials__glow"> may still
   be present in older exported HTML, so it is explicitly neutralised here. */
.socials__glow {
  display: none;
}

/* keyboard users get exactly what the mouse gets */
.socials__card:focus-visible {
  outline: 3px solid var(--cream, #f3eadd);
  outline-offset: 4px;
}

/* ---------- hover / focus (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .socials__item {
    will-change: transform; /* scoped here, never global */
  }

  .socials__item:hover,
  .socials__item:focus-within {
    z-index: 5;
    transform: rotate(calc(var(--rot) * -0.6)) translateY(calc(var(--dy) - 8px)) scale(1.18);
  }

  .socials__item:hover .socials__card,
  .socials__item:focus-within .socials__card {
    /* soft black, tight spread — a lift, not a halo */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
  }
}

/* ---------- mobile: the same fan, rotated 90° ---------- */
@media (max-width: 767px) {
  .socials__strip {
    flex-direction: column;
    align-items: center;
    gap: 0; /* the vertical stack overlaps instead of spacing out */
    /* no edge bleed in the vertical stack — that is a desktop-row effect */
    margin-inline: 0;
  }

  .socials__item {
    flex: 0 0 auto;
    width: 78%;
    max-width: none;
    /* --dx nudges each card off-centre (see below) so the stack reads as a
       scattered pile of photos rather than a centred column */
    transform: rotate(var(--rot)) translate(var(--dx, 0), var(--dy));
  }

  /* Hand-picked offsets: alternating sides, never the same twice in a row.
     Capped at 8% — the card is 78% wide, so it always stays on screen. */
  .socials__item:nth-child(1) { --dx: -7%; }
  .socials__item:nth-child(2) { --dx: 8%; }
  .socials__item:nth-child(3) { --dx: -3%; }

  .socials__item + .socials__item {
    /* the stack overlaps vertically here — clear the desktop's horizontal
       overlap, otherwise the column would be shifted left */
    margin-left: 0;
    margin-top: -6%;
  }

  /* keep exactly 3 — they are lazy-loaded, so hidden cards fetch nothing */
  .socials__item:nth-child(n + 4) {
    display: none;
  }

  /* tap feedback instead of hover */
  .socials__card:active {
    transform: scale(0.98);
  }
}

/* ---------- reduced motion: keep the composition, drop the motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .socials__item,
  .socials__card {
    transition: none;
  }

  .socials__item:hover,
  .socials__item:focus-within {
    /* no scale, no counter-rotation — the static tilt (and the mobile
       horizontal offset) stays exactly as it was */
    transform: rotate(var(--rot)) translate(var(--dx, 0), var(--dy));
  }
}