/*
 * So Much Pięknie - O nas page: reel header, "Jak to robimy" steps beside their photos,
 * "Co nas kręci" topic tiles, and the credit line of the footer.
 */

/* Reel header (HeroBlock without a background image) ------------------------------------ */
.smp-reel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 6rem 1rem 4rem;
}
.smp-reel--frames { min-height: 86svh; }
.smp-reel__rails { position: absolute; inset: 0; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.smp-reel__rail { display: flex; gap: 1rem; width: max-content; animation: smp-reel 60s linear infinite; }
.smp-reel__rail--back { animation-direction: reverse; animation-duration: 70s; }
.smp-reel__frame { width: 15rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .875rem; filter: saturate(1.05) brightness(.8); }
@media (min-width: 768px) { .smp-reel__frame { width: 22.5rem; } }
@keyframes smp-reel { to { transform: translateX(-50%); } }
.smp-reel--frames::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(11, 11, 16, .9) 0%, rgba(11, 11, 16, .75) 40%, rgba(11, 11, 16, .2) 75%);
}
.smp-reel__copy { display: flex; flex-direction: column; align-items: center; max-width: 72rem; margin: 0 auto; text-align: center; }
.smp-reel__title {
  margin: .75rem 0 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking); line-height: 1; font-size: clamp(3rem, 8vw, 6.5rem);
}
.smp-reel__lead {
  margin: 1.25rem 0 0; max-width: 40rem; color: rgba(245, 240, 234, .92);
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 24;
  font-size: 1.375rem; letter-spacing: .015em; line-height: 1.55;
}
.smp-reel__sign {
  width: min(40rem, 100%); margin: 1.25rem 0 0; padding-right: 1rem; text-align: right;
  font-family: "Allura", cursive; font-size: 3rem; line-height: 1; color: var(--pink);
  transform: rotate(-4deg); transform-origin: right center;
}

/* "Jak to robimy": TimelineBlock steps beside their photos ------------------------------ */
.smp-section--alt:has(.smp-zigzag) { overflow: hidden; }
.smp-zigzag { display: grid; gap: 4rem; margin: 3rem 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .smp-zigzag { gap: 6rem; margin-top: 4rem; } }
.smp-zigzag__row { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .smp-zigzag__row { grid-template-columns: 7fr 5fr; gap: 4rem; }
  .smp-zigzag__row:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .smp-zigzag__row:nth-child(even) .smp-zigzag__media { order: 2; }
}
.smp-zigzag__media { position: relative; margin: 0; }
.smp-zigzag__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); clip-path: inset(0 round 1.25rem);
  transition: clip-path 1.1s cubic-bezier(.2, .7, .1, 1), transform 1.4s cubic-bezier(.2, .7, .1, 1);
}
.smp-zigzag__num {
  position: absolute; top: -.42em; left: -.08em; margin: 0; pointer-events: none;
  font-family: var(--display); font-weight: 700; line-height: 1; font-size: clamp(6.5rem, 14vw, 12rem);
  color: transparent; -webkit-text-stroke: 2px var(--pink); transition: opacity 1s .3s, transform 1s .3s;
}
.smp-zigzag__row:nth-child(even) .smp-zigzag__num { left: auto; right: -.08em; }
.smp-zigzag__copy { transition: opacity .9s .2s, transform .9s .2s; }
.smp-zigzag__title {
  margin: 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.05; font-size: clamp(2.125rem, 4vw, 3.25rem);
}
.smp-zigzag__text { margin: 1rem 0 0; max-width: 30rem; font-size: 1.25rem; line-height: 1.7; color: rgba(245, 240, 234, .85); }
/* Hidden only once site.js has marked the page (no JS = everything visible). */
.smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__media img { clip-path: inset(0 100% 0 0 round 1.25rem); transform: scale(1.08); }
.smp-js .smp-zigzag__row:nth-child(even):not(.is-in) .smp-zigzag__media img { clip-path: inset(0 0 0 100% round 1.25rem); }
.smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__num,
.smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__copy { opacity: 0; transform: translateY(1.5rem); }

.smp-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.smp-tools li {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem;
  border: 1px solid rgba(245, 240, 234, .35); border-radius: 999px; font-size: .9375rem; font-weight: 700;
}

/* "Co nas kręci": PersonaCardsBlock as topic tiles -> filtered Kulisy -------------------- */
.smp-section--wine-fade { background: linear-gradient(160deg, var(--wine) 0%, var(--night-alt) 55%, var(--night) 100%); }
.smp-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .smp-topics { grid-template-columns: repeat(4, 1fr); } }
.smp-topic {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 1.125rem;
  color: var(--snow); text-decoration: none;
}
.smp-topic__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.smp-topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 16, .92), rgba(11, 11, 16, 0) 60%); }
a.smp-topic:hover .smp-topic__photo, a.smp-topic:focus-visible .smp-topic__photo { transform: scale(1.06); }
a.smp-topic:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.smp-topic__copy { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.125rem; z-index: 1; display: grid; gap: .375rem; }
.smp-topic__title {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.1; font-size: clamp(1.25rem, 1.8vw, 1.625rem);
}
.smp-topic__text { font-size: .9375rem; color: rgba(245, 240, 234, .85); }
.smp-topic__more { font-size: .9375rem; font-weight: 700; color: var(--pink); }

/* Footer credit line (editable footer columns) -------------------------------------------- */
.smp-footer__credit a { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; color: var(--snow); text-decoration: none; }
.smp-footer__credit a:hover span { color: var(--pink); }
.smp-footer__mark { width: 1.75rem; height: 1.75rem; border-radius: .375rem; background: #fff; padding: 2px; }

@media (prefers-reduced-motion: reduce) {
  .smp-reel__rail { animation: none; }
  .smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__media img,
  .smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__num,
  .smp-js .smp-zigzag__row:not(.is-in) .smp-zigzag__copy { clip-path: inset(0 round 1.25rem); transform: none; opacity: 1; }
}