@import url("fonts.css");

/* SkillzBook public home page — native build of the approved Home Page design. */
.sb-hp-page, .sb-hp-page * { box-sizing: border-box; }
/* Opt out of Boost's #page-wrapper flex column (min-height:100vh): as a flex item the
   hero's overflow:hidden lets flex-shrink collapse it to 0. Block flow = natural heights. */
.sb-hp-page { display: block !important; font-family: 'Archivo', sans-serif; background: #ffffff; color: #1f2a37; }
.sb-hp-hero { flex-shrink: 0; }
.sb-hp-page a { color: inherit; text-decoration: none; }
/* Structural links (nav, cards, buttons) keep their own hover colours; headings/
   card titles must never pick up the generic link-hover blue. */
.sb-hp-page .sb-hp-card:hover,
.sb-hp-page .sb-hp-card:hover .sb-hp-cardtitle { color: #1f2a37; }
.sb-hp-page :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Buttons — prefixed with .sb-hp-page so their colour beats the generic
   `.sb-hp-page a { color: inherit }` rule (otherwise a white button on the blue
   hero inherits white text and turns invisible). */
.sb-hp-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; cursor: pointer; border: 2px solid transparent; }
.sb-hp-page .sb-hp-btn-white { background: #ffffff; color: #0f7fb8; padding: 14px 22px; }
.sb-hp-page .sb-hp-btn-white:hover { background: #e6f5fc; color: #0f7fb8; }
.sb-hp-page .sb-hp-btn-outline { border-color: #ffffff; color: #ffffff; padding: 12px 20px; }
.sb-hp-page .sb-hp-btn-outline:hover { background: #ffffff; color: #0f7fb8; }
.sb-hp-btn-lg { padding: 16px 22px; font-size: 17px; }
.sb-hp-btn-lg.sb-hp-btn-outline:hover { background: #1590cc; color: #ffffff; }
.sb-hp-btn-wide { justify-content: space-between; gap: 48px; min-width: 220px; padding: 18px 22px; font-size: 17px; }

/* Header */
.sb-hp-header { position: sticky; top: 0; z-index: 20; background: #1ea7e1; border-bottom: 2px solid #1590cc; }
.sb-hp-headinner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sb-hp-logo { display: inline-flex; align-items: center; }
.sb-hp-logo img { height: 48px; width: auto; display: block; }
.sb-hp-nav { display: flex; align-items: center; gap: 8px; }
.sb-hp-navlink { padding: 10px 14px; color: #ffffff; font-weight: 600; font-size: 16px; }
.sb-hp-navlink:hover { background: #1590cc; color: #ffffff; }
.sb-hp-nav .sb-hp-btn-outline { margin-left: 8px; }

/* Hero */
.sb-hp-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #1ea7e1 0%, #1590cc 60%, #0f7fb8 100%); color: #ffffff; border-bottom: 2px solid #0f7fb8; }
.sb-hp-heroart { position: absolute; right: -6%; top: 50%; transform: translateY(-46%); width: min(52vw, 780px); height: auto; overflow: visible; pointer-events: none; }
.sb-hp-heroinner { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) 32px clamp(64px, 8vw, 104px); display: flex; flex-direction: column; gap: 28px; }
.sb-hp-kicker { display: flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.28em; }
.sb-hp-kicker span { width: 32px; height: 2px; background: #ffffff; }
.sb-hp-h1 { margin: 0; max-width: 760px; font-size: clamp(44px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.sb-hp-lead { margin: 0; max-width: 540px; font-size: 19px; line-height: 1.6; color: #e6f5fc; text-wrap: pretty; }
.sb-hp-herocta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Learning section */
.sb-hp-learn { background: #f4f6f8; border-bottom: 2px solid #e3e8ee; }
.sb-hp-learninner { max-width: 1280px; margin: 0 auto; padding: 88px 32px; }
.sb-hp-learnhead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 48px; align-items: end; padding-bottom: 40px; }
.sb-hp-learnheadtitle { display: flex; flex-direction: column; gap: 16px; }
.sb-hp-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.28em; color: #8e24aa; }
.sb-hp-h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.sb-hp-learnlead { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: #4b5866; text-wrap: pretty; }

.sb-hp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #dfe5eb; border: 2px solid #dfe5eb; }
/* Featured courses can be fewer than 4 — auto-fit so there's never an empty tile. */
#featured .sb-hp-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sb-hp-card { background: #ffffff; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; color: #1f2a37; }
.sb-hp-card:hover { background: #fbfcfd; color: #1f2a37; }
.sb-hp-cardicon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.sb-hp-cardicon i { color: #ffffff; font-size: 26px; line-height: 1; }
.sb-hp-cardicon span { width: 26px; height: 26px; background: #ffffff; display: block; }
.sb-hp-cardtitle { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.sb-hp-carddesc { font-size: 15.5px; line-height: 1.6; color: #4b5866; text-wrap: pretty; }
.sb-hp-cardfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 2px solid #eef1f4; font-weight: 700; font-size: 15px; }

/* How it works */
.sb-hp-how { background: #ffffff; border-bottom: 2px solid #e3e8ee; }
.sb-hp-howinner { max-width: 1280px; margin: 0 auto; padding: 88px 32px; }
.sb-hp-howhead { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }
.sb-hp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 2px solid #1f2a37; }
.sb-hp-step { padding: 32px 32px 8px 0; display: flex; flex-direction: column; gap: 14px; }
.sb-hp-stepnum { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #1ea7e1; }
.sb-hp-steptitle { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.sb-hp-stepdesc { max-width: 340px; font-size: 16px; line-height: 1.6; color: #4b5866; text-wrap: pretty; }

/* Final CTA (Blue band) */
.sb-hp-cta { background: #1ea7e1; color: #ffffff; border-bottom: 2px solid #e3e8ee; }
.sb-hp-ctainner { max-width: 1280px; margin: 0 auto; padding: 88px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: end; }
.sb-hp-ctatext { display: flex; flex-direction: column; gap: 16px; }
.sb-hp-ctah2 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.sb-hp-ctap { margin: 0; font-size: 18px; line-height: 1.6; max-width: 480px; opacity: 0.9; }
.sb-hp-ctabtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.sb-hp-cta .sb-hp-btn-wide { min-width: 240px; }
.sb-hp-cta .sb-hp-btn-white:hover { background: #ffffff; opacity: 0.92; }

/* Footer */
.sb-hp-footer { background: #1f2a37; }
.sb-hp-footinner { max-width: 1280px; margin: 0 auto; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sb-hp-footer .sb-hp-logo img { height: 40px; }
.sb-hp-footcopy { font-size: 14px; color: #c3ccd6; }

/* Responsive (mirrors the approved design) */
@media (max-width: 1100px) {
    .sb-hp-heroart { width: min(56vw, 560px); right: -18%; opacity: 0.55; }
    .sb-hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .sb-hp-nav .sb-hp-navlink { display: none; }
    .sb-hp-headinner { padding: 0 20px; }
    .sb-hp-learninner, .sb-hp-howinner, .sb-hp-ctainner { padding: 64px 20px; }
}
@media (max-width: 760px) {
    .sb-hp-heroart { display: none; }
    .sb-hp-heroinner { padding: 72px 20px 64px; }
}
@media (max-width: 620px) {
    .sb-hp-grid { grid-template-columns: minmax(0, 1fr); }
    .sb-hp-herocta .sb-hp-btn { flex: 1 1 auto; }
}