/* File: public/css/tradeschool-home.css
   Purpose: Homepage-only UI (load AFTER tradeschool.css)
   Scope: everything under .ts-home
*/

/* ========== Design Tokens (scoped) ========== */
.ts-home{
  --cn-navy:#0a1f44;
  --cn-ink:#0f172a;
  --cn-muted:#64748b;
  --cn-line:#e6eaf2;
  --cn-card:#ffffff;
  --cn-bg:#f7f9fc;
  --cn-brand:#3557ff;
  --cn-brand-600:#2a46d9;
  --cn-radius:18px;
  --cn-pill:999px;
  --cn-shadow:0 16px 40px rgba(12,18,36,.08);

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--cn-ink);
  background:var(--cn-bg);
  line-height:1.55;
  overflow-x:hidden; /* no accidental horizontal scroll */
}

/* ========== Utilities ========== */
.ts-home .container{
  max-width:1160px;
  margin-inline:auto;
}

.ts-home .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:var(--cn-pill); border:1px solid var(--cn-line);
  background:#fff; color:var(--cn-ink); font-weight:700; text-decoration:none; transition:.18s ease;
}
.ts-home .btn-primary{ background:var(--cn-brand); color:#fff; border-color:var(--cn-brand); }
.ts-home .btn-primary:hover{ background:var(--cn-brand-600); border-color:var(--cn-brand-600); }

.ts-home--dots{
  background:
    radial-gradient(circle at 1px 1px, rgba(9,22,43,.12) 1px, transparent 1px) 0 0/20px 20px,
    var(--cn-bg);
}

/* ========== Section Skins ========== */
.ts-home .ts-block{
  border:1px solid var(--cn-line);
  border-radius:var(--cn-radius);
  padding:clamp(16px,2.2vw,22px);
  box-shadow:var(--cn-shadow);
  background:#fff;
}

.ts-home .ts-skin--navy{
  background:radial-gradient(1200px 600px at 15% 0%, #17306b 0%, #0a1f44 65%, #091734 100%);
  color:#fff; border-color:transparent;
}

.ts-home .ts-skin--blue{   background:linear-gradient(180deg,#eef4ff,#ffffff); }
.ts-home .ts-skin--slate{  background:linear-gradient(180deg,#fafbfc,#ffffff); }
.ts-home .ts-skin--indigo{ background:linear-gradient(180deg,#eef2ff,#ffffff); border-color:#dde3fb; }
.ts-home .ts-skin--grey{   background:linear-gradient(180deg,#f6f8fb,#ffffff); }

/* Section titles */
.ts-home .section-title{
  font-size:clamp(22px,2.8vw,28px);
  font-weight:800; color:var(--cn-navy); margin:0; position:relative; padding-left:12px;
}
.ts-home .section-title::before{
  content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--cn-brand),#6b8cff);
}
.ts-home .section-head{
  display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .8rem;
}

/* ========== HERO (robust + no overflow) ========== */
.ts-home .hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(18px,2.4vw,28px);
  align-items:center;
  margin:clamp(6px,1vw,10px) 0 26px;
}
@media (max-width:1100px){
  .ts-home .hero{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); }
}
@media (max-width:920px){
  .ts-home .hero{ grid-template-columns:1fr; gap:14px; }
  .ts-home .hero-card{ order:1; }
  .ts-home .hero-visual{ order:2; min-height:220px; }
}

/* Prevent inner elements from forcing overflow */
.ts-home .hero, .ts-home .hero *{ min-width:0; }

.ts-home .hero-card{
  background:linear-gradient(180deg,#fff,#f7faff);
  border:1px solid var(--cn-line);
  border-radius:var(--cn-radius);
  padding:clamp(16px,2.2vw,22px);
  box-shadow:var(--cn-shadow);
}

.ts-home .hero-title{
  font-size:clamp(32px,4.2vw,46px);
  font-weight:800; letter-spacing:.2px; margin:0 0 .35rem; color:var(--cn-navy);
}
.ts-home .hero-sub{ margin:0 0 .9rem; color:var(--cn-muted); font-size:clamp(15px,1.7vw,17px); }

/* Search bar */
.ts-home .searchbar{
  display:block; align-items:center; gap:.6rem;
  border-radius:15px;	
  border:1px solid var(--cn-line);
  background:#fff; padding:.45rem .55rem .45rem .9rem; max-width:720px;
  overflow:hidden;
}
.ts-home .searchbar input{
  appearance:none; border:0; flex:1 1 240px; min-width:0;
  font-size:1rem; padding:.55rem .4rem; background:transparent; outline:0;
}
.ts-home .searchbar .btn-primary{ padding:.65rem .9rem; }

/* Hero visual */
.ts-home .hero-visual{
  
  border-radius:var(--cn-radius);
  overflow:hidden; box-shadow:var(--cn-shadow); border:1px solid var(--cn-line);
  background:linear-gradient(120deg,#e8f1ff,#fff);
  max-width:100%;
}
.ts-home .hero-visual img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
}

/* ========== TILES ========== */
.ts-home .tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px; margin:18px 0 28px;
}
.ts-home .tile{
  display:grid; grid-template-rows:160px auto;
  border:1px solid var(--cn-line); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--cn-shadow);
}

/* Generic thumb shell */
.ts-home .tile .thumb{
  display:flex; align-items:center; justify-content:center;
  height:160px; background:#eef4ff; border-bottom:1px solid var(--cn-line); overflow:hidden;
}
@media (max-width:520px){ .ts-home .tile .thumb{ height:140px; } }

.ts-home .tile .body{ padding:14px 16px 16px; }
.ts-home .tile .h3{ margin:0 0 .4rem; font-size:1.2rem; font-weight:800; color:var(--cn-ink); }
.ts-home .tile p{ margin:0; color:var(--cn-muted); }

/* ---- Explore Programs (icons should be smaller + centered)
   Target: the section that uses the blue skin for “Programs” ---- */
.ts-home .ts-skin--blue .tile .thumb{
  background:#f8faff;               /* softer behind glyphs */
}
.ts-home .ts-skin--blue .tile .thumb img{
  display:block !important;
  width:auto !important;
  height:76% !important;            /* smaller than full box */
  max-width:76% !important;
  object-fit:contain !important;
  margin:auto;
  padding:8px;
}

/* If a font icon or inline SVG is used inside program tiles */
.ts-home .ts-skin--blue .tile .thumb .bi,
.ts-home .ts-skin--blue .tile .thumb .icon-lg{
  font-size:72px; line-height:1; color:var(--cn-brand);
}
.ts-home .ts-skin--blue .tile .thumb svg{
  width:76%; height:76%;
}

/* ---- States / Cities (keep full-cover images) ---- */
.ts-home .ts-skin--slate .tile .thumb img,
.ts-home .ts-skin--indigo .tile .thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* Small helpers for inline flags/icons (outside thumbs) */
.ts-home .tile .flag{ width:22px; height:16px; border-radius:2px; box-shadow:0 0 0 1px var(--cn-line) inset; }
.ts-home .flag-lg{ width:64px; height:48px; border-radius:3px; object-fit:cover; }

/* ========== Stats Strip ========== */
.ts-home .stats{
  margin:6px 0 30px; padding:clamp(16px,2.2vw,22px);
  border-radius:16px; color:#fff;
  background:linear-gradient(90deg,#3255ff,#2e64ff 40%,#1a8fff 85%);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  box-shadow:var(--cn-shadow);
}
@media (max-width:900px){ .ts-home .stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ts-home .stats{ grid-template-columns:1fr; } }
.ts-home .stat .num{ font-size:clamp(26px,4vw,36px); font-weight:800; line-height:1; }
.ts-home .stat .label{ opacity:.92; font-weight:600; margin-top:6px; }

/* ========== Guides / Learn ========== */
.ts-home .guides{ margin:4px 0 28px; }
.ts-home .guides .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.ts-home .guide{
  border:1px solid var(--cn-line); border-radius:16px; background:#fff; overflow:hidden; box-shadow:var(--cn-shadow);
}
.ts-home .guide .illus{
  height:160px;
  background:
    radial-gradient(1px 1px at 10px 10px, rgba(53,87,255,.25) 1px, transparent 0) 0 0/22px 22px,
    #f9fbff;
  border-bottom:1px solid var(--cn-line);
}
.ts-home .guide .body{ padding:16px 16px 18px; }
.ts-home .guide h3{ margin:0 0 .35rem; font-size:1.15rem; font-weight:800; color:var(--cn-ink); }
.ts-home .guide p{ margin:0 0 .8rem; color:var(--cn-muted); }

/* ========== Newsletter / CTA ========== */
.ts-home .newsletter{
  margin:6px 0 26px; padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--cn-line); border-radius:16px; background:linear-gradient(180deg,#fff,#f7fbff);
  box-shadow:var(--cn-shadow); display:grid; gap:12px;
}
.ts-home .newsletter h2{ margin:0; font-size:clamp(22px,2.8vw,28px); font-weight:800; color:var(--cn-ink); }
.ts-home .newsletter .row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.ts-home .newsletter input{
  border:1px solid var(--cn-line); border-radius:10px; padding:.7rem .85rem; min-width:240px; outline:0;
}
.ts-home .newsletter input:focus{ border-color:var(--cn-brand); box-shadow:0 0 0 .18rem rgba(53,87,255,.14); }

/* ========== Recently Added Cards ========== */
.ts-home .card.ts-card{
  border:1px solid var(--cn-line);
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--cn-shadow);
}
.ts-home .card.ts-card .card-title{
  display:inline-block;
  margin:-14px 0 10px 14px; /* lifted “badge” look with breathing room */
  padding:8px 12px;
  background:#fff; border:1px solid var(--cn-line); border-radius:12px;
  box-shadow:0 8px 22px rgba(17,24,39,.08);
  font-weight:800; letter-spacing:.15px;
}
@media (max-width:640px){
  .ts-home .card.ts-card .card-title{ margin:-12px 0 10px 12px; }
}
.ts-home .meta-list{ list-style:none; padding:0; margin:.3rem 0 0; display:grid; gap:.25rem; font-size:.95rem; }
.ts-home .meta-list li{ display:flex; gap:.45rem; align-items:flex-start; color:#475569; }
.ts-home .meta-list .bi{ color:var(--cn-brand); margin-top:.15rem; }
.ts-home .meta-list strong{ color:var(--cn-muted); font-weight:700; margin-right:.25rem; }

/* ========== Footer band (optional) ========== */
.ts-home .footer-band{
  margin-top:30px; background:#091a34; color:#cdd6e6; padding:22px; border-radius:16px;
}
.ts-home .footer-band a{ color:#90c2ff; }

/* ========== Accessibility ========== */
.ts-home a{ color:var(--cn-brand); text-decoration:none; }
.ts-home a:hover{ text-decoration:underline; }
.ts-home .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}