/* ============================================
   Alice Čechová — modern alt layout (all pages)
   Asymmetric stacks, bento, zig-zag, collage
   ============================================ */

:root {
  --alt-gap: clamp(1rem, 2.4vw, 1.75rem);
}

/* Page rhythm: not a rigid template stack */
body[data-page]:not([data-page="home"]) .page-hero {
  min-height: clamp(380px, 54vh, 560px);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  margin-bottom: -1.5rem;
}

body[data-page]:not([data-page="home"]) main > .marquee:first-of-type,
body[data-page]:not([data-page="home"]) .page-hero + .marquee {
  margin-top: 0.4rem;
  z-index: 3;
}

/* Zig-zag section alternation */
main > .section:nth-of-type(odd) .container.split:not(.split--reverse) {
  direction: ltr;
}
main > .section:nth-of-type(even) .container.split:not(.split--reverse) .split__media {
  order: 2;
}
@media (max-width: 900px) {
  main > .section:nth-of-type(even) .container.split:not(.split--reverse) .split__media {
    order: 0;
  }
}

/* Bento / mosaic lift */
.mosaic {
  gap: var(--alt-gap) !important;
  background: transparent !important;
}
.mosaic__cell {
  border-radius: 0 !important;
  clip-path: polygon(2% 0, 100% 3%, 98% 100%, 0 96%);
  box-shadow: 10px 12px 0 #111;
  transform: rotate(-1.4deg);
  min-height: 240px;
}
.mosaic__cell:nth-child(2) {
  transform: rotate(2.1deg) translateY(14px);
  clip-path: polygon(0 4%, 98% 0, 100% 97%, 2% 100%);
  box-shadow: 10px 12px 0 var(--acid, #d8ff3e);
}
.mosaic__cell:nth-child(3) {
  transform: rotate(-2.4deg);
  box-shadow: 10px 12px 0 var(--hot, #ff3d8a);
}
.mosaic__cell:hover {
  transform: rotate(0) translateY(-6px) scale(1.01);
  z-index: 2;
}

/* Care / value / process as sticker grid */
.care-grid,
.values-grid,
.process-grid,
.blog-grid {
  gap: var(--alt-gap) !important;
}
.care-card,
.value,
.process-step,
.blog-card,
.tech-card,
.index-item {
  position: relative;
  border: 2px solid #111 !important;
  background: #fff;
  box-shadow: 7px 8px 0 #111;
  transform: rotate(-1.2deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.care-card:nth-child(even),
.value:nth-child(even),
.process-step:nth-child(even),
.blog-card:nth-child(even) {
  transform: rotate(1.8deg) translateY(10px);
  background: #fafafa;
}
.care-card:nth-child(3n),
.value:nth-child(3n),
.process-step:nth-child(3n) {
  box-shadow: 7px 8px 0 var(--ink-violet, #9b3dff);
}
.care-card:hover,
.value:hover,
.process-step:hover,
.blog-card:hover {
  transform: rotate(0) translateY(-4px);
  z-index: 2;
}

.section--dark .care-card,
.section--ink .care-card,
.section--dark .value,
.section--ink .value,
.section--dark .process-step,
.section--ink .process-step {
  background: #161616;
  color: #fff;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 7px 8px 0 var(--ink-violet, #9b3dff);
}

/* FAQ / tabs as indie panels */
.faq-tabs,
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.faq-tabs button,
.gallery-filters button,
.filter-btn,
[data-faq-tab] {
  transform: rotate(-3deg);
  border: 2px solid #111 !important;
  box-shadow: 3px 3px 0 #111;
  background: #fff;
}
.faq-tabs button:nth-child(even),
.gallery-filters button:nth-child(even),
.filter-btn:nth-child(even) {
  transform: rotate(4deg);
}
.faq-tabs button.is-active,
.gallery-filters button.is-active,
.filter-btn.is-active,
[data-faq-tab].is-active {
  background: var(--acid, #d8ff3e) !important;
  transform: rotate(0) scale(1.04);
}

.faq__item {
  border: 2px solid #111 !important;
  margin-bottom: .75rem;
  box-shadow: 5px 5px 0 transparent;
  transform: rotate(-0.4deg);
}
.faq__item.is-open {
  box-shadow: 5px 5px 0 var(--ink-violet, #9b3dff);
  transform: rotate(0);
}

/* Contact / booking form collage */
.contact-grid,
.booking-layout,
.form-layout {
  gap: clamp(1.2rem, 3vw, 2.5rem) !important;
}
.form,
.booking-form,
.contact-form {
  border: 2px solid #111;
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: 12px 14px 0 var(--ink-violet, #9b3dff);
  transform: rotate(-0.8deg);
  background: #fff;
  position: relative;
}
.form::before,
.booking-form::before,
.contact-form::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 14%;
  width: 88px;
  height: 26px;
  background: url("../assets/tape.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Timeline list (instrukce / kontraindikace) */
.prose ol,
.checklist,
.steps-list {
  list-style: none;
  padding: 0;
  counter-reset: alt;
}
.prose ol > li,
.checklist > li,
.steps-list > li {
  counter-increment: alt;
  position: relative;
  padding: .85rem 1rem .85rem 3.2rem;
  margin: 0 0 .65rem;
  border: 2px dashed #111;
  background: rgba(255,255,255,.72);
  transform: rotate(-0.6deg);
}
.prose ol > li:nth-child(even),
.checklist > li:nth-child(even) {
  transform: rotate(0.8deg);
  background: var(--acid, #d8ff3e);
}
.prose ol > li::before,
.checklist > li::before,
.steps-list > li::before {
  content: counter(alt, decimal-leading-zero);
  position: absolute;
  left: .7rem;
  top: .7rem;
  font-family: var(--font-brush, "Rock Salt", cursive);
  font-size: .95rem;
  color: var(--hot, #ff3d8a);
}

/* Gallery masonry tilt */
.gallery-grid {
  gap: var(--alt-gap) !important;
}
.gallery-item:nth-child(3n) {
  transform: rotate(-2.4deg) translateY(18px);
}
.gallery-item:nth-child(5n) {
  transform: rotate(2.8deg) translateY(-8px);
}

/* Reviews rail */
.reviews-rail {
  gap: var(--alt-gap) !important;
  align-items: flex-start;
}

/* Index / docs rail */
.index-rail a,
.doc-card,
.price-item {
  transition: transform .22s ease;
}

/* Soft section separators */
.section + .section {
  position: relative;
}
.section--light + .section--stone::before,
.section--stone + .section--light::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    #111 0 10px,
    transparent 10px 18px
  );
  opacity: .35;
  pointer-events: none;
}

/* Stagger reveal fallback (was missing in styles.css) */
.stagger-item {
  opacity: 0;
  transform: translateY(22px) rotate(-1deg);
  animation: staggerIn .7s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--stagger-i, 0) * 90ms);
}
@keyframes staggerIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stagger-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .mosaic__cell,
  .care-card,
  .value,
  .process-step,
  .blog-card,
  .form,
  .booking-form,
  .contact-form {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .mosaic__cell,
  .mosaic__cell:nth-child(2),
  .mosaic__cell:nth-child(3),
  .care-card,
  .care-card:nth-child(even),
  .value,
  .value:nth-child(even),
  .process-step,
  .blog-card,
  .blog-card:nth-child(even),
  .form,
  .booking-form,
  .contact-form,
  .faq__item,
  .faq-tabs button,
  .gallery-filters button,
  .filter-btn,
  [data-faq-tab] {
    transform: none !important;
  }

  .mosaic__cell,
  .care-card,
  .value,
  .blog-card {
    box-shadow: 4px 4px 0 #111 !important;
    clip-path: none !important;
  }

  body[data-page]:not([data-page="home"]) .page-hero {
    clip-path: none;
    margin-bottom: 0;
  }

  .prose ol > li,
  .checklist > li,
  .steps-list > li,
  .prose ol > li:nth-child(even),
  .checklist > li:nth-child(even) {
    transform: none;
    padding-left: 2.8rem;
  }

  .faq-tabs,
  .gallery-filters {
    gap: .4rem;
  }
  .faq-tabs button,
  .gallery-filters button,
  .filter-btn,
  [data-faq-tab] {
    box-shadow: 2px 2px 0 #111;
    font-size: .78rem;
  }
}