/* ==========================================================
   Layout & Footer
   ========================================================== */

/* Tune once */
:root {
  --page-gutter: 1.5rem;
  --full-img-max: 1800px;
  --footer-pad: calc(
    var(--footer-h-mobile, 72px) + env(safe-area-inset-bottom) + 24px
  );
  --hdr: 0px;
  --ftr: 0px;
  --admin: 0px;
  --gap-small: 24px;
  --gap-medium: 64px;
  --img-large-scale: 0.86;
}

html {
  scroll-behavior: auto;
}

/* Fixed footer only on single project */
body.single-project .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

/* Constrained page container */
.project-page {
  margin: 0 auto;
  overflow-x: visible;
  max-width: 1600px;
  padding-inline: var(--page-gutter);
  padding-top: 3rem;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Let iOS Safari use native page scrolling on project pages */
body.single-project {
  overflow-y: auto;
}

body.single-project #site-content,
body.single-project main,
body.single-project .project-page {
  overflow: visible;
}

/* ==========================================================
   “Runway” so last blocks clear the fixed footer smoothly
   ========================================================== */

/* Put the runway where the content actually scrolls */
.project-page .project-content {
  padding-bottom: var(--footer-pad);
  margin-top: 2rem;
}

/* Ensure focused/anchored items land above the footer */
.project-page .project-content > * {
  scroll-margin-bottom: var(--footer-pad);
}

/* Non-collapsing spacer at the very end */
.project-page .project-content::after {
  content: "";
  display: block;
  height: var(--footer-pad);
}

/* Stop last child margin from “eating” the spacer */
.project-page .project-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Slightly different runway on desktop (tweak if footer size differs) */
@media (min-width: 900px) {
  :root {
    --footer-pad-desktop: calc(var(--footer-h-desktop, 96px) + 24px);
  }
  .project-page .project-content {
    padding-bottom: var(--footer-pad-desktop);
  }
  .project-page .project-content > * {
    scroll-margin-bottom: var(--footer-pad-desktop);
  }
  .project-page .project-content::after {
    height: var(--footer-pad-desktop);
  }
}

/* ==========================================================
   Hero: Title (left, sticky on desktop) + Meta (right)
   ========================================================== */

.project-hero {
  position: relative;
}

.project-title {
  font-family: "Noto Serif Display", GeorgiaCustom, Georgia, serif;
  font-weight: 800;
  font-style: italic;
  margin: 0;
  letter-spacing: 0.4rem;
}

.project-hero__title-pin {
  position: relative;
  text-align: left;
}
.project-subtitle {
  margin: 0.25rem 0 0;
  font-style: italic;
  display: none;
}

.project-hero__meta-pin {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.75rem;
  color: #373737;
}
.meta__item {
  opacity: 0.85;
}
.meta__label {
  font-weight: 700;
  margin-right: 0.25rem;
}
.meta__value {
  font-weight: 400;
}

/* Desktop sticky positions */
@media (min-width: 900px) {
  .project-page {
    padding-top: 4rem;
  }
  .project-hero__title-pin {
    position: fixed;
    z-index: 101;
    top: 1.25rem;
    left: 2rem;
    right: auto;
    text-align: left;
    pointer-events: none;
  }
  .project-title,
  .project-subtitle {
    pointer-events: auto;
  }
  .project-hero__meta-pin {
    position: fixed;
    z-index: 101;
    right: 3rem;
    bottom: calc(var(--footer-h-desktop, 96px) / 2);
    transform: translateY(50%);
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: flex-end;
    background: transparent;
    pointer-events: none;
    font-size: 0.8rem;
  }
  .project-hero__meta-pin .meta__item {
    pointer-events: auto;
  }
  .meta__label {
    font-weight: 800;
  }
}

@media (max-width: 899px) {
  .project-hero__meta-pin {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0.75rem;
    color: #373737;
    font-size: 0.85rem;
  }
}

/* ==========================================================
   Paragraphs
   ========================================================== */
/* Base (default) */
.project-content p {
  color: #373737;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.55;
  margin: 0.9rem auto 1.5rem;
  width: 62%;
  max-width: 450px;
  text-align: center;
}

/* Width styles */
.project-content p.is-style-proj-text-w-xsmall {
  width: 26%;
  max-width: 26%;
} /* 👈 NEW */
.project-content p.is-style-proj-text-w-small {
  width: 40%;
  max-width: 40%;
}
.project-content p.is-style-proj-text-w-medium {
  width: 50%;
  max-width: 50%;
}
.project-content p.is-style-proj-text-w-large {
  width: 98%;
  max-width: 98%;
}

/* Font sizes (unchanged) */
.project-content p.has-proj-normal-font-size {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem) !important;
  line-height: 1.55;
  font-weight: 400;
}

.project-content p.has-proj-small-font-size {
  font-size: 1rem !important;
  line-height: 1.3;
  font-weight: 400;
}

.project-content p strong,
.project-content p b {
  font-weight: 700;
  font-style: inherit;
}

.project-content p em,
.project-content p i {
  font-style: italic;
}

/* Desktop readability test */
@media (min-width: 900px) {
  .project-content p {
    max-width: 520px;
  }

  .project-content p.has-proj-normal-font-size {
    font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.6rem) !important;
    line-height: 1.55;
  }

  .project-content p.has-proj-small-font-size {
    font-size: 1.1rem !important;
    line-height: 1.4;
  }
}

/* Mobile tweaks */
@media (max-width: 899px) {
  .project-content p {
    width: 100%;
    max-width: none;
    text-align: justify;
    text-align-last: left;
  }

  .project-content p.is-style-proj-text-w-xsmall,
  .project-content p.is-style-proj-text-w-small,
  .project-content p.is-style-proj-text-w-medium {
    width: 100%;
    max-width: none;
  }

  .project-content p.is-style-proj-text-w-large {
    width: 100%;
    max-width: none;
  }
  .project-content p.last-center {
    text-align-last: center;
  }
}

/* ==========================================================
   Images Small / Medium / Large only
   ========================================================== */

/* Figure baseline: center the block and cap total width */
.project-page .project-content .wp-block-image {
  margin: 1.5rem auto; /* vertical rhythm + center */
  max-width: min(92%, var(--full-img-max)); /* respect your global cap */
}

/* Let the styled figures escape the generic figure cap */
.project-page .project-content .wp-block-image.is-style-proj-img-large,
.project-page .project-content .wp-block-image.is-style-proj-img-medium,
.project-page .project-content .wp-block-image.is-style-proj-img-small {
  max-width: none; /* remove the 92%/full-img cap on these styles */
  width: auto; /* let the img determine width within its own rules */
}

/* Image reset: never stretch; contain by default */
.project-page .project-content .wp-block-image img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin-inline: auto; /* center the bitmap if narrower */
}

/* Caption: smaller, centered */
.project-page .project-content .wp-block-image figcaption,
.project-page .project-content .wp-element-caption {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.8;
  margin-top: 0.5rem;
}

/* DESKTOP: height-driven sizing with width clamp */
@media (min-width: 992px) {
  /* Medium ≈ 66% vh cap */
  .project-page .project-content .wp-block-image.is-style-proj-img-medium img {
    height: auto !important;
    max-height: calc((100vh - var(--hdr) - var(--ftr) - var(--admin)) * 0.66);
    width: auto;
    max-width: min(100%, 1100px);
    object-fit: contain;
  }

  /* Small ≈ 45% vh cap */
  .project-page .project-content .wp-block-image.is-style-proj-img-small img {
    height: auto !important;
    max-height: calc((100vh - var(--hdr) - var(--ftr) - var(--admin)) * 0.45);
    width: auto;
    max-width: min(100%, 800px);
    object-fit: contain;
  }
  /* Large: fit viewport height minus bars (scaled), without forcing extra box height */
  .project-page .project-content .wp-block-image.is-style-proj-img-large img {
    height: auto !important;
    max-height: calc(
      (100vh - var(--hdr) - var(--ftr) - var(--admin)) * var(--img-large-scale)
    );
    width: auto;
    max-width: min(100%, 1600px);
    object-fit: contain;
  }
}

/* Let Large ignore the 92vw + 1400px cap */
@media (min-width: 1440px) {
  .project-page .project-content .wp-block-image.is-style-proj-img-large img {
    max-width: min(100%, 1600px);
  }
  .project-page .project-content .wp-block-image.is-style-proj-img-medium img {
    max-width: min(100%, 1100px);
  }
  .project-page .project-content .wp-block-image.is-style-proj-img-small img {
    max-width: min(100%, 800px);
  }
}

/* ===== Mobile / tablet: width-driven (feels natural) ===== */
@media (max-width: 991.98px) {
  .project-page .project-content .wp-block-image.is-style-proj-img-large img,
  .project-page .project-content .wp-block-image.is-style-proj-img-medium img,
  .project-page .project-content .wp-block-image.is-style-proj-img-small img {
    max-width: 100%;
    height: auto;
    width: 100%; /* fill column in mobile */
  }
}

/* ==========================================================
   iOS momentum scrolling hint (optional)
   ========================================================== */
@supports (-webkit-overflow-scrolling: touch) {
  .project-page [style*="overflow"],
  .project-page .is-style-proj-img-full [style*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* Spacer sizes (front end) */
.wp-block-spacer.is-style-gap-small {
  height: var(--gap-small) !important;
}
.wp-block-spacer.is-style-gap-medium {
  height: var(--gap-medium) !important;
}
.wp-block-spacer:not([class*="is-style-"]) {
  height: var(--gap-small) !important;
}

@media (min-width: 900px) {
  .wp-block-spacer.is-style-gap-small {
    height: 40px !important;
  }
  .wp-block-spacer.is-style-gap-medium {
    height: 96px !important;
  }
}

/* ==========================================================
   Kill Block gaps
   ========================================================== */
/* Absolutely kill core’s block-gap margin stacks in this content area */
.project-page .project-content {
  --wp--style--block-gap: 0 !important;
}

/* Core uses a bunch of selectors; neutralize the “next sibling gets margin-top” pattern */
.project-page .project-content > * + *,
.project-page
  .project-content
  :where(.is-layout-flow, .is-layout-constrained)
  > *
  + *,
.wp-site-blocks .project-page .project-content > * + * {
  margin-block-start: 0 !important;
}

@media (min-width: 1440px) {
  .project-page .project-content .wp-block-image {
    margin: 1rem auto;
  }
  .project-content p {
    margin: 0.75rem auto 1.1rem;
  }
}

/* One source of truth for vertical spacing */
.project-page .project-content {
  display: grid;
  grid-auto-rows: max-content;
  row-gap: 1rem; /* adjust to taste */
}

/* Zero vertical margins on direct children so gap controls spacing */
.project-page .project-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important; /* keep your centering */
}

/* Figures & paragraphs don’t add their own vertical margins anymore */
.project-page .project-content .wp-block-image {
  margin: 0 auto !important;
}
.project-content p {
  margin: 0 auto !important;
}

/* Optional: tighter on ultra-wide */
@media (min-width: 1440px) {
  .project-page .project-content {
    row-gap: 1rem;
  }
}

/* =========================
   Two-Image GALLERY — FRONTEND 
   ========================= */

/* Base (Medium) with vertical aspect as default */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery {
  --tile-w-base: 320px; /* width at scale 1 */
  --tile-scale: 1; /* Medium */
  --gap: 1.5rem;

  /* default aspect = Vertical 2:3 (w:h) */
  --ar-w: 2;
  --ar-h: 3;

  /* derived */
  --tile-w: calc(var(--tile-w-base) * var(--tile-scale));
  --tile-h: calc(var(--tile-w) * (var(--ar-h) / var(--ar-w)));

  width: min(90%, 1200px);
  margin: 1.5rem auto;

  display: grid;
  grid-template-columns: repeat(2, var(--tile-w));
  gap: var(--gap);
  justify-content: center;
  align-items: start;
}

/* Aspect override when user picked Square in the editor */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery.is-ar-square {
  --ar-w: 1;
  --ar-h: 1;
}

/* Large style = scale up evenly (ratio preserved) */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery.is-style-grid-large {
  --tile-scale: 1.25; /* tweak */
}

/* Equal-size tiles */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery
  figure.wp-block-image {
  margin: 0 !important;
  width: var(--tile-w) !important;
  height: var(--tile-h) !important;
  display: grid;
  overflow: hidden;
  position: relative;
  max-width: none !important; /* beat global caps */
}

/* Images fill tile and crop uniformly (no distortion, equal heights) */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery
  figure.wp-block-image
  > img,
.two-image-gallery.wp-block-thirtyseven-two-image-gallery
  figure.wp-block-image
  > a
  > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}

/* Ignore any global figure/img sizing rules inside this gallery */
.two-image-gallery.wp-block-thirtyseven-two-image-gallery
  figure.wp-block-image[class*="is-style-proj-img-"]
  img,
.two-image-gallery.wp-block-thirtyseven-two-image-gallery
  figure.wp-block-image[class*="size-"]
  img {
  max-width: none !important;
  height: 100% !important;
}

/* Mobile: always 2 columns, no overflow, ratio preserved */
@media (max-width: 899px) {
  .two-image-gallery.wp-block-thirtyseven-two-image-gallery {
    /* let the grid fit the viewport */
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

    /* fluid two columns that can't overflow */
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 3vw, 16px);
    overflow-x: hidden; /* belt + suspenders */
  }

  /* tiles scale with column width; keep chosen aspect (vertical or square) */
  .two-image-gallery.wp-block-thirtyseven-two-image-gallery
    figure.wp-block-image {
    width: auto !important;
    height: auto !important;
    aspect-ratio: calc(
      var(--ar-w) / var(--ar-h)
    ); /* 2/3 by default, 1/1 if .is-ar-square */
    margin: 0;
    overflow: hidden;
  }

  /* images fill/crop inside the tile */
  .two-image-gallery.wp-block-thirtyseven-two-image-gallery
    figure.wp-block-image
    > img,
  .two-image-gallery.wp-block-thirtyseven-two-image-gallery
    figure.wp-block-image
    > a
    > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

/* Safari/mac centering safety */
.project-page,
.project-content {
  width: 100%;
  box-sizing: border-box;
}

.project-page .project-content > * {
  justify-self: center;
}

.project-page .project-content .wp-block-image,
.project-page .project-content .wp-block-image img {
  margin-left: auto !important;
  margin-right: auto !important;
}

.project-page .project-content .wp-block-image {
  display: grid;
  justify-items: center;
}

/* Back to top button */
.project-page .project-content > .back-to-top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  margin-top: 3rem !important;
  margin-bottom: 0 !important;

  width: fit-content;
}

.project-page .project-content > .back-to-top-container .top-arrow {
  width: 40px;
  height: auto;
  stroke-width: 2;
  cursor: pointer;
}

/* copyright */
.project-page .project-content > .project-copyright {
  text-align: center;
  font-size: 0.7rem;
  color: #373737;
  opacity: 0.85;
  font-weight: 400;

  margin-top: 3rem !important;
}

.project-page .project-content:has(.project-copyright)::after {
  height: 2rem;
}

/* Mobile even smaller */
@media (max-width: 899px) {
  .project-page .project-content > .back-to-top-container {
    margin-top: 2.5rem !important;
  }

  .project-page .project-content > .back-to-top-container .top-arrow {
    width: 30px;
    height: auto;
    stroke-width: 2;
  }

  .project-page .project-content > .project-copyright {
    font-size: 0.6rem;
    margin-top: 2.5rem !important;
  }
}

/* =========================
   Multi-Image Gallery — FRONTEND
   3–5 images, same visual height
   ========================= */

.multi-image-gallery.wp-block-thirtyseven-multi-image-gallery {
  --gallery-img-h: clamp(220px, 22vw, 420px);

  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1vw, 1rem);
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: none;
  margin: 1.5rem auto;
  overflow: visible;
}

.multi-image-gallery.wp-block-thirtyseven-multi-image-gallery figure.wp-block-image {
  margin: 0 !important;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none !important;
}

.multi-image-gallery.wp-block-thirtyseven-multi-image-gallery img {
  height: var(--gallery-img-h) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  display: block;
}

/* Larger desktop can breathe more */
@media (min-width: 1440px) {
  .multi-image-gallery.wp-block-thirtyseven-multi-image-gallery {
    --gallery-img-h: clamp(260px, 24vw, 520px);
  }
}

/* Mobile: stack vertically, natural size */
@media (max-width: 899px) {
  .multi-image-gallery.wp-block-thirtyseven-multi-image-gallery {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    overflow: visible;
  }

  .multi-image-gallery.wp-block-thirtyseven-multi-image-gallery figure.wp-block-image,
  .multi-image-gallery.wp-block-thirtyseven-multi-image-gallery img {
    width: 100% !important;
    height: auto !important;
    max-height: none;
  }
}

/* Keep overscroll containment away from mobile Safari */
@media (min-width: 900px) {
  html,
  body {
    overscroll-behavior-y: auto;
  }
}