/* Widget "hero" — sobretítulo + título + texto + botones, orden y estilos
   configurables por elemento. Las variables --hero-* llegan inline en el
   wrapper .karnak-widget-hero (misma mecánica genérica que product_categories/
   menu_cart: build_styles() en el renderer vuelca cualquier clave "--xxx"
   guardada en widget.styles tal cual, sin caso especial). */

.karnak-hero {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             16px;
    text-align:      left;
}
.karnak-hero--align-center { align-items: center;    text-align: center; }
.karnak-hero--align-right  { align-items: flex-end;  text-align: right;  }

/* ── Sobretítulo ─────────────────────────────────────────────── */
/* display:inline-block (no un width propio) es lo que le da el ancho
   fit-content pedido — el fondo no se estira más allá del texto. */
.karnak-hero-kicker {
    display:        inline-block;
    background:     var(--hero-kicker-bg, #fff1e0);
    color:          var(--hero-kicker-color, #c2660a);
    font-size:      var(--hero-kicker-size, 13px);
    font-weight:    var(--hero-kicker-weight, 600);
    font-family:    var(--hero-kicker-font, inherit);
    border-radius:  var(--hero-kicker-radius, 999px);
    padding:        5px 14px;
    letter-spacing: .02em;
    line-height:    1.4;
}

/* ── Título ──────────────────────────────────────────────────── */
/* .karnak-hero + clase: le gana a la regla global '.karnak-layout h1' de
   Tipografía global; sin valor propio cae en ella vía --karnak-tag-* (ver
   Karnak_Globals::typo_tag_rules()). */
.karnak-hero .karnak-hero-title {
    margin:      0;
    color:       var(--hero-title-color, inherit);
    font-size:   var(--hero-title-size, var(--karnak-tag-size, inherit));
    font-weight: var(--hero-title-weight, var(--karnak-tag-weight, inherit));
    font-family: var(--hero-title-font, var(--karnak-tag-family, inherit));
    line-height: var(--hero-title-line-height, var(--karnak-tag-lheight, 1.2));
}

/* ── Texto ───────────────────────────────────────────────────── */
/* El texto es un <div> con <p> adentro: sin valor propio usa la tipografía
   global de párrafo (--karnak-p-*), y los <p> internos heredan del div en
   vez de que '.karnak-layout p' pise lo configurado en el widget. */
.karnak-hero-text {
    color:       var(--hero-text-color, inherit);
    font-size:   var(--hero-text-size, var(--karnak-p-size, inherit));
    font-weight: var(--hero-text-weight, var(--karnak-p-weight, inherit));
    font-family: var(--hero-text-font, var(--karnak-p-family, inherit));
    line-height: var(--hero-text-line-height, var(--karnak-p-lheight, 1.6));
}
.karnak-hero .karnak-hero-text p {
    font-size:   inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
}
/* HTML enriquecido (mismo campo rich-text que el widget Texto) puede traer
   varios <p> — reset propio en vez del ">*{margin:0!important}" global de
   .karnak-widget-text (esa regla no aplica acá, esta es otra clase), para no
   sumar un margen extra al gap del flex column pero conservando el espaciado
   ENTRE párrafos si hay más de uno. */
.karnak-hero-text > * { margin: 0 0 0.6em; }
.karnak-hero-text > *:last-child { margin-bottom: 0; }

/* ── Botones ─────────────────────────────────────────────────── */
.karnak-hero-buttons {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    gap:             var(--hero-btn-gap, 14px);
    justify-content: var(--hero-btn-align, flex-start);
}
.karnak-hero-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    padding:         11px 20px;
    transition:      background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}
.karnak-hero-btn--primary {
    background:    var(--hero-btn-primary-bg, #ff9900);
    color:         var(--hero-btn-primary-color, #fff);
    border:        2px solid var(--hero-btn-primary-border, transparent);
    border-radius: var(--hero-btn-primary-radius, 5px);
    font-size:     var(--hero-btn-primary-size, 15px);
    font-weight:   var(--hero-btn-primary-weight, 600);
    font-family:   var(--hero-btn-primary-font, inherit);
}
.karnak-hero-btn--primary:hover {
    background:   var(--hero-btn-primary-hover-bg, var(--hero-btn-primary-bg, #ff9900));
    color:        var(--hero-btn-primary-hover-color, var(--hero-btn-primary-color, #fff));
    border-color: var(--hero-btn-primary-hover-border, var(--hero-btn-primary-border, transparent));
    filter:       brightness(.9);
}
.karnak-hero-btn--secondary {
    background:    var(--hero-btn-secondary-bg, transparent);
    color:         var(--hero-btn-secondary-color, #18181b);
    border:        2px solid var(--hero-btn-secondary-border, #18181b);
    border-radius: var(--hero-btn-secondary-radius, 5px);
    font-size:     var(--hero-btn-secondary-size, 15px);
    font-weight:   var(--hero-btn-secondary-weight, 600);
    font-family:   var(--hero-btn-secondary-font, inherit);
}
.karnak-hero-btn--secondary:hover {
    background:   var(--hero-btn-secondary-hover-bg, #18181b);
    color:        var(--hero-btn-secondary-hover-color, #fff);
    border-color: var(--hero-btn-secondary-hover-border, var(--hero-btn-secondary-border, #18181b));
}