/* BRASS CMS v1.3.14 — managed image/text blocks collapse template vertical spacing; horizontal geometry remains template-owned. */

.brass-layout-controlled {
  display: grid !important;
  box-sizing: border-box !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: var(--brass-layout-columns, minmax(0, 1fr) minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  /* Base .section uses large padding-block. For CMS-managed rows this must not
     survive typography/image-height changes, otherwise neighbouring blocks are
     separated by visible empty bands. Horizontal padding is intentionally kept. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Width/max-width/horizontal margins are deliberately NOT overridden.
   The page template owns total block width; Layout Controls only divides that width. */
.brass-layout-controlled > .brass-layout-text,
.brass-layout-controlled > .brass-layout-image {
  box-sizing: border-box !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
  float: none !important;
}

.brass-layout-controlled > .brass-layout-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The media branch itself must not create artificial vertical space. */
.brass-layout-controlled > .brass-layout-image,
.brass-layout-overflow-guard > .brass-layout-overflow-image {
  box-sizing: border-box !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  align-self: start !important;
  background-color: var(--brass-site-background, #fff) !important;
}

/* v1.3.14: letterbox/free space around resized media must visually merge with
   the global site background instead of exposing an old section color. */
.brass-layout-controlled > .brass-layout-image picture,
.brass-layout-controlled > .brass-layout-image img,
.brass-layout-controlled > .brass-layout-image video,
.brass-layout-overflow-guard > .brass-layout-overflow-image picture,
.brass-layout-overflow-guard > .brass-layout-overflow-image img,
.brass-layout-overflow-guard > .brass-layout-overflow-image video {
  background-color: var(--brass-site-background, #fff) !important;
}

.brass-layout-controlled > .brass-layout-image img,
.brass-layout-controlled > .brass-layout-image picture,
.brass-layout-controlled > .brass-layout-image video,
.brass-layout-controlled > .brass-layout-image picture img,
.brass-layout-overflow-guard > .brass-layout-overflow-image img,
.brass-layout-overflow-guard > .brass-layout-overflow-image picture,
.brass-layout-overflow-guard > .brass-layout-overflow-image video,
.brass-layout-overflow-guard > .brass-layout-overflow-image picture img {
  box-sizing: border-box !important;
  display: block !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  translate: none !important;
  transform: none !important;
}

.brass-layout-controlled > .brass-layout-image img,
.brass-layout-controlled > .brass-layout-image video,
.brass-layout-controlled > .brass-layout-image picture img,
.brass-layout-overflow-guard > .brass-layout-overflow-image img,
.brass-layout-overflow-guard > .brass-layout-overflow-image video,
.brass-layout-overflow-guard > .brass-layout-overflow-image picture img {
  height: auto !important;
}

/* Used only as a safe fallback when the text is genuinely taller than the image.
   In that case the image fills the row rather than leaving an empty strip below it. */
.brass-layout-controlled.brass-layout-text-taller > .brass-layout-image {
  height: 100% !important;
  align-self: stretch !important;
}
.brass-layout-controlled.brass-layout-text-taller > .brass-layout-image img,
.brass-layout-controlled.brass-layout-text-taller > .brass-layout-image video,
.brass-layout-controlled.brass-layout-text-taller > .brass-layout-image picture img {
  height: 100% !important;
  object-fit: cover !important;
}

/* v1.3.14: explicit desktop image height also controls the two-column row height.
   Width remains template-owned; mobile still stacks content with an auto-height host. */
.brass-layout-controlled.brass-layout-fixed-image-height > .brass-layout-image {
  overflow: hidden !important;
}
.brass-layout-controlled.brass-layout-fixed-image-height > .brass-layout-image picture {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
}
.brass-layout-controlled.brass-layout-fixed-image-height > .brass-layout-image img,
.brass-layout-controlled.brass-layout-fixed-image-height > .brass-layout-image video,
.brass-layout-controlled.brass-layout-fixed-image-height > .brass-layout-image picture img {
  height: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 900px) {
  .brass-layout-controlled {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
  }

  .brass-layout-controlled > .brass-layout-text,
  .brass-layout-controlled > .brass-layout-image {
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  .brass-layout-controlled.brass-layout-text-taller > .brass-layout-image img,
  .brass-layout-controlled.brass-layout-text-taller > .brass-layout-image video,
  .brass-layout-controlled.brass-layout-text-taller > .brass-layout-image picture img {
    height: auto !important;
    object-fit: contain !important;
  }
}


/* v1.3.14: one-child wrappers around a controlled row must collapse to the row.
   Horizontal geometry is untouched; only stale vertical sizing is neutralized. */
.brass-layout-height-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

@media (min-width: 901px) {
  .brass-layout-controlled.brass-layout-fixed-image-height {
    overflow: visible !important;
  }
}

/* v1.3.14 — managed image/text section headings use the same scale as
   HERBARIUM / Summer Collection 2026 section h2 headings. */
.brass-layout-controlled > .brass-layout-text h2 {
  font-size: clamp(46px, 6.5vw, 96px) !important;
}

@media (max-width: 900px) {
  .brass-layout-controlled > .brass-layout-text h2 {
    font-size: 42px !important;
  }
}


/* v1.3.14 — optional per-block typography controls.
   Auto/0 leaves the existing template typography untouched. */
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h1,
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h2,
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h3,
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h4,
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h5,
.brass-layout-controlled.brass-layout-custom-heading-size > .brass-layout-text h6 {
  font-size: var(--brass-layout-heading-font-size) !important;
}

.brass-layout-controlled.brass-layout-custom-body-size > .brass-layout-text {
  font-size: var(--brass-layout-body-font-size) !important;
}
.brass-layout-controlled.brass-layout-custom-body-size > .brass-layout-text p,
.brass-layout-controlled.brass-layout-custom-body-size > .brass-layout-text li,
.brass-layout-controlled.brass-layout-custom-body-size > .brass-layout-text blockquote {
  font-size: var(--brass-layout-body-font-size) !important;
}