/* Huuguu UI Blocks — Story Section Core-First Cleanup
 * v2.1-alpha.05
 * The Story Section is a composer only: Section, Layout, Header, Media, Mini Card,
 * Button and Animation cores own the behavior. This file only bridges regions and
 * editorial presentation tokens that are specific to this widget.
 */

.huu-uib-story-section,
.huu-uib-story-section *{
  box-sizing:border-box;
}

.huu-uib-story-section{
  position:relative;
  overflow:hidden;
  background:var(--huu-uib-section-bg,var(--huu-uib-color-background,var(--huu-uib-background-color,transparent)));
  color:var(--huu-uib-color-text,var(--huu-uib-text-color,currentColor));
}

.huu-uib-story-section__container,
.huu-uib-story-section__inner{
  position:relative;
  z-index:1;
}

.huu-uib-story-section__inner{
  width:100%;
  max-width:var(--huu-uib-section-inner-max-width,var(--huu-uib-max-width,1240px));
  margin-inline:auto;
  background:var(--huu-uib-story-inner-bg,transparent);
  border-radius:var(--huu-uib-story-inner-radius,0);
}

.huu-uib-story-section__layout{
  display:grid;
  gap:var(--huu-uib-story-layout-gap,var(--huu-uib-layout-gap,36px));
  width:100%;
}

.huu-uib-story-section__composer{
  width:100%;
}

.huu-uib-story-section__composer--editorial{
  display:block;
}

.huu-uib-story-section__region{
  min-width:0;
}

.huu-uib-story-section__region--header{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.huu-uib-story-section__actions{
  margin-top:var(--huu-uib-story-actions-spacing,var(--huu-uib-buttons-spacing-top,28px));
}

/* Narrative focus is a structural preset: the text area has priority and media becomes supporting. */
.huu-uib-story-section--narrative_focus{
  --huu-uib-layout-media-width:var(--huu-uib-story-narrative-media-width,34%);
}

/* Media region: Layout Core owns width/order/vertical align; Media Core owns the media itself. */
.huu-uib-story-section__region--media{
  display:flex;
  width:100%;
  min-width:0;
  height:var(--huu-uib-media-core-height,420px);
  min-height:0;
  align-items:stretch;
}
.huu-uib-story-section__media--bleed{
  margin-inline:calc(-1 * var(--huu-uib-story-media-bleed,0px));
}

/* Layout Core edge-bleed bridge.
 * The control is structural: when enabled, the media region escapes the inner
 * container and reaches the viewport edges. Media Core still owns the media
 * object, radius, overlay, object-fit and hover behavior.
 */
.huu-uib-story-section--edge-all .huu-uib-story-section__region--media{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

@media (max-width:767px){
  .huu-uib-story-section--edge-mobile .huu-uib-story-section__region--media{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}
.huu-uib-story-section__media--editorial_crop .huu-uib-media-core{
  aspect-ratio:var(--huu-uib-media-aspect-ratio,4/5);
}
.huu-uib-story-section .huu-uib-media-core,
.huu-uib-story-section .huu-uib-media-core__picture,
.huu-uib-story-section .huu-uib-media-core__video-button,
.huu-uib-story-section .huu-uib-media-core__embed{
  overflow:hidden;
}

.huu-uib-story-section .huu-uib-media-core__picture,
.huu-uib-story-section .huu-uib-media-core__video-button,
.huu-uib-story-section .huu-uib-media-core__embed{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  border-radius:inherit;
}

.huu-uib-story-section .huu-uib-media-core__image,
.huu-uib-story-section .huu-uib-media-core__poster-placeholder,
.huu-uib-story-section .huu-uib-media-core__embed iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  border-radius:inherit;
  object-fit:var(--huu-uib-media-object-fit,cover);
  object-position:var(--huu-uib-media-object-position,center center);
}
/* Lower Area / Editorial snippets */
.huu-uib-story-section__region--lower{
  --huu-uib-story-lower-columns:3;
  width:100%;
  max-width:none;
  margin-top:var(--huu-uib-story-lower-top,0);
  margin-inline:auto;
  padding:var(--huu-uib-story-lower-pad-top,0) var(--huu-uib-story-lower-pad-right,0) var(--huu-uib-story-lower-pad-bottom,0) var(--huu-uib-story-lower-pad-left,0);
  display:grid;
  grid-template-columns:repeat(var(--huu-uib-story-lower-columns),minmax(0,1fr));
  gap:var(--huu-uib-story-lower-gap,24px);
  align-items:var(--huu-uib-story-lower-item-align,center);
  overflow:visible;
}

.huu-uib-story-section__lower--width-inherit{
  max-width:100%;
}

.huu-uib-story-section__lower--width-contained{
  max-width:var(--huu-uib-story-lower-max-width,var(--huu-uib-section-inner-max-width,var(--huu-uib-max-width,1240px)));
}

.huu-uib-story-section__lower--width-full{
  max-width:none;
  width:100%;
}

.huu-uib-story-section__lower--feature_chips,
.huu-uib-story-section__lower--trust_items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.huu-uib-story-section__lower--feature_chips .huu-uib-mini-card,
.huu-uib-story-section__lower--trust_items .huu-uib-mini-card{
  flex:0 1 auto;
}

.huu-uib-story-section__lower--stats{
  --huu-uib-story-lower-columns:3;
}

.huu-uib-story-section__lower--dividers .huu-uib-mini-card + .huu-uib-mini-card::before{
  content:"";
  position:absolute;
  left:calc(-.5 * var(--huu-uib-story-lower-gap,24px));
  top:12%;
  bottom:12%;
  width:1px;
  background:var(--huu-uib-color-border,var(--huu-uib-border-color,rgba(15,23,42,.12)));
}

.huu-uib-story-section .huu-uib-mini-card{
  gap:var(--huu-uib-mini-card-icon-gap,var(--huu-uib-mini-card-gap,14px));
  align-items:var(--huu-uib-story-lower-item-align,center);
  color:var(--huu-uib-mini-card-text,var(--huu-uib-color-text,var(--huu-uib-text-color,currentColor)));
  overflow:visible;
  z-index:0;
}

.huu-uib-story-section__region--lower[style*="--huu-uib-story-lower-item-align: stretch"] .huu-uib-mini-card,
.huu-uib-story-section__region--lower[style*="--huu-uib-story-lower-item-align:stretch"] .huu-uib-mini-card{
  height:100%;
}

.huu-uib-story-section .huu-uib-mini-card__visual{
  flex:0 0 var(--huu-uib-mini-card-icon-box,var(--huu-uib-mini-card-visual-size,42px));
  width:var(--huu-uib-mini-card-icon-box,var(--huu-uib-mini-card-visual-size,42px));
  height:var(--huu-uib-mini-card-icon-box,var(--huu-uib-mini-card-visual-size,42px));
  border:var(--huu-uib-mini-card-icon-border-width,1px) solid var(--huu-uib-mini-card-icon-border,transparent);
  border-radius:var(--huu-uib-mini-card-icon-radius,var(--huu-uib-mini-card-visual-radius,14px));
  background:var(--huu-uib-mini-card-icon-bg,var(--huu-uib-mini-card-visual-bg,var(--huu-uib-muted-bg,transparent)));
  color:var(--huu-uib-mini-card-icon-color,var(--huu-uib-mini-card-visual-color,var(--huu-uib-color-primary,var(--huu-uib-primary-color,currentColor))));
}

.huu-uib-story-section .huu-uib-mini-card__visual svg,
.huu-uib-story-section .huu-uib-mini-card__visual i{
  width:var(--huu-uib-mini-card-icon-size,18px);
  height:var(--huu-uib-mini-card-icon-size,18px);
  color:inherit;
  fill:currentColor;
  stroke:currentColor;
}

.huu-uib-story-section .huu-uib-mini-card:hover{
  z-index:2;
  background:var(--huu-uib-mini-card-hover-bg,var(--huu-uib-mini-card-bg,var(--huu-uib-color-surface,var(--huu-uib-surface-color,transparent))));
  border-color:var(--huu-uib-mini-card-hover-border,var(--huu-uib-mini-card-border,var(--huu-uib-color-border,var(--huu-uib-border-color,transparent))));
  border-width:var(--huu-uib-mini-card-hover-border-width,var(--huu-uib-mini-card-border-width,1px));
  color:var(--huu-uib-mini-card-hover-text,var(--huu-uib-mini-card-text,var(--huu-uib-color-text,var(--huu-uib-text-color,currentColor))));
  box-shadow:var(--huu-uib-mini-card-hover-shadow,var(--huu-uib-mini-card-shadow,none));
}

.huu-uib-story-section .huu-uib-mini-card:hover .huu-uib-mini-card__title,
.huu-uib-story-section .huu-uib-mini-card:hover .huu-uib-mini-card__value{
  color:var(--huu-uib-mini-card-hover-title,var(--huu-uib-mini-card-title,var(--huu-uib-color-heading,var(--huu-uib-heading-color,currentColor))));
}

.huu-uib-story-section .huu-uib-mini-card:hover .huu-uib-mini-card__text{
  color:var(--huu-uib-mini-card-hover-text,var(--huu-uib-mini-card-text,var(--huu-uib-color-text,var(--huu-uib-text-color,currentColor))));
}

.huu-uib-story-section .huu-uib-mini-card:hover .huu-uib-mini-card__visual{
  color:var(--huu-uib-mini-card-icon-hover-color,var(--huu-uib-mini-card-icon-color,var(--huu-uib-color-primary,var(--huu-uib-primary-color,currentColor))));
  background:var(--huu-uib-mini-card-icon-hover-bg,var(--huu-uib-mini-card-icon-bg,transparent));
  border-color:var(--huu-uib-mini-card-icon-hover-border,var(--huu-uib-mini-card-icon-border,transparent));
}

.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect: none"] .huu-uib-mini-card:hover,
.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect:none"] .huu-uib-mini-card:hover{
  transform:none;
  box-shadow:var(--huu-uib-mini-card-shadow,none);
}

.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect: scale"] .huu-uib-mini-card:hover,
.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect:scale"] .huu-uib-mini-card:hover{
  transform:scale(1.015);
}

.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect: shadow"] .huu-uib-mini-card:hover,
.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect:shadow"] .huu-uib-mini-card:hover{
  transform:none;
}

.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect: lift"] .huu-uib-mini-card:hover,
.huu-uib-story-section__region--lower[style*="--huu-uib-story-mini-card-hover-effect:lift"] .huu-uib-mini-card:hover{
  transform:translateY(var(--huu-uib-mini-card-hover-y,-2px));
}


@media (max-width:1024px){
  .huu-uib-story-section__region--lower{
    --huu-uib-story-lower-columns:2;
  }
}

@media (max-width:767px){
  .huu-uib-story-section__layout{
    gap:var(--huu-uib-story-layout-gap-mobile,var(--huu-uib-layout-gap,24px));
  }
  .huu-uib-story-section__region--media{
    min-height:var(--huu-uib-media-core-height,280px);
  }  .huu-uib-story-section__region--lower{
    --huu-uib-story-lower-columns:1;
  }
  .huu-uib-story-section__lower--feature_chips,
  .huu-uib-story-section__lower--trust_items{
    display:grid;
    grid-template-columns:1fr;
  }
  .huu-uib-story-section__lower--dividers .huu-uib-mini-card + .huu-uib-mini-card::before{
    display:none;
  }
}

.huu-uib-story-section__layout,
.huu-uib-story-section__composer,
.huu-uib-story-section__region,
.huu-uib-story-section__region--lower,
.huu-uib-story-section .huu-uib-mini-card{
  min-width:0;
}

.huu-uib-story-section__region--media{
  max-width:100%;
  overflow:visible;
}

.huu-uib-story-section .huu-uib-media-core{
  max-width:100%;
}

.huu-uib-story-section .huu-uib-media-core__image,
.huu-uib-story-section .huu-uib-media-core__poster-placeholder,
.huu-uib-story-section .huu-uib-media-core__embed iframe{
  max-width:100%;
}

@media (min-width:768px) and (max-width:1024px){
  .huu-uib-story-section__layout{
    grid-template-columns:minmax(0,1fr);
  }

  .huu-uib-story-section__composer.huu-uib-layout,
  .huu-uib-story-section__composer.huu-uib-layout--split{
    min-width:0;
    max-width:100%;
  }

  .huu-uib-story-section__region--header,
  .huu-uib-story-section__region--media{
    min-width:0;
    max-width:100%;
  }

  .huu-uib-story-section__region--lower{
    width:100%;
    max-width:min(100%, var(--huu-uib-story-lower-max-width, var(--huu-uib-section-inner-max-width, var(--huu-uib-max-width, 1240px))));
  }
}

@media (max-width:767px){
  .huu-uib-story-section__layout{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    gap:var(--huu-uib-story-layout-gap-mobile,var(--huu-uib-layout-gap,24px));
    overflow:visible;
  }

  .huu-uib-story-section__composer.huu-uib-layout,
  .huu-uib-story-section__composer.huu-uib-layout--split{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:var(--huu-uib-layout-gap-mobile,var(--huu-uib-layout-gap,24px));
    overflow:visible;
  }

  .huu-uib-story-section__composer.huu-uib-layout--mobile-media-top .huu-uib-story-section__region--media{
    order:1;
  }

  .huu-uib-story-section__composer.huu-uib-layout--mobile-media-top .huu-uib-story-section__region--header{
    order:2;
  }

  .huu-uib-story-section__composer.huu-uib-layout--mobile-media-bottom .huu-uib-story-section__region--header,
  .huu-uib-story-section__composer:not(.huu-uib-layout--mobile-media-top) .huu-uib-story-section__region--header{
    order:1;
  }

  .huu-uib-story-section__composer.huu-uib-layout--mobile-media-bottom .huu-uib-story-section__region--media,
  .huu-uib-story-section__composer:not(.huu-uib-layout--mobile-media-top) .huu-uib-story-section__region--media{
    order:2;
  }

  .huu-uib-story-section__region--header,
  .huu-uib-story-section__region--media{
    position:relative;
    width:100%;
    max-width:100%;
    flex:0 0 auto;
    min-width:0;
  }

  .huu-uib-story-section__region--media{
    min-height:auto;
  }
  .huu-uib-story-section .huu-uib-media-core__picture,
  .huu-uib-story-section .huu-uib-media-core__video-button,
  .huu-uib-story-section .huu-uib-media-core__embed{
    height:100%;
    min-height:0;
  }

  .huu-uib-story-section .huu-uib-media-core__image,
  .huu-uib-story-section .huu-uib-media-core__poster-placeholder,
  .huu-uib-story-section .huu-uib-media-core__embed iframe{
    height:100%;
    min-height:0;
  }

  .huu-uib-story-section__region--lower{
    position:relative;
    order:99;
    width:100%;
    margin-inline:auto;
    clear:both;
    display:grid;
    grid-template-columns:1fr;
    z-index:1;
  }

  .huu-uib-story-section__lower--width-inherit{
    max-width:100%;
  }

  .huu-uib-story-section__lower--width-contained{
    max-width:min(100%, var(--huu-uib-story-lower-max-width, var(--huu-uib-section-inner-max-width, var(--huu-uib-max-width, 1240px))));
  }

  .huu-uib-story-section__lower--width-full{
    max-width:none;
    width:100%;
  }

  .huu-uib-story-section .huu-uib-mini-card{
    width:100%;
    max-width:100%;
  }

  .huu-uib-story-section .huu-uib-core-header__heading,
  .huu-uib-story-section .huu-uib-core-header__subtitle{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .huu-uib-story-section .huu-uib-core-header__highlight{
    white-space:normal;
  }
}