/* Small supplemental styles for avstudios (custom, non-site).
 * The bulk of the design lives in the original stylesheets; this file only
 * holds tweaks needed now that the framework JS is gone. */

/* Masonry images fill their (JS-sized) wrapper. */
.gallery-masonry-item-wrapper { overflow: hidden; }
.gallery-masonry-item-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove the large gap between the (overlay) header and the first image.
 * The header is absolutely positioned over the page, so the first section
 * only needs top padding equal to the header's height. The original
 * Squarespace JS froze an inline padding-top (172px) and the section also
 * carried a min-height (33vh) + vertical centering, which together left a
 * big empty space. Neutralise them so the banner sits right under the header
 * consistently across every page. */
#sections > .page-section:first-child {
  padding-top: calc(5.8vw + 80px) !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}
#sections > .page-section:first-child > .content-wrapper {
  padding-top: 0 !important;
}
@media only screen and (pointer: coarse) and (max-width: 1024px),
       screen and (max-width: 799px) {
  #sections > .page-section:first-child {
    padding-top: calc(12vw + 80px) !important;
  }
}

/* Prevent hero images from widening the page (which shrinks header/logo visually). */
#siteWrapper { overflow-x: hidden; }

/* Wide sections: full viewport width (matches myartwork gallery). */
.page-section.content-width--wide > .content-wrapper {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.page-section.content-width--wide .content {
  width: 100% !important;
}

/* First hero banner: same width on every page. */
#sections > .page-section:first-child .content {
  width: 100% !important;
}
#sections > .page-section:first-child .mlc-block-image-figure.intrinsic {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* My Artwork hero: inset with side padding (original layout, not full-bleed). */
body.page-myartwork #sections > .page-section:first-child > .content-wrapper {
  max-width: 1800px !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
  box-sizing: border-box !important;
}
@media screen and (max-width: 767px) {
  body.page-myartwork #sections > .page-section:first-child > .content-wrapper {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
  }
}

/* Films (and other embed) videos: span the same width as gallery images. */
.page-section.content-width--wide .video-block .intrinsic {
  width: 100%;
  max-width: 100%;
}

/* Meet Adriaan: remove Squarespace section min-heights and vertical padding gaps. */
body.page-meetadriaan #sections > .page-section {
  min-height: 0 !important;
  align-items: flex-start !important;
}
body.page-meetadriaan #sections > .page-section > .content-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.page-meetadriaan #sections > .page-section + .page-section {
  padding-top: 2vw !important;
}

/* Normalise accordion question headings to body text size.
 * The h4 wrapper inherits Squarespace's heading-4 size (1.6× multiplier)
 * which is noticeably larger than normal body text (1.3× multiplier). */
.mlc-block-accordion .accordion-item__title-wrapper {
  font-size: calc((var(--normal-text-size-value) - 1) * 1.2vw + 1rem);
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .mlc-block-accordion .accordion-item__title-wrapper {
    font-size: calc((var(--normal-text-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
  }
}
@media screen and (min-width: 1944px) {
  .mlc-block-accordion .accordion-item__title-wrapper {
    font-size: calc(var(--normal-text-size-value) * 1rem);
  }
}

/* Double the header logo size across all pages. */
.header-title-logo a { max-height: 178px; }
.header-title-logo img {
  height: 72px;
  max-height: 178px;
}
@media screen and (max-width: 767px) {
  .header-title-logo a,
  .header-title-logo img { max-height: 72px; }
}

/* Header Instagram icon (uses Squarespace social-icon-font). */
.header-actions-action--social .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navigationLinkColor);
  text-decoration: none;
}
.header-actions-action--social .social-instagram {
  display: block;
  font-size: 18px;
  line-height: 1;
}