/* Heraa — internal pages, shapes, calculators, campaign layouts
   Brand tokens from hira-theme.css :root */

/* —— Soft section surfaces / decorative shapes —— */
.section-soft{background:var(--soft-2)}
.section-soft-2{background:var(--soft)}
.section-cream{background:var(--cream)}
.surface-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:clamp(18px,2.2vw,28px);
}
.surface-card--flush{padding:0;overflow:hidden}
.surface-accent{
  border-top:3px solid var(--accent);
  padding-top:18px;
}
.mark-bar{
  width:28px;height:3px;background:var(--accent);border-radius:1px;display:inline-block;
}

/* —— About / legal —— */
.about-page-content,.legal-page-shell{
  max-width:720px;margin:0 auto;
  color:var(--ink);font-size:16.5px;line-height:1.8;
}
.about-page-content h2,.legal-page-shell h2,
.about-page-content h3,.legal-page-shell h3{
  font-family:var(--font-display);color:var(--primary-dark);margin:1.5em 0 .55em;
}
.about-page-content p,.legal-page-shell p{margin:0 0 1em}
.about-page-content a,.legal-page-shell a{color:var(--primary);font-weight:700}
.about-page-content a:hover,.legal-page-shell a:hover{color:var(--accent)}

/* Dedicated About layout (partials/heraa/pages/about) */
.about-page-shell .about-cta{margin-top:20px;display:inline-flex}
.about-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.about-photo-item{
  margin:0;overflow:hidden;background:var(--soft);
  aspect-ratio:4/3;border-radius:0;
}
.about-photo-item:nth-child(1),
.about-photo-item:nth-child(6){grid-column:span 2;aspect-ratio:16/10}
.about-photo-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s ease;
}
.about-photo-item:hover img{transform:scale(1.04)}
.about-section-actions{
  display:flex;justify-content:center;margin-top:28px;
}
.about-team-teaser{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);
  align-items:center;
}
.about-team-teaser-copy h2{
  font-family:var(--font-display);font-size:clamp(24px,3vw,34px);
  color:var(--primary-dark);margin:8px 0 12px;
}
.about-team-teaser-copy p{color:var(--muted);margin:0 0 20px;max-width:36em}
.about-team-teaser-photos{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.about-team-teaser-photos img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--soft);
}
@media (max-width:900px){
  .about-photo-grid{grid-template-columns:1fr 1fr;gap:8px}
  .about-photo-item:nth-child(1),
  .about-photo-item:nth-child(6){grid-column:span 1;aspect-ratio:1}
  .about-team-teaser{grid-template-columns:1fr}
}
@media (max-width:560px){
  .about-photo-grid{grid-template-columns:1fr}
}
.heraa-prose,.public-prose{color:var(--ink);line-height:1.8;font-size:16px}
.heraa-prose h2,.public-prose h2,.heraa-prose h3,.public-prose h3{
  font-family:var(--font-display);color:var(--primary-dark);margin:1.4em 0 .5em;
}
.heraa-prose p,.public-prose p{margin:0 0 1em}
.heraa-prose img,.public-prose img{border-radius:var(--radius-sm);margin:1em 0}

/* —— Team —— */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-top:8px;
}
.team-card{text-align:center}
.team-card-photo{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radius-sm);background:var(--soft);margin-bottom:14px;display:block;
}
.team-card-fallback{
  width:100%;aspect-ratio:1;border-radius:var(--radius-sm);background:var(--soft);
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;font-weight:800;color:var(--primary);margin-bottom:14px;
  font-family:var(--font-display);
}
.team-card h3{
  margin:0 0 4px;font-size:17px;color:var(--primary-dark);font-family:var(--font-display);
}
.team-card .team-role{
  display:block;font-size:13.5px;color:var(--accent);font-weight:700;margin-bottom:8px;
}
.team-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}

/* —— Reports —— */
.reports-wrap{margin-top:12px}
.reports-year{margin-bottom:2rem}
.reports-year h3{
  font-size:1.15rem;color:var(--primary-dark);margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--line);font-family:var(--font-display);
}
.reports-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.report-card{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:var(--white);text-decoration:none;color:inherit;
  transition:border-color .2s ease,background .2s ease;
}
.report-card:hover{border-color:var(--primary);background:var(--soft-2)}
.report-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--accent-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.report-card strong{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.report-card small{font-size:12px;color:var(--muted)}

/* —— Campaign donate page —— */
.campaign-donate-page{
  padding:clamp(40px,6vw,72px) 0;
  background:linear-gradient(180deg, var(--soft) 0%, var(--white) 42%);
}
.campaign-layout{
  display:grid;grid-template-columns:1.55fr .9fr;gap:clamp(24px,3vw,40px);align-items:start;
}
.campaign-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.campaign-aside{min-width:0}
.campaign-aside-sticky{position:sticky;top:calc(var(--header-h) + 16px)}
/* Page (non-hero) donate-card: same shell as system .donate-card, solid surface for soft page bg */
.campaign-aside .donate-card{
  background:var(--white);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.campaign-aside .donation-progress{margin-bottom:4px}
.campaign-media{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;background:var(--soft);
}
.campaign-media img{width:100%;height:100%;object-fit:cover;display:block}
.campaign-media-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(74,74,74,.55) 0%, transparent 55%);
  pointer-events:none;
}
.campaign-media-badges{
  position:absolute;top:14px;inset-inline:14px;
  display:flex;justify-content:space-between;gap:8px;pointer-events:none;
}
.campaign-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.96);color:var(--primary-dark);
  padding:7px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:800;
  border:1px solid var(--white);
}
.campaign-badge--urgent{background:var(--primary);color:var(--white);border-color:var(--primary)}
.campaign-media-caption{
  position:absolute;bottom:0;inset-inline:0;padding:18px 20px;
  color:#fff;font-size:14.5px;font-weight:700;line-height:1.55;max-width:36rem;
}
.campaign-panel,
.campaign-story,
.campaign-progress-box{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:clamp(18px,2vw,26px);
}
.campaign-story h2,
.campaign-impact-effects h2,
.campaign-gallery-title{
  margin:0 0 12px;font-size:clamp(18px,2vw,22px);color:var(--primary-dark);
  font-family:var(--font-display);
}
.campaign-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.campaign-stat{
  text-align:center;padding:14px 10px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
}
.campaign-stat strong{
  display:block;font-size:1.35rem;color:var(--primary);font-family:var(--font-display);
}
.campaign-stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.campaign-effects{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.campaign-effect{
  display:block;padding:18px 16px;background:var(--white);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.campaign-effect:hover{
  border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-soft);
}
.campaign-effect-amt{
  font-size:1.2rem;font-weight:800;color:var(--ink);margin:0 0 6px;
  font-family:var(--font-display);
}
.campaign-effect p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.campaign-effect-cta{
  display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--primary);
}
.campaign-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.campaign-gallery a{
  display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-sm);border:1px solid var(--line-soft);
}
.campaign-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.campaign-gallery a:hover img{transform:scale(1.05)}
.campaign-video{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:#111;
}
.campaign-video iframe{width:100%;height:100%;border:0;display:block}
.campaign-trust{
  margin-top:14px;padding:14px;text-align:center;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--soft-2);
}
.campaign-trust p{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.campaign-trust span{font-size:12px;color:var(--muted);margin-inline:8px}
.campaign-aside-fallback{
  text-align:center;padding:28px 20px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
}
.campaign-aside-fallback h3{margin:0 0 8px;color:var(--primary-dark)}
.campaign-aside-fallback p{margin:0 0 16px;font-size:14px;color:var(--muted)}

/* Urgency CTA band — brand watermark (matches page-hero / footer mark treatment) */
.campaign-urgency-cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(48px,7vw,80px) 0;
  background:
    radial-gradient(ellipse 48% 85% at 6% 8%, rgba(255,255,255,.14) 0%, transparent 58%),
    radial-gradient(ellipse 42% 70% at 96% 92%, rgba(0,0,0,.16) 0%, transparent 55%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-2) 100%);
  color:#fff;text-align:center;
}
.campaign-urgency-cta::before{
  content:"";
  position:absolute;inset-inline:0;top:0;height:3px;
  background:var(--accent);
  z-index:2;pointer-events:none;
}
.campaign-urgency-cta::after{
  content:"";
  position:absolute;
  inset-inline-end:clamp(-140px,-12vw,-36px);
  top:50%;
  transform:translateY(-50%);
  width:min(380px,56vw);
  height:min(380px,56vw);
  background:url("../images/logo/hira-mark-white.svg?v=12") center / contain no-repeat;
  opacity:.16;
  pointer-events:none;
  z-index:0;
}
.campaign-urgency-cta .container{position:relative;z-index:1}
.campaign-urgency-cta h2{color:#fff!important;margin:0 0 12px;font-size:clamp(22px,3vw,32px)}
.campaign-urgency-cta p{color:rgba(255,255,255,.88);max-width:560px;margin:0 auto 24px;font-size:15px;line-height:1.7}
.campaign-urgency-cta .btn-on-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:var(--primary-dark);font-weight:800;
  padding:14px 28px;border-radius:var(--radius-sm);text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.campaign-urgency-cta .btn-on-dark:hover{background:var(--soft);transform:translateY(-1px)}

@media (max-width:640px){
  .campaign-urgency-cta::after{
    inset-inline-end:clamp(-100px,-18vw,-28px);
    width:min(260px,72vw);
    height:min(260px,72vw);
    opacity:.12;
  }
}

/* —— Bank transfer / subscription —— */
.inner-narrow{width:min(640px,92%);margin:0 auto}
.bank-steps{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:12px}
.bank-steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.55}
.bank-step-num{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.bank-amount-box{
  padding:16px;border-radius:var(--radius-sm);background:var(--soft);border:1px solid var(--line);
  margin-bottom:1.25rem;
}
.bank-amount-box p{margin:0 0 4px;font-size:13px;color:var(--muted)}
.bank-amount-box strong{font-size:1.75rem;color:var(--primary);font-family:var(--font-display)}
.bank-dl{display:grid;gap:14px;margin:0 0 1.25rem;font-size:14px}
.bank-dl > div{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.bank-dl dt{color:var(--muted);margin:0}
.bank-dl dd{margin:0;font-weight:700;color:var(--ink);text-align:end;word-break:break-all}
.copy-field-btn{
  border:1px solid var(--line);background:var(--white);color:var(--primary);
  border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;
}
.copy-field-btn:hover{background:var(--soft)}
.bank-note{
  font-size:14px;color:var(--muted);line-height:1.65;
  padding:14px;background:var(--soft-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  margin-bottom:1rem;
}
.bank-contact{
  padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--accent-soft);
  margin-bottom:1rem;
}
.bank-contact h3{margin:0 0 6px;font-size:14px;color:var(--primary-dark)}
.bank-contact p{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.bank-contact-actions{display:flex;flex-wrap:wrap;gap:8px}
.alert-ok{
  padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  background:var(--soft);border:1px solid var(--line);color:var(--primary-dark);margin-bottom:1rem;
}
.alert-err{
  padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  background:#FDF2F2;border:1px solid #E8C5C5;color:var(--primary-dark);margin-bottom:1rem;
}
.sub-status{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:800;
}
.sub-status--active{background:var(--soft);color:var(--primary)}
.sub-status--paused{background:var(--accent-soft);color:var(--accent)}
.sub-status--other{background:var(--line-soft);color:var(--muted)}
.sub-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14px;margin:0}
.sub-meta dt{color:var(--muted);margin:0 0 2px}
.sub-meta dd{margin:0;font-weight:700;color:var(--ink)}
.btn-danger{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #E8C5C5;background:#FDF2F2;color:var(--primary-dark);
  padding:12px 18px;border-radius:var(--radius-sm);font-weight:800;font-size:14px;cursor:pointer;
}
.btn-danger:hover{background:#F8E4E4}

/* —— Calculators —— */
.zakat-calculator,.kaffarah-calculator{
  background:var(--soft-2);padding:clamp(28px,4vw,48px) 0;
}
.zakat-calculator--embedded,.kaffarah-calculator--embedded{
  background:transparent;padding:18px 0;
}
.calc-shell{width:min(900px,92%);margin:0 auto}
.zakat-calculator--embedded .calc-shell,
.kaffarah-calculator--embedded .calc-shell{width:100%;max-width:none}
.calc-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);margin-bottom:1.25rem;overflow:hidden;
}
.calc-card-pad{padding:clamp(16px,2vw,24px)}
.calc-card-head{
  background:var(--primary);color:#fff;padding:14px 20px;
  font-size:17px;font-weight:800;font-family:var(--font-display);
}
.calc-card-head h2{margin:0;color:#fff;font-size:inherit}
.calc-info{
  display:flex;gap:12px;align-items:flex-start;
  padding:clamp(16px,2vw,22px);background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:1.25rem;
}
.calc-info h3{margin:0 0 6px;color:var(--primary-dark);font-size:16px}
.calc-info p{margin:0;font-size:14px;color:var(--muted);line-height:1.65}
.calc-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.calc-toolbar label{font-weight:800;color:var(--ink);font-size:14px}
.calc-rates{margin-top:10px;font-size:12px;color:var(--muted)}
.calc-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:clamp(16px,2vw,24px);
}
.calc-field-wide{grid-column:1 / -1}
.zakat-label{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--ink);margin-bottom:8px;
}
.zakat-input-wrap{position:relative;display:flex;align-items:center}
.zakat-input,.kaffarah-days-input,.zakat-select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;min-height:48px;background:var(--soft-2);color:var(--ink);
  font:inherit;font-weight:700;transition:border-color .2s ease,box-shadow .2s ease;
}
.zakat-input:focus,.kaffarah-days-input:focus,.zakat-select:focus{
  outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(178,44,46,.1);background:#fff;
}
.zakat-currency{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:800;color:var(--muted);pointer-events:none;
}
.zakat-calculator[dir="rtl"] .zakat-input{text-align:right;padding-left:3.5rem;padding-right:1rem}
.zakat-calculator[dir="ltr"] .zakat-input{text-align:left;padding-right:3.5rem;padding-left:1rem}
.zakat-select{appearance:none;cursor:pointer;padding-inline-end:2.5rem}
.zakat-select-wrap{position:relative;width:min(100%,16rem)}
.zakat-select-icon{
  position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;font-size:12px;
}
.zakat-price-hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.calc-actions{padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.calc-result{
  border-top:1px solid var(--line-soft);background:linear-gradient(180deg,var(--soft) 0%,#fff 100%);
  padding:clamp(20px,2.5vw,32px);text-align:center;
}
.calc-result.is-visible,.calc-result:not(.hidden){display:block}
.calc-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:800;margin-bottom:12px;
}
.calc-badge--ok{background:var(--soft);color:var(--primary)}
.calc-badge--warn{background:var(--accent-soft);color:var(--accent)}
.calc-result-label{font-size:13px;color:var(--muted);margin:0 0 4px}
.calc-result-value{font-size:1.35rem;font-weight:800;color:var(--ink);margin:0 0 14px}
.calc-result-due{font-size:2.25rem;font-weight:900;color:var(--primary);margin:0 0 18px;font-family:var(--font-display)}
.calc-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.calc-ref{
  display:flex;align-items:center;gap:12px;padding:14px;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--white);
}
.calc-ref-ico{
  width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.calc-ref p{margin:0;font-size:12px;color:var(--muted)}
.calc-ref strong{display:block;font-size:13.5px;color:var(--ink);margin-top:2px}
.zakat-spinner{
  display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--primary);border-radius:50%;animation:hira-spin .7s linear infinite;
}
@keyframes hira-spin{to{transform:rotate(360deg)}}

.kaffarah-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1rem}
.kaffarah-type-card{position:relative;cursor:pointer}
.kaffarah-radio{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.kaffarah-type-content{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 12px;border:2px solid var(--line);border-radius:var(--radius);
  text-align:center;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.kaffarah-type-content:hover{border-color:var(--cream);background:var(--soft-2)}
.kaffarah-radio:checked + .kaffarah-type-content{
  border-color:var(--primary);background:var(--soft);
  box-shadow:0 0 0 3px rgba(178,44,46,.1);
}
.kaffarah-type-label{font-size:14px;font-weight:800;color:var(--ink)}
.kaffarah-type-desc{font-size:12px;color:var(--muted)}
.kaffarah-counter{display:flex;align-items:center;gap:10px;max-width:14rem}
.kaffarah-counter button{
  width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--soft-2);font-size:18px;font-weight:800;color:var(--ink);cursor:pointer;
}
.kaffarah-counter button:hover{background:var(--soft);border-color:var(--primary)}
.kaffarah-days-input{width:5rem;text-align:center;font-size:1.2rem}
.kaffarah-meal{
  display:flex;align-items:center;gap:12px;padding:14px;margin:14px 0;
  background:var(--soft-2);border-radius:var(--radius-sm);font-size:14px;color:var(--muted);
}
.kaffarah-meal strong{color:var(--primary)}

/* —— Videos (vx / vd) brand remap —— */
.vx-section{padding:36px 0 12px;background:var(--soft-2)}
.vx-section--all{padding-bottom:80px}
.vx-section-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--line);
}
.vx-section-title{font-size:1.35rem;font-weight:800;color:var(--primary-dark);line-height:1.4;margin:0;font-family:var(--font-display)}
.vx-section-meta{
  display:inline-block;margin-top:6px;font-size:12px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px;
}
.vx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.vx-card{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.vx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.vx-thumb-link{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--soft),var(--cream));
  text-decoration:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
}
button.vx-thumb-link{appearance:none;-webkit-appearance:none}
.vx-thumb-link img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.vx-card:hover .vx-thumb-link img{transform:scale(1.05)}
.vx-thumb-placeholder{
  width:100%;height:100%;display:block;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary),var(--accent));
}
.vx-thumb-gradient{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(138,34,36,.55) 0%,rgba(178,44,46,.12) 45%,transparent 70%);
  opacity:.55;transition:opacity .3s ease;
}
.vx-card:hover .vx-thumb-gradient{opacity:.85}
.vx-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.96);
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,box-shadow .25s ease;pointer-events:none;z-index:2;
}
.vx-play svg{width:24px;height:24px;fill:var(--primary);margin-inline-start:3px}
.vx-card:hover .vx-play{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 8px 28px rgba(0,0,0,.28),0 0 0 4px rgba(219,118,39,.35);
}
.vx-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.vx-card-body h3{
  font-size:15px;font-weight:700;line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vx-card-body h3 a{color:var(--ink);text-decoration:none}
.vx-card-body h3 a:hover{color:var(--primary)}
.vx-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.vx-playlist-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  color:var(--primary);background:var(--soft);padding:2px 8px;border-radius:999px;
}
.vx-empty{
  grid-column:1/-1;text-align:center;padding:80px 0;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.vx-pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:40px 0 0}
.vx-pg-btn{
  padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;
  color:var(--ink);border:1px solid var(--line);text-decoration:none;transition:all .2s ease;
}
.vx-pg-btn:hover{background:var(--soft);color:var(--primary)}
.vx-pg-btn.disabled{opacity:.35;pointer-events:none}
.vx-pg-nums{display:flex;align-items:center;gap:4px}
.vx-pg-num{
  width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
}
.vx-pg-num:hover{background:var(--soft)}
.vx-pg-num.active{background:var(--primary);color:#fff;font-weight:800}

.vd-breadcrumb a:hover{color:var(--accent)}
.vd-title{color:var(--primary-dark)!important}
.vd-playlist-badge,.vd-tag:hover{color:var(--primary)}
.vd-tag:hover{border-color:var(--primary)}

.vd-wrap{padding:12px 0 64px;background:var(--soft-2)}
.vd-player{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:#111;border:1px solid var(--line);margin-bottom:22px;
}
.vd-player iframe,.vd-player video{width:100%;height:100%;border:0;display:block}
.vd-fallback-img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.vd-noembed,.vd-noembed-box{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);gap:8px;text-align:center;padding:20px;
}
.vd-info{margin-bottom:36px}
.vd-title{
  margin:0 0 10px;font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:800;
  color:var(--primary-dark);font-family:var(--font-display);line-height:1.35;
}
.vd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:12px}
.vd-dot{opacity:.5}
.vd-playlist-badge{
  display:inline-flex;font-size:12px;font-weight:700;color:var(--primary);
  background:var(--soft);padding:3px 10px;border-radius:999px;
}
.vd-excerpt{margin:0 0 14px;color:var(--ink);line-height:1.7;font-size:15.5px;max-width:720px}
.vd-tags{display:flex;flex-wrap:wrap;gap:8px}
.vd-tag{
  display:inline-flex;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;
}
.vd-tag:hover{color:var(--primary);border-color:var(--primary);background:var(--soft-2)}
.vd-related{padding-top:8px;border-top:1px solid var(--line)}

.amount-btn--with-effect{
  min-height:4.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
}

@media (max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .campaign-layout{grid-template-columns:1fr}
  .campaign-aside-sticky{position:static}
  .campaign-stats{grid-template-columns:repeat(2,1fr)}
  .campaign-effects{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .team-grid,.reports-grid,.calc-fields,.calc-ref-grid,.kaffarah-types,.sub-meta,
  .campaign-gallery,.campaign-effects{grid-template-columns:1fr}
  .campaign-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .campaign-layout{display:flex;flex-direction:column}
  .campaign-aside{order:-1}
}