/*
 * Forsk Coding School | Mobile-app inspired design system
 * Branch: design/mobile-app-ui-20261012
 * Shared non-destructive layer for website, course, blog & careers templates.
 * Keep original course/placement content, photos, page URLs and metadata.
 */
:root {
  --forsk-app-blue:#1179ed;
  --forsk-app-blue-dark:#0954af;
  --forsk-app-ink:#101d39;
  --forsk-app-muted:#64748b;
  --forsk-app-bg:#f5f8ff;
  --forsk-app-line:#e4eaf4;
  --forsk-app-radius:22px;
  --forsk-app-shadow:0 12px 34px rgba(29,66,123,.075);
  color-scheme:light;
}
html{scroll-behavior:smooth}
body{color:var(--forsk-app-ink);-webkit-tap-highlight-color:transparent}
.site-main{background:#fff}
.site-main :is(h1,h2,h3,h4){letter-spacing:-.025em}
.site-main :is(p,li){overflow-wrap:break-word}
.site-main :is(a,button,input,select,textarea):focus-visible,
.forsk-app-tabbar a:focus-visible{
  outline:3px solid #f0b92e!important;outline-offset:3px;
}
.site-main img{max-width:100%}
.site-main :is(.tj-course-item,.blog-item,.forsk-program-card,.forsk-quick-card,.forsk-mentor-card,.forsk-feature,.forsk-split-card,.fsp-card){
  border-radius:var(--forsk-app-radius);
}
.site-main :is(.tj-course-item,.blog-item,.forsk-program-card,.forsk-quick-card,.forsk-mentor-card,.forsk-feature,.forsk-split-card){
  box-shadow:var(--forsk-app-shadow);
  border:1px solid var(--forsk-app-line);
  overflow:hidden;
  background:#fff;
}
.site-main :is(.tj-course-item,.blog-item,.forsk-program-card,.forsk-quick-card) img{
  max-width:100%;height:auto;
}
.site-main :is(.tj-page-header,.tj-breadcrumb-area){
  background:linear-gradient(140deg,#f3f8ff 0%,#f8fbff 65%,#eef4ff 100%);
}
.site-main :is(.tj-page-title,.breadcrumb-title){color:var(--forsk-app-ink)}
.site-main :is(.tj-btn-primary,.fsp-btn){border-radius:14px;transition:transform .18s ease,box-shadow .18s ease}
.site-main :is(.tj-btn-primary,.fsp-btn):hover{transform:translateY(-2px)}
.header-area .site_logo img{object-fit:contain}
.header-area.header-1.header-fixed{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--forsk-app-line)!important;
  box-shadow:0 5px 24px rgba(24,63,120,.045)!important;
}
.header-area .mainmenu .sub-menu{
  border-radius:16px!important;border:1px solid var(--forsk-app-line)!important;
  box-shadow:0 20px 48px rgba(19,52,105,.14)!important;
}
.header-area .mainmenu .sub-menu a:hover{color:var(--forsk-app-blue)!important;background:#eef6ff!important}
/* Compact working course-search shortcut; existing hamburger remains the full menu. */
.forsk-app-header-search{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  color:#283b59!important;background:#f3f7ff;border:1px solid #e6edf8;border-radius:14px;
  text-decoration:none!important;flex:none}
.forsk-app-header-search svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
/* Homepage: airy cards and image panels, styled similarly to placement success cards. */
.forsk-home .forsk-hero{background:linear-gradient(140deg,#fff,#f2f8ff 90%)}
.forsk-home .forsk-hero-copy{position:relative;z-index:1}
.forsk-home .forsk-section-title{color:var(--forsk-app-ink);line-height:1.12}
.forsk-home .forsk-section-soft{background:#f6f9ff}
.forsk-home .forsk-quick-card{padding:22px}
.forsk-home .forsk-program-card .media{overflow:hidden}
.forsk-home .forsk-program-card img{display:block;width:100%;object-fit:cover}
.forsk-home .forsk-feature{padding:24px}
.forsk-home .forsk-hero-media img{border-radius:20px}
.forsk-home .forsk-trust-pills > *{border-radius:999px}
.forsk-home .forsk-faq details{border-radius:16px;border:1px solid var(--forsk-app-line);background:#fff}
.forsk-home .forsk-enquiry-shell{border-radius:var(--forsk-app-radius)}
/* Directory: genuine portraits and company names; no unverified logo or employment badge. */
.fsp-shell{--fsp-blue:var(--forsk-app-blue);--fsp-ink:var(--forsk-app-ink);--fsp-bg:var(--forsk-app-bg);--fsp-border:var(--forsk-app-line)}
.fsp-container{max-width:1240px}
.fsp-intro h2{letter-spacing:-.035em}
.fsp-filter{border-radius:20px!important;box-shadow:var(--forsk-app-shadow)}
.fsp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fsp-grid .fsp-card{
  border:1px solid var(--forsk-app-line);background:#fff;border-radius:22px;
  overflow:hidden;box-shadow:var(--forsk-app-shadow);min-width:0;
}
.fsp-grid .fsp-card-top{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-bottom:16px}
.fsp-grid .fsp-card-photo{
  width:100%;max-width:none;height:210px;aspect-ratio:16/10;
  display:block;margin:0 0 17px;padding:0;border-radius:16px;
  overflow:hidden;background:linear-gradient(135deg,#dcecff,#f3f7ff);
}
.fsp-grid .fsp-card-photo img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;
  border-radius:0!important;object-fit:cover;object-position:center 20%;
}
.fsp-grid .fsp-card-photo .fsp-avatar{display:grid;place-items:center;width:100%;height:100%;font-size:clamp(32px,5vw,52px)}
.fsp-grid .fsp-card-top h3{font-size:clamp(19px,1.7vw,23px);line-height:1.25;letter-spacing:-.025em}
.fsp-grid .fsp-card-top h3 a{color:var(--forsk-app-ink)}
.fsp-grid .fsp-micro{font-size:12px;line-height:1.45}
.fsp-grid .fsp-actions{margin-top:auto;gap:8px;flex-wrap:wrap}
.fsp-grid .fsp-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.fsp-grid .fsv-card-path{border-radius:13px}
/* Public course/blog directory images and long titles remain readable in narrow cards. */
.tj-course-item .title,.blog-item .blog-title{overflow-wrap:anywhere}
.tj-course-item .tj-course-img{overflow:hidden}
.tj-course-item .tj-course-img img{width:100%;object-fit:cover}
.tj-course-item .tj-course-content{min-width:0}
/* Bottom tab bar is not fake login functionality; it links to real site destinations. */
.forsk-app-tabbar{display:none}
@media (max-width: 1199.98px){
  .fsp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 767.98px){
  html:root{scroll-padding-bottom:calc(178px + env(safe-area-inset-bottom,0px))}
  html body{padding-bottom:calc(171px + env(safe-area-inset-bottom,0px))!important}
  .site-main{overflow-x:clip}
  .header-area.header-1.header-fixed{min-height:68px}
  .header-area.header-1 .header-wrapper{min-height:68px!important;gap:10px!important}
  .header-area .header-bottom .container-fluid{padding-inline:16px}
  .header-area .site_logo img{max-width:150px!important;height:43px!important;width:auto!important}
  .header-area .mobile_menu_bar{margin-left:0!important;display:inline-flex!important;align-items:center;justify-content:center;
     width:44px;height:44px;border-radius:13px;background:#f3f7ff;border:1px solid #e6edf8}
  .forsk-app-header-search{display:inline-flex;margin-left:auto}
  .space-for-header{padding-top:69px!important}
  .site-main :is(.tj-page-header,.tj-breadcrumb-area){padding-block:34px 30px}
  .site-main :is(.tj-page-title,.breadcrumb-title){font-size:clamp(29px,7vw,39px);line-height:1.13;letter-spacing:-.045em}
  .site-main :is(.tj-course-section,.tj-blog-section,.forsk-content-section){padding-block:36px!important}
  .site-main .container,.fsp-container{padding-inline:0;max-width:100%;width:calc(100% - 28px)}
  .forsk-home .forsk-section{padding:42px 0}
  .forsk-home .forsk-hero{padding-block:24px 34px}
  .forsk-home .forsk-section-title{font-size:clamp(27px,7vw,37px)}
  .forsk-home .forsk-hero-copy :is(h1,h2){line-height:1.08;letter-spacing:-.04em}
  .forsk-home .forsk-quick-grid,.forsk-home .forsk-program-grid{gap:14px}
  .forsk-home .forsk-program-body{padding:18px}
  .forsk-home .forsk-quick-card,.forsk-home .forsk-feature{padding:18px}
  .forsk-home .forsk-actions{display:flex;gap:10px;flex-wrap:wrap}
  .forsk-home .forsk-actions .tj-btn-primary{min-height:46px}
  .fsp-shell{padding:30px 0 44px}
  .fsp-intro h2{font-size:clamp(26px,7vw,34px);line-height:1.12}
  .fsp-intro p{font-size:14px;line-height:1.65}
  .fsp-stats{gap:10px}
  .fsp-stat{border-radius:16px}
  .fsp-grid{grid-template-columns:1fr;gap:16px}
  .fsp-grid .fsp-card{padding:16px!important}
  .fsp-grid .fsp-card-photo{height:auto;aspect-ratio:16/10}
  .fsp-filter{padding:16px!important}
  .fsp-grid .fsp-actions .fsp-btn{flex:1;min-width:0;text-align:center}
  .fsp-notice{font-size:13px;line-height:1.6}
  .forsk-app-tabbar{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed!important;left:0;right:0;
    bottom:calc(86px + env(safe-area-inset-bottom,0px));
    z-index:2147482500!important;
    height:70px;align-items:center;
    padding:6px max(5px,env(safe-area-inset-left,0px)) 5px max(5px,env(safe-area-inset-right,0px));
    border-top:1px solid var(--forsk-app-line);
    background:rgba(255,255,255,.98);box-shadow:0 -7px 25px rgba(20,43,79,.06);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
  .forsk-app-tabbar__link{display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:3px;width:100%;height:59px;padding:5px 1px;border-radius:14px;
    font-size:10.5px;line-height:1.2;font-weight:600;color:#53657f!important;
    text-align:center;text-decoration:none!important;white-space:nowrap}
  .forsk-app-tabbar__icon{width:23px;height:23px;display:block;flex:none}
  .forsk-app-tabbar__link.is-current{color:#0969d2!important;background:#eaf3ff;font-weight:800}
  .forsk-app-tabbar__link:active{background:#eaf3ff}
  .forsk-menu-open .forsk-app-tabbar{visibility:hidden;pointer-events:none}
  #forsk-footer-mount .forsk-footer{padding-bottom:30px}
}
@media (max-width: 360px){
 .forsk-app-tabbar__link{font-size:9.5px;letter-spacing:-.025em}
 .forsk-app-tabbar__icon{width:21px;height:21px}
 .header-area .site_logo img{max-width:130px!important}
 .fsp-grid .fsp-actions{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .site-main :is(.tj-btn-primary,.fsp-btn){transition:none}
}

/* Featured profile matches the reference composition without fabricating a placement. */
.fsp-featured-alumni{
  display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);
  overflow:hidden;margin:0 0 28px;border:1px solid var(--forsk-app-line);
  border-radius:26px;background:#fff;box-shadow:0 20px 50px rgba(29,66,123,.09);
}
.fsp-featured-alumni__visual{position:relative;min-height:370px;overflow:hidden;background:#d8e9fc}
.fsp-featured-alumni__visual img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block}
.fsp-featured-alumni__photo-tag{
 position:absolute;left:20px;top:20px;background:#057c64;color:#fff;font-size:12px;letter-spacing:.01em;
 font-weight:800;border-radius:999px;padding:9px 15px;box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.fsp-featured-alumni__copy{
 padding:clamp(23px,4vw,52px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0
}
.fsp-featured-alumni__eyebrow{
 font-size:12px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:#0a826e;
 background:#dff7f1;border-radius:999px;padding:8px 13px;margin-bottom:14px
}
.fsp-featured-alumni__company{color:#1c283e;font-size:clamp(25px,3vw,38px);font-weight:850;letter-spacing:-.045em;margin:0 0 14px}
.fsp-featured-alumni__copy h2{font-size:clamp(26px,3vw,40px);font-weight:850;line-height:1.12;margin:0 0 8px}
.fsp-featured-alumni__role{font-weight:800;color:var(--forsk-app-blue);margin:0 0 15px}
.fsp-featured-alumni__intro{color:var(--forsk-app-muted);font-size:15px;line-height:1.6;margin:0 0 22px}
.fsp-featured-alumni__actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.fsp-featured-alumni__notice{font-size:12px;line-height:1.45;color:var(--forsk-app-muted);margin:3px 0 0}
@media (max-width:767.98px){
 .fsp-featured-alumni{grid-template-columns:1fr;border-radius:20px;margin-bottom:20px}
 .fsp-featured-alumni__visual{min-height:0;aspect-ratio:16/12}
 .fsp-featured-alumni__visual img{object-position:center 22%}
 .fsp-featured-alumni__copy{padding:20px}
 .fsp-featured-alumni__company{font-size:26px}
 .fsp-featured-alumni__copy h2{font-size:27px}
 .fsp-featured-alumni__actions{width:100%}
 .fsp-featured-alumni__actions .fsp-btn{flex:1;min-height:45px;justify-content:center;text-align:center}
 .fsp-featured-alumni__photo-tag{top:12px;left:12px}
}
@media(max-width:360px){
 .fsp-featured-alumni__actions{flex-direction:column}
 .fsp-featured-alumni__actions .fsp-btn{width:100%}
}

/* Lightweight placement tabs: every tab scrolls to a real section or filter. */
.fsp-quick-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.fsp-quick-tabs a{
 display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;
 min-height:44px;white-space:nowrap;border:1px solid #e6edf8;border-radius:14px;
 font-size:14px;font-weight:700;line-height:1.2;color:#657188;
 text-decoration:none;box-shadow:0 5px 12px rgba(20,43,79,.035);background:#f9fbff;
}
.fsp-quick-tabs a.is-active{color:#fff;background:#1179ed;border-color:#1179ed;box-shadow:0 6px 13px rgba(17,121,237,.19)}
.fsp-quick-tabs a:not(.is-active):hover{color:#0756ac;border-color:#a3c5ed}
@media(max-width:767.98px){
 .fsp-quick-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
 scrollbar-width:thin;padding-bottom:5px;gap:7px;margin-bottom:17px}
 .fsp-quick-tabs a{scroll-snap-align:start;flex:none;min-height:43px;font-size:12px;padding:10px 12px}
}