/* =============================================================
   Crete United — Hero Video + C-Motif widget
   ============================================================= */

/* ----- Widget: media frame -----
   The widget itself renders just the right-side media region.
   The video fills a rectangular box whose aspect matches the motif's
   "main body" (985.23 × 902.86 from the SVG viewBox). The motif overlay
   extends 30 viewBox units (3.05%) past the right edge — that's the
   intentional bleed beyond the 1440px content boundary on wide screens. */

.cu-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 985.23 / 902.86;
  overflow: visible;
}

.cu-hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}

.cu-hero-media__motif {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 1015.23 / 985.23); /* 103.05% — bleed strip on the right */
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

/* ----- Optional helper rules for the surrounding hero layout -----
   Add `.cu-hero-shell` to the outer (red full-bleed) Elementor Container
   and `.cu-hero-inner` to the inner (max-1440 centered) Container to get
   the full responsive layout described in the designer's rules.

   You don't HAVE to use these — equivalent setup via Elementor's own
   controls works fine — but they're here as a one-class drop-in. */

.cu-hero-shell {
  position: relative;
  width: 100%;
  background-color: #c2273d;
  overflow-x: hidden; /* clips the motif bleed on viewports ≤1440 */
}

.cu-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  /* Designer rule #6: 85px/15px at 1440, scaling fluidly down */
  padding-left: clamp(24px, 5.9vw, 85px);
  padding-right: clamp(8px, 1vw, 15px);
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

/* Designer rule #2: hero height responds to content (no fixed height) */
.cu-hero-inner > * {
  min-width: 0; /* allow flex children to shrink without overflowing */
}

/* Designer rule #5: between 768px and 1025px, text MUST stay in the left
   half and not overlap the media. Locking each column to 50% with no-wrap
   prevents Elementor from collapsing one column to full-width prematurely. */
@media (min-width: 768px) {
  .cu-hero-inner {
    flex-wrap: nowrap;
  }
  .cu-hero-inner > * {
    flex: 1 1 50%;
    max-width: 50%;
  }
}

/* Designer rule #3: ≤767px → stacked. Text on top, media 100% wide below. */
@media (max-width: 767px) {
  .cu-hero-inner {
    flex-direction: column;
    align-items: stretch;
    padding-left: clamp(16px, 7vw, 32px);
    padding-right: clamp(16px, 7vw, 32px);
    padding-top: 50px;
    padding-bottom: 0;
    gap: 35px;
  }
  .cu-hero-inner > * {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .cu-hero-inner > .cu-hero-media,
  .cu-hero-inner .cu-hero-media {
    /* On mobile the motif bleed (3.05% past right) still extends — this
       matches the Figma mobile design where the curve overflows the
       viewport edge slightly. `.cu-hero-shell` clips it cleanly. */
  }
}