/* ======================================================================
   Sauce About Us Card  —  v1.8.1
   Widget: sauce-about-card
   Default: image (top) + heading (bottom). On hover the image shrinks and
   the heading travels smoothly from the bottom-left up to beside the image,
   while the description fades in at the bottom. The heading is absolutely
   positioned so its move can be animated (flex-direction/justify changes are
   not animatable, which caused the previous abrupt jump).
   ====================================================================== */

.sauce-about-card {
    --auc-bg:            var(--sauce-hot-sauce, #FF5338);
    --auc-pad:           40px;
    --auc-min-h:         360px;
    --auc-img-w:         120px;   /* default (large) image width */
    --auc-img-w-hover:    64px;   /* hovered (small) image width */
    --auc-gap:           22px;    /* gap between image and heading on hover */
    --auc-heading-scale: 0.85;    /* heading shrink on hover */
    --auc-move-ease:     0.55s cubic-bezier(0.45, 0, 0.15, 1);
    --auc-heading-color: #ffffff;
    --auc-desc-color:    #ffffff;

    display: block;
    width: 100%;
    height: 100%;
}

.auc__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: var(--auc-min-h);
    padding: var(--auc-pad);
    background: var(--auc-bg);
    box-sizing: border-box;
    overflow: hidden;
    text-decoration: none;
}

/* Top group holds the image in flow; the heading overlays absolutely. */
.auc__top {
    flex: 0 0 auto;
    position: static;
}

.auc__img {
    width: var(--auc-img-w);
    flex-shrink: 0;
    line-height: 0;
    transition: width var(--auc-move-ease);
}
.auc__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Heading is absolutely positioned within the card so it can travel.
   Default: anchored to the bottom-left (top:100% then lifted by its own
   height + padding). */
.auc__heading {
    position: absolute;
    left: var(--auc-pad);
    top: 100%;
    transform: translateY( calc( -100% - var(--auc-pad) ) );
    transform-origin: left center;
    margin: 0;
    color: var(--auc-heading-color);
    text-transform: uppercase;
    max-width: calc(100% - (var(--auc-pad) * 2));
    transition: top var(--auc-move-ease), left var(--auc-move-ease),
                transform var(--auc-move-ease), max-width var(--auc-move-ease);
    z-index: 2;
}

/* Description sits in flow at the bottom; collapsed until revealed. */
.auc__desc {
    flex: 0 0 auto;
    color: var(--auc-desc-color);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s ease, max-height var(--auc-move-ease),
                transform 0.4s ease, margin-top var(--auc-move-ease);
    margin-top: 0;
}
.auc__desc p { margin: 0 0 0.8em; }
.auc__desc p:last-child { margin-bottom: 0; }

/* ── Hover / open / keyboard-focus state ─────────────────────────────── */
.sauce-about-card:hover   .auc__img,
.sauce-about-card.is-open .auc__img,
.sauce-about-card:focus-within .auc__img {
    width: var(--auc-img-w-hover);
}

/* Heading travels up to sit beside the (now small) image, near the top. */
.sauce-about-card:hover   .auc__heading,
.sauce-about-card.is-open .auc__heading,
.sauce-about-card:focus-within .auc__heading {
    top: calc(var(--auc-pad) - 10px);
    left: calc(var(--auc-pad) + var(--auc-img-w-hover) + var(--auc-gap));
    transform: translateY(0) scale(var(--auc-heading-scale, 0.85));
    max-width: calc((100% - (var(--auc-pad) * 2) - var(--auc-img-w-hover) - var(--auc-gap)) / var(--auc-heading-scale, 0.85));
}

.sauce-about-card:hover   .auc__desc,
.sauce-about-card.is-open .auc__desc,
.sauce-about-card:focus-within .auc__desc {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
    margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .auc__img, .auc__heading, .auc__desc { transition-duration: 0.001s; }
}