/* ============================================================================
   262-php-20-banner — promo banner, after the design proposal (PAGE 4)

   Dark banner; the product photo on one side, shown whole (a jacket, a
   bottle — never cropped); a veil running into it; the text on the dark
   side. Every second banner mirrored. Tokens only (01-type-color.css);
   .label, the display face and .x-btn come from the style guide.
   ========================================================================== */

.x262-banners { display: grid; gap: 1.375rem; }

.x262-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-lg, 6px);
    color: var(--paper);
    background: color-mix(in srgb, var(--green-800) 40%, var(--ink));
}

/* The photo: whole, on the side opposite the text. */
.x262-banner__bg {
    position: absolute;
    inset: -12% 0;
    background-repeat: no-repeat;
    background-size: auto 88%;
    background-position: right 6% center;
}
.x262-banner--flip .x262-banner__bg { background-position: left 6% center; }

.x262-banner__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--ink) 92%, transparent) 0%,
        color-mix(in srgb, var(--ink) 72%, transparent) 46%,
        color-mix(in srgb, var(--ink) 12%, transparent) 100%);
}
.x262-banner--flip .x262-banner__veil {
    background: linear-gradient(260deg,
        color-mix(in srgb, var(--ink) 92%, transparent) 0%,
        color-mix(in srgb, var(--ink) 72%, transparent) 46%,
        color-mix(in srgb, var(--ink) 12%, transparent) 100%);
}

.x262-banner__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .625rem;
    max-width: 40rem;
    padding: clamp(2rem, 5vw, 4rem);
}
.x262-banner--flip .x262-banner__inner {
    margin-left: auto;
    text-align: right;
    justify-items: end;
}

.x262-banner .label { color: color-mix(in srgb, var(--paper) 80%, transparent); }

.x262-banner__title {
    margin: .15em 0;
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: clamp(1.8rem, 4.2vw, 3.1rem);
    line-height: 1.03;
    letter-spacing: var(--tr-display);
    color: inherit;
}
.x262-banner__title a { color: inherit; text-decoration: none; }
.x262-banner__title a:hover { text-decoration: underline; text-underline-offset: .12em; }

.x262-banner__text  { margin: 0; max-width: 44ch; color: color-mix(in srgb, var(--paper) 82%, transparent); }
.x262-banner__price { margin: .5rem 0 0; font-size: var(--fs-h4); font-weight: var(--w-heading); }
.x262-banner .x-btn-row { margin: .75rem 0 0; }

@media (max-width: 720px) {
    .x262-banner__bg,
    .x262-banner--flip .x262-banner__bg { background-position: right 4% bottom 0; background-size: auto 60%; opacity: .5; }
    .x262-banner__veil,
    .x262-banner--flip .x262-banner__veil { background: color-mix(in srgb, var(--ink) 70%, transparent); }
    .x262-banner--flip .x262-banner__inner { margin-left: 0; text-align: left; justify-items: start; }
}