/*!
 * J Hero Welcome Banner — Sonar Multi-School theme
 * Framework-free, hard-coded for Sonar Multi-School's brand colours.
 */

.j-hero-welcome {
  /* ---- BRAND (Sonar Multi-School) — the only bit that changes per product ---- */
  --hero-brand-start: #ff61a3;
  --hero-brand-end: #b03c9b;
  --hero-brand-gradient: linear-gradient(141deg, var(--hero-brand-start) 14.81%, var(--hero-brand-end) 79.5%);

  --hero-brand-accent: var(--hero-brand-start);

  /* ---- NEUTRAL LAYOUT / TYPE TOKENS ---- */
  --hero-radius: 16px;
  --hero-radius-full: 9999px;
  --hero-bg: #ffffff;
  --hero-padding: 24px;
  --hero-gap: 16px;
  --hero-gradient-size: 30rem;
  --hero-gradient-opacity: 0.25;
  --hero-gradient-blur: 80px;
  --hero-header-gap: 4px;
  --hero-title-font-size: 32px;
  --hero-title-font-weight: 700;
  --hero-title-leading: 40px;
  --hero-title-tracking: -0.03em;
  --hero-title-color: #1f2937;
  --hero-subtitle-font-size: 16px;
  --hero-subtitle-font-size-sm: 18px;
  --hero-subtitle-leading: 28px;
  --hero-subtitle-leading-sm: 32px;
  --hero-subtitle-color: #4b5563;
  --hero-links-title-font-size: 14px;
  --hero-links-title-font-weight: 600;
  --hero-links-title-color: #0e1926;
  --hero-links-gap: 8px;
  --hero-tile-gap: 12px;
  --hero-tile-padding-y: 8px;
  --hero-tile-padding-x: 16px;
  --hero-tile-border: #e5e7eb;
  --hero-tile-radius: 12px;
  --hero-tile-label-font-size: 12px;
  --hero-tile-label-color: #9ca3af;
  --hero-tile-value-font-size: 18px;
  --hero-tile-value-color: #1f2937;
  --hero-font-semibold: 600;
  --hero-space-1: 4px;
  --hero-space-2: 8px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--hero-radius);
  background-color: var(--hero-bg);
  /* Gradient border trick: an opaque padding-box layer recreates the
     normal background, a translucent white wash softens the brand
     gradient underneath it, and that gradient only shows through in
     the 1px border ring itself. */
  background-image:
    linear-gradient(var(--hero-bg), var(--hero-bg)),
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    var(--hero-brand-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
}

.j-hero-welcome__gradient {
  position: absolute;
  z-index: -1;
  width: var(--hero-gradient-size);
  height: var(--hero-gradient-size);
  border-radius: var(--hero-radius-full);
  opacity: var(--hero-gradient-opacity);
  filter: blur(var(--hero-gradient-blur));
  background-image: radial-gradient(
    circle at 30% 30%,
    color-mix(in oklab, var(--hero-brand-accent) 90%, transparent),
    color-mix(in oklab, var(--hero-brand-accent) 0%, transparent)
  );
  pointer-events: none;
}

.j-hero-welcome__gradient--left { display: none; }
@media (min-width: 640px) {
  .j-hero-welcome__gradient--left { display: block; top: 10rem; right: 50%; }
}
.j-hero-welcome__gradient--right { top: -14rem; left: 50%; transform: translate3d(-20%, 0, 0); }
@media (min-width: 640px) {
  .j-hero-welcome__gradient--right { top: -22rem; }
}

.j-hero-welcome__container { position: relative; padding: var(--hero-padding); }

.j-hero-welcome__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hero-gap);
}

/* No shortcuts row -> centre the header against the tile instead of
   top-aligning it. Degrades gracefully (stays top-aligned) in the
   rare browser without :has() support. */
.j-hero-welcome__row:not(:has(.j-hero-welcome__body)) { align-items: center; }

.j-hero-welcome__main { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: var(--hero-gap); }

.j-hero-welcome__header { display: flex; flex-direction: column; gap: var(--hero-header-gap); }

.j-hero-welcome__title {
  margin: 0;
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
  line-height: var(--hero-title-leading);
  letter-spacing: var(--hero-title-tracking);
  color: var(--hero-title-color);
}

.j-hero-welcome__emoji { margin-left: var(--hero-space-1); }

.j-hero-welcome__subtitle {
  margin: 0;
  font-size: var(--hero-subtitle-font-size);
  line-height: var(--hero-subtitle-leading);
  color: var(--hero-subtitle-color);
}
@media (min-width: 640px) {
  .j-hero-welcome__subtitle { font-size: var(--hero-subtitle-font-size-sm); line-height: var(--hero-subtitle-leading-sm); }
}

.j-hero-welcome__body { display: flex; flex-direction: column; }

.j-hero-welcome__links-title {
  margin: 0 0 var(--hero-space-2);
  font-size: var(--hero-links-title-font-size);
  font-weight: var(--hero-links-title-font-weight);
  color: var(--hero-links-title-color);
}

.j-hero-welcome__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hero-links-gap); }

.j-hero-welcome__tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--hero-tile-gap);
  padding: var(--hero-tile-padding-y) var(--hero-tile-padding-x);
  border: 1px solid var(--hero-tile-border);
  border-radius: var(--hero-tile-radius);
}

.j-hero-welcome__tile-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; }

/* ---- Product icon tile (mirrors JProductIcon, "md" size) ---- */
.j-product-icon {
  --icon-tile-size: 40px;
  --icon-tile-radius: 8px;
  --icon-glyph-size: 20px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--icon-tile-size);
  height: var(--icon-tile-size);
  border-radius: var(--icon-tile-radius);
  background-image: var(--hero-brand-gradient);
  color: #ffffff;
}
.j-product-icon__svg { width: var(--icon-glyph-size); height: var(--icon-glyph-size); }

.j-hero-welcome__tile-text { display: flex; flex-direction: column; min-width: 0; }

.j-hero-welcome__tile-label {
  font-size: var(--hero-tile-label-font-size);
  text-transform: uppercase;
  color: var(--hero-tile-label-color);
}

.j-hero-welcome__tile-value {
  overflow: hidden;
  font-size: var(--hero-tile-value-font-size);
  font-weight: var(--hero-font-semibold);
  color: var(--hero-tile-value-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Shortcut buttons (mirrors JButton, variant="primary" size="sm") ----
   Generic brand-neutral primary action colour — not themed per product. */
.j-btn {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
  height: 36px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.j-btn:focus { outline: none; }
.j-btn--sm { height: 32px; }
.j-btn__label { display: inline-flex; align-items: center; gap: 8px; }
.j-btn--primary {
  background-color: #814af4;
  border-color: #6226d9;
  color: #ffffff;
  box-shadow: inset 0px 4px 5px 0px rgba(183, 128, 253, 0.25);
}
.j-btn--primary:hover {
  background-color: #6226d9;
  border-color: #422574;
  box-shadow: inset 0px 4px 5px 0px rgba(115, 66, 184, 0.5);
}
.j-btn--primary:focus {
  background-color: #6226d9;
  box-shadow: 0 0 0 4px rgba(115, 66, 184, 0.5);
}