/* ===========================
   Frontpage custom styles (responsive improved)
   =========================== */

/* ---------- BASE / HERO ---------- */
.hero-modern {
  --hero-grad-1: #072a60;
  --hero-grad-2: #007fa8;
  --hero-grad-3: #00bcd4;
  position: relative;
  background: linear-gradient(135deg,var(--hero-grad-1) 0%,var(--hero-grad-2) 55%,var(--hero-grad-3) 100%);
  color: #fff;
  overflow: hidden;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.hero-modern .hero-title {
  font-weight: 800;
  letter-spacing: -0.5px;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.02;
  color: #fff;
  margin-bottom: .6rem;
}

.hero-modern .hero-desc {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Search */
.hero-search .form-control {
  background: rgba(255,255,255,0.98);
  border-radius: 0.6rem;
  padding: .72rem 1rem;
  font-size: 0.95rem;
}
.hero-search .input-group-text {
  background: rgba(255,255,255,0.9);
  border-radius: .6rem 0 0 .6rem;
  border: none;
}

/* Right card */
.hero-right .card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #222;
}

/* shapes */
.hero-shapes { position: absolute; inset: 0; pointer-events:none; z-index:0; }
.hero-shapes .shape { position:absolute; opacity:.28; transform-origin:center; animation: floatSlow 8s ease-in-out infinite; }
.hero-shapes .shape-1 { right:-160px; bottom:-120px; width:520px; height:520px; }
.hero-shapes .shape-2 { left:-80px; top:-80px; width:260px; height:260px; transform: rotate(14deg); animation-delay: 2s; }
@keyframes floatSlow { 0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)} }

/* hero stats */
.hero-stats { margin-top: 1rem; display:flex; gap:1.25rem; flex-wrap:wrap; }
.hero-stats li { display:flex; flex-direction:column; gap:3px; color: rgba(255,255,255,0.95); }
.hero-stats .stat-num { font-weight:700; font-size:1.02rem; }

/* ---------- CATEGORIES ---------- */
.category-tile { text-decoration: none; color: inherit; display:block; }
.tile-inner {
  border-radius: 10px;
  transition: transform .22s ease, box-shadow .22s ease;
  background: #fff;
  padding: .8rem;
  display:flex;
  align-items:center;
}
.category-tile:hover .tile-inner { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(2,6,23,0.06); }
.tile-icon {
  width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}

/* ---------- QUIZZES ---------- */
.quiz-card { border-radius: 10px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; background:#fff; }
.quiz-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,.07); }
.quiz-card .card-img-top { height:170px; object-fit:cover; width:100%; display:block; }

/* badges */
.badge-live, .badge-upcoming {
  position: absolute; left: 12px; top: 12px; padding: .28rem .6rem; font-weight:700; border-radius: 20px; font-size: .72rem; box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}
.badge-live { background: linear-gradient(90deg,#ff3b30,#ff6b5c); color: #fff; }
.badge-upcoming { background: #fff; color:#222; opacity:0.95; }

.badge-live .pulse {
  display:inline-block; width:8px; height:8px; background:#fff; border-radius:50%; margin-left:6px; box-shadow:0 0 0 0 rgba(255,255,255,0.4); animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%{transform:scale(0.9); box-shadow:0 0 0 0 rgba(255,255,255,0.4)} 70%{transform:scale(1); box-shadow:0 0 0 12px rgba(255,255,255,0)} 100%{transform:scale(0.9); box-shadow:0 0 0 0 rgba(255,255,255,0)} }

/* countdown */
.quiz-countdown { font-weight:600; color:#0f172a; display:block; }

/* ---------- BLOG ---------- */
.post-card { border-radius: 10px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; background:#fff; }
.post-card:hover { transform: translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,.06); }
.post-card .card-img-top{ height:200px; object-fit:cover; width:100%; display:block; }

/* ---------- CTA ---------- */
.cta-big { background: linear-gradient(90deg,#0b62c9,#00bcd4); color:#fff; margin-top:1.5rem; padding: 2.25rem 1rem; }
.cta-big .rounded-3 { background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); }

/* ---------- Forms ---------- */
#fe_subscribe .form-control { border-radius: .6rem; padding: .7rem 1rem; }

/* ---------- Interactions (tilt) ---------- */
/* disable 3D tilt on touch devices (pointer: coarse) */
@media (pointer: coarse) {
  .interactive-card .card { transition: none !important; transform: none !important; box-shadow: none !important; }
  .interactive-card { perspective: none; }
}

/* keep hover/tilt only for mouse users */
@media (hover: hover) and (pointer: fine) {
  .interactive-card .card { will-change: transform; transition: transform .18s ease, box-shadow .18s ease; }
}

/* ---------- Accessibility & touch targets ---------- */
.btn, .form-control, .tile-inner { -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
.tile-inner { min-height: 72px; }

/* ---------- Small tweaks for visual balance ---------- */
.quiz-card .card-body { min-height: 140px; display:flex; flex-direction:column; }
.post-card .card-body { min-height: 160px; display:flex; flex-direction:column; }

/* ---------- RESPONSIVE RULES ---------- */

/* Medium and below (tablets) */
@media (max-width: 991px) {
  .hero-modern { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .hero-shapes .shape-1, .hero-shapes .shape-2 { opacity: .18; transform: translateY(-6px); }
  .hero-stats { gap: .8rem; }
  .tile-icon { width:56px; height:56px; font-size:16px; }
  .tile-inner { padding: .7rem; }
  .quiz-card .card-img-top { height:160px; }
  .post-card .card-img-top { height:170px; }
  .cta-big { padding: 1.75rem 1rem; }
}

/* Small screens (phones) */
@media (max-width: 767px) {
  .hero-modern {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: linear-gradient(180deg,var(--hero-grad-1),var(--hero-grad-2));
  }

  /* stack hero columns */
  .hero-modern .row.align-items-center { align-items: flex-start; }
  .hero-right { margin-top: 1.25rem; }

  /* adjust hero text */
  .hero-modern .hero-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .hero-modern .hero-desc { font-size: 0.95rem; }

  /* search becomes vertical */
  .hero-search .input-group { flex-direction: row; }
  .hero-search .form-control { font-size: .95rem; }

  /* hide shapes to save CPU/bandwidth */
  .hero-shapes { display:none; }

  /* categories: 2 per row on phones */
  .category-tile { display:block; }
  .tile-inner { padding: .6rem; align-items:center; }
  .tile-icon { width:48px; height:48px; font-size:14px; border-radius:10px; }

  /* quizzes and blog cards stack to single column */
  .quiz-card .card-img-top { height:150px; }
  .post-card .card-img-top { height:150px; }

  /* increase tappable areas */
  .tile-inner, .btn { min-height: 56px; }

  /* reduce shadow intensity for performance */
  .tile-inner, .quiz-card, .post-card { box-shadow: 0 10px 24px rgba(2,6,23,0.06); }

  /* center CTA contents */
  .cta-big .rounded-3 { padding: 1.25rem; }
}

/* Extra small (very small phones) */
@media (max-width: 480px) {
  .hero-modern { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .hero-modern .hero-title { font-size: 1.4rem; }
  .hero-stats { gap: .6rem; font-size: .92rem; }
  .tile-inner { padding: .5rem; }
  .tile-icon { width:44px; height:44px; font-size:13px; }
  .quiz-card .card-img-top, .post-card .card-img-top { height:130px; }
  .hero-search .form-control { padding: .6rem .75rem; }
  #fe_subscribe .form-control { font-size: 0.95rem; }
}

/* ---------- Utility: reduce hover effects on touch to avoid accidental lifts ---------- */
@media (pointer: coarse) {
  .category-tile:hover .tile-inner, .quiz-card:hover, .post-card:hover { transform: none; box-shadow: 0 8px 18px rgba(2,6,23,0.05); }
}