/* =========================================================
   CHILDREN AND PETS
   Load after global.css. This file owns page layout only;
   global.css remains the source of truth for presentation.
   ========================================================= */

.emergency-note {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--small-text-size);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   BABY VOC RESULTS
   --------------------------------------------------------- */

.baby-voc-card {
  gap: var(--grid-gap);
}

.baby-voc-card h3,
.baby-voc-card p {
  margin: 0;
}

.baby-voc-tested {
  padding-bottom: var(--grid-gap);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: var(--small-text-size);
}

.baby-voc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.baby-voc-stat {
  min-width: 0;
  padding: var(--card-padding);
  border: 1px solid var(--inner-card-border);
  border-radius: var(--radius-sm);
  background: var(--inner-card-bg);
}

.baby-voc-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--accent-dark);
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.baby-voc-stat p {
  font-size: var(--minimum-text-size);
  line-height: 1.45;
}

.baby-voc-stat p + p {
  margin-top: 0.35rem;
}

.baby-voc-stat strong {
  color: var(--ink);
  font-size: var(--card-text-size);
  font-weight: var(--weight-semibold);
}

.baby-voc-note {
  color: var(--muted);
  font-size: var(--minimum-text-size);
  line-height: 1.45;
  text-align: center;
}

/* ---------------------------------------------------------
   BABIES AND CHILDREN
   --------------------------------------------------------- */

.babies-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr);
  column-gap: var(--card-gap);
  row-gap: var(--grid-gap);
  align-items: start;
}

.babies-copy {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.babies-copy h2 {
  margin-bottom: var(--heading-intro-gap);
}

.babies-media {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  min-width: 0;
}

.babies-media > :is(
  .image-frame,
  .image-frame-med,
  .image-frame-large
) {
  width: min(100%, 32rem);
  max-width: 32rem;
  height: auto;
  max-height: none;
  margin: 0 auto;
  overflow: visible;
}

.babies-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* These image rules belong to this page, not global.css.
   Preserve the complete watercolor artwork without cropping. */
figure.image-frame.child-pets-image {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: visible;
}

figure.image-frame.child-pets-image > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.babies-card-grid {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ---------------------------------------------------------
   PETS
   --------------------------------------------------------- */

.pet-fragrance-section .pet-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-block: var(--grid-gap) var(--card-gap);
}

.pet-fragrance-section .pet-pathway {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--grid-gap);
}

/* .pet-step does not carry the global .card class, so it uses
   the same global card tokens here. */
.pet-fragrance-section .pet-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: var(--card-padding);
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}

.pet-fragrance-section .pet-step h3 {
  margin: 0 0 0.55rem;
  font-size: var(--card-title-size);
  line-height: 1.18;
}

.pet-fragrance-section .pet-step p {
  margin: 0;
  color: var(--text);
  font-size: var(--card-text-size);
  line-height: 1.45;
}

/* ---------------------------------------------------------
   PREGNANCY

   The illustration gets a controlled responsive height. This
   keeps it large enough to read while preventing its natural
   height from creating an oversized first row.
   --------------------------------------------------------- */

.pregnancy-section {
  --pregnancy-column-gap: var(--card-gap);
  --pregnancy-row-gap: clamp(0.25rem, 1vw, 0.5rem);
}

.pregnancy-section .pregnancy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 0.85fr);
  grid-template-areas:
    "intro image"
    "cards cards";
  column-gap: var(--pregnancy-column-gap);
  row-gap: var(--pregnancy-row-gap);
  align-items: start;
}

.pregnancy-section .pregnancy-copy {
  grid-area: intro;
  min-width: 0;
  align-self: center;
  padding-inline: clamp(0.75rem, 2vw, 2rem) clamp(0.25rem, 1vw, 1rem);
}

.pregnancy-section .pregnancy-copy .page-kicker {
  margin-top: 0;
}

.pregnancy-section .pregnancy-copy > h2 {
  max-width: 25ch;
  margin: 0 0 var(--heading-intro-gap);
  text-wrap: balance;
}

.pregnancy-section .pregnancy-copy > h2 + p {
  max-width: 68ch;
  margin-bottom: 0;
}

.pregnancy-section .pregnancy-image {
  grid-area: image;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  align-self: start;
}

.pregnancy-section .pregnancy-image .watercolor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.pregnancy-section .pregnancy-image > .image-frame-med {
  width: 100%;
  max-width: 34rem;
  height: clamp(17rem, 22vw, 20rem);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

.pregnancy-section .pregnancy-cards {
  grid-area: cards;
  width: 100%;
  margin: 0;
}

.pregnancy-section .pregnancy-cards > .card {
  min-width: 0;
}

/* Reserve the same text space so all three card bodies align. */
.pregnancy-section .pregnancy-cards .card-label {
  min-height: 2.2em;
}

.pregnancy-section .pregnancy-cards .card > h3 {
  min-height: 2.36em;
}

.pregnancy-section .pregnancy-disclaimer {
  width: 100%;
  max-width: none;
  margin: var(--pregnancy-row-gap) 0 0;
  text-align: left;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .babies-layout,
  .pregnancy-section .pregnancy-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .babies-copy,
  .babies-media,
  .babies-card-grid {
    grid-column: 1;
    grid-row: auto;
  }

  /* Cards sit two-up on tablet, so the stat pair inside the
     VOC card stacks to stay readable. */
  .baby-voc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .babies-media {
  grid-column: 1;
  grid-row: auto;
  margin-top: var(--grid-gap);
}

  .pet-fragrance-section .pet-risk-grid,
  .pet-fragrance-section .pet-pathway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pregnancy-section .pregnancy-layout {
    grid-template-areas:
      "intro"
      "image"
      "cards";
  }

  .pregnancy-section .pregnancy-copy > h2 + p {
    max-width: 100%;
  }

  .pregnancy-section .pregnancy-image {
    min-height: 0;
  }

  .pregnancy-section .pregnancy-image > .image-frame-med {
    width: min(100%, 34rem);
    height: clamp(17rem, 50vw, 23rem);
    margin-inline: auto;
  }

  .pregnancy-section .pregnancy-cards .card-label,
  .pregnancy-section .pregnancy-cards .card > h3 {
    min-height: 0;
  }

  .pregnancy-section .pregnancy-copy {
  align-self: start;
  padding-inline: 0;
}

.pregnancy-section .pregnancy-copy > h2 {
  max-width: none;
}
}

@media (max-width: 640px) {
  .babies-card-grid,
  .baby-voc-grid,
  .pet-fragrance-section .pet-risk-grid,
  .pet-fragrance-section .pet-pathway {
    grid-template-columns: minmax(0, 1fr);
  }

  .pregnancy-section .pregnancy-image > .image-frame-med {
    width: 100%;
    height: clamp(15rem, 72vw, 20rem);
  }
}