/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ===== Cleanroom two-column block ===== */
.cc-two-col {
  --gap: clamp(16px, 3vw, 40px);
  --maxw: 1200px;
  --pad: clamp(12px, 2.5vw, 32px);
  --sticky-top: clamp(12px, 4vh, 48px);
}

.cc-two-col__wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.cc-two-col__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

/* Two columns on tablet and up */
@media (min-width: 900px) {
  .cc-two-col__grid {
    grid-template-columns: minmax(0, 1fr) min(40%, 520px);
  }
  /* If you want image left, add .cc-two-col--image-left on the root */
  .cc-two-col--image-left .cc-two-col__grid {
    grid-template-columns: min(40%, 520px) minmax(0, 1fr);
  }
}

.cc-two-col__text {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.55;
}

.cc-two-col__text h3 {
  font-size: clamp(18px, 1.3vw, 22px);
  margin: 0 0 0.35em 0;
}

.cc-two-col__text p {
  margin: 0 0 1rem 0;
}

/* Image column */
.cc-two-col__media {
  position: relative;
}

.cc-two-col__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Keep the tall image visible while scrolling on desktop */
@media (min-width: 900px) {
  .cc-two-col__media figure {
    position: sticky;
    top: var(--sticky-top);
  }
  /* Add class .is-tall to the img if you want viewport-height poster behavior */
  .cc-two-col__media img.is-tall {
    height: calc(100vh - var(--sticky-top) - 24px);
    width: 100%;
    object-fit: cover;
  }
}

/* Optional: make image appear first on mobile */
.cc-two-col--mobile-img-first .cc-two-col__media {
  order: -1;
}

/* Tighter spacing for small screens */
@media (max-width: 599px) {
  .cc-two-col__text h3 { margin-top: 1.25rem; }
}
/* Replace the old .is-tall rules */
.cc-two-col__media img.is-tall {
  height: calc(100vh - var(--sticky-top) - 24px);
  width: 100%;
  object-fit: contain;            /* no cropping */
  object-position: center top;    /* pin the top */
  background: #f6f6f6;            /* letterbox fill color */
}
/* Ensure nothing else is clipping it */
.cc-two-col__media,
.cc-two-col__media figure {
  overflow: visible;
}