/* cert-ach-unique.css
   Dark-blue + gold unique design, scroll-snap carousel, responsive
*/

:root{
  --bg-1: #041227; /* deep navy */
  --bg-2: #07172b;
  --glass: rgba(255,255,255,0.03);
  --gold: #ffd16a;
  --muted: #a9c9e6;
  --card-radius: 12px;
}

.ca-section {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: #eaf6ff;
  padding: 56px 0;
  border-radius: 14px;
  margin-bottom: 28px;
  box-shadow: 0 18px 60px rgba(2,8,20,0.6);
}

/* header */
.ca-inner { max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.ca-header { text-align:center; margin-bottom: 6px; }
.ca-header h2 { font-size: 32px; margin: 0; font-weight:800; color:#f7fbff; }
.ca-gold { color: var(--gold); text-shadow: 0 2px 8px rgba(255,209,106,0.06); }
.ca-lead { color: var(--muted); margin-top:8px; }

/* stats */
.ca-stats { display:flex; gap:16px; justify-content:center; margin: 22px 0 6px; flex-wrap:wrap; }
.ca-stat {
  min-width: 140px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ca-num { font-size: 26px; font-weight: 800; color: var(--gold); }
.ca-label { color: var(--muted); margin-top:6px; font-weight:600; font-size:13px; }

/* carousel container */
.ca-carousel-wrap { display:flex; align-items:center; gap:14px; margin-top:20px; position:relative; }
.ca-arrow {
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(180deg,#05324a,#083145);
  border: 2px solid rgba(255,255,255,0.03);
  color: #fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 26px rgba(0,0,0,0.6);
}
.ca-arrow:focus { outline: 3px solid rgba(255,209,106,0.18); }

/* the scroll-snap carousel (horizontal) */
.ca-carousel {
  display:flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  scroll-behavior: smooth;
  flex: 1 1 auto;
}

/* hide native scroll bar visually but keep accessible */
.ca-carousel::-webkit-scrollbar { height: 10px; }
.ca-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
.ca-carousel:focus { outline: none; }

/* card */
.ca-card {
  flex: 0 0 320px; /* card width */
  scroll-snap-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--card-radius);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  position: relative;
}

/* subtle stagger entrance */
.ca-card { opacity: 0; transform: translateY(10px) scale(.995); animation: ca-card-in .55s forwards; }
.ca-card:nth-child(1) { animation-delay: .08s; }
.ca-card:nth-child(2) { animation-delay: .12s; }
.ca-card:nth-child(3) { animation-delay: .16s; }
.ca-card:nth-child(4) { animation-delay: .20s; }
@keyframes ca-card-in {
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* hover */
.ca-card:hover, .ca-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.7);
  outline: none;
}

/* thumb area – ensure certificate visible with white borders */
.ca-thumb { width:100%; height:190px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.2); border-radius:8px; padding:12px; }
.ca-thumb img { max-width:100%; max-height:100%; object-fit: contain; display:block; border-radius:6px; background: #fff; }

/* body */
.ca-card-body { display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:0 6px; }
.ca-card-title { font-size:16px; color:#f7fbff; font-weight:700; }
.ca-card-sub { color: var(--muted); font-size:13px; }
.ca-badge {
  margin-left:auto; align-self:flex-end;
  background: linear-gradient(90deg,var(--gold), #ffb24a);
  color:#05343b; padding:6px 10px; border-radius:14px; font-weight:800; font-size:11px;
  box-shadow: 0 6px 18px rgba(255,209,106,0.12);
}

/* note */
.ca-note { margin-top: 12px; color: rgba(234,246,255,0.6); }

/* modal */
.ca-modal { display:none; position:fixed; inset:0; background: rgba(2,6,12,0.9); z-index:9999; align-items:center; justify-content:center; padding:28px; }
.ca-modal[aria-hidden="false"] { display:flex; }
.ca-modal-inner { max-width: 92%; width:100%; max-height: 92%; display:flex; flex-direction:column; gap:12px; align-items:center; }
.ca-modal-img { width:100%; height:auto; border-radius:8px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.ca-modal-close { position:absolute; top:24px; right:36px; background:#fff; color:#012; width:44px; height:44px; border-radius:50%; border:0; font-size:24px; cursor:pointer; }
.ca-modal-download { background: var(--gold); color:#032; padding:8px 12px; border-radius:8px; font-weight:800; text-decoration:none; }

/* responsive */
@media (max-width: 992px) {
  .ca-carousel { gap: 14px; }
  .ca-card { flex: 0 0 280px; }
  .ca-thumb { height:160px; }
}
@media (max-width: 576px) {
  .ca-carousel { gap:12px; padding:10px; }
  .ca-card { flex: 0 0 85%; }
  .ca-thumb { height:140px; }
  .ca-arrow { display:none; } /* hide arrows on small screens to maximize space */
}