/* Standalone shared component: base, QR layout, Pathway and badge tooltips.
   Loaded by credentials.php; no dependency on the legacy credentials.css. */
/* AI Evolution — compact credentials and native detail dialogs. */
.credentials-block { margin: 2.5rem 0 0; padding: 0; }
.credentials-heading { margin-bottom: 1.25rem; }
.credentials-eyebrow { color: var(--arancione, #f97316); font-size: .72rem; font-weight: 700; letter-spacing: .1em; margin-bottom: .45rem; }
.credentials-heading h3 { font-size: 1.4rem; font-weight: 800; color: var(--white, #ffffff); margin-bottom: .5rem; }
.credentials-heading > p { max-width: 760px; font-size: .9rem; line-height: 1.7; color: var(--text-muted, #94a3b8); }
.credentials-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.credential-card { min-width: 0; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 10px; background: rgba(255,255,255,.025); }
.credential-summary { padding: 1rem .65rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; list-style: none; cursor: pointer; text-align: center; border-radius: 9px; transition: background .15s, box-shadow .15s; }
.credential-summary::-webkit-details-marker { display: none; }
.credential-summary::marker { content: ''; }
.credential-summary:hover { background: rgba(40,101,227,.09); box-shadow: inset 0 0 0 1px rgba(96,165,250,.25); }
.credential-summary:focus-visible { outline: 2px solid var(--arancione, #f97316); outline-offset: 3px; }
.credential-summary img, .credential-placeholder { display: block; width: 112px; height: 112px; max-width: 100%; object-fit: contain; }
.credential-placeholder { display: grid; place-items: center; color: #93c5fd; }
.credential-caption { display: flex; flex-direction: column; gap: .25rem; max-width: 100%; }
.credential-tile-issuer { font-size: .72rem; font-weight: 600; line-height: 1.4; color: var(--arancione, #f97316); overflow-wrap: anywhere; }
.credential-title { font-size: .82rem; font-weight: 650; line-height: 1.45; color: var(--white, #ffffff); overflow-wrap: anywhere; }
.credential-detail { padding: 1.25rem; text-align: left; }
.credential-card[open] .credential-detail { border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
.credential-issuer { font-size: .78rem; color: var(--arancione, #f97316); font-weight: 700; margin-bottom: .4rem; overflow-wrap: anywhere; }
.credential-detail h4 { font-size: 1.25rem; line-height: 1.35; color: var(--white, #ffffff); font-weight: 750; margin-bottom: 1rem; overflow-wrap: anywhere; }
.credential-dates { font-size: .85rem; color: var(--text-muted, #94a3b8); line-height: 1.7; margin: 0 0 .9rem; }
.credential-dates > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.credential-dates dt { font-weight: 500; }
.credential-dates dd { margin: 0; color: var(--text, #e2e8f0); }
.credential-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.credential-tags:empty { display: none; }
.credential-tag { font-size: .7rem; line-height: 1.5; color: #bfdbfe; border: 1px solid rgba(96,165,250,.24); background: rgba(40,101,227,.07); padding: .22rem .5rem; border-radius: 4px; }
.credential-tag-expired { color: #fdba74; border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.07); }
.credential-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.credential-primary { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .9rem; background: var(--blu, #2865e3); color: #fff; border-radius: 6px; font-size: .82rem; font-weight: 700; text-decoration: none; }
.credential-primary:hover { filter: brightness(1.12); }
.credential-download { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; color: var(--text-muted, #94a3b8); text-decoration: underline; text-underline-offset: .2em; }
.credential-download:hover { color: var(--white, #ffffff); }
.credential-actions a:focus-visible, .credential-modal-close:focus-visible { outline: 2px solid var(--arancione, #f97316); outline-offset: 4px; }
dialog.credential-modal { color-scheme: dark; font: inherit; position: fixed; inset: 0; margin: auto; padding: 0; width: min(520px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid #334155; border-radius: 14px; color: var(--text, #e2e8f0); background: #161d2b; box-shadow: 0 24px 90px rgba(0,0,0,.45); }
dialog.credential-modal::backdrop { background: rgba(4,9,18,.8); }
.credential-modal .credential-detail { padding: 2rem; }
.credential-modal .credential-detail h4 { padding-right: 1.75rem; }
.credential-modal-close { position: absolute; right: .6rem; top: .6rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted, #94a3b8); font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.credential-modal-close:hover { color: #fff; background: rgba(255,255,255,.06); }
html.credential-modal-open { overflow: hidden; }
@media (max-width: 760px) { .credentials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .credential-summary { padding: .85rem .5rem; }
  .credential-summary img, .credential-placeholder { width: 104px; height: 104px; }
  .credential-modal .credential-detail { padding: 1.5rem; }
}
@media (max-width: 330px) { .credentials-grid { grid-template-columns: 1fr; } }

/* Personal QR card: same credential component, adapted to the narrow contact column. */
.main-card > .profile-col, .main-card > .form-col { min-width: 0; }
.credentials-bcard { margin-top: 1.5rem; }
.credentials-bcard .credentials-block { margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.credentials-bcard .credentials-heading { margin-bottom: .8rem; }
.credentials-bcard .credentials-eyebrow, .credentials-bcard .credentials-heading > p { display: none; }
.credentials-bcard .credentials-heading h3 { font-size: .95rem; line-height: 1.4; margin: 0; }
.credentials-bcard .credentials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.credentials-bcard .credential-summary { padding: .65rem .3rem; gap: .5rem; }
.credentials-bcard .credential-summary img, .credentials-bcard .credential-placeholder { width: 72px; height: 72px; }
.credentials-bcard .credential-placeholder svg { width: 44px; height: 44px; }
.credentials-bcard .credential-caption { gap: .2rem; }
.credentials-bcard .credential-tile-issuer { font-size: .65rem; }
.credentials-bcard .credential-title { font-size: .72rem; line-height: 1.4; }
@media (max-width: 360px) {
  .credentials-bcard .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Certificate preview and image-only badges; preserves the user's grid. */
.credential-summary .credential-caption { display: none; }
.credential-pathway {
  min-width: 0; margin: 0 0 1.25rem;
  border-color: rgba(249, 115, 22, .35); border-radius: 12px;
}
.credential-pathway .credential-pathway-summary { display: block; padding: 0; border-radius: 11px; }
.credential-pathway .credential-pathway-summary img {
  display: block; width: 100%; height: auto; max-width: 100%; border-radius: 11px;
}
.credential-pathway-fallback {
  display: block; padding: 1.5rem; color: var(--white, #fff);
  font-weight: 700; font-size: 1.2rem; line-height: 1.4;
}
.credential-pathway-label {
  margin: 0 0 .6rem; color: var(--arancione, #f97316); font-size: .7rem;
  font-weight: 750; line-height: 1.5; letter-spacing: .1em;
}
.credential-pathway-detail .credential-pathway-image {
  display: block; width: 100%; height: auto; margin: 1rem 0; border-radius: 6px;
}
.credential-pathway-description {
  margin: 0 0 1rem; color: var(--text-muted, #94a3b8); font-size: .88rem; line-height: 1.65;
}
.credential-pathway-detail .credential-actions {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
.credential-modal:has(.credential-pathway-detail) { width: min(780px, calc(100% - 2rem)); }
.credentials-bcard .credential-pathway { margin-bottom: 1rem; }
.credentials-bcard .credential-pathway .credential-pathway-summary { padding: 0; }
.credentials-bcard .credential-pathway .credential-pathway-summary img { width: 100%; height: auto; }
.credential-caption.credential-tooltip {
  display: none; position: fixed; z-index: 10000; box-sizing: border-box;
  width: min(260px, calc(100vw - 24px)); max-width: none;
  padding: .7rem .85rem; gap: .3rem; border: 1px solid #334155; border-radius: 8px;
  color: #f8fafc; background: #161d2b; box-shadow: 0 8px 24px rgba(0,0,0,.3); text-align: left;
}
.credential-caption.credential-tooltip.is-visible { display: flex; }
.credential-tooltip .credential-title { color: #f8fafc; font-size: .82rem; line-height: 1.45; }
.credential-tooltip .credential-tile-issuer { color: var(--arancione, #f97316); font-size: .72rem; }
.credential-pathway-milestone {
  margin: 1.35rem 0; padding: 1rem;
  border: 1px solid rgba(249,115,22,.3); border-radius: 8px;
  background: rgba(249,115,22,.06);
}
.credential-pathway-milestone-title {
  margin: 0 0 .3rem; color: var(--white, #fff); font-size: 1.1rem;
  font-weight: 750; line-height: 1.4;
}
.credential-pathway-milestone-date {
  margin: 0 0 .8rem; color: var(--text-muted, #94a3b8); font-size: .82rem;
}
.credential-pathway-milestone figure { margin: 0; }
.credential-pathway-milestone img {
  display: block; width: 100%; height: auto; border-radius: 5px;
}
.credential-pathway-milestone figcaption {
  margin-top: .5rem; color: var(--text-muted, #94a3b8); font-size: .72rem; line-height: 1.5;
}
.credential-pathway-skills-intro {
  margin: 0 0 .8rem; color: var(--white, #fff); font-size: .9rem; font-weight: 650;
}
.credential-pathway-skills {
  margin: 0; padding-left: 1.15rem; color: var(--text-muted, #94a3b8); font-size: .88rem; line-height: 1.7;
}
.credential-pathway-skills li { padding-left: .15rem; margin-bottom: .8rem; }
.credential-pathway-skills li:last-child { margin-bottom: 0; }
.credential-pathway-skills strong { color: var(--white, #fff); font-weight: 650; }
@media (max-width: 520px) {
  .credential-pathway-detail .credential-actions { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* Keep course badges square even inside a narrow five-column grid. */
.credential-card:not(.credential-pathway) .credential-summary img { height: auto; aspect-ratio: 1; object-fit: contain; }