/* Certification ticker */
/* ───────────────────────────────────────────────────────────
   6.  CERTIFICATION MARQUEE
   ─────────────────────────────────────────────────────────── */
@layer components {
  .cert-band{
    background:linear-gradient(120deg,
      color-mix(in srgb,var(--surface) 92%, #000 8%) 0%,
      color-mix(in srgb,var(--surface) 86%, #000 14%) 100%);
    border-block:1px solid color-mix(in srgb,var(--primary) 14%, transparent);
    overflow:hidden;
    position:relative;
    padding:clamp(2.2rem,5vw,3.1rem) 0;
  }
  .cert-band-inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(14px,3vw,20px);
    padding:0 clamp(16px,5vw,36px);
  }

  .cert-head{
    text-align:center;
    margin:0 auto;
  }
  .cert-head h2{
    margin:0;
    font-size:clamp(1.5rem,2.4vw,2rem);
    line-height:1.25;
  }
  .cert-subtitle{
    margin:10px auto 0;
    max-width:70ch;
    color:var(--text-muted);
    font-size:1.02rem;
  }

  .cert-modal-trigger{
    align-self:center;
    white-space:nowrap;
    min-width:200px;
  }
  .cert-band::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--home-band-base, var(--bg)) 92%, transparent) 0%,
      transparent 14%,
      transparent 86%,
      color-mix(in srgb,var(--home-band-base, var(--bg)) 90%, transparent) 100%);
    pointer-events:none;
    z-index:2;
  }
  .cert-track{
    position:relative;
    height:60px;
    cursor:grab;
    user-select:none;
    touch-action:pan-y;
    mask-image:linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  }
  .cert-track.dragging{cursor:grabbing}
  .cert-track.dragging .cert{pointer-events:none}
  .cert-track a,.cert-track img{-webkit-user-drag:none;user-select:none}
  .cert{
    position:absolute;
    top:50%;
    --ticker-x:0px;
    transform:translate3d(var(--ticker-x), -50%, 0);
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:11px 22px;
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 82%, #000 18%);
    font-family:'Poppins';
    font-weight:500;
    font-size:.95rem;
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(0,0,0,.2);
    border:1px solid color-mix(in srgb,var(--primary) 20%, transparent);
  }
  .cert img{
    height:24px;
    width:auto;
    filter:grayscale(.1);
    opacity:.9;
  }
  .cert span{opacity:.75;transition:opacity .2s ease,color .2s ease;}
  .cert:hover span{color:color-mix(in srgb,var(--primary) 82%, #ffffff 18%);opacity:1;}
  @keyframes fadeCert{from{opacity:0;transform:translate3d(var(--ticker-x), -50%, 0) scale(.96);}to{opacity:1;transform:translate3d(var(--ticker-x), -50%, 0) scale(1);}}
  .cert.reenter{animation:fadeCert .35s ease;}
  .cert-modal-body{
    padding:24px clamp(16px,5vw,32px) 32px;
  }
  .cert-modal-grid{
    --cert-card-col-gap:clamp(28px,4vw,40px);
    --cert-card-row-gap:clamp(32px,5vw,48px);
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    align-content:center;
    gap:var(--cert-card-row-gap) var(--cert-card-col-gap);
    width:100%;
    margin-top:clamp(12px,2vw,18px);
  }
  @supports not (gap: 1rem) {
    .cert-modal-grid{
      margin:-32px -28px 0;
      margin:calc(var(--cert-card-row-gap) * -1) calc(var(--cert-card-col-gap) * -1) 0;
    }
    .cert-modal-grid .cert-card{
      margin:32px 28px 0;
      margin:var(--cert-card-row-gap) var(--cert-card-col-gap) 0;
    }
  }
  .cert-card{
    background:color-mix(in srgb,var(--surface) 94%, #010306 6%);
    border:1px solid color-mix(in srgb,var(--primary) 20%, transparent);
    border-radius:18px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
    justify-content:space-between;
    flex:0 1 clamp(320px,32vw,360px);
    min-width:280px;
    max-width:420px;
    box-sizing:border-box;
    box-shadow:0 20px 38px rgba(0,0,0,.28);
    position:relative;
  }
  .cert-card-header{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
	  .cert-card-logo{
	    width:52px;
	    height:52px;
	    border-radius:14px;
	    background:var(--logo-tile-bg-cert);
	    padding:10px;
	    object-fit:contain;
	    box-shadow:0 8px 20px rgba(0,0,0,.3);
	  }
  .cert-card-label{
    margin:0;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--primary);
  }
  .cert-card h4{
    margin:4px 0;
    font-size:1.05rem;
    font-family:'Poppins';
    color:var(--text-light);
  }
  .cert-card-meta{
    margin:0;
    font-size:.92rem;
    color:var(--text-muted);
  }
  .cert-card-note{
    margin:0;
    font-size:.95rem;
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
    line-height:1.5;
  }
  .cert-card-note.subtle{
    font-size:.9rem;
    opacity:.8;
  }
  .cert-card-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }
  .cert-card-actions .btn-secondary{
    width:100%;
    justify-content:center;
    box-sizing:border-box;
  }
  @media (max-width: 900px) {
    .cert-modal-trigger{
      width:100%;
      min-width:0;
    }
    .cert-modal-grid{
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .cert-modal-grid .cert-card{
      width:min(100%,420px);
      max-width:100%;
    }
    .cert-card-actions .btn-secondary{
      width:100%;
    }
  }
}