/* =========================================================
   SSHG Group - Certifications page premium styles (certifications.css)
   Loaded by certifications.php AFTER about.css, so it reuses the same
   .ab- design system. All NEW classes use the .cr- prefix.
   ========================================================= */

/* ---------- hero chips (two-line label, single row on phones) ---------- */
.cr-chips small{display:block;margin-top:2px;font-weight:600;font-size:.76rem;letter-spacing:.06em;color:#CFE5D8}
@media(max-width:620px){
  .cr-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 8px}
  .cr-chips li{flex-direction:column;gap:8px;text-align:center;font-size:.72rem;letter-spacing:0;white-space:normal;line-height:1.25}
  .cr-chips small{font-size:.68rem;letter-spacing:.02em}
}

/* ---------- intro media tweaks ---------- */
.cr-who .ab-main img{object-position:50% center}
.cr-who .ab-inset img{object-position:center}

/* ---------- logo tile (always white so every logo reads clearly) ---------- */
.cr-logo{--p:16px;position:relative;height:170px;margin-bottom:24px;background:#fff;border:1px solid #E4ECE7;border-radius:20px;box-shadow:inset 0 0 0 1px #ffffff,0 6px 16px #0a3d260d;overflow:hidden}
.cr-logo img{position:absolute;left:var(--p);top:var(--p);width:calc(100% - var(--p) * 2);height:calc(100% - var(--p) * 2);max-width:none;object-fit:contain;object-position:center;transition:transform .6s var(--ease)}

/* ---------- 2. GROUP CERTIFICATIONS ---------- */
.cr-certs{padding:120px 0}
.cr-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cr-cgrid>div{display:flex}
.cr-ccard{position:relative;flex:1;display:flex;flex-direction:column;padding:34px 30px 32px;overflow:hidden;background:var(--w);border:1px solid var(--line);border-radius:28px;box-shadow:0 14px 38px #0a3d2612;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.cr-ccard::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cr-ccard:hover{transform:translateY(-10px);border-color:var(--o);box-shadow:0 34px 66px #0a3d2630}
.cr-ccard:hover::after{transform:scaleX(1)}
.cr-ccard:hover .cr-logo img{transform:scale(1.07)}
.cr-ccard .ab-ghost{right:24px;top:8px;color:var(--g);opacity:.07;z-index:0}
.cr-ccard .cr-logo{position:relative;z-index:1}
.cr-pill{position:relative;align-self:flex-start;margin-bottom:14px;padding:7px 16px;border-radius:50px;font:700 .74rem "Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--g),var(--g2));box-shadow:0 8px 18px #0a3d2640}
.cr-ccard h3{position:relative;margin:0 0 8px;font-size:1.5rem;color:var(--g)}
.cr-ccard p{position:relative;margin:0;color:var(--mut)}
@media(prefers-color-scheme:dark){.cr-ccard h3,.cr-lcard h3{color:#8FD6A8}.cr-ccard .ab-ghost{color:#fff}}

/* ---------- 3. CREDENTIALS PILLARS (dark) ---------- */
.cr-pillars{padding:120px 0}
.cr-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cr-pgrid>div{display:flex}
.cr-pcard{position:relative;flex:1;padding:44px 28px 36px;border-radius:28px;overflow:hidden;background:linear-gradient(165deg,#ffffff26,#ffffff08);border:1px solid #ffffff2e;box-shadow:0 30px 64px #00000040,inset 0 1px 0 #ffffff30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.cr-pcard::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(.18);transform-origin:left;transition:transform .7s var(--ease)}
.cr-pcard:hover{transform:translateY(-10px);border-color:#f6b73c88;box-shadow:0 44px 80px #00000060}
.cr-pcard:hover::after{transform:scaleX(1)}
.cr-pcard .ab-ghost{right:22px;top:8px;font-size:5rem;color:#ffffff12}
.cr-pcard:hover .ab-vic{transform:rotate(-8deg) scale(1.08)}
.cr-pcard h3{position:relative;margin:0 0 10px;font-size:1.4rem;color:#fff}
.cr-pcard p{position:relative;margin:0;font-size:1.04rem;line-height:1.65;color:#D8EBDF}

/* ---------- 4. YOUR TIMESS LICENCES ---------- */
.cr-lic{padding:120px 0;background:var(--w)}
.cr-lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cr-lgrid>div{display:flex}
.cr-lcard{position:relative;flex:1;display:flex;flex-direction:column;padding:22px 22px 26px;overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:24px;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.cr-lcard::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--o),var(--gold));transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease)}
.cr-lcard:hover{transform:translateY(-8px);border-color:var(--o);box-shadow:0 28px 56px #0a3d2628}
.cr-lcard:hover::after{transform:scaleX(1)}
.cr-lcard:hover .cr-logo img{transform:scale(1.07)}
.cr-lcard .cr-logo{--p:12px;height:130px;margin-bottom:20px;border-radius:16px}
.cr-lcard h3{margin:0 0 6px;font-size:1.12rem;line-height:1.25;color:var(--g)}
.cr-lcard p{margin:0;font-size:.95rem;line-height:1.5;color:var(--mut)}
.cr-lnote{max-width:760px;margin:46px auto 0;text-align:center;color:var(--mut);font-size:1.05rem}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .cr-pgrid,.cr-lgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1020px){
  .cr-certs,.cr-pillars,.cr-lic{padding:84px 0}
  .cr-cgrid{grid-template-columns:repeat(2,1fr)}
  .cr-cgrid>div:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 13px)}
}
@media(max-width:620px){
  .cr-cgrid{grid-template-columns:1fr;gap:20px}
  .cr-cgrid>div:last-child:nth-child(odd){width:auto}
  .cr-ccard{padding:26px 22px 26px}
  .cr-logo{height:150px;margin-bottom:20px}
  .cr-pgrid{grid-template-columns:1fr;gap:18px}
  .cr-pcard{padding:38px 24px 30px}
  .cr-lgrid{grid-template-columns:1fr 1fr;gap:14px}
  .cr-lcard{padding:14px 14px 18px;border-radius:20px}
  .cr-lcard .cr-logo{--p:8px;height:104px;margin-bottom:14px;border-radius:14px}
  .cr-lcard h3{font-size:.98rem}
  .cr-lcard p{font-size:.85rem;line-height:1.45}
  .cr-lnote{margin-top:34px;font-size:1rem}
}
@media(max-width:380px){
  .cr-lgrid{grid-template-columns:1fr}
}