/*
Theme Name: Клік Едюкейшн
Author: kira_b
Description: A lightweight WordPress theme for a robotics school with pages: Home, Courses, About, Contacts.
Version: 1.0.0

*/



/* Basic Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#0b1220;}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;border:0;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:20px}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:#ffb703;color:#0b1220;font-weight:700}
.btn.secondary{background:#1e293b;color:#e2e8f0}
.btn.ghost{background:transparent;border:1px solid #334155;color:#e2e8f0}
.badge{padding:4px 8px;border-radius:20px;background:#0ea5e9;color:#001018;font-weight:700;font-size:12px}

/* Header */
.site-header{   padding: 20px;
  position:sticky;top:0;background:rgba(9,14,26,.8);backdrop-filter:blur(10px);border-bottom:1px solid #1f2937;z-index:999}
.navbar{ display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.navbar .menu{display:flex;gap:24px;align-items:center}
.menu a{color:#e5e7eb;opacity:.9}
.menu a.active,.menu a:hover{opacity:1}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff}
.logo .brand{font-size:20px}
.cta{display:flex;gap:10px}

/* Hero */
.hero{padding:60px 0;background:linear-gradient(135deg,#0b1220 0%,#0e1a35 50%,#18233f 100%);}
.hero .title{font-size:48px;line-height:1.1;font-weight:900;color:white;margin:0 0 10px}
.hero p{color:#cbd5e1;max-width:700px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.tile{padding:24px;border-radius:18px;background:linear-gradient(135deg, #1f2937, #385496);border:1px solid #263244;color:#f1f5f9;min-height:120px;font-weight:700;display:flex;align-items:flex-end}
.tile:nth-child(1){background:linear-gradient(135deg,#ff8c00,#ff3e3e)}
.tile:nth-child(2){background:linear-gradient(135deg,#7c3aed,#3b82f6)}
.tile:nth-child(3){background:linear-gradient(135deg,#06b6d4,#22c55e)}
.tile:nth-child(4){background:linear-gradient(135deg,#8b5cf6,#a855f7)}

/* Sections */
.section{padding:64px 0}
.section h2{color:#fff;margin:0 0 24px;font-size:32px}
.card{background:#0f172a;border:1px solid #1f2937;border-radius:16px;padding:20px;color:#e2e8f0}
.card .price{font-weight:900;font-size:20px;color:#fef08a}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kpi{background:#5576c4;border:1px solid #1f2937;border-radius:16px;padding:20px;text-align:center;color:#e2e8f0}
.kpi .num{font-size:28px;font-weight:900;color:#fff}
.muted{color:#94a3b8}
.tabs{display:flex;gap:8px;border-bottom:1px solid #1f2937;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:10px 14px;border-radius:10px;background:#0b1220;border:1px solid transparent;color:#e2e8f0;cursor:pointer}
.tab.active{border-color:#334155;background:#3c60b4}
.list{display:grid;gap:10px}
.list .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #1f2937;border-radius:10px;background:#0b1220}
.badge.green{background:#22c55e;color:#052e13}
.badge.yellow{background:#fde047;color:#2a1d00}
.badge.purple{background:#c084fc;color:#220537}

/* Footer */
.site-footer{padding:40px 0;background:#0b1220;border-top:1px solid #1f2937;color:#94a3b8}
.site-footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.site-footer h4{color:#fff;margin:0 0 12px}
.copy{padding-top:24px;border-top:1px solid #1f2937;margin-top:24px;text-align:center}
@media (max-width:960px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:repeat(2,1fr)}
  .hero .title{font-size:38px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
}



/* ===== HERO: mobile rescue patch ===== */
* { box-sizing: border-box; }
html, body { max-width:100%; overflow-x:hidden !important; }
img, video { max-width:100%; height:auto; display:block; }

/* планшети і телефони */
@media (max-width: 768px){
  .container{ max-width:100% !important; padding:0 14px !important; }

  .hero{ padding:20px 0 16px !important; }
  .hero-wrap{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .hero-title{
    font-size:clamp(26px, 7vw, 34px) !important;
    line-height:1.15 !important;
    letter-spacing:.2px;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    margin:0 !important;
  }
  .subtitle{ font-size:15px !important; margin:0 !important; }

  .hero-actions{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
  .hero-actions .btn{ width:100% !important; padding:12px 16px !important; border-radius:14px !important; }

  .hero-tiles{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:6px !important;
  }
  .hero-tile{
    min-height:62px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    display:flex !important; align-items:center !important; gap:12px !important;
  }
  .hero-tile .tile-icon{ width:42px !important; height:42px !important; }
  .hero-tile .tile-icon img{ width:28px !important; height:28px !important; }
  .tile-label{ font-size:15px !important; }
}

/* дуже вузькі екрани */
@media (max-width: 400px){
  .brand-text{ display:none !important; } /* ховаємо довгу назву в хедері */
}




/* === FIX: уніфікуємо селектори героя і тайлів (працює і з .hero .title, і з .hero-title) === */
@media (max-width: 768px){
  /* заголовок героя: підтримка і .hero .title, і .hero-title */
  .hero .title,
  .hero-title{
    font-size:clamp(26px, 7vw, 34px) !important;
    line-height:1.15 !important;
    letter-spacing:.2px;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    margin:0 !important;
  }
  /* підзаголовок: підтримка і .hero p, і .subtitle */
  .hero p,
  .subtitle{
    font-size:15px !important;
    margin:0 !important;
  }

  /* сітка тайлів: підтримка і .tiles/.tile, і .hero-tiles/.hero-tile */
  .hero-tiles,
  .tiles{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:6px !important;
  }
  .hero-tile,
  .tile{
    min-height:62px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    display:flex !important; align-items:center !important; gap:12px !important;
  }
  .hero-tile .tile-icon,
  .tile .tile-icon{ width:42px !important; height:42px !important; }
  .hero-tile .tile-icon img,
  .tile .tile-icon img{ width:28px !important; height:28px !important; }
  .tile-label{ font-size:15px !important; }
}

/* додатково: clamp і на десктопі, щоб не рвати рядки */
.hero .title,
.hero-title{
  font-size: clamp(32px, 3.6vw + 8px, 48px);
  line-height:1.1;
}

/* Reviews Carousel UI */
.reviews.rc{ position:relative; }
.rc-prev, .rc-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:none; place-items:center;
  border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10); color:#fff; font-size:22px; cursor:pointer;
  backdrop-filter: blur(4px);
}
.rc-prev{ left:8px; } .rc-next{ right:8px; }
.rc-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:-6px; display:none; gap:6px; }
.rc-dot{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; }
.rc-dot.is-active{ background:#fff; border-color:#fff; }

@media (max-width:900px){
  .rc--mobile .rc-prev, .rc--mobile .rc-next{ display:grid; }
  .rc--mobile .rc-dots{ display:flex; }
  /* приховуємо горизонтальний скролбар, але залишаємо скрол */
  .reviews .reviews-track::-webkit-scrollbar,
  .reviews .reviews-grid::-webkit-scrollbar{ height:8px; }
  .reviews .reviews-track::-webkit-scrollbar-thumb,
  .reviews .reviews-grid::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
  .reviews .reviews-track, .reviews .reviews-grid{
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
  }
}

/* === Header brand: показати назву на мобільному і не ламати лейаут === */
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; align-items:center; gap:8px; min-width:0; text-decoration:none; }
.brand img{ width:36px; height:36px; object-fit:contain; flex:0 0 auto; }

/* назва завжди видима */
.brand-text{
  display:block !important;
  font-weight:800;
  line-height:1.1;
  font-size: clamp(14px, 3.8vw, 18px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60vw;          /* щоб не впиралась у бургер */
  color:inherit;
}

/* на дуже вузьких — дозволяємо перенос у 2 рядки */
@media (max-width:420px){
  .brand-text{
    white-space:normal;
    max-width: calc(100vw - 120px);  /* ширина мінус відступи + бургер */
  }
  .nav-toggle{ margin-left:auto; }
}

/* якщо світла тема — переконайся, що текст читається */
.site-header .brand-text{ color: inherit; }  /* або напряму: #0f172a у світлій темі */