/* "Our Certifications" band (inc/certifications.php). Linked only when a
   certificate image exists. Loads after home.css, whose element rules
   (section{padding}, h3{Lato 200}, p{18px}) hit this markup - so every
   property they set is re-declared here under .tt-certs. */

.tt-certs{
  background:var(--surface);
  padding-top:var(--sp-8); padding-bottom:var(--sp-8);
}
@media (max-width:767px){
  .tt-certs{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
}

.tt-certs .tt-certs__head{ text-align:center; margin:0 0 var(--sp-6); }
.tt-certs .tt-certs__rule{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
}
/* Lines take only what the heading leaves (basis 0), so the title stays on
   one line down to 320 and the lines shrink instead. */
.tt-certs .tt-certs__line{
  flex:1 1 0; max-width:72px; min-width:12px; height:1px;
  background:rgba(11,37,69,.22);
}
.tt-certs .tt-certs__title{
  flex:0 1 auto; min-width:0;
  font-size:30px; margin:0; letter-spacing:-.01em;
}
.tt-certs .tt-certs__sub{
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  color:var(--ink-500); margin:var(--sp-2) 0 0;
}
@media (max-width:767px){
  .tt-certs .tt-certs__rule{ gap:var(--sp-3); }
  .tt-certs .tt-certs__title{ font-size:24px; }
  .tt-certs .tt-certs__sub{ font-size:15px; }
}

/* One column on phones, two from 640. A lone card keeps the two-up width. */
.tt-certs .tt-certs__grid{
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5);
  max-width:880px;
}
.tt-certs .tt-certs__grid--one{ max-width:428px; }
@media (min-width:640px){
  .tt-certs .tt-certs__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-certs .tt-certs__grid--one{ grid-template-columns:minmax(0,1fr); }
}

.tt-certs .tt-certs__card{
  background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:var(--sp-4);
}

/* One fixed 7:5 frame for both cards, so the two line up and hold their size
   before the lazy image arrives. 7:5 is the Startup India sheet's own ratio
   (538x380), so it fills the frame; the portrait Udyam page sits centred at
   full height. The border and shadow are on the <img> itself, so each
   certificate reads as a framed sheet, not a letterboxed box. */
.tt-certs .tt-certs__frame{
  display:flex; align-items:center; justify-content:center;
  position:relative;
  aspect-ratio:7 / 5;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:zoom-in;
}
.tt-certs .tt-certs__frame img{
  display:block; flex:none;
  width:auto; height:auto; max-width:100%; max-height:100%;
  background:var(--white);
  border:1px solid rgba(11,37,69,.16); border-radius:6px;
  box-shadow:0 2px 8px rgba(11,37,69,.10);
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/* One axis fixed (class set in PHP from the file's size) so the width/height
   attributes' ratio sizes the sheet before the lazy image arrives. */
.tt-certs .tt-certs__frame--tall img{ height:100%; width:auto; }
.tt-certs .tt-certs__frame--wide img{ width:100%; height:auto; }
.tt-certs .tt-certs__frame:hover img{
  box-shadow:0 8px 22px rgba(11,37,69,.16); transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .tt-certs .tt-certs__frame img{ transition:none; }
  .tt-certs .tt-certs__frame:hover img{ transform:none; }
}
/* main.css kills every link/button ring with !important; restore it here. */
.tt-certs .tt-certs__frame:focus-visible,
.tt-certs .tt-certs__close:focus-visible{
  outline:2px solid var(--blue-600) !important; outline-offset:2px !important;
}

.tt-certs .tt-certs__meta{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.tt-certs .tt-certs__ico{ flex:none; color:var(--green-600); margin-top:1px; }
.tt-certs .tt-certs__name{
  font-family:var(--font-display); font-size:17px; font-weight:700;
  line-height:1.3; letter-spacing:0; color:var(--navy-900);
  margin:0 0 var(--sp-1);
}
.tt-certs .tt-certs__line2{
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  color:var(--ink-500); margin:0;
}

/* Lightbox. Without JS or <dialog> support the link opens the image. */
/* The close button sits in its own 56px strip above the image, so it never
   covers a logo or seal on the certificate. */
.tt-certs .tt-certs__dlg{
  padding:56px 12px 12px; border:0; border-radius:var(--r-lg);
  background:var(--white); box-shadow:var(--shadow-float);
  max-width:min(96vw, 1100px); max-height:94vh; overflow:auto;
}
.tt-certs .tt-certs__dlg::backdrop{ background:rgba(11,37,69,.78); }
.tt-certs .tt-certs__full{
  display:block; max-width:100%; max-height:calc(94vh - 68px);
  width:auto; height:auto; margin:0 auto;
  border:1px solid rgba(11,37,69,.16); border-radius:4px;
}
.tt-certs .tt-certs__close{
  position:absolute; top:6px; right:6px;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--white); color:var(--navy-900);
  box-shadow:var(--shadow-lift); cursor:pointer;
}
.tt-certs .tt-certs__close:hover{ background:var(--blue-50); }