/* Shared header: full nav on desktop, burger menu on phones and small tablets. */
.hdr{position:relative;max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.menu-toggle{display:none}

@media (max-width: 1023px){
  .hdr{flex-wrap:nowrap;padding:10px 16px;gap:12px}
  .brand{min-width:0}
  .brand img{width:40px !important;height:40px !important}
  .menu-toggle{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid #E6D9D1;background:#FFFFFF;color:#2B2140;cursor:pointer}
  .menu-toggle .i-close{display:none}
  .site-header.open .menu-toggle .i-open{display:none}
  .site-header.open .menu-toggle .i-close{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;padding:8px 16px 20px;background:#FFFAF6;border-bottom:1px solid #F0E4DD;box-shadow:0 16px 24px -12px rgba(43,33,64,.18);max-height:calc(100vh - 64px);overflow-y:auto}
  .site-header.open .site-nav{display:flex}
  .site-nav .nav{padding:14px 16px;border-radius:16px;font-size:17px}
  .site-nav .btn{margin:10px 0 0 !important;padding:16px 22px !important;text-align:center;font-size:16px !important}
}

/* Horizontal carousel (certificates on about.html): swipe on phones, arrows on desktop. */
.carousel{list-style:none;margin:0;padding:4px 2px 12px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.cert{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:10px 10px 18px;border-radius:32px;background:#FFFFFF;border:1.5px solid #F0E4DD;box-sizing:border-box}
.cert-open{aspect-ratio:16 / 9;min-height:0;overflow:hidden;border-radius:22px;display:flex;align-items:center;justify-content:center;padding:10px;margin-bottom:8px;box-sizing:border-box;cursor:zoom-in}
.cert-open img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 4px 14px rgba(43,33,64,.16);transition:transform .2s}
.cert-open:hover img{transform:scale(1.03)}
.cert-year{padding:0 8px;font-size:14px;font-weight:600;color:#6835BF}
.cert-title{padding:0 8px;color:#2B2140;font-size:16px;font-weight:600;line-height:1.35}
.cert-meta{padding:0 8px;color:#6B6080;font-size:14px;line-height:1.45}

/* Full-screen certificate viewer */
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:64px 16px 16px;border:0;background:rgba(27,20,40,.92);color:#FFFFFF;box-sizing:border-box}
.lightbox[open]{display:flex;align-items:center;justify-content:center;gap:12px}
.lightbox::backdrop{background:transparent}
.lightbox-img{max-width:min(100%, 1400px);max-height:100%;object-fit:contain;border-radius:8px;background:#FFFFFF;min-width:0}
.lightbox-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:12px 16px;box-sizing:border-box}
.lightbox-caption{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox-close,.lightbox-nav{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.26)}
@media (max-width: 639px){
  .lightbox{padding:64px 8px 72px}
  .lightbox-nav{position:absolute;bottom:14px}
  .lightbox-nav[data-dir="-1"]{left:calc(50% - 56px)}
  .lightbox-nav[data-dir="1"]{right:calc(50% - 56px)}
}
.carousel-nav{display:flex;gap:10px}
.carousel-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid #CBBFE6;background:#FFFFFF;color:#2B2140;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.carousel-btn:hover:not(:disabled){background:#F1E9FB;color:#6835BF}
.carousel-btn:disabled{opacity:.35;cursor:default}
@media (max-width: 1023px){ .cert{flex-basis:calc((100% - 20px) / 2)} }
@media (max-width: 639px){
  .cert{flex-basis:85%}
  .carousel{margin:0 -24px;padding-left:24px;padding-right:24px;scroll-padding:0 24px}
  .carousel-nav{display:none}
}

/* Home hero tiles: on phones the two text tiles span the full row so long words fit. */
@media (max-width: 639px){
  .hero-tiles .tile-wide{grid-column:1 / -1;aspect-ratio:auto !important;padding:24px !important}
  .hero-tiles > div:nth-child(2){padding:18px !important}
  .hero-tiles > div:nth-child(2) span:last-child{font-size:14px !important;line-height:1.3 !important}
}