/* ===========================================================================
 * STRIP EXPANDABLE CONTENT
 *
 * The body that reveals below each strip's header when the strip is
 * active. Starts at height: 0 (collapsed) and is animated up to its
 * natural content height by the dynamic accordion tween (height
 * changes driven by JS; no CSS transition). On the static / touch-
 * primary path, JS sets height: auto so every strip is always open.
 *
 * Does NOT own:
 *   - height-animation machinery (js/accordion/dynamic.js)
 *   - footer-specific content layout (css/strip-footer.css)
 *   - contact-form styling inside the footer (css/contact-form.css)
 * ===========================================================================
 */

.strip-content {
  overflow: hidden;
  height: 0;
}

.strip-content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.strip-content-inner .content-body {
  padding: var(--page-pad);
  opacity: 1;
}

.strip-content-inner p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(240, 240, 240, 0.55);
  margin-bottom: 1rem;
}

.strip-content-inner p:last-child {
  margin-bottom: 0;
}

.content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
  display: block;
}

/* Videos share the image treatment. The width/height ATTRIBUTES on the
   element (required — see README "Media content") give the browser the
   intrinsic aspect ratio, so height:auto reserves the correct space
   before any media bytes arrive — content must never reflow after the
   accordion has measured a section's expand height. */
.content-body video {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
  display: block;
  /* Poster fills the box like the video frames will. */
  object-fit: cover;
  background: #0a0a0a;
}

/* --- Tablet (768+) --- */
@media (min-width: 768px) {
  .strip-content-inner .content-body {
    padding: 2rem var(--page-pad) 2.5rem;
  }
  .strip-content-inner p {
    font-size: 0.9rem;
  }
}

/* --- Desktop (1024+) --- */
@media (min-width: 1024px) {
  .strip-content-inner .content-body {
    padding: 2rem var(--page-pad) 3rem;
  }
  .strip-content-inner p {
    font-size: 0.95rem;
    line-height: 1.8;
  }
}

/* ===========================================================================
 * Content layout blocks
 *
 * Sibling blocks inside .content-body that override the default
 * <p>/<img> flow with structured layouts. DOM order picks the
 * column order — no reverse class needed; just write the children
 * in the order you want them displayed left-to-right.
 *
 * Each block owns its own outer margin; child <img> margins are
 * reset to 0 (the default `.content-body img { margin: 1rem 0 }`
 * above is for plain inline images that aren't in a layout block).
 *
 * Mobile (≤767px): every multi-column block collapses to a single
 * column via the @media block at the bottom of this file.
 * ========================================================================= */

/* Two-column split: text on one side, image on the other. */
.cb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0;
}
.cb-split img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  margin: 0;
}
.cb-split .cb-text p:last-child {
  margin-bottom: 0;
}

/* Two images side by side, equal width. */
.cb-images-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
.cb-images-pair img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  margin: 0;
}

/* Single centered image, narrower than full width so it reads as
   a "spotlight" rather than a banner. */
.cb-image-centered {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}
.cb-image-centered img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  margin: 0;
}

/* Mobile collapse — stack both two-column blocks. The centered-image
   block is already a single column so it's untouched. */
@media (max-width: 767px) {
  .cb-split,
  .cb-images-pair {
    grid-template-columns: 1fr;
  }
}