/* 04_VISUAL/xwui/xwui-lib/xwui-lib-basic/src/display/XWUIHero/XWUIHero.css */
/**
 * XWUIHero - page hero component.
 * Honors XWUI tokens; CSS-variable fallbacks provided for standalone usage.
 */

.xwui-hero {
  display: block;
  padding: var(--xwui-space-3xl, 4rem) var(--xwui-space-lg, 1.5rem);
  position: relative;
  overflow: hidden;
}

.xwui-hero[data-variant='gradient'] {
  background:
    radial-gradient(1200px 600px at 20% -10%,
      color-mix(in srgb, var(--accent-primary, #6366f1) 18%, transparent),
      transparent 60%),
    radial-gradient(1000px 500px at 120% 20%,
      color-mix(in srgb, var(--accent-primary, #a855f7) 14%, transparent),
      transparent 60%);
}

.xwui-hero__inner {
  max-inline-size: var(--xwui-layout-max-width, 1360px);
  margin-inline: auto;
  display: grid;
  gap: var(--xwui-space-xl, 2rem);
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}

.xwui-hero[data-align='center'] .xwui-hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.xwui-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--xwui-space-md, 1.25rem);
}

.xwui-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-xs, 0.35rem) var(--spacing-sm, 0.75rem);
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.12));
  background: var(--bg-card, #f8fafc);
  color: var(--text-secondary, #334155);
  border-radius: var(--radius-full, 999px);
  font-size: 0.8125rem;
  font-weight: 500;
  inline-size: fit-content;
}

.xwui-hero[data-align='center'] .xwui-hero__eyebrow { margin-inline: auto; }

.xwui-hero__eyebrow-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 999px;
  background: var(--accent-primary, #6366f1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary, #6366f1) 25%, transparent);
}

.xwui-hero__title {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary, #0f172a);
  margin: 0;
  font-weight: 800;
}

/* Each entry of data.titleLines is its own block inside the one heading. */
.xwui-hero__title-line { display: block; }

/* Arabic is cursive: a negative letter-spacing pulls joined letters apart or
   over each other, and it also fights the kashida stretch. The tight 1.05 line
   height clips Arabic ascenders and marks. So an RTL or Arabic title resets
   both. */
[dir='rtl'] .xwui-hero__title,
.xwui-hero__title:lang(ar) {
  letter-spacing: 0;
  line-height: 1.3;
}

.xwui-hero[data-size='md'] .xwui-hero__title { font-size: clamp(2rem, 3.5vw, 3rem); }
.xwui-hero[data-size='xl'] .xwui-hero__title { font-size: clamp(3rem, 6vw, 5.5rem); }

/* sm is the compact band: a greeting or section header sitting above the
   content a visitor came for, not a page's opening statement. Scaling the
   title alone (what md/lg/xl do) cannot get there, because at this size the
   default 4rem of block padding each side is most of the band's height. So sm
   also gives back the block padding and tightens both stacks. Spacing reads
   the style's --spacing-* scale, as XWUICard's padding sizes do, so a denser
   style tightens the band with everything else. Inline padding is untouched
   so the band still lines up with the page gutter. */
.xwui-hero[data-size='sm'] { padding-block: var(--spacing-md, 1rem); }
.xwui-hero[data-size='sm'] .xwui-hero__inner { gap: var(--spacing-lg, 1.5rem); }
.xwui-hero[data-size='sm'] .xwui-hero__text { gap: var(--spacing-sm, 0.5rem); }
.xwui-hero[data-size='sm'] .xwui-hero__title {
  font-size: clamp(var(--font-size-2xl, 1.5rem), 2.5vw, var(--font-size-4xl, 2.25rem));
}

.xwui-hero__title-highlight {
  background: linear-gradient(135deg,
    var(--accent-primary, #6366f1),
    var(--accent-primary, #a855f7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xwui-hero__subtitle {
  color: var(--text-secondary, #334155);
  font-size: clamp(1.05rem, 1.3vw + 0.5rem, 1.25rem);
  max-inline-size: 52ch;
  line-height: 1.6;
  margin: 0;
}
.xwui-hero[data-align='center'] .xwui-hero__subtitle { margin-inline: auto; }

.xwui-hero__ctas {
  display: flex;
  gap: var(--spacing-sm, 0.75rem);
  flex-wrap: wrap;
  margin-block-start: 0.5rem;
}
.xwui-hero[data-align='center'] .xwui-hero__ctas { justify-content: center; }

.xwui-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.7rem) var(--spacing-md, 1.2rem);
  border-radius: var(--radius-md, 10px);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

/* The CTA's icon: sized by the CTA's own font size (XWUIIcon is mounted at 1em)
   and never shrunk by a long label. Its place before or after the label is the
   DOM order, so it follows the reading direction with no direction rule. */
.xwui-hero__cta-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.xwui-hero__cta--primary {
  color: #fff;
  background: linear-gradient(135deg,
    var(--accent-primary, #6366f1),
    var(--accent-hover, #4f46e5));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent-primary, #6366f1) 60%, transparent);
}
.xwui-hero__cta--primary:hover {
  background: linear-gradient(135deg,
    var(--accent-hover, #4f46e5),
    var(--accent-hover, #4338ca));
  color: #fff;
}

.xwui-hero__cta--secondary {
  background: var(--bg-card, #f8fafc);
  color: var(--text-primary, #0f172a);
  border-color: var(--border-color, rgba(15, 23, 42, 0.12));
}
.xwui-hero__cta--secondary:hover {
  background: var(--bg-muted, #f1f5f9);
  color: var(--text-primary, #0f172a);
}

.xwui-hero__cta--ghost {
  background: transparent;
  color: var(--text-primary, #0f172a);
}
.xwui-hero__cta--ghost:hover {
  background: var(--bg-muted, #f1f5f9);
}

.xwui-hero__meta {
  display: flex;
  gap: var(--spacing-md, 1.25rem);
  color: var(--text-secondary, #64748b);
  font-size: 0.9rem;
  flex-wrap: wrap;
  margin-block-start: 0.25rem;
}
.xwui-hero__meta strong {
  color: var(--text-primary, #0f172a);
  font-weight: 700;
}

.xwui-hero__preview {
  position: relative;
  /* Auto height by default: the slot is as tall as what is in it, so a live
     component, a popover or a taller picture is never cut off. A fixed box is
     opt-in through config.previewAspect (the data-aspect rules below). The
     grid item may shrink below its content so a wide component cannot push the
     text column out of the hero. */
  min-inline-size: 0;
  border-radius: var(--radius-2xl, 28px);
  background:
    radial-gradient(400px 200px at 30% 20%,
      color-mix(in srgb, var(--accent-primary, #6366f1) 30%, transparent),
      transparent 60%),
    radial-gradient(400px 200px at 80% 70%,
      color-mix(in srgb, var(--accent-primary, #a855f7) 28%, transparent),
      transparent 60%),
    var(--bg-card, #f8fafc);
  border: 1px solid var(--border-light, rgba(15, 23, 42, 0.08));
  box-shadow: var(--xwui-shadow-lg, 0 12px 40px rgba(15, 23, 42, 0.12));
  padding: var(--xwui-space-lg, 1.5rem);
}

/* A picture or video with no width of its own fits the slot instead of
   overflowing it now that the slot no longer clips. */
.xwui-hero__preview img,
.xwui-hero__preview video {
  max-inline-size: 100%;
  block-size: auto;
}

/* A fixed ratio is a box, so it clips what does not fit, as the slot always did. */
.xwui-hero__preview[data-aspect] { overflow: hidden; }
.xwui-hero__preview[data-aspect='4-3'] { aspect-ratio: 4 / 3; }
.xwui-hero__preview[data-aspect='16-10'] { aspect-ratio: 16 / 10; }
.xwui-hero__preview[data-aspect='16-9'] { aspect-ratio: 16 / 9; }
.xwui-hero__preview[data-aspect='3-2'] { aspect-ratio: 3 / 2; }
.xwui-hero__preview[data-aspect='1-1'] { aspect-ratio: 1 / 1; }
/* legacy is the box earlier releases drew for every preview. */
.xwui-hero__preview[data-aspect='legacy'] { aspect-ratio: 4 / 3; }

@media (max-width: 960px) {
  .xwui-hero__inner { grid-template-columns: 1fr; }
  .xwui-hero__preview[data-aspect='legacy'] { aspect-ratio: 16 / 10; }
}