/* Layout for impulse_buying.html.
   Desktop (xl, >= 1200px) keeps the original look, tablet (md) uses two columns,
   phones get one clean column with consistent spacing. */

.ib-section--red, .ib-section--crimson { background: #B80F3C; color: #fff; }
.ib-section--yellow { background: #ffff00; }

/* Section heading: badge above the big title, never overlapping */
.ib-heading .subtitlebox-impulse {
  display: inline-block;
  margin: 0 0 .75rem;
}
.ib-heading .h1-impulse,
.ib-subheading { margin-top: 0; margin-bottom: 0; }
.ib-subheading { margin-top: 3.5rem; }
.ib-lead { max-width: 560px; margin-top: 2rem; }

/* Rows of text + image */
.ib-row { margin-top: 2.5rem; row-gap: 1.25rem; }
.ib-row .explain-p-big,
.ib-row .explain-p-small,
.ib-row p { margin-bottom: 0; }
.ib-after-image { margin-top: 1rem; max-width: 450px; }
.ib-quote { margin-top: 1rem; }
.ib-hypothesis { background: #fff; padding: 20px; max-width: 900px; }

/* Prototype and experiment blocks: text and image side by side from tablet up */
.ib-case { margin-top: 3rem; row-gap: 1.25rem; align-items: flex-start; }
.ib-case > [class*="col-"] > p { margin-bottom: 0; }
.ib-case .small { margin-top: 1rem; }
.ib-title {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  /* align the cap height of the title with the top edge of the image */
  .ib-title { margin-top: -.2em; }
}
#Create-Heading + .container,
#Test-header + .container { margin-top: 1rem; }

/* Images */
.ib-img { display: block; max-width: 100%; height: auto; }
.ib-img--eyes { width: 520px; }
.ib-img--gif { width: 480px; }
.ib-img--cartoon { width: 452px; }
.ib-img--portrait { width: 150px; height: 150px; object-fit: contain; object-position: left; }
.ib-img--shoppers { width: 420px; }
.ib-img--screenshot { width: 100%; max-height: 600px; object-fit: cover; object-position: top; }

/* Tablet and desktop: restore a looser, larger rhythm */
@media (min-width: 768px) {
  .ib-row { margin-top: 3rem; }
  .ib-case { margin-top: 5rem; }
  .ib-heading .subtitlebox-impulse { margin-bottom: 1rem; }
}
@media (min-width: 1200px) {
  .ib-row { margin-top: 3.5rem; }
  .ib-img--shoppers { position: relative; top: -2rem; }
}

/* Phones: one column, compact spacing, text before image */
@media (max-width: 767.98px) {
  .ib-section.IBbehind { padding-top: 56px; padding-bottom: 56px; }
  .ib-subheading { margin-top: 2.5rem; }
  .ib-lead { margin-top: 1.25rem; }
  .ib-img--eyes, .ib-img--gif, .ib-img--cartoon, .ib-img--shoppers { width: 100%; }
  .ib-img--cartoon { max-width: 340px; }
  .ib-img--screenshot { max-height: none; }
  .ib-after-image { max-width: none; }
  .ib-hypothesis { padding: 16px; }
}

/* Tablet: narrower text column, so smaller body text there */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ib-case .explain-p-big { font-size: 1.125rem; line-height: 1.55; }
  .ib-case > .col-md-5 { padding-left: 1.5rem; }
}

/* Note under an image: same distance to the image as the text column has on the side */
.ib-case .ib-note { margin-top: 1.5rem; max-width: 100%; }
@media (max-width: 767.98px) {
  .ib-case .ib-note { margin-top: 1rem; }
}

/* Text next to the prototype / experiment images: slightly smaller than the main argument text */
.ib-case .explain-p-big { font-size: 1.25rem; line-height: 1.5; }
@media (max-width: 1199.98px) {
  .ib-case .explain-p-big { font-size: 1.0625rem; line-height: 1.55; }
}

/* Note under the image: same line length as the text column beside the image */
.ib-case .ib-note { max-width: calc(71.43% - 19px); }
@media (min-width: 1200px) {
  .ib-case .ib-note { max-width: calc(50% - 12px); }
}
@media (max-width: 767.98px) {
  .ib-case .ib-note { max-width: 100%; }
}

/* Flipped block: text left, image right */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ib-case--flip > .col-md-5 { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: 1.5rem; }
}

/* White text on the red sections (contrast 6.6:1), except inside white boxes */
.ib-section--red h1, .ib-section--red h2, .ib-section--red p, .ib-section--red a,
.ib-section--crimson h1, .ib-section--crimson h2, .ib-section--crimson p, .ib-section--crimson a { color: #fff; }
.ib-section--red .subtitlebox-impulse, .ib-section--crimson .subtitlebox-impulse,
.ib-section--red .ib-hypothesis, .ib-section--crimson .ib-hypothesis { color: #212529; }