/*
 * Calder Kamin preservation-first responsive layer
 *
 * Desktop retains the existing static Wix translation. These rules become
 * active only on narrower screens, where the original export's fixed 980px
 * canvas would otherwise overflow. Artwork is shown at its natural aspect
 * ratio and is never placed into a new template or forced crop.
 */

:root {
  --calder-mobile-gutter: clamp(16px, 5vw, 30px);
  --calder-mobile-gap: clamp(18px, 6vw, 44px);
  --calder-mobile-measure: 760px;
}

/* Keep the hand-built static header above the inherited Wix layers. */
.calder-site-header {
  isolation: isolate;
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
  }

  #SITE_CONTAINER,
  #site-root,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  #BACKGROUND_GROUP,
  #BACKGROUND_GROUP_TRANSITION_GROUP,
  [id^="pageBackground_"],
  [id^="bgLayers_"],
  [id^="bgMedia_"],
  [id$="_wrapper"],
  [id$="_wrapper_background"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  /* The custom header is the authoritative navigation. Hide only the old
     Wix page menu, not gallery controls or project navigation. */
  #PAGES_CONTAINER #comp-jy683a4c,
  #PAGES_CONTAINER #comp-j63ov8iz,
  #PAGES_CONTAINER nav.nzOiVF {
    display: none !important;
  }

  #PAGES_CONTAINER .wixui-section,
  #PAGES_CONTAINER section[id^="comp-"],
  #PAGES_CONTAINER [class*="wixui-section"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Wix's desktop export expresses composition through fixed grid offsets.
     On mobile, preserve source order and spacing rather than scaling a 980px
     canvas down into illegibility. */
  #PAGES_CONTAINER [data-mesh-id$="inlineContent"],
  #PAGES_CONTAINER [data-mesh-id$="inlineContent-gridContainer"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Add gutters once per visual section. Applying them to every nested Wix
     mesh would progressively shrink the artwork. */
  #PAGES_CONTAINER .wixui-section > [data-mesh-id$="inlineContent"] > [data-mesh-id$="inlineContent-gridContainer"] {
    padding: var(--calder-mobile-gap) var(--calder-mobile-gutter) !important;
    gap: var(--calder-mobile-gap) !important;
  }

  #PAGES_CONTAINER [data-mesh-id$="inlineContent-gridContainer"] > *,
  #PAGES_CONTAINER [data-mesh-id$="inlineContent-gridContainer"] > interact-element > * {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-area: auto !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, var(--calder-mobile-measure)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  #PAGES_CONTAINER [id^="comp-"] {
    max-width: 100% !important;
  }

  #PAGES_CONTAINER .wixui-rich-text,
  #PAGES_CONTAINER [class*="wixui-rich-text"] {
    width: min(100%, var(--calder-mobile-measure)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #PAGES_CONTAINER .wixui-rich-text__text,
  #PAGES_CONTAINER h1,
  #PAGES_CONTAINER h2,
  #PAGES_CONTAINER h3,
  #PAGES_CONTAINER h4,
  #PAGES_CONTAINER p,
  #PAGES_CONTAINER li {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  #PAGES_CONTAINER h1,
  #PAGES_CONTAINER h2,
  #PAGES_CONTAINER h3 {
    line-height: 1.18 !important;
  }

  /* Preserve intrinsic dimensions. This specifically avoids the forced 4:3
     cropping and enlargement that damaged the discarded V2 attempt. */
  #PAGES_CONTAINER .wixui-image,
  #PAGES_CONTAINER wow-image,
  #PAGES_CONTAINER picture,
  #PAGES_CONTAINER [class*="wixui-image"] {
    display: block !important;
    width: min(100%, var(--calder-mobile-measure)) !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #PAGES_CONTAINER img,
  #PAGES_CONTAINER video {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  #PAGES_CONTAINER iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* Preserve all Wix gallery items but replace the absolute desktop canvas
     with a straightforward mobile exhibition flow. */
  #PAGES_CONTAINER .pro-gallery,
  #PAGES_CONTAINER .pro-gallery-parent-container,
  #PAGES_CONTAINER .pro-gallery-margin-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #PAGES_CONTAINER .pro-gallery-margin-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(14px, 4vw, 26px) !important;
    margin: 0 !important;
  }

  #PAGES_CONTAINER .item-link-wrapper,
  #PAGES_CONTAINER .gallery-item-container,
  #PAGES_CONTAINER .gallery-item-wrapper,
  #PAGES_CONTAINER .gallery-item-content {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #PAGES_CONTAINER .gallery-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #PAGES_CONTAINER .gallery-item-hover,
  #PAGES_CONTAINER .gallery-item-common-info,
  #PAGES_CONTAINER .nav-arrows-container,
  #PAGES_CONTAINER .show-more {
    position: relative !important;
  }

  /* The inherited Wix footer uses a 1658px artwork and desktop offsets. Keep
     its content, but let it return to the normal document flow on phones. */
  #SITE_FOOTER,
  #SITE_FOOTER [data-mesh-id$="inlineContent"],
  #SITE_FOOTER [data-mesh-id$="inlineContent-gridContainer"] {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #SITE_FOOTER [data-mesh-id$="inlineContent-gridContainer"] > *,
  #SITE_FOOTER [data-mesh-id$="inlineContent-gridContainer"] > interact-element > * {
    position: relative !important;
    inset: auto !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #SITE_FOOTER img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #SITE_FOOTER .wixui-rich-text {
    width: min(100% - (2 * var(--calder-mobile-gutter)), var(--calder-mobile-measure)) !important;
    height: auto !important;
    margin: 1rem auto !important;
  }

  /* Empty Wix spacers should not become giant blank panels after reflow. */
  [data-mesh-id$="inlineContent-wedge-3"],
  [data-mesh-id*="wedge"] {
    display: none !important;
    height: 0 !important;
  }
}

@media (max-width: 900px) {
  /* The desktop home composition overlays a second name treatment and an
     empty Wix widget on the hero. The custom static header already supplies
     the name, so mobile can move directly from the hero artwork to Calder's
     existing reuse statement without a blank interlude. */
  body[data-preservation-page="index"] #comp-jy6864g6,
  body[data-preservation-page="index"] #comp-jzmwy2wq {
    display: none !important;
  }

  body[data-preservation-page="index"] #comp-jyruq0z9 {
    text-align: center !important;
  }

  /* The desktop education statement is fully justified. At phone width that
     creates conspicuous rivers of space, so retain the same copy and type
     while returning only this paragraph to normal left alignment. */
  body[data-preservation-page="education"] #comp-kcc2opg8 p {
    text-align: left !important;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  body[data-preservation-page="animals"] #PAGES_CONTAINER .pro-gallery-margin-container,
  body[data-preservation-page="education"] #PAGES_CONTAINER .pro-gallery-margin-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}