/* Section layout classes — the page grid system of the fritzon theme.
   The original tiles its images flush in two equal columns with the
   same 8px gap used by the work grids; text floats in the opposite
   column, vertically centered. */

.block-section { min-width: 0; }

/* ── Split rows (text / media) ──────────────────────────── */

.hero-split,
.split-media-left,
.split-media-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
  margin-bottom: var(--grid-gap);
}

.col-text {
  padding: 40px 44px 40px 30px;
  max-width: 600px;
}

/* image pair inside a split (realtime section) */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  align-self: center;
}

/* paragraph rhythm inside text columns */
.col-text .block-paragraph + .block-paragraph { margin-top: 22px; }
.col-text .block-paragraph:last-child { margin-top: 34px; }
.col-text .block-paragraph__content p { margin: 0; }
.col-text .block-display-heading { margin-bottom: 26px; }

/* Give the first text/media row the same breathing room as full sections. */
.page-home .home-intro-split {
  margin: 0 0 var(--section-gap);
  padding-top: var(--section-gap);
}

/* ── Homepage showcase hero ─────────────────────────────── */

.page-home .hero-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100vw;
  height: 100svh;
  min-height: 680px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #111;
}

.page-home .hero-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.28) 100%);
}

.page-home .hero-showcase > .block-video,
.page-home .hero-showcase > .block-image,
.page-home .hero-showcase > .block-image .block-image__figure {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.page-home .hero-showcase .block-video__player,
.page-home .hero-showcase > .block-image .block-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .hero-showcase > .block-image .block-image__img {
  object-position: center;
}

.page-home .hero-showcase__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--container-pad) 64px;
  color: #fff;
  text-align: center;
}

.page-home .hero-showcase__copy .block-display-heading {
  margin-bottom: 22px;
}

.page-home .hero-showcase__copy .display-heading {
  color: #fff;
  font-size: clamp(38px, 4.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.page-home .hero-showcase__copy .block-paragraph__content,
.page-home .hero-showcase__copy .block-paragraph__content a {
  color: #fff;
}

.page-home .hero-showcase__copy .block-paragraph__content a {
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  font-weight: 700;
}

.page-home .hero-showcase__label {
  position: absolute;
  left: var(--container-pad);
  bottom: 24px;
  margin: 0;
  text-align: left;
}

.page-home .hero-showcase__label .block-paragraph__content {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-home .home-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 0 132px;
}

.page-home .home-intro .block-display-heading { margin-bottom: 30px; }
.page-home .home-intro .block-paragraph + .block-paragraph { margin-top: 22px; }
.page-home .home-intro .block-paragraph:last-child { margin-top: 34px; }

/* ── Logos section ──────────────────────────────────────── */

.logos-section {
  text-align: center;
  margin: 118px 0 128px;
}

.logos-section .block-display-heading { margin-bottom: 44px; }

.logos-section .block-image { margin-bottom: 38px; }
.logos-section .block-image:last-child { margin-bottom: 0; }

.logos-section .block-image__img {
  width: auto;
  max-width: 92%;
  margin: 0 auto;
}

/* strip heights match the original (uploads generate upscaled
   variants, so the natural size cannot be trusted) */
.logos-section .block-image:nth-child(2) .block-image__img { height: 46px; }
.logos-section .block-image:nth-child(3) .block-image__img { height: 69px; margin-bottom: 10px; }
.logos-section .block-image:nth-child(4) .block-image__img { height: 68px; }

/* ── Portfolio pages ────────────────────────────────────── */

.portfolio-intro {
  max-width: 620px;
  padding: 48px 0 0;
}

.portfolio-intro .block-paragraph__content p { margin-bottom: 0; }
.portfolio-intro .block-paragraph + .block-paragraph { margin-top: 14px; }

/* ── Works rows (justified image grids) ─────────────────── */

.works-row { margin-bottom: var(--grid-gap); }

/* ── Back to top ────────────────────────────────────────── */

.back-top {
  text-align: center;
  margin: 160px 0 0;
}

.back-top a {
  color: #3d3d3d;
  font-weight: 400;
  font-size: 15px;
}

.back-top a:hover { opacity: 0.6; }

/* ── Connect page grid (top-level blocks placed via body class) ── */

body.page-connect main {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 0 8px;
  align-items: start;
}

body.page-connect main > .block-image[data-block-type="image"] {
  grid-column: 1;
}

body.page-connect main > .connect-right {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

body.page-connect main > .block-form {
  grid-column: 1;
  grid-row: 2;
  padding: 150px 48px 60px;
}

.connect-intro {
  min-height: clamp(280px, 26.5vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 20px;
}

.connect-intro .block-paragraph__content p {
  margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 820px) {
  .page-home .home-intro-split {
    margin: 0 0 56px;
    padding-top: 56px;
  }

  .page-home .hero-showcase {
    display: block;
    height: 100svh;
    min-height: 620px;
  }

  .page-home .hero-showcase > .block-video {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .page-home .hero-showcase > .block-image { display: none; }

  .page-home .hero-showcase__copy {
    padding: 100px var(--container-pad) 48px;
  }

  .page-home .hero-showcase__copy .display-heading {
    font-size: clamp(29px, 8.4vw, 42px);
    line-height: 0.98;
  }

  .page-home .hero-showcase__label {
    right: var(--container-pad);
    bottom: 20px;
  }

  .page-home .home-intro {
    padding: 76px 0 88px;
  }

  .hero-split,
  .split-media-left,
  .split-media-right {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 56px;
  }

  /* text before image on mobile, like the original */
  .split-media-left > .col-text { order: -1; }

  .hero-split > .col-text,
  .split-media-right > .col-text,
  .split-media-left > .col-text {
    padding: 0;
  }

  .logos-section { margin: 90px 0 80px; }
  .logos-section .block-image {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;
  }

  /* Logo strips fill the text column, without the global image bleed. */
  .logos-section .block-image:nth-child(2) .block-image__img,
  .logos-section .block-image:nth-child(3) .block-image__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  /* The third strip has only three logos. Keep it at roughly two-thirds
     of the text column so Apex, Xbox and MOMO match the other rows. */
  .logos-section .block-image:nth-child(4) .block-image__img {
    width: 67%;
    max-width: 392px;
    height: auto;
    margin: 0 auto;
  }

  /* stacked order: ivy image → heading/text → form → gear image.
     The .connect-right wrapper dissolves so its children can be
     ordered around the top-level form block. */
  body.page-connect main {
    display: flex;
    flex-direction: column;
  }

  body.page-connect main > .block-image { order: 1; }
  body.page-connect main > .connect-right { display: contents; }
  .connect-right > .connect-intro { order: 2; }
  body.page-connect main > .block-form { order: 3; padding: 40px 0; }
  .connect-right > .block-image { order: 4; }

  .connect-intro { min-height: 0; padding: 36px 0; }

  .back-top { margin: 70px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-showcase > .block-video { display: none; }
  .page-home .hero-showcase > .block-image {
    display: block;
    grid-column: 1 / -1;
  }
}