/* Sugar Blossoms (pId 68803) — brand-wide overrides.
   Auto-loaded by base.php for this brand on every page (no DB row needed).
   Loaded after home_widgets.css, so equal-specificity rules win on order. */

:root {
    /* Soft brand pink used for the hamper-band CTA. Its luminance is 0.72, so
       the shared white-on-brand button text would sit at 1.3:1 — the label
       colour below is a deep brand-derived magenta instead (~5.7:1). */
    --sb-cta-bg: #f8d3e5;
    --sb-cta-fg: color-mix(in srgb, var(--brand-primary) 62%, #000);

    /* Hamper-band image width — the one knob. The image fills its column
       edge to edge, so this sets both: width, and (via the 479/630 ratio
       below) height = width ÷ 0.76. 380px ≈ a 500px-tall image. */
    --sb-about-img-w: 380px;
}

/* ---------- custom_about_us / hamper band (viewType 41) ----------
   The shared partial boxes every vt 41 image at aspect-ratio 4/3 with
   object-fit: cover. This brand's hamper art is portrait (479×800), so the
   landscape cover crop discards roughly two-thirds of the photo's height — the
   cake gets cut off top and bottom.

   Two things are traded off here: the image should fill its column (no dead
   gap beside it) without the band growing absurdly deep, and the cake must not
   be clipped. Resolved by (a) sizing the media COLUMN to the image rather than
   stretching the image to a 50/50 half, and (b) a 479/630 box — the cake spans
   y≈120–710 of the 800px source, so cover trims ~85px of empty backdrop off
   the top and ~85px of marble off the bottom, cake intact. Widening the ratio
   past ~0.85 starts clipping the figures' heads.

   Scoped to this brand — the other 8 vt 41 brands ship square/landscape art
   that the shared 4/3 box suits. */
.wla-about__media img {
    aspect-ratio: 479 / 630;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (min-width: 768px) {
    /* Fixed media track + fluid copy track, so the image has a definite width
       to fill. Positional per variant: text-left puts the media second,
       image-left puts it first. The shared rule's 50/50 at --s-16 would strand
       the image mid-column, which is what the fixed track avoids. */
    .wla-about--text-left {
        grid-template-columns: 1fr var(--sb-about-img-w);
    }
    .wla-about--image-left {
        grid-template-columns: var(--sb-about-img-w) 1fr;
    }
    .wla-about--text-left,
    .wla-about--image-left {
        max-width: 960px;
        gap: var(--s-10);
    }
}

/* CTA — soft pink fill, deep magenta label (see token note above). */
.wla-about__btn,
.wla-about__btn:hover,
.wla-about__btn:focus-visible {
    background: var(--sb-cta-bg);
    color: var(--sb-cta-fg);
}