/**
 * Brand Feature List block (atsko/brand-feature).
 *
 * Eyebrow, headline, intro, stacked feature points, and a large product image.
 * Grew out of the Brand feature list pattern (Clean Chemistry). The pattern
 * stays registered and shares these class names.
 *
 * Image layout:
 * - contained — both columns sit inside the site container (pattern default)
 * - hug-right — photo bleeds to the right edge of the browser
 *
 * @package Atsko
 */

.brand-feature {
  position: relative;
  overflow: hidden;
  padding: 8rem max(2rem, calc((100% - var(--atsko-container)) / 2));
  background: var(--atsko-white);
  box-sizing: border-box;
}

.brand-feature.alignfull {
  width: 100%;
  max-width: none;
  padding-inline: max(2rem, calc((100% - var(--atsko-container)) / 2));
  background: url("../images/brand/gray-background.webp") no-repeat center /
    cover;
}

/*
 * Break out of a constrained wrapper. Skipped inside .page-main__content and
 * .brand-page__content, which are already full width.
 */
.container .brand-feature.alignfull,
.entry-content:not(.page-main__content):not(.brand-page__content)
  .brand-feature.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.brand-page__content > .brand-feature.alignfull {
  padding-inline: max(2rem, calc((100% - var(--atsko-container)) / 2));
}

.brand-feature__inner {
  display: flex;
  align-items: center;
  gap: 3rem !important;
  margin: 0 !important;
  width: 100%;
}

.brand-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 1 42%;
  width: 100%;
  max-width: 29rem;
  /* Do not use min-width: 0 here — the media column must absorb flex shrink. */
  min-width: min(29rem, 100%);
  box-sizing: border-box;
}

.brand-feature__media {
  flex: 1 1 58%;
  min-width: 0;
}

.brand-feature--no-media .brand-feature__copy {
  flex-basis: 100%;
  max-width: none;
}

.brand-feature__eyebrow {
  margin: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5 !important;
  color: var(--atsko-blue) !important;
}

.brand-feature__eyebrow.brand-feature__eyebrow--blue {
  color: var(--atsko-blue) !important;
}

.brand-feature__eyebrow.brand-feature__eyebrow--orange {
  color: var(--atsko-orange) !important;
}

.brand-feature__eyebrow.brand-feature__eyebrow--green {
  color: var(--atsko-green) !important;
}

.brand-feature__title {
  margin: 0 !important;
  font-size: clamp(1.75rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  color: var(--atsko-charcoal) !important;
}

.brand-feature__intro {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  color: var(--atsko-charcoal) !important;
}

.brand-feature__list {
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  margin-top: 1.5rem !important;
  width: 100%;
}

.brand-feature__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/*
 * Constrained layout (from theme.json / global styles) centers children with
 * margin-inline: auto. Short feature copy then looks indented. Keep these
 * stacks left-aligned even on already-inserted patterns that still use
 * layout:constrained.
 */
.brand-feature__list.is-layout-constrained > *,
.brand-feature__item.is-layout-constrained > *,
.brand-feature__list > .brand-feature__item {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

.brand-feature__item-title {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  color: var(--atsko-charcoal) !important;
}

.brand-feature__item-body {
  margin: 0 !important;
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
  color: var(--atsko-charcoal) !important;
}

.brand-feature__figure {
  margin: 0 !important;
}

.brand-feature__figure img,
.brand-feature__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.brand-feature--has-image-max-height .brand-feature__figure img,
.brand-feature--has-image-max-height .brand-feature__image {
  max-height: var(--brand-feature-image-max-height);
  width: auto;
  max-width: 100%;
}

.brand-feature--image-center .brand-feature__media {
  display: flex;
  justify-content: center;
}

.brand-feature--image-center .brand-feature__figure,
.brand-feature--image-center .brand-feature__figure img,
.brand-feature--image-center .brand-feature__image {
  margin-inline: auto;
}

.brand-feature--image-right .brand-feature__media {
  display: flex;
  justify-content: flex-end;
}

.brand-feature--image-right .brand-feature__figure,
.brand-feature--image-right .brand-feature__figure img,
.brand-feature--image-right .brand-feature__image {
  margin-left: auto;
  margin-right: 0;
}

/*
 * Hug the right browser edge. Copy keeps the left container gutter; the photo
 * column runs flush to the viewport edge (same idea as Media + Copy).
 */
.brand-feature--media-hug-right.alignfull,
.brand-page__content > .brand-feature--media-hug-right.alignfull {
  padding-right: 0;
}

.brand-feature--media-hug-right .brand-feature__inner {
  gap: 0;
}

.brand-feature--media-hug-right .brand-feature__copy {
  flex: 0 0 29rem;
  width: 29rem;
  max-width: 29rem;
  min-width: 29rem;
  padding-right: 3rem;
  box-sizing: border-box;
}

.brand-feature--media-hug-right .brand-feature__media {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.brand-feature--media-hug-right .brand-feature__figure,
.brand-feature--media-hug-right .brand-feature__figure img,
.brand-feature--media-hug-right .brand-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.brand-feature--media-hug-right.brand-feature--has-image-max-height .brand-feature__figure {
  max-height: var(--brand-feature-image-max-height);
  height: auto;
  margin-left: auto;
}

.brand-feature--media-hug-right.brand-feature--has-image-max-height .brand-feature__figure img,
.brand-feature--media-hug-right.brand-feature--has-image-max-height .brand-feature__image {
  max-height: var(--brand-feature-image-max-height);
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  object-fit: contain;
  object-position: right center;
}

.brand-feature--media-hug-right.brand-feature--image-center .brand-feature__media {
  justify-content: center;
}

.brand-feature--media-hug-right.brand-feature--image-center.brand-feature--has-image-max-height
  .brand-feature__figure,
.brand-feature--media-hug-right.brand-feature--image-center.brand-feature--has-image-max-height
  .brand-feature__figure
  img,
.brand-feature--media-hug-right.brand-feature--image-center.brand-feature--has-image-max-height
  .brand-feature__image {
  margin-inline: auto;
  object-position: center center;
}

.brand-feature--media-hug-right.brand-feature--image-left.brand-feature--has-image-max-height
  .brand-feature__figure,
.brand-feature--media-hug-right.brand-feature--image-left.brand-feature--has-image-max-height
  .brand-feature__figure
  img,
.brand-feature--media-hug-right.brand-feature--image-left.brand-feature--has-image-max-height
  .brand-feature__image {
  margin-left: 0;
  margin-right: auto;
  object-position: left center;
}

@media (max-width: 1200px) {
  .brand-feature {
    padding-block: 5rem;
  }
}

@media (max-width: 900px) {
  .brand-feature__inner,
  .brand-feature--media-hug-right .brand-feature__inner {
    flex-direction: column;
    gap: 2rem;
  }

  .brand-feature__copy,
  .brand-feature--media-hug-right .brand-feature__copy {
    flex: 1 1 auto;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-right: 0;
  }

  .brand-feature__media,
  .brand-feature--media-hug-right .brand-feature__media {
    flex-basis: 100%;
    width: 100%;
  }

  .brand-feature--media-hug-right.alignfull,
  .brand-page__content > .brand-feature--media-hug-right.alignfull {
    padding-right: max(2rem, calc((100% - var(--atsko-container)) / 2));
  }

  .brand-feature--media-hug-right .brand-feature__figure img,
  .brand-feature--media-hug-right .brand-feature__image {
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  .brand-feature {
    padding-block: 3.5rem;
  }

  .brand-feature__list {
    gap: 1.75rem;
  }
}