/* Amer — Featured list, design 1: the promo slide holds the template's two
 * small stacked banners (home-mental.html:3335-3382, `box-image_v02
 * hover-img` twice inside one `tf-list vertical gap-16` slide, 450x294
 * each). Measured against home-mental at 1440 / 1024 / 768 / 390 plus the
 * template's own 1440 / 1200 / 768 / 767 breakpoints:
 *
 *  - card: 16px corners, the picture under an absolutely placed text block
 *    (`.box-image_content`, inset 20px/15px, 36px all round from 1200px).
 *  - picture: the file's own 450x294, never shorter than 250px (280px from
 *    768px) — `.box-image_v02 .box-image_img img`'s min-height. Its height
 *    is 100% where the column is taller than the two banners together, as
 *    the template's stretched grid row makes it.
 *  - title: the h4 scale (clamp(24,3.5vw,30)/clamp(32,4.2vw,42) at .02em),
 *    4px above the text; a `.link`, so it turns the accent on hover.
 *  - text: the body size, 20px above the link, 28px from 1200px.
 *  - link: `.btn-action.tf-btn-icon` — a 14/22 semibold label and a 20px
 *    arrow 8px after it, pushed to the bottom of the card by `margin-top:
 *    auto` and sitting straight under the text again from 1440px
 *    (`.box-image_v02:not(.style-2) .btn-action { margin-top: 0 }`).
 *
 * The banner's own countdown and eyebrow belong to design 2 and are not
 * rendered here, as the template's own instance does not carry them.
 */
.amer-featured-list--d1 .amer-featured-list__promo {
  position: relative;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
}
.amer-featured-list--d1 .amer-featured-list__promo-media {
  display: inline-flex;
  inline-size: 100%;
}
/* `hover-img`: hovering the card pushes its picture to 1.1 over 1.5s on the
   template's own curve (`.hover-img:hover .img-style > img`, measured on
   home-mental at 1440 — matrix(1.1,0,0,1.1,0,0)). Keyboard focus anywhere in
   the card does the same, as the theme's focus rule asks. The transform
   itself is in the shared sheet so a mirrored picture keeps its flip. */
.amer-featured-list--d1 .amer-featured-list__promo:hover,
.amer-featured-list--d1 .amer-featured-list__promo:has(a:focus-visible) { --amer-fl-zoom: 1.1; }
.amer-featured-list--d1 .amer-featured-list__promo-media img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 250px;
  aspect-ratio: 450 / 294;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 768px) {
  .amer-featured-list--d1 .amer-featured-list__promo-media img { min-block-size: 280px; }
}

.amer-featured-list--d1 .amer-featured-list__promo-body {
  position: absolute;
  inset-block: 20px;
  inset-inline: 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
}
@media (min-width: 1200px) {
  .amer-featured-list--d1 .amer-featured-list__promo-body {
    inset-block: 36px;
    inset-inline: 36px;
  }
}

.amer-featured-list--d1 .amer-featured-list__promo-title {
  margin: 0 0 4px;
  font-family: var(--amer-font-heading);
  font-size: var(--amer-fs-h4);
  line-height: clamp(32px, 4.2vw, 42px);
  letter-spacing: calc(var(--amer-ls-title) * .4);
  font-weight: var(--amer-fw-heading);
  color: var(--amer-heading);
}
.amer-featured-list--d1 .amer-featured-list__promo-title a {
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--amer-ease);
}
.amer-featured-list--d1 .amer-featured-list__promo-title a:hover,
.amer-featured-list--d1 .amer-featured-list__promo-title a:focus-visible { color: var(--amer-accent); }

.amer-featured-list--d1 .amer-featured-list__promo-text {
  margin: 0 0 20px;
  font-size: var(--amer-fs-body);
  line-height: var(--amer-lh-body);
  color: var(--amer-text);
}
@media (min-width: 1200px) {
  .amer-featured-list--d1 .amer-featured-list__promo-text { margin-block-end: 28px; }
}

/* A line break typed in the title or the text is kept, as the template's own
   `<br>`s inside this banner are (home-mental.html:3344, 3348 — plain
   breaks, with no `d-*` class, so they hold at every width). */
.amer-featured-list--d1 .amer-featured-list__promo-title,
.amer-featured-list--d1 .amer-featured-list__promo-text { white-space: pre-line; }

/* `.btn-action.tf-btn-icon.link`: the row itself keeps the body's own 16/26
   (its height is the 26px line, not the label's 22px), and the label inside
   is the template's `.text-caption-01.fw-semibold` — 14/22 at 600. */
.amer-featured-list--d1 .amer-featured-list__promo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: auto;
  font-size: var(--amer-fs-body);
  line-height: 26px;
  font-weight: 400;
  color: var(--amer-heading);
  text-decoration: none;
  transition: color .3s var(--amer-ease);
}
.amer-featured-list--d1 .amer-featured-list__promo-link span {
  font-size: var(--amer-fs-small);
  line-height: 22px;
  font-weight: 600;
}
.amer-featured-list--d1 .amer-featured-list__promo-link i { font-size: 20px; line-height: 1; }
.amer-featured-list--d1 .amer-featured-list__promo-link:hover,
.amer-featured-list--d1 .amer-featured-list__promo-link:focus-visible { color: var(--amer-accent); }
@media (min-width: 1440px) {
  .amer-featured-list--d1 .amer-featured-list__promo-link { margin-block-start: 0; }
}

/* A banner over a dark photo: the merchant's "light" choice turns the whole
   text block white (the template's own picture is light, so its instance is
   the dark one). */
.amer-featured-list--d1 .amer-featured-list__promo--light .amer-featured-list__promo-title,
.amer-featured-list--d1 .amer-featured-list__promo--light .amer-featured-list__promo-text,
.amer-featured-list--d1 .amer-featured-list__promo--light .amer-featured-list__promo-link { color: #fff; }