/* Custom Card Ribbon — a black ribbon pinned to a Custom Card's left edge, with
   a V notch cut into the right tail and a fold shadow beneath the overhang.

   The notch lives on .card-ribbon__body and the fold on the wrapper's ::after
   because clip-path also clips an element's own pseudo-elements — the two
   cannot share an element. */

.wp-block-custom-card-ribbon {
    --ribbon-overhang: 12px;        /* distance past the card's outer edge */
    --ribbon-fold: 10px;            /* height of the fold triangle */
    --ribbon-card-padding: 2rem;    /* must match .card-content's padding */

    /* Type metrics, kept as variables because the notch geometry below is
       derived from them — edit these rather than the padding/font shorthands. */
    --ribbon-pad-y: 0.75rem;
    --ribbon-font-size: 0.875rem;
    --ribbon-line-height: 1.25;

    /* Height of a single-line ribbon. */
    --ribbon-height: calc(
        var(--ribbon-pad-y) * 2 + var(--ribbon-font-size) * var(--ribbon-line-height)
    );

    /* Depth of the V cut into the right tail. The two legs of the cut meet at a
       right angle only when the cut is exactly half as deep as the ribbon is
       tall — any shallower and the apex opens up obtuse. Deriving it from the
       height keeps the corner square if the type metrics above change.
       (This holds while the ribbon is one line; wrapped text makes it taller
       than --ribbon-height and the apex would open up again.) */
    --ribbon-notch: calc(var(--ribbon-height) / 2);

    position: relative;
    width: fit-content;
    max-width: 100%;
    /* .card-content is a flex column, so without this the ribbon stretches to
       the card's full width. Inert in the editor, where the flex item is the
       InnerBlocks layout wrapper — width:fit-content covers that case. */
    align-self: flex-start;
    margin: 0 0 1.5rem;
}

.wp-block-custom-card-ribbon .card-ribbon__body {
    display: block;
    background-color: #000000;
    padding: var(--ribbon-pad-y) calc(var(--ribbon-notch) + 1rem) var(--ribbon-pad-y) 1.25rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--ribbon-notch)) 50%, 100% 100%, 0 100%);

    /* Matches the p.commercial-offer treatment this block replaces, so the swap
       changes the offer line's silhouette but not its typographic weight. */
    font-family: var(--wp--font--primary);
    font-weight: bold;
    /* text-transform: uppercase; */
    font-size: var(--ribbon-font-size);
    /* letter-spacing: 0.5px; */
    line-height: var(--ribbon-line-height);
}

/* The fold. The reference uses a darker shade of the ribbon colour, which black
   has none of — so this is the wrap's shadow falling on the card instead. */
.wp-block-custom-card-ribbon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: var(--ribbon-overhang);
    height: var(--ribbon-fold);
    background-color: rgba(0, 0, 0, 0.5);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Text colours — set by the Ribbon Text Color dropdown. #F4AF00 is the same
   ECAM Yellow the Button Colors dropdown uses. */
.wp-block-custom-card-ribbon.is-ribbon-white .card-ribbon__body { color: #ffffff; }
.wp-block-custom-card-ribbon.is-ribbon-yellow .card-ribbon__body { color: #F4AF00; }

/* Inside a Custom Card: cancel .card-content's padding and hang past the card's
   outer edge, then pad the text back so it aligns with the card's own text.
   Descendant (not child) selector — the editor wraps InnerBlocks children in an
   extra layout div, which would break `>`. */
.card-content .wp-block-custom-card-ribbon {
    margin-left: calc(-1 * (var(--ribbon-card-padding) + var(--ribbon-overhang)));
    /* Reach back across the negative margin to land the right edge on the card's
       text column, so the ribbon lines up with the paragraph above it. The base
       max-width:100% would otherwise clamp this straight back off. */
    width: calc(100% + var(--ribbon-card-padding) + var(--ribbon-overhang) + 1rem);
    max-width: none;
}

.card-content .wp-block-custom-card-ribbon .card-ribbon__body {
    padding-left: calc(var(--ribbon-card-padding) + var(--ribbon-overhang));
}

/* The card clips its contents by default, which would swallow the overhang and
   the fold. Lifted only for cards that actually contain a ribbon — the image
   hover zoom is clipped by .card-image's own overflow:hidden, not this. */
.wp-block-custom-card-block:has(.wp-block-custom-card-ribbon) {
    overflow: visible;
}