/* QT Occasion page (2.6.10). Matches qt-occasion-page-mockup.html (16 Oct 2026).
   --o, --o-50, --o-100, --o-ink come from the category colour (printed by PHP). */
.qt-occ{--o:#048a7c;--o-50:#e6f5f4;--o-100:#cfece8;--o-ink:#0f3d63;width:100%;max-width:none;color:var(--qt-ink,#16202b);font:400 16px/1.6 var(--qt-body)}
.qt-occ *{box-sizing:border-box}
.qt-occ [hidden]{display:none!important}
.qt-occ__wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.qt-occ__ico{width:18px;height:18px;flex:none}
:root .qt-occ :is(h1,h2,h3){font-family:var(--qt-head);color:var(--qt-navy,#0f3d63);margin:0;letter-spacing:-.01em}
:root .qt-occ .qt-occ__h2{font-size:34px;line-height:1.15;font-weight:700!important}

/* 1 hero */
.qt-occ__hero{background:linear-gradient(180deg,var(--o-50) 0%,#fff 100%);padding:28px 0 72px;overflow:hidden}
.qt-occ__hg{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.qt-occ__hg.is-solo{grid-template-columns:1fr}
.qt-occ__hg>*{min-width:0}
.qt-occ__crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font:400 13px/1.4 var(--qt-body);color:var(--qt-muted,#5d6a76)}
.qt-occ__crumbs a{color:inherit;text-decoration:none}
.qt-occ__crumbs a:hover{color:var(--qtc-accent,#048a7c)}
.qt-occ__crumbs a:focus-visible{outline:2px solid var(--qtc-accent,#048a7c);outline-offset:2px;border-radius:4px}
.qt-occ__crumbs [aria-current]{color:var(--qt-navy,#0f3d63)}
.qt-occ .qt-occ__eyebrow{display:block;color:var(--o-ink);line-height:1.2}
:root .qt-occ .qt-occ__h1{font-size:60px;line-height:1.02;margin:14px 0 18px;font-weight:700!important}
.qt-occ__lead{max-width:34ch;margin:0 0 26px;font:400 19px/1.55 var(--qt-body);color:#33414e}
.qt-occ__cta{display:flex;gap:12px;flex-wrap:wrap}
.qt-occ__fan{position:relative;justify-self:center;width:100%;max-width:460px;aspect-ratio:1/1}
.qt-occ__blob{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,var(--o-100) 0%,transparent 70%)}
.qt-occ__fan figure{position:absolute;top:50%;left:50%;width:auto;margin:0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,61,99,.06),0 24px 48px -12px rgba(15,61,99,.24);transition:transform .5s var(--qt-spring,cubic-bezier(.22,1.18,.36,1))}
.qt-occ__fan figure img{display:block;width:auto;height:auto;max-width:min(250px,46vw);max-height:min(300px,58vw)}
/* :nth-of-type, because the blob span is the first child */
.qt-occ__fan figure:nth-of-type(1){transform:translate(-92%,-50%) rotate(-9deg)}
.qt-occ__fan figure:nth-of-type(2){transform:translate(-8%,-55%) rotate(8deg)}
.qt-occ__fan figure:nth-of-type(3){transform:translate(-50%,-46%);z-index:2}
.qt-occ__fan:hover figure:nth-of-type(1){transform:translate(-100%,-52%) rotate(-12deg)}
.qt-occ__fan:hover figure:nth-of-type(2){transform:translate(0%,-57%) rotate(11deg)}
.qt-occ__fan:hover figure:nth-of-type(3){transform:translate(-50%,-54%) rotate(-2deg) scale(1.03)}

/* 2 ayah */
.qt-occ__ayah{padding:88px 0;text-align:center}
.qt-occ__ar{max-width:500px;margin:0 auto 18px;font:400 40px/2 "QT Uthmanic Hafs",var(--qt-arabic,"Amiri","Noto Naskh Arabic",serif);color:var(--qt-navy,#0f3d63);direction:rtl;text-wrap:balance}
.qt-occ__en{max-width:36ch;margin:0 auto 14px;font:500 24px/1.45 var(--qt-head);color:var(--qt-ink,#16202b)}
.qt-occ__br{font-family:"Segoe UI","DejaVu Sans",Arial,sans-serif;font-weight:400}
.qt-occ__ref{margin:0;font:400 14px/1.4 var(--qt-body);color:var(--qt-muted,#5d6a76)}

/* sections */
.qt-occ__sec{padding:0 0 80px}
.qt-occ__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.qt-occ__hd .qt-label{display:block;margin-bottom:10px}
.qt-occ__hd .qt-btn--text{display:inline-flex;align-items:center;gap:6px}

/* 3 all resources */
.qt-occ__ctl{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.qt-occ__ctl>*{min-width:0}
.qt-occ .qt-seg--nav .qt-seg__a{display:inline-flex;align-items:center;gap:6px;padding:0 18px;height:40px;line-height:1}
.qt-occ .qt-seg--nav .qt-seg__a small{display:inline-block;margin:0;padding:3px 7px;border-radius:999px;background:#fff;font:600 11px/1 var(--qt-body);color:var(--qt-muted,#5d6a76);opacity:1}
.qt-occ .qt-seg--nav .qt-seg__a[aria-current=true] small{background:var(--qtc-accent-50,#e6f5f4);color:var(--qtc-accent,#048a7c)}
.qt-occ .qt-seg__a[aria-disabled=true]{opacity:.4;cursor:default}
.qt-occ__chips{display:flex;gap:8px;flex-wrap:wrap}
.qt-occ .qt-chip{--h:40px;font-size:14px;font-weight:500}
.qt-occ .qt-chip[aria-disabled=true]{opacity:.45;cursor:default;box-shadow:inset 0 0 0 1px var(--qt-line,#e0e4e8)}
.qt-occ__count{margin-left:auto;font:400 14px/1.4 var(--qt-body);color:var(--qt-muted,#5d6a76)}
.qt-occ__empty{margin:0;padding:32px;border-radius:24px;background:var(--qt-surface,#f6f8fa);text-align:center;color:var(--qt-muted,#5d6a76)}
.qt-occ__res .qt-grid{gap:28px 24px}
/* Cards: the cover in its own shape at the bottom of a square box, no background, so meta lines align across a row */
.qt-occ .qt-card .qt-shelf{display:block;padding:0;aspect-ratio:1/1;background:none}
.qt-occ .qt-card .qt-shelf::after{display:none}
.qt-occ .qt-card :is(.qt-art,.qt-book){display:contents}
.qt-occ .qt-card :is(.qt-art,.qt-book)::before,.qt-occ .qt-card :is(.qt-art,.qt-book)::after{display:none}
.qt-occ .qt-card .qt-shelf img{position:absolute;left:50%;bottom:8%;width:auto;height:auto;max-width:84%;max-height:84%;object-fit:contain;border-radius:4px;background:none;transform:translateX(-50%);box-shadow:0 1px 2px rgba(15,30,45,.1),0 14px 18px -12px rgba(15,30,45,.35);transition:transform .35s var(--qt-spring,cubic-bezier(.22,1.18,.36,1))}
.qt-occ .qt-card:hover .qt-shelf img,.qt-occ .qt-card:focus-within .qt-shelf img{transform:translate(-50%,-4px)}
.qt-occ .qt-card__media{background:none!important}
.qt-occ .qt-card__meta{margin-top:8px;flex-wrap:wrap}

/* 4 more occasions */
.qt-occ__others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.qt-occ__oc{display:flex;align-items:center;gap:18px;padding:20px;border-radius:24px;background:var(--o-50);color:inherit;text-decoration:none!important;transition:transform .35s var(--qt-spring,cubic-bezier(.22,1.18,.36,1))}
.qt-occ__oc:hover{transform:translateY(-3px)}
.qt-occ__oc:focus-visible{outline:2px solid var(--qtc-accent,#048a7c);outline-offset:3px}
.qt-occ__ofan{position:relative;flex:none;width:96px;height:96px}
.qt-occ__ofan img{position:absolute;top:50%;left:50%;width:62px;height:auto;border-radius:5px;box-shadow:0 1px 2px rgba(15,61,99,.06),0 4px 12px rgba(15,61,99,.06)}
.qt-occ__ofan img:nth-of-type(1){transform:translate(-80%,-50%) rotate(-10deg)}
.qt-occ__ofan img:nth-of-type(2){transform:translate(-20%,-50%) rotate(9deg)}
.qt-occ__ofan img:nth-of-type(3){transform:translate(-50%,-46%);z-index:1}
:root .qt-occ .qt-occ__oc h3{font-size:18px;line-height:1.25;font-weight:700!important}
.qt-occ__oc p{margin:4px 0 0;font:400 13px/1.4 var(--qt-body);color:var(--qt-muted,#5d6a76)}

/* 5 books band (qt-band from qt-components) */
.qt-occ__last{padding-bottom:96px}
.qt-occ .qt-band .qt-btn--outline{display:inline-flex;align-items:center;gap:8px}
.qt-occ .qt-band__books{padding-right:12px}
:root .qt-occ .qt-band h3{font:800 28px/1.15 var(--qt-head);font-weight:800!important}

@media (max-width:1000px){.qt-occ__others{grid-template-columns:1fr}}
@media (max-width:900px){.qt-occ__hg{grid-template-columns:1fr;gap:28px}}
@media (max-width:700px){
  .qt-occ__wrap{padding:0 16px}
  :root .qt-occ .qt-occ__h1{font-size:38px}
  :root .qt-occ .qt-occ__h2{font-size:26px}
  .qt-occ__lead{font-size:17px}
  .qt-occ__ayah{padding:56px 0}
  .qt-occ__ar{font-size:28px}
  .qt-occ__en{font-size:20px}
  .qt-occ__sec{padding-bottom:56px}
  .qt-occ__last{padding-bottom:64px}
  .qt-occ__count{margin-left:0}
  .qt-occ .qt-seg--nav .qt-seg__a{padding:0 12px}
  .qt-occ .qt-band{grid-template-columns:minmax(0,1fr);padding:28px 22px;border-radius:24px}
  .qt-occ .qt-band__books{order:-1;justify-content:center;padding-right:0}
  :root .qt-occ .qt-band h3{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  .qt-occ__fan figure,.qt-occ__oc,.qt-occ .qt-card .qt-shelf img{transition:none}
  .qt-occ__fan:hover figure:nth-of-type(1){transform:translate(-92%,-50%) rotate(-9deg)}
  .qt-occ__fan:hover figure:nth-of-type(2){transform:translate(-8%,-55%) rotate(8deg)}
  .qt-occ__fan:hover figure:nth-of-type(3){transform:translate(-50%,-46%)}
}