/* =========================================================
   Achievements pages (index + details) — additions on top of the
   .ach-* / .det-* / .rel-* / .gal / .lb-* styles already in main.css.
   Mostly: real photos instead of the icon placeholders.
   ========================================================= */

/* ---- listing cards ---- */
a.ach-card{ color: inherit; text-decoration: none; }
.ach-media.has-img{ background: #0b1437; }
.ach-media.has-img::before,
.ach-media.has-img::after{ display: none; }
.ach-media .ach-cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.ach-card:hover .ach-media .ach-cover{ transform: scale(1.05); }
/* soft shade so the badge + date pills stay readable on any photo */
.ach-media.has-img{ isolation: isolate; }
.ach-media.has-img > .ach-cat,
.ach-media.has-img > .ach-date{ z-index: 2; }
.ach-media.has-img .ach-cover{ z-index: 0; }
.ach-media.has-img{
  box-shadow: inset 0 -60px 60px -40px rgba(3,6,40,.45);
}

/* ---- empty state ---- */
.ach-empty-state{
  max-width: 520px; margin: 0 auto; text-align: center;
  padding: 50px 24px;
  background: #fff; border: 2px dashed var(--line-2, #d9e0ec);
  border-radius: 22px;
}
.ach-empty-state .ic{
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 18px; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}
.ach-empty-state h3{ margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--text); }
.ach-empty-state p{ margin: 0; color: var(--text-mute); font-size: 14px; }

/* ---- timeline nodes are links ---- */
a.t-node{ color: inherit; text-decoration: none; }
a.t-node:hover .label{ color: var(--brand-2); }

/* ---- details: banner photo ---- */
.det-banner.has-img{ background: #0b1437; cursor: zoom-in; }
.det-banner.has-img::before,
.det-banner.has-img::after{ display: none; }
.det-banner .det-cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.det-banner .corner-stamp{ z-index: 2; }

/* ---- details: rich text from the admin editor ---- */
.ach-rich img{ max-width: 100%; height: auto; border-radius: 14px; margin: 10px 0; }
.ach-rich table{ width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.ach-rich td, .ach-rich th{ border: 1px solid var(--line); padding: 8px 10px; }
.ach-rich blockquote{
  margin: 24px 0; padding: 20px 24px;
  background: linear-gradient(135deg, rgba(14,55,137,.05), rgba(245,215,122,.05));
  border-inline-start: 4px solid var(--brand-2);
  border-radius: 14px; font-style: italic;
}
.ach-rich h3{ font-size: 20px; font-weight: 800; color: var(--text); margin: 26px 0 10px; }

/* ---- details: gallery tiles with photos ---- */
button.gal{ padding: 0; border: 0; background: #0b1437; font: inherit; }
.gal.has-img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.gal.has-img:hover img{ transform: scale(1.06); }

/* ---- related cards with photos ---- */
a.rel-card{ color: inherit; text-decoration: none; }
.rel-media.has-img{ background: #0b1437; }
.rel-media.has-img::before{ display: none; }
.rel-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.rel-card:hover .rel-media img{ transform: scale(1.05); }
.rel-media .tag{ z-index: 1; }

/* ---- sidebar share (5 buttons) + back link ---- */
.side-share{ flex-wrap: wrap; }
.side-share a{ min-width: 38px; }
.side-share a.copied{ background: #1abc88; color: #fff; }
.ach-back-link{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  color: var(--brand-2); font-weight: 700; font-size: 13.5px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ach-back-link:hover{ border-color: var(--brand-2); transform: translateY(-2px); }

/* ---- lightbox with real photos ---- */
.ach-lb .lb-content{
  aspect-ratio: auto;
  width: min(1000px, 100%);
  overflow: visible;
  box-shadow: none;
  display: flex; flex-direction: column; align-items: center;
}
.ach-lb .lb-content img{
  display: block;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 18px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.6);
  background: #0b1437;
}
.ach-lb .lb-close{ top: -50px; right: 0; }
.ach-lb-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 16px; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s var(--ease);
  z-index: 2;
}
.ach-lb-nav:hover{ background: rgba(255,255,255,.25); }
.ach-lb-nav.prev{ left: 12px; }
.ach-lb-nav.next{ right: 12px; }
.ach-lb-count{
  margin-top: 12px;
  color: rgba(255,255,255,.75);
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
}

/* ---- RTL (Arabic) ---- */
[dir="rtl"] .ach-cat{ left: auto; right: 14px; }
[dir="rtl"] .ach-date{ right: auto; left: 14px; }
[dir="rtl"] .ach-date i{ margin-right: 0; margin-left: 5px; }
[dir="rtl"] .rel-media .tag{ left: auto; right: 12px; }
[dir="rtl"] .det-banner .corner-stamp{ right: auto; left: 22px; }
[dir="rtl"] .det-nav .next{ text-align: left; }
[dir="rtl"] .det-quote{ border-left: 0; border-right: 4px solid var(--brand-2); }
[dir="rtl"] .det-article ul li{ padding: 10px 38px 10px 14px; }
[dir="rtl"] .det-article ul li::before{ left: auto; right: 12px; }
[dir="rtl"] .ach-card:hover .ach-read i{ transform: translateX(-3px); }

/* ---- small screens ---- */
@media (max-width: 600px){
  .ach-lb-nav{ width: 38px; height: 38px; }
  .ach-lb .lb-close{ top: -46px; }
}

/* timeline: centre the rail when there are only a few years */
.ach-page .timeline{ display: flex; }
.ach-page .timeline-rail{ margin-inline: auto; }