/* ==========================================================================
   Hero component
   Reusable on every page: duplicate the markup in hero.html.example,
   only swap the image src and the three text strings.
 
   Depends on --notch-clip, defined once in rectangle_notched.css
   (loaded before this file). No shape values are duplicated here.
   ========================================================================== */
 
.notch__section {
    display: flex;
    align-items: stretch;
    height: 400px;
    max-width: 100%;
    margin: 0;
}
 
.notch__media {
    flex: 60%;
}
 
.notch__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* ---- Dark notched panel, next to the photo ----
   A small negative margin pulls the panel back over the image
   by exactly the notch's carve depth, so the chevron cut reveals
   the photo underneath it instead of empty space. */
 
.notch__panel {
    flex: 40%;
    margin-left: clamp(-56px, -4vw, -24px);
    background: #151515;
    clip-path: var(--left--notch-clip);
    overflow: hidden;
 
    display: flex;
    flex-direction: column;
    padding: 50px 64px 32px 100px;
    color: #ffffff;
    font-family: "Barlow Condensed", sans-serif;
}
 
.notch__heading {
    max-width: 20ch;
    margin: 0;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
}
 
.notch__details {
    max-width: 60ch;
    margin-top: clamp(24px, 8%, 64px);
}
 
.notch__subheading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}
 
.notch__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: white;
}