/* ── Credentials page tokens ─────────────────────────────────────────────── */
:root {
    --cred-icon-max-h: 7.5rem; /* publication icon height — 120px equivalent */

    /* Spacing knobs from data/style.yaml › credentials (tune there, not here). */
    --cred-card-gap:  3rem;
    --cred-card-pad:  0.9rem;
    --cred-skill-gap: 0.75rem;

    /* Skill badge — font/sizing knobs (tune the whole pill family here) */
    --skill-badge-font:         var(--my-font-ui);
    --skill-badge-label-weight: 600;
    --skill-badge-label-size:   0.95rem;
    --skill-badge-note-size:    0.525rem;
    --skill-badge-icon-size:    1.25rem;
    --skill-badge-gap:          0.5rem;
    --skill-badge-pad-y:        0.4rem;
    --skill-badge-pad-x:        0.9rem;
    --skill-badge-dot-size:     0.4rem;
    /* Keep pills a consistent footprint over typical content; the meter is pushed
       to the trailing edge so text↔proficiency always reads as one clear gap.
       The max caps flex-grow so a badge alone on the last wrap row stays a pill
       instead of stretching across the whole container. */
    --skill-badge-min-width:    11rem;
    --skill-badge-max-width:    16rem;
    --skill-badge-min-height:   2.75rem;
    --skill-badge-meter-gap:    1rem;

    /* Language-band accent colours, injected from data/colors.yaml ›
       language_bands (one per fluency level 1–5). Edit colours there, not here. */
    --band-1: #6B7280;
    --band-2: #0E7490;
    --band-3: #0047AB;
    --band-4: #6D28D9;
    --band-5: #B07D14;
}

html[data-bs-theme="dark"] {
    --band-1: #9CA3AF;
    --band-2: #5DCAA5;
    --band-3: #6B9EFF;
    --band-4: #B6A6F2;
    --band-5: #E4BC45;
}

/* Section heading (Publications / Academic / Certifications).
   Replaces the previous raw `fs-3` utility class. */
.cred-section-title {
    font-family: var(--my-font-title);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 500;
    color: var(--my-black);
    letter-spacing: 0.01em;
    margin: 0;
}

.abstract{
    font-size: 0.7em;
    /* ~45ch column at small type: justification opens rivers — keep ragged
       right and let hyphenation tidy the rag instead. */
    text-align: left;
    hyphens: auto;
}
.citation{
    font-family: var(--my-font-ui);
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    flex: 1;      /* fill the card-body height */
}

/* card-body inside the citation column must stretch to the row height */
.publication .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Journal name + year — flush to bottom of the icon row */
.citation__venue {
    margin-top: auto;
}

/* Authors — single column list. */
.citation__authors {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 0.4rem;
}

/* DOI — visually de-emphasised; users click, not read. */
.citation__doi {
    font-size: 0.8em;   /* 80% of parent .citation = ~10px */
    line-height: 1.2;
    margin-top: 0;
}
.certificate__link{
    font-family: var(--my-font-ui);
}

/* Certificate ID / link button — clipping handled by the .truncate utility */
.certificate__link .btn {
    text-decoration: none;
    text-underline-offset: 0.18em;
    font-size: inherit;
    text-align: left;
}

/* DOI link — nobody reads the raw URL; clipping via the .truncate utility */
.citation__doi a.btn {
    text-decoration: none;
    text-underline-offset: 0.18em;
    font-size: inherit; /* prevent Bootstrap .btn from overriding citation font-size */
    padding-left: 0;    /* flush-left under the authors/venue block */
    padding-top: 0;     /* close the gap between venue line and DOI */
}

.certificate__link.linked-id a.btn:hover,
.certificate__link.linked-id a.btn:focus-visible,
.citation__doi a.btn:hover,
.citation__doi a.btn:focus-visible {
    text-decoration: underline;
}

.certificate__copy:hover,
.certificate__copy:focus-visible {
    text-decoration: underline;
}

/* id_copy: false — static, non-interactive id (no copy, no pointer affordance) */
.certificate__id-static {
    cursor: default;
}

.certificate__footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    margin-top: auto;
}

.certificate__extra{
    display: flex;
    flex-wrap: wrap;
}

.certificate__marks{
    display: flex;
    text-align: right;
    white-space: nowrap;   /* the pill wraps as a unit, never mid-value ("AIR 1685") */
}

/* Footer sizes by content at every width: the id/link button grows to fill and
   truncates under pressure, while the marks pill hugs its content and expands
   when there's room — wrapping to its own line only when the link leaves none.
   Overrides the Bootstrap col-* widths on these elements (which otherwise pin
   the marks to a fixed ~33% that's too narrow for longer values at lg). */
.certificate__footer { align-items: center; }
.certificate__link {
    width: auto;
    flex: 1 1 auto;   /* grow to fill; min-width:0 lets it truncate before marks wrap */
    min-width: 0;
}
.certificate__extra {
    width: auto;
    flex: 0 0 auto;   /* hug the marks pill, expanding with its content */
}
.certificate__marks {
    width: auto;      /* override col-6 / col-lg-12 fixed widths */
    justify-content: flex-end;
}

/* Container query: enables cqi units inside cert cards for fluid font scaling */
.certificate {
    container-type: inline-size;
}

/* Cert title: full 1rem at normal card widths, floors at 85% on narrow cards */
.certificate__name {
    font-size: clamp(0.85rem, 5cqi, 1rem);
}

/* Institution: fixed 85% of cert title nominal (0.85rem = 85% of 1rem).
   Independent of cert title's own scaling — doesn't shrink relative to it.
   Floors at 90% of its own size (0.765rem = 0.9 × 0.85rem) on narrow cards. */
.certificate__institution {
    font-size: clamp(0.765rem, 4.3cqi, 0.85rem);
}


@media (min-width:992px) {
    .card {
        width:45%
    }
}

/* Card surface — match the skill-pill background (var(--my-white)). Bootstrap's
   .card otherwise uses --bs-card-bg (≈ --bs-body-bg), which diverges from the
   pill surface, most visibly in dark mode. A soft --shadow-panel lift defines
   the surface (esp. in dark mode) instead of a hard border; internal breathing
   room comes from --cred-card-pad (replaces the old Bootstrap p-2), so the card
   reads as defined yet spacious. Slightly rounder corners via --radius-md. */
.certificate,
.publication {
    padding: var(--cred-card-pad);
    background-color: var(--my-white);
    border: 1px solid var(--my-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
}

/* Icon column — centering via .flex-center utility; responsive padding here
   (was p-2 p-md-3 d-flex align-items-center justify-content-center). Positioning
   context for the overlaid platform badge. */
.certificate__icon-col{
    position: relative;
    padding: 0.5rem;
}
@media (min-width: 768px) {
    .certificate__icon-col { padding: 1rem; }
}

/* Platform badge — names the delivery platform (e.g. "edX"), overlaid on the
   top-left corner of the issuer logo (absolute, so it never shifts the logo).
   Accent text on a very faint accent tint with a soft lift — reads as a quiet
   channel tag, never competing with title or logo. The tint/shadow derive from
   --my-theme-accent (via color-mix), so they track the theme. cqi scales the
   type with the card (container query on .certificate). */
.certificate__platform {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 1;
    font-family: var(--my-font-ui);
    font-size: clamp(0.55rem, 3.2cqi, 0.62rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: color-mix(in srgb, var(--my-theme-accent) 70%, transparent);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--my-theme-accent) 8%, transparent);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

/* Text column — was col-7 col-md-8 d-flex align-items-center */
.certificate__text-col{
    display: flex;
    align-items: center;
}
.certificate__text-col .card-body{
    display: flex;
    flex-wrap: wrap;
}

/* Flex-center + img object-fit come from the .icon-frame utility;
   this rule keeps only the bespoke box sizing. */
.certificate__icon{
    width:100%;
    aspect-ratio:1/1;
    padding: 0.75rem;
    border-radius: 0.5rem;
}

/* ── Publication title — full-card-width row between metadata and abstract ── */
.publication__title {
  padding: 0.5rem 0.75rem 0.15rem;
  font-family: var(--my-font-ui);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bs-body-color);
  text-align: left; /* short quoted title — justify stretched its 2–3 lines */
}

/* Icon column — was col-6 col-md-4 d-flex align-items-stretch justify-content-center p-0.
   col-* grid stays on the markup; the flex/stretch/pad live here. */
.publication__icon-col {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

/* Frame fills the icon column (height driven by the citation column beside it)
   and pins the cover to its top-left. Block padding matches the sibling
   .card-body (same --bs-card-spacer-y) so the cover's top lines up with the
   citation text; the left edge stays flush. */
.publication__icon-frame {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;            /* fill the icon column — bounds the cover's width */
    height: 100%;           /* …and its height; the cover fits within this box */
    min-width: 0;
    /* Card-body's block padding plus a little extra breathing room top/bottom. */
    padding-block: calc(var(--bs-card-spacer-y, 1rem) + 0.5rem);
    padding-inline: 0 0.5rem;
}

/* Rounding wrapper — shrink-wraps the cover (it's a flex item, so it clings to
   the image) and clips it with overflow:hidden, so ALL four corners round
   cleanly. A border-radius on the <img> itself leaves the bottom corners square
   (a quirk of border-radius + object-fit), so we clip instead. max-*:100% keeps
   it within the frame. */
.publication__icon-clip {
    display: flex;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Cover scales to fit the frame's width AND height at its natural aspect (the
   max-*:100% + auto pattern — no object-fit, so the element box equals the
   painted bitmap and the clip clings to it exactly). */
.publication__icon {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: transparent;
}

/* Row gaps — driven by data/style.yaml › credentials (replaces the Bootstrap
   gap utilities the shortcode used to emit). */
.cred-card-row  { gap: var(--cred-card-gap); }
.cred-skill-row { gap: var(--cred-skill-gap); }

/* ── Skill badge (credentials `type: skill`) ─────────────────────────────── */
.skill-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--skill-badge-gap);
    min-width: var(--skill-badge-min-width);
    min-height: var(--skill-badge-min-height);
    max-width: 100%;
    padding: var(--skill-badge-pad-y) var(--skill-badge-pad-x);
    border-radius: var(--radius-pill);
    background: var(--my-white);
    border: 1px solid var(--my-border-color);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: box-shadow var(--motion-base) ease, transform var(--motion-base) ease;
}

/* Card-style lift on hover for every pill (linked or not). */
.skill-badge:hover,
.skill-badge:focus-visible {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* Linked pills additionally underline their label on hover. */
.skill-badge--link {
    cursor: pointer;
}
.skill-badge--link:hover .skill-badge__label,
.skill-badge--link:focus-visible .skill-badge__label {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Flex-center + img object-fit come from the .icon-frame utility;
   this rule keeps the fixed pill-icon footprint. */
.skill-badge__icon {
    flex: 0 0 auto;
    width: var(--skill-badge-icon-size);
    height: var(--skill-badge-icon-size);
}

.skill-badge__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

/* nowrap comes from the .nowrap utility (mobile re-wraps via the
   .cred-skill-row override below, which outspecifies .nowrap). */
.skill-badge__label {
    font-family: var(--skill-badge-font);
    font-weight: var(--skill-badge-label-weight);
    font-size: var(--skill-badge-label-size);
    color: var(--my-black);
}

.skill-badge__note {
    font-family: var(--skill-badge-font);
    font-size: var(--skill-badge-note-size);
    color: var(--my-gray-1);
    margin-top: 0.2rem;
}

.skill-badge__meter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    /* Pin to the trailing edge; padding-left guarantees a gap even when the
       label/note is long enough to consume the pill's min-width. */
    margin-left: auto;
    padding-left: var(--skill-badge-meter-gap);
}
.skill-badge__dot {
    width: var(--skill-badge-dot-size);
    height: var(--skill-badge-dot-size);
    border-radius: 50%;
    background: var(--my-silver-1);
}
.skill-badge__dot--filled {
    background: var(--my-black);
}
/* Gold conversion (levels 6–10) — an inked dot turns gold; ink stays beneath via
   the cascade (this 2-class rule outspecifies the plain --filled ink fill). A
   faint gold glow gives a hint of "precious" without sparkle. */
.skill-badge__dot--gold.skill-badge__dot--filled {
    background: var(--my-gold);
    box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.5),
        0 0 3px color-mix(in srgb, var(--my-gold) 55%, transparent);
}

/* Language fluency band — a simple tag pill: coloured text on a faint 6% fill of
   the same hue, with a soft same-hue shadow bleed. Self-contained: margin-left: auto
   pins it to the trailing edge (same job .skill-badge__meter does for the dot meter).
   The per-band accent (--band-c) is set by the --l1…--l5 modifier from the
   injected band colours. */
.skill-badge__band {
    --band-c: var(--my-gray-1);   /* fallback until a --l* modifier sets the hue */
    margin-left: auto;
    padding: 0.18rem 0.6rem;
    text-align: center;
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--band-c);
    background: color-mix(in srgb, var(--band-c) 4%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px color-mix(in srgb, var(--band-c) 10%, transparent);
}
.skill-badge__band--l1 { --band-c: var(--band-1); }
.skill-badge__band--l2 { --band-c: var(--band-2); }
.skill-badge__band--l3 { --band-c: var(--band-3); }
.skill-badge__band--l4 { --band-c: var(--band-4); }
.skill-badge__band--l5 { --band-c: var(--band-5); }

/* Above mobile: badges grow equally to fill the row — same container coverage as cert/pub cards.
   flex-basis = min-width so wrapping behaviour is identical, but each badge in a row
   stretches to share the leftover space evenly. */
.cred-skill-row .skill-badge {
    flex: 1 1 var(--skill-badge-min-width);
    max-width: var(--skill-badge-max-width);
}

/* Mobile: two pills per row (half width), and stack each pill's contents so the
   proficiency meter sits between the label and the note (dots below title, above
   description). `display: contents` unwraps __text so the label + note become
   direct flex children of the badge, letting `order` interleave the meter. The
   round pill radius is relaxed to a card radius since the badge is now multi-line. */
@media (max-width: 576px) {
    .cred-skill-row .skill-badge {
        flex: 0 0 calc(50% - var(--cred-skill-gap) / 2);
        min-width: 0;
        max-width: none; /* the 50% two-per-row grid sizes the pill, not the cap */
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        border-radius: var(--radius-md);
    }
    .cred-skill-row .skill-badge__text {
        display: contents;
    }
    .cred-skill-row .skill-badge__icon  { order: 0; }
    .cred-skill-row .skill-badge__label { order: 1; white-space: normal; }
    .cred-skill-row .skill-badge__meter {
        order: 2;
        margin-left: 0.15rem;
        padding-left: 0;
        margin-top: 0.4rem;
    }
    /* Mobile: drop the glassy pill — the band reads as plain coloured text. */
    .cred-skill-row .skill-badge__band {
        order: 2;
        margin-left: 0.1rem;
        margin-top: 0;
        padding: 0;
        font-size:0.5rem;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .cred-skill-row .skill-badge__note  { order: 3; white-space: normal; }
}