/* ═══════════════════════════════════════════════════════════════════════════
   HERO SIGNATURE — "Ledger Band + Diagonal Edge"
   ───────────────────────────────────────────────────────────────────────────
   Redesigns the homepage hero block: the four feature items, the course CTA row
   and the section's bottom edge.

   The inherited treatment gave the four features and the three CTAs the SAME
   translucent-white glass card — two rows of identical floating boxes, which is
   why the block read as flat and template-ish. This replaces that with:

     · one ruled band, cells divided by hairlines (a ledger / statement figure,
       which is the visual language of the profession the brand teaches)
     · outline pills for the CTAs, so the accent green is spent only on hover
       and the band stays the block's single filled element
     · a crisp diagonal slice with a green edge in place of the three animated
       sine waves

   VISUAL ONLY. Home.razor is untouched — every rule here repaints classes the
   markup already emits, including the three <svg> wave layers, which are hidden
   rather than removed so nothing in the component has to change. Loaded last in
   App.razor: delete that one <link> and the hero reverts.

   Inherited rules this overrides live in four separate places in
   home-premium.css — ~54-165 (hero shell, CTAs, waves), ~2510-2543 (mobile
   CTAs), ~2777-2800 (the glass CTA pass) and ~3544-3632 (the feature cards).
   They are left alone; this file simply loads after them.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .hero{
  /* the section below opens on #f7f9fc — the diagonal has to land on the same
     value or the seam shows as a band of a slightly different white */
  --hs-edge:#f7f9fc;
  --hs-rule:rgba(255,255,255,.13);     /* the hairline that divides the band  */
  --hs-ease:cubic-bezier(.22,1,.36,1);

  /* ── Clearance rule ──────────────────────────────────────────────────────
     The slice's highest point is its top-RIGHT corner, which sits at
     0.9 × (wave height) above the section's bottom edge. The bottom padding
     therefore has to exceed that at every width or the diagonal cuts through
     the CTA row. Both values are set together here and in the ≤768 block; if
     you change one, recheck the other against 0.9 × height. */
  padding-bottom:clamp(64px,6.8vw,98px);
}

/* The band reads better with room to breathe than the inherited 880px copy
   column allowed — and the widened container is also what makes the ≥1160px
   negative-margin hack on the CTA row unnecessary. */
.hjc-app .hero__inner{max-width:1080px}

/* ── background blobs ────────────────────────────────────────────────────
   The left blob still ran the old palette's orange (#ff8a3d), which over navy
   blurred into a brown-olive smudge — the one warm thing left in a navy/green
   brand, and it sat right where the band's left edge lands. Repointed at the
   brand colours and dialled back, so the ruled hairlines stay legible against
   it. The --orange class name is Home.razor's and is left alone; only the
   paint changes. */
.hjc-app .hero__blob{opacity:.4}
.hjc-app .hero__blob--orange{background:radial-gradient(circle,#22C55E,#0A1F5C)}
.hjc-app .hero__blob--green{opacity:.28}

/* ═════════════════════════════════════════════ 1 · THE RULED BAND ══════
   Four cells in ONE panel. The cards' individual fills, borders, radii and
   shadows all go; what divides the cells now is a 1px rule, and the panel is
   the only thing with an edge.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .hero__feats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;                                /* the rules are borders, not gaps */
  max-width:1060px;
  margin:0 auto 28px;
  border-radius:16px;
  overflow:hidden;                      /* clips the cell fills to the radius */
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 46px -30px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Cell: icon in its own column, spanning both text rows — the ledger row
   figure. The inherited rule centred everything and boxed each one. */
.hjc-app .hero__feat{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:13px;
  row-gap:4px;
  align-items:start;
  text-align:left;
  padding:20px 18px;
  background:none;border:none;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-left:1px solid var(--hs-rule);
  transition:background .25s var(--hs-ease);
}
.hjc-app .hero__feat:first-child{border-left:none}

/* No lift: a cell that rises out of a ruled band breaks the band. The hover is
   a faint fill plus the accent rule wiping in along the cell's foot. */
.hjc-app .hero__feat:hover{
  background:rgba(255,255,255,.075);
  transform:none;
  border-color:var(--hs-rule);
  box-shadow:none;
}
.hjc-app .hero__feat::after{
  height:2px;
  background:linear-gradient(90deg,var(--accent-color,#1AAB4A),var(--accent-light,#22C55E));
}

/* Icon: a tinted marker, not a filled tile. The solid green square read as the
   loudest thing in the section; here green is an outline and a glyph. */
.hjc-app .hero__feat-ic{
  grid-column:1;grid-row:1 / 3;
  width:38px;height:38px;
  margin:0;
  border-radius:10px;
  background:rgba(26,171,74,.15);
  border:1px solid rgba(34,197,94,.38);
  box-shadow:none;
  transition:background .25s var(--hs-ease),border-color .25s var(--hs-ease);
}
.hjc-app .hero__feat:hover .hero__feat-ic{
  background:rgba(26,171,74,.26);
  border-color:rgba(34,197,94,.6);
}
/* :not() clears the responsive-normalize.css clamp
   `svg:not([width]):not([data-large]):not(.svg-noclamp)`, which is three
   classes deep and would otherwise outrank a plain descendant selector. */
.hjc-app .hero__feat-ic svg:not(.svg-noclamp){
  width:18px;height:18px;color:var(--accent-light,#22C55E);
}

.hjc-app .hero__feat-title{
  grid-column:2;grid-row:1;
  font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:.1px;
  color:#fff;margin:0;
}
.hjc-app .hero__feat-desc{
  grid-column:2;grid-row:2;
  font-size:12px;line-height:1.45;
  color:rgba(255,255,255,.7);
  margin:0;
}

/* ═════════════════════════════════════════════ 2 · OUTLINE CTA PILLS ══
   Named for every variant, because home-premium.css sets each one's fill on its
   own selector and they all have to be overridden at equal weight.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .hero__course-btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:2px;
  /* The ≥1160px rule pulled this row 110px past .hero__inner so a FOURTH CTA
     could sit on the same line. There are three now and they fit inside the
     container, so the row goes back within its bounds. */
  margin-inline:0;
}

.hjc-app .hero__course-btn,
.hjc-app .hero__course-btn--foundation,
.hjc-app .hero__course-btn--inter,
.hjc-app .hero__course-btn--final,
.hjc-app .hero__course-btn--books{
  min-width:0;                          /* pills hug their label */
  padding:12px 26px;
  border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:.2px;
  color:#fff;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1.5px solid rgba(255,255,255,.34);
  box-shadow:none;
  transition:background .24s var(--hs-ease),border-color .24s var(--hs-ease),
             box-shadow .24s var(--hs-ease);
}
/* the inherited shine sweep — a filled-button effect, wrong on an outline */
.hjc-app .hero__course-btn::after{display:none;content:none}

.hjc-app .hero__course-btn:hover,
.hjc-app .hero__course-btn:active,
.hjc-app .hero__course-btn--books:hover{
  background:var(--accent-color,#1AAB4A);
  border-color:var(--accent-color,#1AAB4A);
  color:#fff;
  filter:none;
  box-shadow:0 14px 28px -14px rgba(26,171,74,.95);
}
.hjc-app .hero__course-btn svg:not(.svg-noclamp){width:17px;height:17px}

/* ═════════════════════════════════════════════ 3 · DIAGONAL EDGE ══════
   The three animated sine waves are hidden, not deleted — Home.razor keeps
   emitting them, and re-showing them is a one-line revert.

   The slice is two stacked wedges on the SAME element: a green one, and the
   page-coloured one 4% lower. The offset is what renders as the accent line,
   so it needs no third layer and no extra markup. Percentages keep the angle
   constant at every width.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .hero__wave{
  position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(52px,5.8vw,84px);       /* see the clearance rule on .hero */
  overflow:hidden;pointer-events:none;line-height:0;z-index:0;
}
.hjc-app .hero__wave-svg{display:none}

/* accent wedge — sits 4% higher, so only its top edge is ever visible */
.hjc-app .hero__wave::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--accent-color,#1AAB4A),var(--accent-light,#22C55E) 55%,var(--accent-color,#1AAB4A));
  -webkit-clip-path:polygon(0% 60%,100% 6%,100% 100%,0% 100%);
          clip-path:polygon(0% 60%,100% 6%,100% 100%,0% 100%);
}
/* the page-coloured wedge that the next section continues from */
.hjc-app .hero__wave::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#eef3fa,var(--hs-edge) 60%);
  -webkit-clip-path:polygon(0% 64%,100% 10%,100% 100%,0% 100%);
          clip-path:polygon(0% 64%,100% 10%,100% 100%,0% 100%);
}

/* ═════════════════════════════════════════════ 4 · TRUST TICKER ══════
   Sits in the band between the diagonal and the first course card — measured at
   76px on the left where the slice is low and ~120px on the right where it is
   high, all of it previously empty.

   Marquee mechanics: Home.razor renders the line list TWICE inside the track,
   and the track animates to exactly -50%. At that point pass 2 occupies the
   pixels pass 1 started on, so the loop restarts invisibly. Duration is set on
   the track, so more lines simply scroll faster unless it is raised with them.
   ═══════════════════════════════════════════════════════════════════════════ */

.hjc-app .trust-ticker{
  position:relative;
  overflow:hidden;
  /* the section below opens on this exact value — the strip has to continue it
     or a seam shows between the two */
  background:#f7f9fc;
  padding:15px 0 16px;
  border-bottom:1px solid rgba(10,31,92,.06);
  /* Fades the copy out at both edges instead of cutting it mid-letter. Also
     applied unprefixed for browsers that no longer need -webkit-. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

.hjc-app .trust-ticker__track{
  display:flex;
  align-items:center;
  width:max-content;            /* the track is as wide as its content, not the
                                   viewport, or -50% would be the wrong distance */
  animation:hs-ticker 34s linear infinite;
}
@keyframes hs-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Pausing on hover lets someone actually finish reading a line. */
.hjc-app .trust-ticker:hover .trust-ticker__track{animation-play-state:paused}

.hjc-app .trust-ticker__item{
  display:inline-flex;align-items:center;
  flex:0 0 auto;
  padding:0 26px;
  font-size:13px;font-weight:600;letter-spacing:.35px;
  color:rgba(10,31,92,.72);
  white-space:nowrap;
}

/* The separator is a rotated square — a diamond — so it reads as a mark rather
   than a bullet, and picks the band's accent back up. */
.hjc-app .trust-ticker__dot{
  width:5px;height:5px;
  margin-right:12px;
  flex:0 0 auto;
  background:var(--accent-color,#1AAB4A);
  transform:rotate(45deg);
}

/* The strip now carries the separation the section's own top padding used to
   provide, so that padding comes down to keep the total gap the same. */
.hjc-app .trust-ticker + .section{padding-top:clamp(18px,2.2vw,30px)}

/* ═══════════════════════════════════════════════════════ TABLET ══════
   The band folds to 2×2. The dividing rules have to fold with it: column 1
   loses its left rule, and row 2 gains a top one.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1024px){
  .hjc-app .hero__feats{grid-template-columns:repeat(2,1fr);max-width:680px}
  .hjc-app .hero__feat:nth-child(odd){border-left:none}
  .hjc-app .hero__feat:nth-child(even){border-left:1px solid var(--hs-rule)}
  .hjc-app .hero__feat:nth-child(n+3){border-top:1px solid var(--hs-rule)}
}

/* ═══════════════════════════════════════════════════════ MOBILE ══════ */

@media (max-width:768px){
  .hjc-app .hero__feats{
    max-width:100%;margin-bottom:22px;border-radius:14px;gap:0;
  }
  .hjc-app .hero__feat{padding:14px 12px;column-gap:10px;row-gap:3px}
  .hjc-app .hero__feat-ic{width:32px;height:32px;border-radius:9px}
  .hjc-app .hero__feat-ic svg:not(.svg-noclamp){width:15px;height:15px}
  .hjc-app .hero__feat-title{font-size:12.5px}
  .hjc-app .hero__feat-desc{font-size:10.5px;line-height:1.4}

  /* Restate the two-column grid. The base rule above sets display:flex, which
     is later in the cascade than home-premium's mobile grid and was silently
     replacing it — and because home-premium also gives the buttons width:100%
     at this width, a flex row put every pill on its own line and margin-inline:0
     pinned the 440px row to the left edge instead of centring it. */
  .hjc-app .hero__course-btns{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    max-width:440px;
    margin-inline:auto;
  }
  .hjc-app .hero__course-btn,
  .hjc-app .hero__course-btn--foundation,
  .hjc-app .hero__course-btn--inter,
  .hjc-app .hero__course-btn--final,
  .hjc-app .hero__course-btn--books{
    padding:11px 14px;font-size:13px;border-width:1.25px;
  }
  /* The CTA row is a 2-column grid here. With three buttons the third was left
     orphaned at half width against the left edge; spanning it closes the row. */
  .hjc-app .hero__course-btns .hero__course-btn:last-child{grid-column:1 / -1}

  /* height and padding move together — see the clearance rule on .hero */
  .hjc-app .hero__wave{height:clamp(36px,6vw,50px)}
  .hjc-app .hero{padding-bottom:clamp(46px,8vw,64px)}

  .hjc-app .trust-ticker{padding:11px 0 12px}
  .hjc-app .trust-ticker__item{padding:0 17px;font-size:11.5px;letter-spacing:.3px}
  .hjc-app .trust-ticker__dot{width:4px;height:4px;margin-right:9px}
  /* fewer pixels per second would crawl on a narrow screen */
  .hjc-app .trust-ticker__track{animation-duration:24s}
}

@media (max-width:400px){
  .hjc-app .hero__feat{padding:12px 10px;column-gap:9px}
  .hjc-app .hero__feat-ic{width:29px;height:29px}
  .hjc-app .hero__course-btn,
  .hjc-app .hero__course-btn--foundation,
  .hjc-app .hero__course-btn--inter,
  .hjc-app .hero__course-btn--final,
  .hjc-app .hero__course-btn--books{font-size:12px;padding:10px 10px}
}

/* ═══════════════════════════════════════════════ REDUCED MOTION ══════ */

@media (prefers-reduced-motion:reduce){
  .hjc-app .hero__feat,
  .hjc-app .hero__feat-ic,
  .hjc-app .hero__feat::after,
  .hjc-app .hero__course-btn{transition:none}

  /* The ticker stops moving, so the second (duplicate) pass would just sit there
     as visible repeated text — it is hidden, and what remains is centred. */
  .hjc-app .trust-ticker__track{
    animation:none;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    row-gap:6px;
  }
  .hjc-app .trust-ticker__track > .trust-ticker__item:nth-child(n+6){display:none}
  .hjc-app .trust-ticker{
    -webkit-mask-image:none;mask-image:none;   /* nothing scrolls past the edges */
  }
}