/* =========================================================================
   home.css — Styles scoped to the homepage only
   Loaded via {% block extra_head %} in index.html (ES) and en/index.html
   ========================================================================= */

/* ---------- Intro / intro card ---------- */
.home-intro{
  position: relative;
  padding: 34px 32px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(34,211,238,.035), transparent 60%),
    var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.home-intro::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width: 260px; height: 100%;
  background: radial-gradient(ellipse at 0% 50%, rgba(34,197,94,.10), transparent 70%);
  pointer-events:none;
}
.home-intro-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:14px;
}
.home-intro-kicker .dot{
  width:6px; height:6px; border-radius:999px;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
.home-intro h2{
  font-size: clamp(24px, 2.6vw, 32px);
  line-height:1.2;
  margin:0 0 14px;
}
.home-intro p{
  color: var(--muted);
  line-height: 1.75;
  margin: 10px 0;
  max-width: 72ch;
}
.home-intro p strong{ color: var(--text); font-weight:600; }

/* ---------- Section heading (reusable in home) ---------- */
.home-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 24px;
  text-align:center;
}
.home-head-eyebrow{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--brand2);
  font-weight:600;
}
.home-head h2{
  font-size: clamp(26px, 3vw, 38px);
  line-height:1.15;
  margin:0;
}
.home-head p{
  color: var(--muted);
  font-size:16px;
  max-width: 64ch;
  margin: 6px auto 0;
  line-height:1.6;
}

/* ---------- Courses grid ---------- */
.home-courses{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width: 960px){ .home-courses{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .home-courses{ grid-template-columns: 1fr; } }

.home-course{
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.15)),
    var(--panel);
  box-shadow: var(--shadow-soft);
  display:flex; flex-direction:column; gap:14px;
  overflow:hidden;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.home-course::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(34,211,238,.35), transparent 40%, rgba(34,197,94,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.home-course:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.home-course:hover::before{ opacity:1; }

.home-course-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color: var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.home-course-tag .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(34,197,94,.12);
  color: var(--brand);
  border:1px solid rgba(34,197,94,.3);
  font-weight:600;
}
.home-course-tag .pill.soon{
  background: rgba(245,158,11,.10);
  color: var(--warn);
  border-color: rgba(245,158,11,.3);
}
.home-course-tag .pill .d{
  width:6px; height:6px; border-radius:999px; background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.home-course-tag .code{ color: var(--text); font-weight:700; }

.home-course h3{
  margin:0;
  font-size: 22px;
  line-height:1.2;
}
.home-course p{
  margin:0;
  color: var(--muted);
  line-height:1.65;
  font-size: 14.5px;
  flex:1;
}
.home-course-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 4px;
}
.home-course .btn{ min-width:auto; }

/* ---------- Methodology timeline ---------- */
.home-steps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}
@media (max-width: 780px){ .home-steps{ grid-template-columns: 1fr; } }

.home-step{
  position:relative;
  padding: 26px 26px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 100% 0%, rgba(34,211,238,.06), transparent 50%),
    var(--panel);
  overflow:hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.home-step:hover{ border-color: rgba(34,211,238,.30); transform: translateY(-3px); }
.home-step-num{
  position:absolute;
  top: -18px; right: -6px;
  font-size: 120px;
  font-weight: 800;
  line-height:1;
  background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(34,197,94,.03));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  user-select:none;
  pointer-events:none;
}
.home-step-ico{
  width: 44px; height:44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(34,197,94,.12));
  border: 1px solid rgba(34,211,238,.22);
  display:grid; place-items:center;
  font-size: 22px;
  margin-bottom: 12px;
}
.home-step h3{
  margin:0 0 8px;
  font-size: 19px;
  line-height:1.25;
}
.home-step p{
  margin:0;
  color: var(--muted);
  line-height:1.65;
  font-size: 14.5px;
}

/* ---------- "Why" list ---------- */
.home-why{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
@media (max-width: 780px){ .home-why{ grid-template-columns: 1fr; } }

.home-why-item{
  position:relative;
  padding: 16px 18px 16px 54px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(18,22,35,.35);
  transition: border-color .3s ease, background .3s ease;
}
.home-why-item:hover{
  border-color: rgba(34,211,238,.28);
  background: rgba(18,22,35,.55);
}
.home-why-item::before{
  content:"";
  position:absolute;
  top:20px; left:18px;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 4px 14px rgba(34,197,94,.35);
}
.home-why-item::after{
  content:"";
  position:absolute;
  top: 27px; left: 25px;
  width: 9px; height: 5px;
  border-left: 2px solid #0b1020;
  border-bottom: 2px solid #0b1020;
  transform: rotate(-45deg);
}
.home-why-item strong{
  display:block;
  font-size: 15.5px;
  color: var(--text);
  margin-bottom:4px;
}
.home-why-item span{
  display:block;
  color: var(--muted);
  font-size: 14px;
  line-height:1.6;
}

/* ---------- Instructor teaser / CTF teaser ---------- */
.home-split{
  position:relative;
  padding: 30px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(120deg, rgba(34,211,238,.06), rgba(34,197,94,.04) 40%, transparent 70%),
    var(--panel);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items:center;
  overflow:hidden;
}
@media (max-width: 780px){
  .home-split{ grid-template-columns: 1fr; padding: 26px 22px; }
}
.home-split::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width: 45%; height: 100%;
  background: radial-gradient(circle at 80% 50%, rgba(34,211,238,.10), transparent 60%);
  pointer-events:none;
}
.home-split h2{
  margin:0 0 10px;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height:1.2;
  position:relative;
}
.home-split p{
  margin:0 0 8px;
  color: var(--muted);
  line-height:1.7;
  position:relative;
  max-width: 62ch;
}
.home-split p strong{ color: var(--text); }
.home-split .home-split-actions{
  display:flex; gap: 10px; flex-wrap:wrap;
  position:relative;
}

/* ---------- FAQ ---------- */
.home-faq{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-faq details{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(18,22,35,.45);
  overflow:hidden;
  transition: border-color .25s ease, background .25s ease;
}
.home-faq details[open]{
  border-color: rgba(34,211,238,.28);
  background: rgba(18,22,35,.65);
}
.home-faq summary{
  list-style: none;
  cursor:pointer;
  padding: 18px 56px 18px 22px;
  font-weight:600;
  font-size: 16px;
  color: var(--text);
  position:relative;
  user-select:none;
}
.home-faq summary::-webkit-details-marker{ display:none; }
.home-faq summary::after{
  content:"";
  position:absolute;
  top: 50%;
  right: 22px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
}
.home-faq details[open] summary::after{
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--brand2);
}
.home-faq-body{
  padding: 0 22px 20px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
  animation: faqIn .3s ease;
}
@keyframes faqIn{
  from{ opacity:0; transform: translateY(-4px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ---------- Final CTA ---------- */
.home-cta-final{
  position:relative;
  padding: 36px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(34,211,238,.10), transparent 55%),
    var(--panel);
  display:flex;
  gap: 22px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  overflow:hidden;
}
.home-cta-final h2{
  margin:0 0 6px;
  font-size: clamp(22px, 2.4vw, 28px);
}
.home-cta-final p{
  margin:0;
  color: var(--muted);
  max-width: 56ch;
}
.home-cta-final .home-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Hero CTA (adjust if present) ---------- */
.hero-cta{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
}

/* ---------- Mobile fine-tuning (<560px) ---------- */
@media (max-width: 560px){
  .home-intro{ padding: 24px 20px; }
  .home-intro h2{ font-size: 22px; }
  .home-intro p{ line-height: 1.65; font-size: 15px; }

  .home-head{ margin-bottom: 18px; }
  .home-head h2{ font-size: 24px; }

  .home-course{ padding: 22px 18px; }
  .home-course h3{ font-size: 19px; }

  .home-step{ padding: 22px 20px 18px; }
  .home-step-num{ font-size: 90px; top: -12px; right: -4px; }
  .home-step-ico{ width: 40px; height: 40px; font-size: 20px; }
  .home-step h3{ font-size: 17px; }

  .home-why-item{ padding: 14px 16px 14px 48px; }
  .home-why-item::before{ top: 17px; left: 16px; }
  .home-why-item::after{ top: 24px; left: 23px; }

  .home-split{ padding: 24px 20px; }
  .home-split h2{ font-size: 20px; }

  .home-faq summary{ padding: 16px 48px 16px 18px; font-size: 15px; }
  .home-faq summary::after{ right: 18px; }
  .home-faq-body{ padding: 0 18px 18px; font-size: 14.5px; }

  .home-cta-final{ padding: 28px 22px; }
  .home-cta-final h2{ font-size: 22px; }
}

/* ---------- Mobile refinements (≤480px) ---------- */
@media (max-width: 480px){
  /* Intro card: reduce padding to keep text readable */
  .home-intro{ padding: 26px 20px; }
  .home-intro h2{ font-size: 22px; }
  .home-intro p{ font-size: 15px; line-height: 1.65; }

  /* Course cards: compact padding */
  .home-course{ padding: 22px 18px; }
  .home-course h3{ font-size: 19px; }
  .home-course p{ font-size: 14px; }

  /* Methodology cards */
  .home-step{ padding: 22px 20px; }
  .home-step-num{ font-size: 90px; top: -12px; }
  .home-step h3{ font-size: 18px; }
  .home-step p{ font-size: 14px; }

  /* Why list */
  .home-why-item{ padding: 14px 16px 14px 48px; }
  .home-why-item::before{ top: 16px; left: 14px; width: 20px; height: 20px; }
  .home-why-item::after{ top: 23px; left: 20px; }
  .home-why-item strong{ font-size: 15px; }
  .home-why-item span{ font-size: 13.5px; }

  /* Split blocks (instructor / CTF teaser) */
  .home-split{ padding: 22px 20px; }
  .home-split h2{ font-size: 20px; }
  .home-split p{ font-size: 14.5px; }

  /* FAQ */
  .home-faq summary{ padding: 16px 48px 16px 18px; font-size: 15px; }
  .home-faq summary::after{ right: 18px; }
  .home-faq-body{ padding: 0 18px 18px; font-size: 14px; }

  /* Final CTA */
  .home-cta-final{ padding: 26px 22px; }
  .home-cta-final h2{ font-size: 20px; }
  .home-cta-final p{ font-size: 14.5px; }

  /* Section headings */
  .home-head h2{ font-size: 24px; }
  .home-head p{ font-size: 14.5px; }
}

/* ---------- Extra narrow (≤360px, old iPhones / small Androids) ---------- */
@media (max-width: 360px){
  .home-intro{ padding: 22px 16px; }
  .home-course{ padding: 20px 16px; }
  .home-step{ padding: 20px 16px; }
  .home-why-item{ padding: 12px 14px 12px 44px; }
  .home-split{ padding: 20px 16px; }
  .home-cta-final{ padding: 22px 18px; }
}