/* calendar page — shared by the Arabic and English mockups. */
/* ============================================================ hero */
.cal-hero{padding-block:150px 64px}
.cal-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M60 18 72 48 102 60 72 72 60 102 48 72 18 60 48 48Z'/%3E%3Crect x='38' y='38' width='44' height='44' transform='rotate(45 60 60)'/%3E%3Crect x='38' y='38' width='44' height='44'/%3E%3C/svg%3E");background-size:120px}
.cal-hero .media img{object-position:50% 45%;opacity:.55}
.cal-hero-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.cal-hero h1{font-size:clamp(40px,5vw,72px);line-height:1.15;font-weight:700;margin-top:16px}
.cal-hero p{font-size:19px;color:rgb(255 255 255 / .85);margin-top:12px;max-width:56ch}
.search{position:relative;margin-top:28px;max-width:640px}
.search input{width:100%;height:62px;border-radius:18px;padding-inline:56px 20px;font:inherit;font-size:17px;color:#fff;
  background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .28);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);outline:none;transition:background .3s,border-color .3s,box-shadow .3s}
.search input::placeholder{color:rgb(255 255 255 / .7)}
.search input:focus{background:rgb(255 255 255 / .18);border-color:var(--accent-300);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 35%,transparent)}
.search .icon{position:absolute;z-index:1;inset-inline-start:20px;top:31px;translate:0 -50%;width:22px;height:22px;color:rgb(255 255 255 / .8)}
.search small{display:block;margin-top:8px;font-size:13.5px;color:rgb(255 255 255 / .65)}
.years{display:flex;align-items:center;gap:6px;padding:6px;border-radius:20px}
.years button{height:52px;min-width:84px;padding-inline:16px;border-radius:15px;font-family:'IBM Plex Sans',var(--font);font-size:19px;font-weight:600;color:rgb(255 255 255 / .8);transition:all .35s var(--ease)}
.years button:hover{background:rgb(255 255 255 / .12);color:#fff}
.years button[aria-pressed="true"]{background:#fff;color:var(--brand-deep);box-shadow:0 10px 24px -10px rgb(0 0 0 / .5)}
.years .all{font-family:var(--font);font-size:15px}
.years .nav-y{min-width:44px;padding:0}

/* ============================================================ filter bar */
.fbar-wrap{position:sticky;top:82px;z-index:30;margin-top:-30px}
.fbar{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:20px;background:rgb(255 255 255 / .82);border:1px solid transparent;
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 24px 50px -24px color-mix(in oklab,var(--primary-950) 55%,transparent)}
.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--canvas);border:1px solid var(--line);flex:none}
.seg button{height:38px;padding-inline:14px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:all .3s}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 14px -6px rgb(0 0 0 / .25)}
.types{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.types button{height:38px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .3s var(--ease)}
.types button:hover{border-color:var(--brand);color:var(--brand)}
.types button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.types button[aria-pressed="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.select{position:relative;flex:none}
.select select{appearance:none;height:40px;padding-inline:14px 36px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer}
.select .icon{position:absolute;inset-inline-end:10px;top:50%;translate:0 -50%;width:16px;height:16px;pointer-events:none;color:var(--ink-3)}

/* ============================================================ results */
.results-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:44px 8px}
.results-head .count{font-size:17px;color:var(--ink-2)}
.results-head .count b{color:var(--ink);font-size:22px;font-family:'IBM Plex Sans',var(--font)}
.clear{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand);font-size:15px}
.clear .icon{width:16px;height:16px}
.active-filters{display:flex;flex-wrap:wrap;gap:8px}
.active-filters span{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:12px;border-radius:999px;background:var(--primary-50);color:var(--primary-800);font-size:14px;font-weight:600}
.month{display:grid;grid-template-columns:200px 1fr;gap:32px;padding-block:34px;border-top:1px solid var(--line)}
.month:first-of-type{border-top:0}
.month-head{position:sticky;top:190px;align-self:start}
.month-head h2{font-size:30px;font-weight:700;line-height:1.2}
.month-head .y{display:block;font-family:'IBM Plex Sans';font-size:18px;color:var(--ink-3);font-weight:500}
.month-head .n{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--brand);background:var(--primary-50);padding:3px 10px;border-radius:999px}
.year-head{margin-top:56px;font-family:'IBM Plex Sans';font-size:72px;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--primary-200)}
.rows{display:grid;gap:14px}
.row{position:relative;display:grid;grid-template-columns:104px 236px 1fr auto;gap:22px;align-items:center;padding:14px;padding-inline-end:22px;border-radius:24px;background:#fff;border:1px solid var(--line);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s;opacity:0;transform:translateY(16px);animation:cardin .8s var(--ease-out) forwards;animation-delay:calc(var(--k) * 55ms)}
@keyframes cardin{to{opacity:1;transform:none}}
html.shot .row{animation:none;opacity:1;transform:none}
.row:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:transparent}
.row .dblock{height:118px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--primary-50),#fff);border:1px solid var(--primary-100);line-height:1.2;padding-inline:6px}
.row .dblock b{font-family:'IBM Plex Sans';font-size:36px;font-weight:600;color:var(--brand);line-height:1}
.row .dblock b.m{font-family:var(--font);font-size:18px}
.row .dblock small{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.row .dblock i{font-style:normal;font-size:12px;color:var(--ink-3);margin-top:4px}
.row .thumb{height:118px;border-radius:18px;overflow:hidden;position:relative}
.row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.row:hover .thumb img{transform:scale(1.08)}
.row .thumb.typo{display:grid;place-items:center;background:radial-gradient(90% 120% at 100% 0%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 60%),linear-gradient(135deg,var(--primary-700),var(--brand-deep))}
.row .thumb.typo svg{width:70%;height:70%;color:#fff;opacity:.22}
.row .txt{min-width:0}
.row .ev-type{font-size:13.5px;font-weight:600;color:var(--ink-3)}
.row h3{font-size:20px;line-height:1.45;font-weight:700;margin-top:2px}
.row .meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font-size:14.5px;color:var(--ink-2)}
.row .meta span{display:inline-flex;gap:7px;align-items:center}
.row .meta .icon{width:16px;height:16px;color:var(--ink-3)}
.row .end{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.row .go{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2);transition:all .45s var(--ease-out)}
.row:hover .go{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateX(-4px)}
.row .chip{position:static}
.chip-ended{background:var(--neutral-100);color:var(--ink-2)}
.chip-approx{background:transparent;color:var(--ink-2);border:1px dashed var(--neutral-400)}
.row.is-ended .thumb img{filter:saturate(.8)}
.row.is-cancelled{background:var(--canvas)}
.row.is-cancelled .thumb img{filter:grayscale(1)}
.row.is-cancelled h3{color:var(--ink-2)}
.row .note{display:inline-block;margin-top:8px;margin-inline-end:6px;font-size:13px;font-weight:600;color:var(--brand);background:var(--primary-50);padding:3px 10px;border-radius:999px}
.row .note.warn{background:color-mix(in oklab,var(--warn) 18%,white);color:#7a4b00}
.row s{text-decoration-thickness:1.5px;color:var(--ink-3)}
.hl{background:color-mix(in oklab,var(--accent) 38%,transparent);color:inherit;border-radius:4px;padding-inline:2px}

/* empty state */
.empty{text-align:center;padding:72px 20px;border-radius:var(--r-xl);background:var(--canvas);border:1px dashed var(--neutral-300);margin-top:40px}
.empty svg.big{width:120px;height:120px;color:var(--primary-200);animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty h3{font-size:24px;margin-top:18px}
.empty p{color:var(--ink-2);margin-top:6px}
.empty .opts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}

.archive-cta{margin-top:72px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:30px 34px;border-radius:var(--r-xl);background:var(--canvas);border:1px solid var(--line)}
.archive-cta h3{font-size:24px}
.archive-cta p{color:var(--ink-2)}
.archive-cta .ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--brand);flex:none}
.archive-cta .ic .icon{width:28px;height:28px}

/* ============================================================ responsive */
@media (max-width:1180px){
  .cal-hero-grid{grid-template-columns:1fr}
  .row{grid-template-columns:96px 180px 1fr auto}
  .fbar{flex-wrap:wrap}
  .types{order:3;flex-basis:100%}
}
@media (max-width:720px){
  .cal-hero{padding-block:118px 56px}
  .cal-hero h1{font-size:38px}
  .cal-hero p{font-size:16.5px}
  .years{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .years button{min-width:70px;height:46px;font-size:17px}
  .fbar-wrap{top:80px}
  .fbar{gap:8px;border-radius:18px}
  .seg button{padding-inline:10px;font-size:13.5px}
  .select select{height:40px;font-size:13.5px}
  .month{grid-template-columns:1fr;gap:14px;padding-block:24px}
  .month-head{position:static;display:flex;align-items:baseline;gap:10px}
  .month-head h2{font-size:24px}
  .month-head .y{display:inline}
  .month-head .n{margin:0;margin-inline-start:auto}
  .year-head{font-size:48px}
  .row{grid-template-columns:76px 1fr;gap:14px;padding:12px;border-radius:20px}
  .row .thumb,.row .thumb.typo{display:none}
  .row .dblock{height:92px;border-radius:16px}
  .row .dblock b{font-size:28px}
  .row h3{font-size:17px}
  .row .end{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}
  .row .go{width:40px;height:40px}
}

/* ============================================================ English (LTR) */
[dir="ltr"] .cal-hero h1{letter-spacing:-1px}
[dir="ltr"] .row:hover .go{transform:translateX(4px)}
[dir="ltr"] .row .thumb.typo{background:radial-gradient(90% 120% at 0% 0%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 60%),linear-gradient(225deg,var(--primary-700),var(--brand-deep))}

/* ============================================================ live-site: real form controls */
.seg label,.types label{position:relative;cursor:pointer}
.seg input,.types input{position:absolute;opacity:0;pointer-events:none}
.seg label span{display:inline-flex;align-items:center;height:38px;padding-inline:14px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:all .3s}
.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 4px 14px -6px rgb(0 0 0 / .25)}
.types label span{display:inline-flex;align-items:center;gap:6px;height:38px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:all .3s var(--ease)}
.types label:hover span{border-color:var(--brand);color:var(--brand)}
.types input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.types input:checked+span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.seg input:focus-visible+span,.types input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:40px}
.years button{cursor:pointer}