/*
  Responsive decorative shapes export.
  Breakpoints mirror Tailwind classes used in the source:
  sm = 640px, md = 768px, lg = 1024px, xl = 1280px.
*/

.show-sm,
.show-md,
.show-lg,
.show-xl,
.hide-mobile,
.hide-md-down,
.show-md-only,
.show-mobile-only {
  display: none;
}

@media (max-width: 767.98px) {
  .show-mobile-only {
    display: block;
  }

  .decor-item-mobile {
    position: absolute;
    top: var(--shape-mobile-y, auto);
    bottom: var(--shape-mobile-bottom, auto);
    left: var(--shape-mobile-left, auto);
    right: var(--shape-mobile-right, auto);
    --shape-scale: 0.285714;
  }

  .section-decor-mobile-accent {
    top: var(--shape-inset, 16px);
    left: 0;
    --shape-scale: 0.285714;
  }

  .cta-border-frame,
  .cta-corner-square {
    display: none;
  }
}

@media (min-width: 640px) {
  .show-sm {
    display: block;
  }

  .framed-photo-bar {
    display: block;
  }
}

@media (max-width: 639.98px) {
  .framed-photo-bar,
  .home-hero-photo-bar {
    display: none;
  }
}

@media (min-width: 768px) {
  .decor-track {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .show-md,
  .hide-mobile {
    display: block;
  }

  .show-md-only {
    display: block;
  }

  .motif-image-frame,
  .portal-photo-frame {
    transform: translate(1.5rem, 1.5rem);
  }

  .framed-photo-frame,
  .home-profile-frame-a {
    transform: translate(1rem, 1rem);
  }

  .home-profile-frame-b {
    transform: translate(-1rem, 1rem);
  }

  .photo-frame-square {
    width: 1.5rem;
    height: 1.5rem;
  }

  .home-hero-photo-square,
  .home-hero-photo-square-secondary {
    width: 1.25rem;
    height: 1.25rem;
  }

  .footer-watermark {
    display: block;
    width: 240px;
  }

  .map-frame {
    height: 24rem;
  }

  .lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
  }

  .lightbox-prev {
    left: 1.5rem;
  }

  .lightbox-next {
    right: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .footer-watermark {
    display: none;
  }

  .lightbox-close {
    top: 1rem;
    right: 1rem;
  }

  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .show-md-only {
    display: block;
  }

  .section-decor-tablet-slot {
    position: absolute;
    top: var(--shape-tablet-y, 22px);
    left: var(--shape-tablet-left, auto);
    right: var(--shape-tablet-right, auto);
    --shape-scale: 0.2625;
  }

  .scene-content-secondary {
    display: block;
  }
}

@media (min-width: 1024px) {
  .show-lg,
  .hide-md-down {
    display: block;
  }

  .show-mobile-only,
  .show-md-only {
    display: none;
  }

  .scene-hero-dominant,
  .scene-content-dominant,
  .scene-dark-dominant,
  .scene-form-curve,
  .scene-form-quarter,
  .scene-center-dominant {
    display: block;
  }
}

@media (min-width: 1280px) {
  .show-xl {
    display: block;
  }

  .scene-hero-secondary,
  .scene-dark-secondary,
  .scene-center-secondary {
    display: block;
  }
}

/* Responsive scale presets derived from Scenes.tsx and page overrides. */
@media (min-width: 1024px) {
  .dominant-arch { --shape-scale: 0.84; --shape-peek: 52px; }
  .dominant-portal { --shape-scale: 1.18; --shape-peek: 40px; }
  .dominant-bar { --shape-scale: 1; --shape-peek: 30px; }
  .dominant-semi { --shape-scale: 1.12; --shape-peek: 50px; }
  .dominant-rect { --shape-scale: 0.92; --shape-peek: 46px; }
  .dominant-wave { --shape-scale: 1; --shape-peek: 46px; }
  .dominant-curve { --shape-scale: 0.95; --shape-peek: 42px; }
  .dominant-blob { --shape-scale: 1.05; --shape-peek: 50px; }
  .dominant-low { --shape-scale: 0.92; --shape-peek: 46px; }
  .dominant-column { --shape-scale: 1; --shape-peek: 32px; }
  .dominant-quarter { --shape-scale: 1.05; --shape-peek: 50px; }
  .dominant-wedge { --shape-scale: 1; --shape-peek: 34px; }
  .dominant-blockcut { --shape-scale: 0.95; --shape-peek: 48px; }
  .psychotherapy-dla-kogo-dominant { --shape-scale: 0.874; --shape-peek: 48px; }

  .zone-tl.safe-left,
  .zone-bl.safe-left,
  .zone-left.safe-left {
    --shape-peek: min(var(--shape-peek), 22px);
  }
}