/* ══════════════════════════════════════════
   WINNERS PAGE  (/winners/ + /en/winners/)
   Uses main site variables (--teal, --bg …). Classes prefixed w- / wc- / g-
══════════════════════════════════════════ */
:root { --w-gold: #c8960a; --w-gold-lt: #FFD966; --w-navy: #00427E; }

.w-preview {
  position: fixed; top: 80px; inset-inline: 0; z-index: 150; text-align: center;
  background: #FFD966; color: #3a2c00; font-weight: 800; font-size: .85rem; padding: 6px 12px;
}
.w-riyal {
  display: inline-block; width: .8em; height: .8em; vertical-align: -1px; margin-inline-end: 5px;
  background: no-repeat center/contain url("https://upload.wikimedia.org/wikipedia/commons/9/98/Saudi_Riyal_Symbol.svg");
  filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(500%) hue-rotate(5deg) brightness(105%);
}

/* ── Header + video ── */
.w-head { position: relative; overflow: hidden; background: var(--bg); color: #fff; text-align: center; padding: 130px 0 64px; }
.w-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(0,145,158,.35), transparent 70%),
              radial-gradient(ellipse 30% 40% at 90% 100%, rgba(200,150,10,.15), transparent 70%);
}
.w-head .box { position: relative; }
.w-trophy {
  width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #1a1a1a;
  background: linear-gradient(135deg, var(--w-gold), var(--w-gold-lt));
  box-shadow: 0 0 0 8px rgba(255,217,102,.12), 0 10px 30px rgba(200,150,10,.35);
}
.w-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 900; line-height: 1.3; color: #fff; }
.w-head h1 span { color: var(--w-gold-lt); }
.w-sub { color: rgba(255,255,255,.72); margin-top: 6px; font-size: .95rem; }
.w-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.w-jump a {
  color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700;
  border: 1px solid rgba(0,145,158,.45); background: rgba(0,145,158,.14);
  padding: 7px 18px; border-radius: 50px; transition: background .2s;
}
.w-jump a:hover { background: var(--teal); }
.w-jump a i { color: var(--w-gold-lt); margin-inline-end: 6px; }

.w-video {
  position: relative; max-width: 880px; margin: 34px auto 0; aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden; background: #0a1616;
  border: 1px solid rgba(0,145,158,.35); box-shadow: 0 20px 50px rgba(0,0,0,.4);
  scroll-margin-top: 100px;
}
.w-video iframe, .w-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #0a1616; }
.w-video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.w-video-play:hover img { opacity: 1; }
.w-play-ic {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--teal); font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(255,255,255,.14); transition: transform .2s;
}
.w-play-ic i { margin-inline-start: 5px; }
[dir="rtl"] .w-play-ic i { margin-inline-start: 0; margin-inline-end: -5px; }
.w-video-play:hover .w-play-ic, .w-video-play:focus-visible .w-play-ic { transform: scale(1.08); }
.w-video-play:focus-visible { outline: 3px solid var(--w-gold-lt); outline-offset: -3px; }
.w-video-cap {
  position: absolute; bottom: 0; inset-inline: 0; padding: 18px 22px; text-align: start;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-family: var(--font); font-weight: 800; font-size: 1rem;
}
.w-video-tag {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; pointer-events: none;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 6px;
}

/* ── Winners ── */
.w-body { background: #F8F9FA; color: #1a2e2e; padding: 60px 0; scroll-margin-top: 64px; }
.w-sec-h { text-align: center; margin-bottom: 30px; }
.w-sec-h h2 { font-size: 1.7rem; font-weight: 900; color: var(--w-navy); line-height: 1.4; }
.w-sec-h p { color: #666; font-size: .9rem; margin-top: 4px; }
.w-sec-h p b { color: #8a6a00; }
.w-sec-h .w-riyal { filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(600%) hue-rotate(20deg); }
.w-empty { text-align: center; color: #666; font-weight: 700; padding: 40px 0; }

.w-group { max-width: 1076px; margin: 0 auto 36px; }
.w-group-t { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.15rem; font-weight: 800; color: #1a2e2e; }
.w-group-t i {
  width: 36px; height: 36px; border-radius: 10px; font-size: 1rem;
  background: rgba(0,145,158,.12); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.w-grid-1 { grid-template-columns: 1fr; }

.wc {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,145,158,.18); border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0,60,70,.06);
}
.wc.first { border: 2px solid var(--w-gold-lt); box-shadow: 0 10px 30px rgba(200,150,10,.18); }
.wc-img {
  position: relative; height: 210px; flex-shrink: 0;
  background: linear-gradient(135deg, #1c4a4a, #0e2626);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.25); font-size: 3rem;
}
.wc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wc-rank {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 900;
  padding: 5px 14px; border-radius: 50px; color: #1a1a1a;
}
.first .wc-rank, .special .wc-rank { background: linear-gradient(135deg, var(--w-gold), var(--w-gold-lt)); }
.second .wc-rank { background: linear-gradient(135deg, #b9c7cb, #e9f0f2); }
.wc-prize {
  position: absolute; bottom: 12px; inset-inline-end: 14px; z-index: 1;
  background: rgba(0,0,0,.65); color: var(--w-gold-lt); font-size: .95rem; padding: 4px 12px; border-radius: 10px;
}
.wc-b { padding: 18px 20px 20px; flex: 1; }
.wc-team { font-size: 1.25rem; font-weight: 900; color: #1a2e2e; line-height: 1.35; }
.wc-proj { font-size: .95rem; font-weight: 700; color: var(--teal-dark); margin-top: 2px; }
.wc-track {
  display: inline-block; margin-top: 10px; font-size: .75rem; font-weight: 700;
  color: var(--w-navy); background: rgba(0,66,126,.07); padding: 3px 12px; border-radius: 50px;
}
.wc-desc { font-size: .88rem; color: #555; line-height: 1.8; margin-top: 10px; }
.wc-mem { font-size: .8rem; color: #888; margin-top: 10px; font-weight: 600; }
.wc-mem i { color: var(--teal); margin-inline-end: 5px; }

/* Special award — wide dark card */
.wc.special { flex-direction: row; background: linear-gradient(135deg, #0e1e1e, #163232); border: 2px solid rgba(255,217,102,.5); color: #fff; }
.wc.special .wc-img { width: 40%; height: auto; min-height: 240px; background: linear-gradient(135deg, #2a5050, #122a2a); }
.wc.special .wc-team  { color: #fff; }
.wc.special .wc-proj  { color: var(--w-gold-lt); }
.wc.special .wc-track { color: #bfe9ee; background: rgba(0,145,158,.2); }
.wc.special .wc-desc  { color: rgba(255,255,255,.78); }
.wc.special .wc-mem   { color: rgba(255,255,255,.55); }

/* ── Gallery ── */
.w-gal { background: var(--bg); padding: 60px 0; scroll-margin-top: 64px; }
.w-gal .w-sec-h h2 { color: #fff; }
.w-gal .w-sec-h p  { color: rgba(255,255,255,.6); }
.g-grid { max-width: 1076px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: 10px; }
.g-item {
  position: relative; overflow: hidden; border: 0; padding: 0; cursor: zoom-in;
  border-radius: 14px; background: #163030;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.g-item:hover img { transform: scale(1.05); }
.g-item:focus-visible { outline: 3px solid var(--w-gold-lt); outline-offset: 2px; }
.g-item.big  { grid-column: span 2; grid-row: span 2; }
.g-item.wide { grid-column: span 2; }
.g-more-item { display: none; }
.g-grid.show-all .g-more-item { display: block; }
.g-more { text-align: center; margin-top: 22px; }
.g-more-btn {
  font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.3);
  padding: 9px 26px; border-radius: 50px; transition: background .2s;
}
.g-more-btn:hover { background: rgba(255,255,255,.08); }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 10050; display: none;
  background: rgba(3,10,10,.94); align-items: center; justify-content: center; padding: 60px 70px;
}
.lb.open { display: flex; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb figcaption { color: #fff; font-family: var(--font); font-weight: 700; margin-top: 12px; text-align: center; font-size: .95rem; }
.lb figcaption small { display: block; color: rgba(255,255,255,.5); font-weight: 600; font-size: .78rem; }
.lb button {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.lb button:hover { background: rgba(255,255,255,.18); }
.lb button:focus-visible { outline: 3px solid var(--w-gold-lt); }
.lb-close { top: 18px; inset-inline-end: 18px; }
.lb-prev  { top: 50%; transform: translateY(-50%); inset-inline-start: 14px; }
.lb-next  { top: 50%; transform: translateY(-50%); inset-inline-end: 14px; }

/* ── Tablet / mobile ── */
@media (max-width: 960px) {
  .g-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .w-head { padding: 96px 0 44px; }
  .w-video { margin-top: 24px; border-radius: 14px; }
  .w-play-ic { width: 64px; height: 64px; font-size: 22px; }
  .w-body, .w-gal { padding: 40px 0; }
  .w-grid { grid-template-columns: 1fr; }
  .wc-img { height: 190px; }
  .wc.special { flex-direction: column; }
  .wc.special .wc-img { width: auto; min-height: 190px; }
  .g-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
  .lb { padding: 60px 10px 80px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .w-preview { top: 64px; }
  [dir="rtl"] .w-jump a, [dir="rtl"] .wc-rank, [dir="rtl"] .wc-track { letter-spacing: normal; }
}