/* =========================
   SUNLIGHT PAGE BASE
   ========================= */

.zt-sunlight{
  background:#fff;
  font-family:"futura-pt","Futura PT","Futura","Trebuchet MS",Arial,sans-serif;
  color:#0f172a;
}
h1, h2, h3, h4, h5, h6 {
  font-family:"futura-pt","Futura PT","Futura","Trebuchet MS",Arial,sans-serif;
}

.zt-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================
   BUTTONS (same system as FAQ)
   ========================= */

.zt-btn{
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}

.zt-btn-glow{
  background:linear-gradient(180deg,#ffb32c,#ffa000);
  color:#000;
  box-shadow:
    0 10px 30px rgba(255,160,0,0.45),
    0 0 0 4px rgba(255,160,0,0.12);
}
.zt-btn-glow:hover{
  box-shadow:
    0 14px 40px rgba(255,160,0,0.55),
    0 0 0 6px rgba(255,160,0,0.16);
  color:#000;
}

.zt-btn-secondary{
  background:#fff;
  color:#5c0f81;
  font-weight:700;
  border-radius:999px;
  padding:14px 22px;
  box-shadow:0 6px 18px rgba(92,15,129,0.12);
  border:1px solid rgba(92,15,129,0.15);
}
.zt-btn-secondary:hover{
  box-shadow:0 10px 26px rgba(92,15,129,0.18);
  color:#5c0f81;
}

/* reuse your FAQ card look */
.zt-faq-card{
  margin-bottom:24px;
  background:#fff;
  border-radius:20px;
  padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}
.zt-faq-card h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
}
.zt-faq-card ul{ padding-left:18px; }
.zt-faq-card li{ margin-bottom:10px; }
.zt-faq-card-cta{
  background:linear-gradient(180deg,#fcf2ff,#fff);
}
.zt-faq-chat-note{
  margin-top:14px;
  font-size:14px;
  color:#666;
  line-height:1.5;
}
.zt-faq-card.zt-faq-card-cta a{
  margin:5px;
  min-width:200px;
  text-align:center;
}

/* =========================
   HERO
   ========================= */

.zt-sunlight-hero{
  padding:200px 20px 70px;
  border-bottom:1px solid #f3f0f8;
  background:linear-gradient(180deg, transparent 80%, #ddd3ee38 99%);
}
.zt-sunlight-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 40px;
}

.zt-sunlight-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:5px 15px;
  border-radius:999px;
  border:1px solid rgb(255 160 0 / 36%);
  background:rgb(255 160 0 / 40%);
  color:#14002e;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0%),
    0 7px 16px rgb(0 0 0 / 11%),
    0 10px 24px rgba(255, 160, 0, 0.12);
  margin-bottom:10px;
}
.zt-sunlight-pill-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  background:#ffa000;
  box-shadow:0 0 12px rgba(255,160,0,0.9), 0 0 4px rgba(255,255,255,0.45);
}

.zt-sunlight-title{
  line-height:1.1;
  margin:0 0 18px;
  font-size:50px;
  font-weight:900;
  letter-spacing:-0.04em;
  color:#5c0f8c;
}

.zt-sunlight-subhead {
    font-size: 20px;
    color: #444;
    max-width: 560px;
}

.zt-sunlight-hero-actions{
  margin-top:28px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* right card */
.zt-sunlight-hero-right{
  background:#fff;
  border-radius:20px;
  padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}
.zt-sunlight-hero-right h4{
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
}

/* =========================
   HERO IMAGE CARD
   ========================= */

.zt-sunlight-imagecard{
  padding:0;
  overflow:hidden;
}

.zt-sunlight-hero-image {
    display: block;
    width: 100%;
    height: 275px;
    object-fit: cover;
}

.zt-sunlight-hero-imagecap{
  padding:18px 20px 20px;
  border-top:1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg, rgba(252,242,255,0.75), #fff);
}

.zt-sunlight-hero-imagetitle{
  font-weight:900;
  color:#5c0f81;
  letter-spacing:-0.01em;
  font-size:16px;
  margin-bottom:6px;
}

.zt-sunlight-hero-imagedesc{
  font-weight:700;
  color:#64748b;
  font-size:13px;
}

/* =========================
   SIDE FILTER BUTTONS
   ========================= */

.zt-sunlight-sidefilters{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zt-sidefilter{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15, 23, 42, 0.08);
  background:#fff;
  color:#333;
  font-weight:700;
}
.zt-sidefilter:hover{
  border-color: rgba(255,160,0,0.55);
  box-shadow:0 10px 26px rgba(255,160,0,0.10);
}
.zt-sidefilter.is-active{
  background:rgba(92,15,129,0.08);
  border-color:rgba(92,15,129,0.18);
  color:#5c0f81;
}

/* =========================
   FILTER BAR
   ========================= */

.zt-sunlight-filters{
  border-bottom:1px solid #f3f0f8;
  background:#fff;
  padding:18px 20px;
}
.zt-sunlight-filters-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.zt-sunlight-search input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  background:rgba(15,23,42,0.03);
  padding:12px 14px;
  font-weight:600;
  outline:none;
}
.zt-sunlight-search input:focus{
  border-color: rgba(255,160,0,0.75);
  box-shadow: 0 0 0 5px rgba(255,160,0,0.14);
  background:#fff;
}

.zt-sunlight-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.zt-chip{
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
  font-size:12px;
  font-weight:800;
  color:#1f2937;
}
.zt-chip:hover{
  border-color: rgba(255,160,0,0.55);
  box-shadow:0 10px 26px rgba(255,160,0,0.10);
}
.zt-chip.is-active{
  border-color: rgba(255,160,0,0.45);
  background: rgba(255,160,0,0.16);
  color:#14002e;
}
.zt-chip-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:99px;
  background:#ffa000;
  margin-right:8px;
  box-shadow:0 0 10px rgba(255,160,0,0.65);
  vertical-align:middle;
}

.zt-sunlight-sort select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  padding:12px 14px;
  font-weight:700;
  background:#fff;
}

/* =========================
   MAIN GRID
   ========================= */

.zt-sunlight-main{
  padding:70px 20px;
}
.zt-sunlight-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:40px;
}

.zt-sunlight-headingrow{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:18px;
}
.zt-sunlight-section-title{
  font-size:32px;
  font-weight:900;
  color:#5c0f81;
  margin:0;
}
.zt-sunlight-section-sub {
    margin-top: 6px;
    color: #555;
    font-size: 18px;
}

.zt-sunlight-meta{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  color:#475569;
  margin-top:8px;
}
.zt-sunlight-dot{
  width:8px;height:8px;
  border-radius:99px;
  background:#22c55e;
}

.zt-sunlight-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =========================
   RESOURCE CARD (FAQ-like)
   ========================= */

.zt-sun-card{
  background:#fff;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
  border:1px solid rgba(15,23,42,0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.zt-sun-card:hover{
  border-color: rgba(255,160,0,0.35);
  box-shadow:0 26px 80px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.zt-sun-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.zt-sun-card-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.zt-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.02em;
  border:1px solid rgba(15,23,42,0.08);
  background:#fff;
  color:#334155;
}
.zt-badge-video{
  background: rgba(255,160,0,0.16);
  border-color: rgba(255,160,0,0.28);
  color:#14002e;
}
.zt-badge-guide{
  background: rgba(92,15,140,0.10);
  border-color: rgba(92,15,140,0.18);
  color:#5c0f81;
}
.zt-badge-pdf{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.10);
  color:#1f2937;
}
.zt-badge-article{
  background: rgba(92,15,140,0.06);
  border-color: rgba(92,15,140,0.12);
  color:#5c0f81;
}
.zt-badge-tags{
  background:#fff;
  border-color: rgba(15,23,42,0.08);
  color:#475569;
  font-weight:800;
}

.zt-sun-card-action{
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  color:#5c0f81;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(92,15,129,0.16);
  background:#fff;
  box-shadow:0 6px 18px rgba(92, 15, 129, 0.10);
}
.zt-sun-card-action:hover{
  border-color: rgba(255,160,0,0.45);
  box-shadow:0 10px 26px rgba(255,160,0,0.14);
}

.zt-sun-card-title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.zt-sun-card-title a{
  color:#0f172a;
  text-decoration:none;
}
.zt-sun-card:hover .zt-sun-card-title a{
  color:#5c0f81;
}

.zt-sun-card-meta{
  font-size:13px;
  color:#64748b;
  font-weight:700;
}

/* load more + empty */
.zt-sunlight-loadmore{
  margin-top:22px;
  display:flex;
  justify-content:center;
}
.zt-sunlight-empty{
  margin-top:22px;
  padding:18px 16px;
  border-radius:16px;
  background: rgba(92,15,140,0.06);
  border:1px solid rgba(92,15,140,0.12);
  color:#5c0f81;
  font-weight:800;
  text-align:center;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (min-width: 992px){
  .zt-sunlight-filters-inner{
    grid-template-columns: 1fr 320px;
    gap:16px;
    align-items:center;
  }
  .zt-sunlight-chips{
    justify-content:flex-start;
  }
  .zt-sunlight-sort{
    justify-self:end;
    width:100%;
    max-width:320px;
  }
}

@media (max-width: 991px){
  .zt-sunlight-hero-inner,
  .zt-sunlight-grid{
    grid-template-columns: 1fr;
  }
  .zt-sunlight-title{
    font-size:34px;
  }
}