/* =========================================================
   ALVO PRODUCT STORY V6
   5 layouts:
   1. Full image + text left
   2. Full image + text right
   3. Full image + text center/top
   4. YouTube video 16:9 with balanced margins
   5. Full image only
   ========================================================= */

.alvo-product-story-lazy{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.alvo-product-story-lazy:empty{
  min-height:0;
}

.alvo-product-story-lazy.is-ready{
  display:block;
  width:100%;
}

/* ---------------- FULL-BLEED IMAGE STORY ---------------- */

.alvo-story-slot{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:0;
  background:#F2F2EF;
  font-family:Manrope,Arial,sans-serif;
}

/* Image + text layouts use a cinematic full-width stage */
.alvo-story-slot.layout-image_text_left,
.alvo-story-slot.layout-image_text_right,
.alvo-story-slot.layout-image_text_center_top{
  min-height:clamp(560px,56.25vw,900px);
}

.alvo-story-bg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.alvo-story-overlay{
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  min-height:clamp(560px,56.25vw,900px);
  padding:clamp(44px,5vw,84px) clamp(32px,6vw,110px);
  box-sizing:border-box;
}

.alvo-story-copy{
  position:relative;
  z-index:3;
  width:min(42%,620px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Very subtle readability treatment — not a visible design layer */
.alvo-story-slot.text-light.layout-image_text_left::after,
.alvo-story-slot.text-light.layout-image_text_right::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.alvo-story-slot.text-light.layout-image_text_left::after{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.16) 36%,
    rgba(0,0,0,0) 66%
  );
}

.alvo-story-slot.text-light.layout-image_text_right::after{
  background:linear-gradient(
    270deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.16) 36%,
    rgba(0,0,0,0) 66%
  );
}

.alvo-story-slot.text-light.layout-image_text_center_top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.08) 32%,
    rgba(0,0,0,0) 55%
  );
}

.alvo-story-title{
  margin:0 0 16px;
  font-size:clamp(34px,3vw,52px);
  line-height:1.08;
  letter-spacing:-.8px;
  font-weight:800;
}

.alvo-story-description{
  max-width:600px;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.65;
  font-weight:500;
}

.alvo-story-description p{
  margin:0 0 10px;
}

.alvo-story-description p:last-child{
  margin-bottom:0;
}

.alvo-story-slot.text-light{
  color:#FFFFFF;
}

.alvo-story-slot.text-dark{
  color:#0B0B0B;
}

/* Layout 1 — text left */
.alvo-story-slot.layout-image_text_left .alvo-story-overlay{
  align-items:center;
  justify-content:flex-start;
}

.alvo-story-slot.layout-image_text_left .alvo-story-copy{
  align-items:flex-start;
  text-align:left;
}

/* Layout 2 — text right */
.alvo-story-slot.layout-image_text_right .alvo-story-overlay{
  align-items:center;
  justify-content:flex-end;
}

.alvo-story-slot.layout-image_text_right .alvo-story-copy{
  align-items:flex-end;
  text-align:right;
}

/* Layout 3 — text center/top */
.alvo-story-slot.layout-image_text_center_top .alvo-story-overlay{
  align-items:flex-start;
  justify-content:center;
}

.alvo-story-slot.layout-image_text_center_top .alvo-story-copy{
  width:min(72%,820px);
  max-width:820px;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

/* ---------------- OPTIONAL 3 HIGHLIGHTS ---------------- */

.alvo-story-highlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:18px;
  margin-top:28px;
}

.alvo-story-highlight{
  min-width:0;
  padding:8px 8px 8px 0;
}

.alvo-story-highlight-icon{
  display:block;
  width:28px;
  height:28px;
  object-fit:contain;
  margin:0 0 7px;
}

.alvo-story-highlight-value{
  margin:0 0 4px;
  font-size:20px;
  line-height:1.15;
  font-weight:800;
}

.alvo-story-highlight-label{
  font-size:11.5px;
  line-height:1.4;
  font-weight:600;
  opacity:.86;
}

.alvo-story-slot.layout-image_text_right .alvo-story-highlight{
  padding:8px 0 8px 8px;
}

.alvo-story-slot.layout-image_text_right .alvo-story-highlight-icon{
  margin-left:auto;
}

.alvo-story-slot.layout-image_text_center_top .alvo-story-highlight-icon{
  margin-left:auto;
  margin-right:auto;
}

/* ---------------- LAYOUT 4 — VIDEO ---------------- */

/*
  Video is intentionally NOT full bleed.
  About 20% larger than the earlier 1200px concept:
  max-width = 1440px, true YouTube 16:9.
*/
.alvo-story-slot.layout-video_full{
  width:min(calc(100% - 96px),1440px);
  min-height:0;
  margin:56px auto;
  border-radius:12px;
  overflow:hidden;
  background:#0B0B0B;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}

.alvo-story-youtube-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#0B0B0B;
  overflow:hidden;
  border-radius:inherit;
}

.alvo-story-youtube-wrap iframe{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ---------------- LAYOUT 5 — FULL IMAGE ONLY ---------------- */

.alvo-story-slot.layout-image_full{
  min-height:0;
}

.alvo-story-slot.layout-image_full .alvo-story-bg{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.alvo-story-slot.layout-image_full .alvo-story-overlay{
  display:none;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:991px){
  .alvo-story-slot.layout-image_text_left,
  .alvo-story-slot.layout-image_text_right,
  .alvo-story-slot.layout-image_text_center_top,
  .alvo-story-overlay{
    min-height:560px;
  }

  .alvo-story-overlay{
    padding:42px 34px;
  }

  .alvo-story-copy{
    width:55%;
    max-width:560px;
  }

  .alvo-story-slot.layout-image_text_center_top .alvo-story-copy{
    width:78%;
  }

  .alvo-story-slot.layout-video_full{
    width:calc(100% - 48px);
    margin:40px auto;
    border-radius:10px;
  }
}

@media(max-width:767px){
  .alvo-story-slot.layout-image_text_left,
  .alvo-story-slot.layout-image_text_right,
  .alvo-story-slot.layout-image_text_center_top,
  .alvo-story-overlay{
    min-height:520px;
  }

  .alvo-story-overlay{
    padding:28px 18px;
    align-items:flex-end!important;
    justify-content:flex-start!important;
  }

  .alvo-story-copy,
  .alvo-story-slot.layout-image_text_center_top .alvo-story-copy{
    width:100%;
    max-width:none;
    align-items:flex-start!important;
    text-align:left!important;
  }

  .alvo-story-slot.text-light.layout-image_text_left::after,
  .alvo-story-slot.text-light.layout-image_text_right::after,
  .alvo-story-slot.text-light.layout-image_text_center_top::after{
    background:linear-gradient(
      0deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.16) 48%,
      rgba(0,0,0,0) 76%
    );
  }

  .alvo-story-title{
    font-size:30px;
  }

  .alvo-story-description{
    font-size:14px;
  }

  .alvo-story-highlights{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:18px;
  }

  .alvo-story-highlight-value{
    font-size:16px;
  }

  .alvo-story-highlight-label{
    font-size:10.5px;
  }

  .alvo-story-slot.layout-image_text_right .alvo-story-highlight{
    padding:8px 8px 8px 0;
  }

  .alvo-story-slot.layout-image_text_right .alvo-story-highlight-icon,
  .alvo-story-slot.layout-image_text_center_top .alvo-story-highlight-icon{
    margin-left:0;
    margin-right:0;
  }

  .alvo-story-slot.layout-video_full{
    width:calc(100% - 24px);
    margin:28px auto;
    border-radius:8px;
  }
}


.alvo-story-video-title{
  width:min(calc(100% - 48px),1200px);
  margin:0 auto 24px;
  color:#0B0B0B;
  font-family:Manrope,Arial,sans-serif;
  font-size:36px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.5px;
  text-align:center;
}

@media(max-width:767px){
  .alvo-story-video-title{
    width:calc(100% - 28px);
    margin-bottom:18px;
    font-size:28px;
  }
}