/* Zawiyah Turath — Homepage Course Categories ONLY (approved section reference).
   All selectors are scoped to #course-categories.  This file must NOT alter
   the header, banner, academy statistics, courses, footer, or other pages. */
#course-categories.ztCat26 {
  --ztcat-deep: #073b30;
  --ztcat-gold: #c79d4c;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 0 25px;
  background: linear-gradient(180deg, #fffdf9 0%, #fffefa 65%, #fcf9f2 100%);
  color: #073b30;
  border: 0;
}
#course-categories .ztp-container {
  position: relative;
  z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  padding-left: clamp(16px, 1vw, 20px);
  padding-right: clamp(16px, 1vw, 20px);
}
#course-categories .ztCat26__decor {
  position: absolute;
  width: 145px;
  height: 142px;
  color: #dec28b;
  opacity: .32;
  pointer-events: none;
  z-index: 0;
}
#course-categories .ztCat26__decor--top {right:-28px; top: -37px;}
#course-categories .ztCat26__decor--bottom {left:-68px; bottom:-56px; transform:rotate(180deg);}
#course-categories .ztCat26__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 16px;
}
#course-categories .ztCat26__copy {min-width:0;}
#course-categories .ztCat26__rule {
  display: block;
  width: 37px;
  height: 2px;
  background: #bd8e3d;
  margin: 0 0 9px 2px;
}
#course-categories .ztCat26__heading h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px,2.15vw,34px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  color: #073b30;
}
#course-categories .ztCat26__heading p {
  max-width: 1000px;
  margin: 7px 0 0;
  color: #6b706c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, .84vw, 13px);
  font-weight: 400;
  line-height: 1.42;
}
#course-categories .ztCat26__all {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  margin: 0 0 5px;
  padding: 4px 0 5px;
  border: 0;
  border-bottom: 1.5px solid var(--ztcat-gold);
  text-decoration: none;
  color: var(--ztcat-deep);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
#course-categories .ztCat26__all svg {width:16px;height:16px;transition: transform .2s ease;}
#course-categories .ztCat26__all:hover {color:#9a742d;}
#course-categories .ztCat26__all:hover svg {transform:translateX(4px);}
#course-categories .ztCat26__grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  align-items: stretch;
  gap: 11px;
}
#course-categories .ztCat26__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 139px;
  padding: 13px 14px 11px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(255,255,255,.91);
  border: 1px solid #e4d1a9;
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(48,37,20,.040);
  color: var(--ztcat-deep);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#course-categories .ztCat26__card:hover {
  transform: translateY(-3px);
  color: var(--ztcat-deep);
  border-color: #c49a4a;
  box-shadow: 0 9px 19px rgba(36,48,35,.10);
}
#course-categories .ztCat26__card:focus-visible,
#course-categories .ztCat26__all:focus-visible {
  outline: 3px solid #ba903a;
  outline-offset: 3px;
}
#course-categories .ztCat26__widebreak { display: none; }
/* The subtle geometric watermark is independent of the category icon / text. */
#course-categories .ztCat26__corner {
  pointer-events: none;
  position: absolute;
  right:-19px;
  top:-21px;
  width:79px;
  height:79px;
  opacity:.58;
  background:
    linear-gradient(45deg, transparent 47%,#e4c990 48%,#e4c990 49%,transparent 50%) center/36px 36px,
    linear-gradient(-45deg, transparent 47%,#e4c990 48%,#e4c990 49%,transparent 50%) center/36px 36px;
  mask-image:linear-gradient(135deg,#000,transparent 84%);
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 84%);
}
#course-categories .ztCat26__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 43px;
  height: 43px;
  margin-bottom: 11px;
  border-radius: 50%;
  border: 2px solid #fffaf1;
  outline: 1px solid #dbbc7e;
  box-shadow: 0 3px 9px rgba(35,45,33,.16);
  color: #edcb7d;
}
#course-categories .ztCat26__card--green .ztCat26__icon {
  background: radial-gradient(circle at 35% 18%,#14765a,#07513f 65%,#063a31);
}
#course-categories .ztCat26__card--gold .ztCat26__icon {
  background: radial-gradient(circle at 35% 18%,#d9b669,#bb8936 70%,#9d7026);
  color: #fffdf4;
}
#course-categories .ztCat26__icon svg {
  display: block;
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}
#course-categories .ztCat26__name {
  position: relative;
  z-index: 1;
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.2;
  letter-spacing: -.023em;
  color: var(--ztcat-deep);
  overflow-wrap: break-word;
}
#course-categories .ztCat26__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width:100%;
  margin-top: auto;
  padding-top: 9px;
  color: #a17b35;
}
#course-categories .ztCat26__count {
  color:#777b75;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
}
#course-categories .ztCat26__arrow {
  width: 14px;
  height: 14px;
  flex:none;
  transition:transform .2s ease;
}
#course-categories .ztCat26__card:hover .ztCat26__arrow {transform:translateX(3px);}
#course-categories .ztCat26__empty {
  grid-column:1/-1;
  padding: 18px;
  border:1px dashed #cdb27c;
  border-radius:12px;
  background:#fff;
  color:#65756d;
  text-align:center;
  font: 14px/1.5 Arial,sans-serif;
}
@media (max-width:1180px) {
  #course-categories .ztCat26__grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  #course-categories .ztCat26__heading {padding:0 5px;}
  #course-categories .ztCat26__card {min-height:132px;}
  #course-categories .ztCat26__name {font-size:15px;}
}
@media (max-width:720px) {
  #course-categories.ztCat26 {padding:23px 0 27px;}
  #course-categories .ztCat26__heading {align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:15px;padding:0;}
  #course-categories .ztCat26__heading h2 {font-size:clamp(23px,6.4vw,29px);line-height:1.14;}
  #course-categories .ztCat26__heading p {font-size:12px;line-height:1.45;margin-top:6px;}
  #course-categories .ztCat26__widebreak {display:none;}
  #course-categories .ztCat26__all {margin:0;font-size:12px;padding:3px 0 4px;}
  #course-categories .ztCat26__all svg {width:14px;height:14px;}
  #course-categories .ztCat26__grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #course-categories .ztCat26__card {min-height:121px;padding:11px 11px 10px;border-radius:10px;}
  #course-categories .ztCat26__icon {width:37px;height:37px;margin-bottom:8px;}
  #course-categories .ztCat26__icon svg {width:19px;height:19px;}
  #course-categories .ztCat26__name {font-size:clamp(13px,3.65vw,15px);line-height:1.18;}
  #course-categories .ztCat26__count {font-size:10px;}
  #course-categories .ztCat26__foot {padding-top:8px;}
  #course-categories .ztCat26__arrow {width:13px;height:13px;}
  #course-categories .ztCat26__decor {width:92px;height:92px;opacity:.19;}
}
@media (max-width:355px) {
  #course-categories .ztCat26__card {padding:10px 9px;min-height:120px;}
  #course-categories .ztCat26__icon {height:34px;width:34px;margin-bottom:7px;}
  #course-categories .ztCat26__name {font-size:12.5px;}
}
@media (prefers-reduced-motion: reduce) {
  #course-categories .ztCat26__card,
  #course-categories .ztCat26__arrow,
  #course-categories .ztCat26__all svg {transition:none;}
}