/* =========================================================
   gp-wp-template.css
   Shared "wp-hero + wp-card" layout used on perfect pages
   ========================================================= */

/* Match our template width */
.gp-wrap{ max-width: 1100px; }

/* =========================
   HERO (SAME AS TRAINING.PHP)
========================= */
.wp-hero{
  border-radius: 24px;
  padding: 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.24), transparent 55%),
    radial-gradient(800px 320px at 95% 10%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a1326 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.wp-hero-inner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content: space-between;
}

.wp-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wp-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  box-shadow: 0 0 0 5px rgba(96,165,250,.18);
}

.wp-title{
  margin: 10px 0 6px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.wp-title-brand{
  background: linear-gradient(135deg, #93c5fd, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wp-sub{
  margin: 0;
  color: rgba(255,255,255,.78);
  max-width: 74ch;
  font-size: 1.05rem;
}

.wp-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.wp-trust-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: 700;
  white-space: nowrap;
}
.wp-trust-pill i{ color:#93c5fd; }

/* =========================
   MAIN WRAP (SAME AS TRAINING.PHP)
========================= */
.wp-card{
  position: relative;
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(37,99,235,.06), transparent 55%),
    radial-gradient(900px 400px at 90% 10%, rgba(99,102,241,.05), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 24px 70px rgba(15,23,42,.12),
    0 2px 0 rgba(255,255,255,.65) inset;
}

/* =========================
   DARKER GREY SECTION CARDS (APPROVED)
========================= */
.gp-section-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(180deg, #d1d5db, #c7cdd6);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow:
    0 16px 44px rgba(15,23,42,.14),
    0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.gp-section-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(37,99,235,.60), rgba(99,102,241,.40), rgba(34,211,238,.30));
  opacity: .35;
}

.gp-section-card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.28);
  box-shadow:
    0 22px 64px rgba(15,23,42,.18),
    0 1px 0 rgba(255,255,255,.45) inset;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 991px){
  .wp-hero-inner{ flex-direction: column; }
  .wp-trust-pill{ width: 100%; justify-content:center; white-space: normal; }
  .wp-actions .btn{ width: 100%; }
}
@media (max-width: 991px){
  .wp-hero-inner{ flex-direction: column; }
  .wp-trust-pill{ width: 100%; justify-content:center; white-space: normal; }
  .wp-actions .btn{ width: 100%; }
}
@media (max-width: 576px){
  .wp-card{ padding: 16px; }
}