/* Nahj Qatar — Executive Workshops page (page-workshops.php): the approved workshops design.
   Loaded only on the Workshops page (inc/workshops.php); every rule is scoped to .workshops-page with
   ws- class names, so the header, footer and other pages are never affected. */

.workshops-page {
  --ws-maroon: #650014;
  --ws-maroon-2: #8d1730;
  --ws-gold: #c9a227;
  --ws-ink: #350812;
  --ws-cream: #fbf8f1;
  background:
    radial-gradient(circle at 8% 18%, rgba(201,162,39,.07), transparent 24%),
    radial-gradient(circle at 92% 44%, rgba(101,0,20,.055), transparent 25%),
    var(--ws-cream);
  color: #321019;
  overflow-x: clip;
}
.workshops-page a { color: inherit; text-decoration: none; }
.workshops-page a:focus-visible { outline: 3px solid rgba(201,162,39,.55); outline-offset: 3px; }

/* Reading progress bar (design) */
.workshops-page .ws-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #c9a227, #f0d778, #650014);
  z-index: 9999;
  box-shadow: 0 0 10px rgba(201,162,39,.45);
  pointer-events: none;
}

/* ---------- Hero ---------- */
.workshops-page .ws-hero {
  min-height: 335px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: 40px 0;
  background:
    linear-gradient(90deg, rgba(101,0,20,.045), transparent 30%, transparent 70%, rgba(201,162,39,.07)),
    radial-gradient(circle at 50% 115%, rgba(201,162,39,.16), transparent 32%),
    linear-gradient(180deg, #fffdf9 0%, #f7f1e7 100%);
  border-bottom: 1px solid rgba(201,162,39,.12);
}
.workshops-page .ws-hero::before,
.workshops-page .ws-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.workshops-page .ws-hero::before {
  width: 520px;
  height: 520px;
  left: -245px;
  top: -275px;
  border: 1px solid rgba(101,0,20,.09);
  box-shadow: inset 0 0 0 22px rgba(201,162,39,.025);
  animation: ws-floatSlow 8s ease-in-out infinite;
}
.workshops-page .ws-hero::after {
  width: 480px;
  height: 480px;
  right: -235px;
  bottom: -290px;
  border: 1px solid rgba(201,162,39,.16);
  animation: ws-floatSlow 9s ease-in-out infinite reverse;
}
.workshops-page .ws-hero-content {
  width: min(950px, 92%);
  text-align: center;
  position: relative;
  z-index: 2;
  animation: ws-heroIn .8s ease both;
}
.workshops-page .ws-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  background: linear-gradient(180deg, #fff6d8, #f4e6b7);
  border: 1px solid rgba(201,162,39,.38);
  color: var(--ws-maroon);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 13px;
  box-shadow: 0 10px 25px rgba(112,74,0,.08);
  animation: ws-premiumFloat 4s ease-in-out infinite;
}
.workshops-page .ws-eyebrow svg { color: var(--ws-gold); }
.workshops-page .ws-hero h1 {
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.35;
  font-weight: 900;
  background: linear-gradient(135deg, #350812 0%, #721329 55%, #420913 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.workshops-page .ws-hero p {
  max-width: 680px;
  margin: 13px auto 0;
  color: #65707c;
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
}
.workshops-page .ws-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 22px auto 0;
  width: 250px;
}
.workshops-page .ws-divider i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--ws-gold)); }
.workshops-page .ws-divider i:last-child { background: linear-gradient(90deg, var(--ws-gold), transparent); }
.workshops-page .ws-diamond {
  width: 8px;
  height: 8px;
  background: var(--ws-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(201,162,39,.08);
  animation: ws-spin 4s linear infinite;
}

/* ---------- Workshop list ---------- */
.workshops-page .ws-list { position: relative; padding: 55px 0 95px; min-height: 420px; }
.workshops-page .ws-list::before,
.workshops-page .ws-list::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .5;
}
.workshops-page .ws-list::before { right: -90px; top: 80px; background: radial-gradient(circle, rgba(201,162,39,.13), transparent 68%); }
.workshops-page .ws-list::after { left: -90px; bottom: 70px; background: radial-gradient(circle, rgba(101,0,20,.09), transparent 68%); }
.workshops-page .ws-container { width: min(1040px, 92%); margin: auto; display: grid; gap: 30px; position: relative; z-index: 1; }

.workshops-page .ws-card {
  min-height: 205px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 23px;
  box-shadow: 0 5px 0 rgba(101,0,20,.02), 0 24px 65px rgba(55,0,12,.09);
  display: grid;
  grid-template-columns: 315px minmax(0, 1fr);
  direction: ltr;                 /* image on the left, as in the design */
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(35px);
  animation: ws-cardReveal .75s cubic-bezier(.2,.8,.2,1) forwards;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease;
}
.workshops-page .ws-card:nth-child(1) { animation-delay: .08s; }
.workshops-page .ws-card:nth-child(2) { animation-delay: .24s; }
.workshops-page .ws-card:nth-child(3) { animation-delay: .36s; }
.workshops-page .ws-card:hover {
  transform: translateY(-9px);
  border-color: rgba(201,162,39,.38);
  box-shadow: 0 9px 0 rgba(101,0,20,.025), 0 32px 75px rgba(55,0,12,.15);
}
.workshops-page .ws-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--ws-gold), var(--ws-maroon-2));
  border-radius: 0 10px 10px 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: .45s ease;
  z-index: 2;
}
.workshops-page .ws-card:hover::before { transform: scaleY(1); }
.workshops-page .ws-card.is-past { filter: saturate(.75); }

.workshops-page .ws-image {
  min-height: 205px;
  margin: 10px;
  border-radius: 17px;
  position: relative;
  overflow: hidden;
  background: #f1e9dc;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.workshops-page .ws-card:hover .ws-image { transform: scale(1.018); }
.workshops-page .ws-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.workshops-page .ws-img--empty { display: flex; align-items: center; justify-content: center; color: rgba(101,0,20,.25); }
.workshops-page .ws-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(34,0,8,.02), rgba(34,0,8,.18)), linear-gradient(90deg, transparent 55%, rgba(255,255,255,.07));
  pointer-events: none;
}
.workshops-page .ws-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform: translateX(-130%);
  transition: .8s ease;
  pointer-events: none;
}
.workshops-page .ws-card:hover .ws-image::after { transform: translateX(130%); }

.workshops-page .ws-details-btn {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(135deg, #80152e, #56000f);
  border: 1px solid rgba(255,255,255,.2);
  padding: 11px 20px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 10px 25px rgba(62,0,13,.27);
  overflow: hidden;
  transition: .3s ease;
}
html[dir="rtl"] .workshops-page .ws-details-btn { direction: rtl; }
.workshops-page .ws-details-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.20), transparent);
  transform: translateX(-120%);
  transition: .6s ease;
}
.workshops-page .ws-details-btn:hover { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(71,0,15,.3); }
.workshops-page .ws-details-btn:hover::after { transform: translateX(120%); }
.workshops-page .ws-details-btn svg { transition: transform .3s ease; }
html[dir="rtl"] .workshops-page .ws-details-btn:hover svg { transform: translateX(-4px); }
html[dir="ltr"] .workshops-page .ws-details-btn:hover svg { transform: rotate(180deg) translateX(-4px); }

.workshops-page .ws-content {
  direction: rtl;
  padding: 30px 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-width: 0;
}
html[dir="ltr"] .workshops-page .ws-content { direction: ltr; }
.workshops-page .ws-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.workshops-page .ws-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fce9ee;
  color: #7d1730;
  border: 1px solid #f4cbd6;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(101,0,20,.05);
  transition: .3s ease;
}
.workshops-page .ws-card:hover .ws-capacity { transform: translateY(-2px); background: #f9e0e7; }
.workshops-page .ws-capacity--past { background: #f1efe9; color: #6b7280; border-color: #e5e1d6; }
.workshops-page .ws-price {
  background: linear-gradient(180deg, #fff6d8, #f4e6b7);
  border: 1px solid rgba(201,162,39,.38);
  color: var(--ws-maroon);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 800;
}
.workshops-page .ws-content h2 {
  font-size: 24px;
  line-height: 1.5;
  color: #3d0713;
  font-weight: 900;
  margin-bottom: 10px;
  max-width: 680px;
  transition: color .3s ease;
}
.workshops-page .ws-card:hover .ws-content h2 { color: #76152c; }
.workshops-page .ws-desc { color: #6b737c; font-size: 14px; line-height: 1.9; margin-bottom: 14px; max-width: 680px; }
.workshops-page .ws-meta { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; color: #6b737c; font-size: 13px; font-weight: 500; }
.workshops-page .ws-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fbf8f2;
  border: 1px solid #eee6d7;
  border-radius: 11px;
  padding: 7px 10px;
  transition: .3s ease;
  min-width: 0;
}
.workshops-page .ws-card:hover .ws-meta-item { transform: translateY(-2px); border-color: rgba(201,162,39,.28); background: #fffdf9; }
.workshops-page .ws-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #f7edcf;
  color: var(--ws-gold);
  flex-shrink: 0;
}
.workshops-page .ws-meta-icon svg { width: 13px; height: 13px; }

.workshops-page .ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid rgba(201,162,39,.18);
  border-radius: 23px;
  color: #6b737c;
}
.workshops-page .ws-empty svg { color: var(--ws-gold); }
.workshops-page .ws-empty strong { color: var(--ws-maroon); font-size: 18px; }

/* ---------- Animations ---------- */
@keyframes ws-heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ws-cardReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes ws-floatSlow { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(15px, 12px) rotate(5deg); } }
@keyframes ws-spin { to { transform: rotate(405deg); } }
@keyframes ws-premiumFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .workshops-page .ws-card { grid-template-columns: 250px minmax(0, 1fr); }
  .workshops-page .ws-content { padding: 24px 24px 22px; }
  .workshops-page .ws-content h2 { font-size: 21px; }
}
@media (max-width: 760px) {
  .workshops-page .ws-hero { min-height: 285px; }
  .workshops-page .ws-hero p { font-size: 14px; }
  .workshops-page .ws-divider { width: 180px; }
  .workshops-page .ws-list { padding: 38px 0 65px; }
  .workshops-page .ws-container { gap: 22px; }
  .workshops-page .ws-card { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 19px; }
  html[dir="rtl"] .workshops-page .ws-card { direction: rtl; }
  .workshops-page .ws-image { margin: 10px 10px 0; min-height: 210px; }
  .workshops-page .ws-content { padding: 20px 20px 23px; }
  .workshops-page .ws-content h2 { font-size: 20px; }
  .workshops-page .ws-desc { font-size: 13px; }
}
@media (max-width: 480px) {
  .workshops-page .ws-hero { min-height: 265px; }
  .workshops-page .ws-hero h1 { font-size: 26px; }
  .workshops-page .ws-image { min-height: 190px; }
  .workshops-page .ws-meta { font-size: 12px; }
  .workshops-page .ws-meta-item { width: 100%; }
  .workshops-page .ws-details-btn { padding: 10px 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshops-page *,
  .workshops-page *::before,
  .workshops-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}