/* ==========================================================================
   CrelioHealth — AI Operating Layer          (section#operating-ai-layer)

   SINGLE OWNER of this section. Everything that styles the AI Operating Layer
   now lives here: the section shell, header, hero video stage, card kit,
   footer band and all of its breakpoints. The matching rules were removed
   from cr-home.css (the "AI OPERATING LAYER #1" block, the "2. AI OPERATING
   LAYER — refined" override block, and the .cr-aiop* fragments that were
   scattered through its media queries) so nothing is declared twice.

   Pair with: cr-aiop-video-lazy.js
   Load after cr-home.css.

   WHY THE LAYOUT BROKE (fixed below)
   .cr-aiop-video was position:absolute; width:100vw; height:auto inside
   .cr-aiop-logo — a flex box with no width or height on desktop. Its painted
   height grew with the viewport while the space reserved for it was two fixed
   numbers (.cr-aiop-sub{margin-bottom:145px}, .cr-aiop-grid{margin-top:14rem}),
   so at any other width the video covered the title, sub and card grid.
   z-index:999 on the grid changed paint order, not geometry.
   The video now sits in a sized, clipped stage: it cannot paint outside it.

   Section-level rules keep the #operating-ai-layer prefix so a stale cached
   copy of the old cr-home.css can't win. The card kit stays unprefixed, as
   authored — those class names are unique to this section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section shell + fluid scale
   -------------------------------------------------------------------------- */
#operating-ai-layer.cr-aiop {
  --aiop-stage-max-h: 460px;                   /* cap on ultra-wide screens */
  --aiop-icon-w:  clamp(120px, 12.5vw, 230px);
  --aiop-gap:     clamp(36px, 4.5vw, 80px);    /* header -> card grid */
  --aiop-green:   var(--cr-green, #00a82d);

  position: relative;
  isolation: isolate;            /* keeps z-index local — no 999 arms race */
  overflow: hidden;
  background: #fff;
  padding: clamp(56px, 7vw, 100px) 0;
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
#operating-ai-layer .ci-aiop-padding { padding-bottom: 0; }

#operating-ai-layer .cr-aiop-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid rgba(194, 226, 196, 1);
  background: #fff;
  color: var(--aiop-green);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
}

#operating-ai-layer .cr-aiop-title {
  margin: clamp(14px, 1.8vw, 22px) auto clamp(10px, 1.2vw, 14px);
  max-width: 800px;
  font-family: var(--cr-serif, "Libertinus Serif Display", Georgia, serif);
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  text-wrap: balance;
}
#operating-ai-layer .cr-aiop-title em { color: var(--aiop-green); font-style: normal; }

#operating-ai-layer .cr-aiop-sub {
  margin: 0;                                   /* was 0 0 145px */
  color: var(--cr-muted, #6b6b6b);
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.011em;
}

/* --------------------------------------------------------------------------
   3. Hero video stage — the fix
   -------------------------------------------------------------------------- */
#operating-ai-layer .cr-aiop-logo {
  position: relative;
  z-index: 0;
  width: 100vw;                  /* full-bleed out of .container-xl, as the */
  margin-left: 50%;              /* old width:100vw on the video intended   */
  transform: translateX(-50%);
  aspect-ratio: 1456 / 500;      /* the clip's own ratio: height is derived, */
  max-height: var(--aiop-stage-max-h);   /* never guessed, never cropped     */
  margin-top: clamp(8px, 1.6vw, 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;              /* the containment that prevents all overlap */
  contain: paint;
}

#operating-ai-layer .cr-aiop-video {
  position: absolute;
  inset: 0;                      /* replaces top:55% / left:50% / translate */
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  object-fit: cover;             /* switch to `contain` if the art crops badly */
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

#operating-ai-layer .cr-aiop-logo > img {
  position: relative;
  z-index: 2;
  top: auto;                     /* was top:-75px, an offset tuned to one width */
  width: var(--aiop-icon-w);
  height: auto;
  object-fit: contain;
  transform: translateY(-12%);    /* same optical lift, now proportional */
}

/* --------------------------------------------------------------------------
   4. Card grid
   -------------------------------------------------------------------------- */
#operating-ai-layer .cr-aiop-grid {
  position: relative;
  z-index: 1;                    /* was 999 */
  margin: var(--aiop-gap) auto 0; /* was 14rem */
  padding: 0 12px;
}

.card-slot {
  width: 100%;
  position: relative;
}
.card-slot__inner {
  width: 100%;
}

/* The card's own aspect-ratio reserves its full height up front, so no card
   ever resizes as its video decodes. */
.operating-ai-card {
  position: relative;
  width: 100%;
  aspect-ratio: 426 / 540;
  border-radius: 20px;
  background: #f8f8f8;
  overflow: hidden;
  border: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
}
.onestep-card,
.af-card {
  aspect-ratio: 710 / 660;
}

.header-layer {
  position: relative;
  padding: 25px;
  z-index: 2;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid rgb(28 147 35 / 0.1);
  color: #1c9323;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -2%;
}
.header-layer p {
  margin: 16px 0 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -1.1%;
  color: #6b6b6b;
}
.header-layer p span {
  margin: 20px 0 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -2%;
  color: #0e0e0e;
}

.af-card {
  background: #49AB43;
  color: #fff;
}
.af-header p { color: #fff; }
.af-header .pill { background: rgb(255 255 255 / 0.95); }

/* --------------------------------------------------------------------------
   5. Card media — sized before it loads
   -------------------------------------------------------------------------- */
.aicardImage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 25px 25px;
}
.aicardImage img,
.aicardImage video {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}
/* each clip's real ratio, so the media occupies its final height from the
   first frame onward — nothing inside the card shifts while it loads */
.aicardImage video { aspect-ratio: 852 / 664; }
.onestep-card .aicardImage video,
.af-card .aicardImage video { aspect-ratio: 1300 / 842; }

.aicardImage--bleed {
  padding: 0 0 0 24px;
  align-items: flex-end;
  justify-content: flex-end;
}
.aicardImage--bleed img {
  width: 100%;
  align-self: flex-end;
}

.aicardImage .display-mobile { display: none; }

/* --------------------------------------------------------------------------
   6. Footer band
   -------------------------------------------------------------------------- */
#operating-ai-layer .cr-aiop-foot {
  margin-top: clamp(32px, 3.6vw, 56px);
  padding: clamp(20px, 2.2vw, 24px) clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(15, 138, 42, .95), rgba(53, 186, 85, .9)),
    url('/assets/img/cr-home/cta-gb.png') center / cover;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 168, 45, .20);
}
#operating-ai-layer .cr-aiop-foot p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
#operating-ai-layer .cr-aiop-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#operating-ai-layer .cr-aiop-foot-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Breakpoints — only what the fluid values can't express.
      Laptop and desktop need nothing: the stage is derived from the clip's
      own aspect ratio, so it scales with the viewport on its own.
   -------------------------------------------------------------------------- */

/* Tablet and below: motion off, static art on — one breakpoint for the hero
   and the cards alike. */
@media (max-width: 991px) {
  #operating-ai-layer .cr-aiop-logo {
    aspect-ratio: auto;
    height: clamp(150px, 26vw, 200px);
  }
  #operating-ai-layer .cr-aiop-logo > img { transform: none; }
  #operating-ai-layer .ci-aiop-padding { padding-bottom: 2rem; }

  .onestep-card,
  .af-card { aspect-ratio: 710 / 600; }
  .operating-ai-card { aspect-ratio: 430 / 460; }
}

@media (max-width: 767px) {
  #operating-ai-layer.cr-aiop { padding: 56px 0; --aiop-gap: 32px; }
  #operating-ai-layer .cr-aiop-logo { height: clamp(130px, 40vw, 180px); }
  #operating-ai-layer .cr-aiop-foot { flex-direction: column; align-items: flex-start; }
  #operating-ai-layer .cr-aiop-foot p br { display: none; }
}

@media (max-width: 640px) {
  #operating-ai-layer.cr-aiop { padding: 40px 0 70px; }
  .operating-ai-card { aspect-ratio: auto; }   /* let tall copy set the height */
  .aicardImage { position: relative; padding: 0 20px 20px; }
  .aicardImage video { display: none; }
  .aicardImage .display-mobile {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Respect the OS setting — cr-aiop-video-lazy.js also skips play() here. */
@media (prefers-reduced-motion: reduce) {
  #operating-ai-layer .cr-aiop-video { display: none; }
}

/* --------------------------------------------------------------------------
   8. Legacy — moved out of cr-home.css with everything else. Not referenced
      by the current markup; kept so nothing is lost. Safe to delete once
      you've confirmed no other page uses these.
   -------------------------------------------------------------------------- */
.cr-aiop-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--cr-green); background: var(--cr-green-soft);
  padding: 5px 12px;
}
.cr-aiop-tag--on { background: #fff; color: var(--cr-green); }
.cr-aiop-tag svg { width: 12px; height: 12px; }

.cr-aiop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 168, 45, .10);
}
.cr-mini-card:hover { transform: translateY(-4px); }
.cr-mini-card--rec:hover { transform: translateY(-12px); }

.cr-aiop-vis--dial::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px; border-radius: 50%;
  border: 1px dashed rgba(0, 168, 45, .3);
  transform: translate(-50%, -50%);
}
@media (max-width: 991px) {
  .cr-aiop-vis--upload { flex-wrap: wrap; gap: 10px; }
  .cr-aiop-vis--upload .cr-mini-card { flex: 1 1 30%; min-width: 130px; }
}
@media (max-width: 480px) {
  .cr-aiop-vis--upload { flex-direction: column; }
  .cr-aiop-vis--upload .cr-mini-card { flex: 1 1 100%; }
  .cr-mini-card--rec { transform: none; }
}