/* ==========================================================================
   Right-notch variant
   Reuses everything in left_notch_details.css. Only the differences live here,
   so this file MUST be loaded after left_notch_details.css.

   Usage: <section class="notch__section notch__section--right">
   Same markup as the left version (image first, then panel);
   row-reverse puts the panel on the left and the photo on the right.
   ========================================================================== */

.notch__section--right {
    flex-direction: row-reverse;
}

.notch__section--right .notch__panel {
    margin-left: 0;
    margin-right: clamp(-56px, -4vw, -24px); /* pull panel over the photo */
    clip-path: var(--right--notch-clip);
    padding: 50px 100px 32px 64px;           /* extra room on the notched side */
}