/* Home redesign overrides for existing Friendoza app
   - Scoped to #homePage so it won't affect other pages
   - Uses existing tokens where possible
*/

#homePage.fz-home{
  --fz-hero1:#2C3E50;
  --fz-hero2:#34495E;
  --fz-blue:#3B82F6;
  --fz-turq:#27E0C1;
  --fz-orange:#FF8A3D;
  --fz-shadow: 0 18px 50px rgba(2, 6, 23, .12);
  --fz-shadow-sm: 0 10px 26px rgba(2, 6, 23, .10);
  --fz-border: rgba(15, 23, 42, .10);
  --fz-radius-xl: 22px;
}

/* Give home more breathing space under header */
#homePage.fz-home .page-header{display:none;}

#homePage.fz-home .fz-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 22px 16px;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--fz-hero1), var(--fz-hero2));
  box-shadow: var(--fz-shadow);
  border: 1px solid rgba(255,255,255,.10);
}
#homePage.fz-home .fz-hero::before{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(700px 380px at 75% 15%, rgba(39,224,193,.28), transparent 55%),
    radial-gradient(900px 520px at 50% 65%, rgba(255,138,61,.16), transparent 60%);
  pointer-events:none;
}
#homePage.fz-home .fz-hero__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center;}
@media (max-width: 920px){#homePage.fz-home .fz-hero__inner{grid-template-columns:1fr;}}

#homePage.fz-home .fz-kicker{margin:0 0 10px;font-weight:600;opacity:.9;letter-spacing:.2px;}
#homePage.fz-home .fz-title{margin:0 0 10px;font-size:clamp(26px, 3.8vw, 46px);line-height:1.06;}
#homePage.fz-home .fz-gradient-text{
  background: linear-gradient(90deg, var(--fz-blue), var(--fz-turq));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
#homePage.fz-home .fz-subtitle{margin:0 0 14px;opacity:.92;font-size:clamp(14px, 1.6vw, 17px);}

#homePage.fz-home .fz-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin: 14px 0 14px;
}
@media (max-width:520px){#homePage.fz-home .fz-stats{grid-template-columns:1fr;}}
#homePage.fz-home .fz-stat{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
}
#homePage.fz-home .fz-stat__value{font-size:22px;font-weight:800;}
#homePage.fz-home .fz-stat__label{font-size:13px;opacity:.9;}

#homePage.fz-home .fz-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top: 6px;}
#homePage.fz-home .fz-btn{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  min-width: 160px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#homePage.fz-home .fz-btn--primary{
  color:#07111c;
  background: linear-gradient(135deg, var(--fz-blue), var(--fz-turq));
  box-shadow: 0 16px 40px rgba(59,130,246,.22);
}
#homePage.fz-home .fz-btn--primary:hover{transform: translateY(-2px);box-shadow: 0 22px 55px rgba(39,224,193,.24);}
#homePage.fz-home .fz-btn--ghost{
  color:#fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}
#homePage.fz-home .fz-btn--ghost:hover{transform: translateY(-2px); background: rgba(255,255,255,.10);}

#homePage.fz-home .fz-trust{display:flex;gap:10px;align-items:center;font-size:13px;opacity:.92;margin-top: 12px;border-left:2px solid rgba(39,224,193,.6);padding-left:12px;}

#homePage.fz-home .fz-visual{position:relative;min-height:320px;}
#homePage.fz-home .fz-photos{position:relative;height:320px;}
@media (max-width:920px){#homePage.fz-home .fz-visual{min-height:260px}#homePage.fz-home .fz-photos{height:260px}}

#homePage.fz-home .fz-photo{
  position:absolute;
  border-radius: 20px;
  background-size:cover;
  background-position:center;
  box-shadow: var(--fz-shadow);
  border:1px solid rgba(255,255,255,.14);
}
#homePage.fz-home .fz-photo--1{width:82%;height:70%;left:6%;top:6%;transform: rotate(-4deg);background-image: var(--fz-img1);}
#homePage.fz-home .fz-photo--2{width:72%;height:62%;left:22%;top:24%;transform: rotate(3deg);background-image: var(--fz-img2);}
#homePage.fz-home .fz-photo--3{width:58%;height:52%;left:10%;top:40%;transform: rotate(8deg);background-image: var(--fz-img3);}

#homePage.fz-home .fz-badge{
  position:absolute;
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(11,16,32,.58);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  font-size:13px;
  box-shadow: var(--fz-shadow-sm);
}
#homePage.fz-home .fz-badge--1{right:2%;top:14%;}
#homePage.fz-home .fz-badge--2{left:2%;bottom:10%;}

/* Popular activities grid inside home */
#homePage.fz-home .fz-block{margin-top: 18px;}
#homePage.fz-home .fz-block__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
#homePage.fz-home .fz-block__title{margin:0;font-size:20px;}
#homePage.fz-home .fz-block__desc{margin:0;color:#0b1220;font-weight:700;opacity:.9;}

#homePage.fz-home .fz-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){#homePage.fz-home .fz-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}

#homePage.fz-home .fz-card{
  background: #ffffff;
  border-radius: var(--fz-radius-xl);
  border:1px solid rgba(2,6,23,.12);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
#homePage.fz-home .fz-card:hover{transform: translateY(-4px); box-shadow: 0 20px 55px rgba(2, 6, 23, .12);}
#homePage.fz-home .fz-card__media{height:138px;background-image: var(--img);background-size:cover;background-position:center;}
@media (max-width:520px){#homePage.fz-home .fz-card__media{height:120px;}}
#homePage.fz-home .fz-card__body{padding:12px 12px 14px;}
#homePage.fz-home .fz-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
#homePage.fz-home .fz-card__title{margin:0;font-size:16px;line-height:1.2;color:#020617;font-weight:900;letter-spacing:.1px;}
#homePage.fz-home .fz-card__desc{margin:8px 0 10px;color:#0f172a;font-size:14px;line-height:1.5;min-height:36px;font-weight:700;}
#homePage.fz-home .fz-meta{display:flex;gap:10px;flex-wrap:wrap;color:#020617;opacity:1;font-size:13px;font-weight:900;}

#homePage.fz-home .fz-pill{
  font-size:12px;font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:#EEF6FF;
  border:1px solid rgba(59,130,246,.20);
  color:#0b2445;
  white-space:nowrap;
}
#homePage.fz-home .fz-pill--orange{background:#FFF2E8;border-color:rgba(255,138,61,.32);color:#522000;}

/* Testimonials */
#homePage.fz-home .fz-soft{
  margin-top: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(39,224,193,.10));
  border: 1px solid rgba(15, 23, 42, .06);
  padding: 14px;
}
#homePage.fz-home .fz-slider{display:flex;flex-direction:column;gap:12px;max-width:1100px;margin:0 auto;}
#homePage.fz-home .fz-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap:12px;
  overflow:hidden;
  padding-left: 0;
}
#homePage.fz-home .fz-tcard{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15, 23, 42, .10);
  border-radius: 20px;
  padding:14px;
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
}
#homePage.fz-home .fz-thead{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
#homePage.fz-home .fz-avatar{width:44px;height:44px;border-radius:999px;border:2px solid rgba(39,224,193,.55);object-fit:cover;}
#homePage.fz-home .fz-name{font-weight:900;}
#homePage.fz-home .fz-stars{color:#FFB020;font-size:12px;}
#homePage.fz-home .fz-quote{margin:0;color:#22314b;line-height:1.5;}
#homePage.fz-home .fz-controls{display:flex;align-items:center;justify-content:center;gap:10px;}
#homePage.fz-home .fz-iconbtn{width:40px;height:40px;border-radius:999px;border:1px solid rgba(15, 23, 42, .14);background: rgba(255,255,255,.65);cursor:pointer;display:grid;place-items:center;transition: transform .15s ease, background .15s ease;}
#homePage.fz-home .fz-iconbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.85);}
#homePage.fz-home .fz-dots{display:flex;gap:6px;align-items:center;}
#homePage.fz-home .fz-dot{width:8px;height:8px;border-radius:999px;background: rgba(15,23,42,.22);border:none;}
#homePage.fz-home .fz-dot.is-active{width:22px;background: linear-gradient(90deg, var(--fz-blue), var(--fz-turq));}

/* Hide the old tips section header spacing when we keep it */
#homePage.fz-home .section{margin-top: 18px;}

@media (prefers-reduced-motion: reduce){
  #homePage.fz-home *{transition:none !important; animation:none !important;}
}