/* Hello There — public card styles */

.hello-there-card,
.htc {
    background: var(--htc-bg, #1a1a2e);
    color: var(--htc-fg, #ffffff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 440px;
    width: 100%;
    font-family: var(--htc-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--htc-font-size, 16px);
    font-weight: var(--htc-font-weight, 400);
    margin: 0 auto;
}

/* Shell wraps the left (banner/identity/contacts) and right (about) columns.
   Single column below the desktop breakpoint — this is the mobile layout, so
   it needs to stand on its own and look complete, not like a cut-down
   desktop view. */

.htc-shell {
    display: flex;
    flex-direction: column;
}

.htc-col--left {
    display: flex;
    flex-direction: column;
}

.htc-about {
    padding: 0 1.25rem 1.5rem;
}

/* Banner */

.htc-banner {
    /* Explicit, not incidental: many host themes (confirmed with RapidWeaver's
       Foundation 6 theme) reset `html { box-sizing: border-box }` combined
       with `*, *::before, *::after { box-sizing: inherit }`, which every
       element in this card silently inherits unless it declares its own
       value. Under border-box, `aspect-ratio` governs the TOTAL box, so the
       slogan-overlap fix below (padding-bottom added when there's slogan
       text) would just eat into the content area instead of growing the
       box — no visible height change at all, reproducing the exact "still
       overlapping" symptom this was meant to fix. content-box makes
       aspect-ratio govern the content box only, so padding-bottom reliably
       adds real height on top of it regardless of the host page's reset. */
    box-sizing: content-box;
    aspect-ratio: 21 / 8;
    align-self: stretch;
    border-radius: 16px 16px 0 0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
}

/* Banner slogan */

.htc-slogan {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    font-size: calc(var(--htc-font-size, 16px) * 1.22);
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
}

/* Avatar / logo overlap row
   Positioned absolutely (not CSS Grid) so avatar and logo can each carry an
   independent size (small/medium/large) without one's offset skewing the
   other's — a shared grid row's auto-height is driven by both children, so a
   small logo next to a large avatar would otherwise shrink the row out from
   under the avatar. `.htc-overlap` sits as a zero-height anchor at the
   banner/body seam; its own inline margin-bottom (set per-card in PHP) just
   reserves enough flow space for whichever of avatar/logo hangs lowest, so
   the body content below never collides with it. */

.htc-overlap {
    position: relative;
    padding: 0 1.25rem;
    z-index: 2;
}

.htc-overlap--flat {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.25rem 1.25rem 0;
}

.htc-overlap > .htc-avatar,
.htc-overlap > .htc-avatar--initials {
    position: absolute;
    left: 1.25rem;
    bottom: -40px;
}

.htc-overlap > .htc-logo {
    position: absolute;
    right: 1.25rem;
    bottom: -40px;
}

/* Centered avatar */
.htc-overlap--avatar-center > .htc-avatar,
.htc-overlap--avatar-center > .htc-avatar--initials {
    left: 50%;
    transform: translateX(-50%);
}

/* Centered logo */
.htc-overlap--logo-center > .htc-logo {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Flat (no-banner) slot positions — normal flow, no overlap */
.htc-overlap--flat > .htc-avatar,
.htc-overlap--flat > .htc-avatar--initials {
    grid-column: 1;
    justify-self: start;
}

.htc-overlap--flat > .htc-logo {
    grid-column: 3;
    justify-self: end;
}

.htc-overlap--flat.htc-overlap--avatar-center > .htc-avatar,
.htc-overlap--flat.htc-overlap--avatar-center > .htc-avatar--initials {
    grid-column: 2;
    justify-self: center;
}

.htc-overlap--flat.htc-overlap--logo-center > .htc-logo {
    grid-column: 2;
    justify-self: center;
}

/* Avatar */

.htc-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--htc-bg, #1a1a2e);
    flex-shrink: 0;
}

.htc-avatar--square {
    border-radius: 12px;
}

.htc-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--htc-font-size, 16px) * 1.83);
    font-weight: 700;
    background: var(--htc-accent, #e94560);
    color: var(--htc-bg, #1a1a2e);
}

/* Avatar size — same half-in/half-out overlap as small at every step, just
   bigger: medium is 1.5x, large is 2x (what medium used to be). */

.htc-avatar--md {
    width: 120px;
    height: 120px;
}

.htc-overlap > .htc-avatar--md,
.htc-overlap > .htc-avatar--initials.htc-avatar--md {
    bottom: -60px;
}

.htc-avatar--md.htc-avatar--initials {
    font-size: calc(var(--htc-font-size, 16px) * 2.56);
}

.htc-avatar--lg {
    width: 160px;
    height: 160px;
}

.htc-overlap > .htc-avatar--lg,
.htc-overlap > .htc-avatar--initials.htc-avatar--lg {
    bottom: -80px;
}

.htc-avatar--lg.htc-avatar--initials {
    font-size: calc(var(--htc-font-size, 16px) * 3.41);
}

/* Company logo */

.htc-logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.htc-logo--circle {
    border-radius: 50%;
}

.htc-logo--wide {
    width: 120px;
    height: 44px;
    border-radius: 8px;
}

/* Logo size — same overlap treatment as avatar: medium is 1.5x, large is 2x
   (what medium used to be). Wide keeps its own aspect ratio at each step
   instead of becoming square. */

.htc-logo--md {
    width: 84px;
    height: 84px;
}

.htc-logo--wide.htc-logo--md {
    width: 180px;
    height: 66px;
}

.htc-overlap > .htc-logo--md {
    bottom: -60px;
}

.htc-logo--lg {
    width: 112px;
    height: 112px;
}

.htc-logo--wide.htc-logo--lg {
    width: 240px;
    height: 88px;
}

.htc-overlap > .htc-logo--lg {
    bottom: -80px;
}

/* Card body */

.htc-body {
    padding: 1rem 1.25rem 1.75rem;
}

.htc-name {
    font-size: calc(var(--htc-font-size, 16px) * 1.71);
    font-weight: 700;
    margin: 0.5rem 0 0.2rem;
    line-height: 1.2;
    color: var(--htc-fg, #ffffff);
}

.htc-jobtitle {
    font-size: calc(var(--htc-font-size, 16px) * 1.04);
    font-weight: 600;
    margin: 0 0 0.15rem;
    color: var(--htc-accent, #e94560);
}

.htc-company {
    font-size: calc(var(--htc-font-size, 16px) * 0.98);
    margin: 0 0 1rem;
    opacity: 0.6;
    color: var(--htc-fg, #ffffff);
}

/* Contacts */

.htc-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.htc-contact {
    display: flex;
    /* flex-start, not center: the label sits on its own line below the
       value now (see .htc-contact__text), so the row's height can vary
       with wrapped/long content — center would drift the icon away from
       the value's first line as the row grows. */
    align-items: flex-start;
    gap: 0.5rem;
    font-size: calc(var(--htc-font-size, 16px) * 1.04);
    text-decoration: none;
    color: var(--htc-fg, #ffffff);
    transition: opacity 0.15s ease;
}

.htc-contact:hover {
    opacity: 0.7;
}

.htc-contact svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.65;
    /* Nudge down from the flex-start edge to visually center against the
       value's first line instead of sitting glued to its very top. */
    margin-top: 0.2em;
}

.htc-contact__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    /* Without this a flex child won't shrink below its content's intrinsic
       width, so overflow-wrap on the value below would never actually
       trigger — the row would just overflow instead of wrapping. */
    min-width: 0;
}

.htc-contact__value {
    /* overflow-wrap only breaks a word when a line genuinely can't fit it,
       and prefers natural break points (after "@", ".", "-", "/") over
       mid-word — word-break: break-all broke wherever needed regardless,
       which is what orphaned single trailing characters (e.g. a lone "m"
       from ".com") onto their own line. */
    overflow-wrap: anywhere;
}

.htc-contact__label {
    font-size: calc(var(--htc-font-size, 16px) * 0.85);
    opacity: 0.5;
}

/* Social row */

.htc-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 0.75rem;
}

.htc-social__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.htc-social__icon:hover {
    transform: scale(1.12);
    opacity: 0.85;
}

.htc-social__icon svg {
    width: 18px;
    height: 18px;
}

/* Disclosure (twirl-down) */

.htc-disclosure {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0;
}

.htc-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0;
    /* A section header (About Me, Experience, ...) needs to read as bigger
       than the regular body text it sits above (contacts/resume rows sit
       at 0.85), not smaller than it — this used to be 0.82, actually
       smaller than the body copy it labels. */
    font-size: calc(var(--htc-font-size, 16px) * 1.22);
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.75;
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 0.5rem;
}

.htc-disclosure__summary::-webkit-details-marker {
    display: none;
}

.htc-disclosure__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.htc-disclosure[open] .htc-disclosure__chevron {
    transform: rotate(180deg);
}

.htc-disclosure__summary:hover {
    opacity: 1;
}

.htc-disclosure__body {
    padding-bottom: 0.75rem;
    /* This is the anchor: Base Font Size (--htc-font-size) is defined as the
       size of this regular paragraph/body text — About Me/About Company
       copy, resume item descriptions — with every other size in the card
       expressed as a multiple of it (headers > 1, secondary labels < 1). */
    font-size: var(--htc-font-size, 16px);
    line-height: 1.6;
    opacity: 0.8;
    color: var(--htc-fg, #ffffff);
}

.htc-disclosure__body p {
    margin: 0 0 0.5rem;
}

.htc-disclosure__body p:last-child {
    margin-bottom: 0;
}

/* About Me / About Company are styled-text (rich HTML) fields, so this body
   can contain anything the editor toolbar produces, not just <p>. Protects
   against a host page's own `p { color }` (or li/td/etc.) rule beating our
   inherited --htc-fg color — a selector always beats plain inheritance
   regardless of specificity — while still letting the editor's own
   text-color spans win, since an inline style always beats an external
   stylesheet selector. */
.htc-disclosure__body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, span, strong, em, dt, dd) {
    color: inherit;
}

.htc-disclosure__body :is(h1, h2, h3, h4, h5, h6) {
    margin: 0.75rem 0 0.35rem;
    line-height: 1.3;
}

.htc-disclosure__body :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.htc-disclosure__body h1 {
    font-size: calc(var(--htc-font-size, 16px) * 1.34);
}

.htc-disclosure__body h2 {
    font-size: calc(var(--htc-font-size, 16px) * 1.28);
}

.htc-disclosure__body :is(h3, h4, h5, h6) {
    font-size: calc(var(--htc-font-size, 16px) * 1.22);
}

.htc-disclosure__body :is(ul, ol) {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.htc-disclosure__body li {
    margin-bottom: 0.2rem;
}

.htc-disclosure__body blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
    opacity: 0.85;
}

.htc-disclosure__body a {
    color: var(--htc-accent, #e94560);
    text-decoration: underline;
}

.htc-disclosure__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.4rem 0;
    border-radius: 6px;
}

.htc-disclosure__body :is(pre, code) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(var(--htc-font-size, 16px) * 0.95);
}

.htc-disclosure__body pre {
    margin: 0 0 0.5rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow-x: auto;
}

.htc-disclosure__body code {
    padding: 0.1rem 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.htc-disclosure__body table {
    width: 100%;
    margin: 0 0 0.5rem;
    font-size: calc(var(--htc-font-size, 16px) * 0.95);
    border-collapse: collapse;
}

.htc-disclosure__body :is(th, td) {
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
}

.htc-disclosure__body hr {
    margin: 0.6rem 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Work Experience / Accolades & Awards / Groups & Associations — each is a
   .htc-disclosure whose body lists one .htc-resume-item per deck entry. The
   body itself keeps .htc-disclosure__body (font size, rich-text tag rules,
   etc.) so a styled-text description renders identically to About Me/About
   Company; .htc-resume-list only adds the vertical stacking + divider. */

.htc-resume-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.htc-resume-item {
    padding: 0.75rem 0;
}

.htc-resume-item:first-child {
    padding-top: 0;
}

.htc-resume-item:last-child {
    padding-bottom: 0;
}

.htc-resume-item + .htc-resume-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.htc-resume-item__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    /* Job title / degree / appearance title — a sub-header for each resume
       row, so it needs a step up from the 0.78-0.85 body-text cluster
       (meta line, description text) beneath it, same as the section labels
       above it were just corrected to. */
    font-size: calc(var(--htc-font-size, 16px) * 1.16);
    font-weight: 600;
    color: var(--htc-fg, #ffffff);
}

.htc-resume-item__dates {
    font-size: calc(var(--htc-font-size, 16px) * 0.88);
    font-weight: 500;
    opacity: 0.65;
    white-space: nowrap;
    flex-shrink: 0;
}

.htc-resume-item__title {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.htc-resume-item__title:hover {
    text-decoration: underline;
}

.htc-resume-item__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.htc-resume-item__icon svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.htc-resume-item__meta {
    margin-top: 0.1rem;
    font-size: calc(var(--htc-font-size, 16px) * 0.95);
    opacity: 0.7;
}

.htc-resume-item__desc {
    margin-top: 0.4rem;
    padding-bottom: 0;
}

/* Save Contact button */

.htc-vcf {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.htc-vcf__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--htc-accent, #e94560);
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: calc(var(--htc-font-size, 16px) * 1.04);
    font-weight: 600;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

.htc-vcf__btn:hover {
    opacity: 0.85;
}

.htc-vcf__btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Shared by Calendar's optional header and each Custom Code entry's header
   — a plain, non-interactive section title (no chevron, no cursor:pointer)
   since neither section twirls open/closed. Font size/weight/letter-spacing/
   opacity match .htc-disclosure__summary so Calendar and Custom Code
   headers read as the same visual "section title" as About Me, Experience,
   Education, etc. Case is left to whatever the admin typed, not forced. */
.htc-section-header {
    margin: 0 0 0.5rem;
    font-size: calc(var(--htc-font-size, 16px) * 1.22);
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

/* Calendar — direct-link button and/or embed, always visible (not a
   twirl-down). The two are independent, so this block might contain just
   the button, just the embed, or both stacked. Header is separately
   optional on top of that. */

.htc-calendar {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.htc-calendar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 1rem;
    background: var(--htc-accent, #e94560);
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: calc(var(--htc-font-size, 16px) * 1.04);
    font-weight: 600;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

.htc-calendar__btn:hover {
    opacity: 0.85;
}

.htc-calendar__btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.htc-calendar__embed {
    border-radius: 8px;
}

/* Some booking-embed providers (confirmed with Lunacal) build their inline
   widget around percentage/inherited height (e.g. `height:100%` on their
   own wrapper div, `height:inherit` on a custom element inside it) rather
   than sizing to their own content — they expect the HOST page to hand
   down a definite height. We don't (this container is intentionally
   auto-height, sized to whatever the embed renders), so with nothing
   definite to resolve against, their wrapper can end up far taller than
   the actual widget — the iframe itself gets a correct, content-driven
   explicit height (e.g. `style="height: 366px"`, set by their own script),
   but sits inside an oversized wrapper, leaving visible empty space below
   it. Forcing the wrapper layers to `height: auto` lets them shrink-wrap
   to the iframe's real height instead. `!important` is required since
   these are the provider's own inline styles, which normally beat any
   external stylesheet rule regardless of selector specificity. Scoped
   tightly under `.htc-calendar__embed` so it can't affect anything else on
   the host page. If a different provider ever needs the opposite (a
   definite height handed down), add a provider-specific override here
   rather than changing this default. */
.htc-calendar__embed .lunacal-inline-container,
.htc-calendar__embed lunacal-inline {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.htc-calendar__embed + .htc-calendar__btn,
.htc-calendar__btn + .htc-calendar__embed {
    margin-top: 0.75rem;
}

/* Custom Code — a deck of admin-defined embeds, always fully visible like
   Calendar (no twirl-down). The outer wrapper carries the leading divider
   (matching .htc-calendar, and correctly zeroed out by the
   .htc-about > *:first-child rule when this is the first visible section);
   individual items are separated from each other the same way. */

.htc-custom-code {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.htc-custom-code__item + .htc-custom-code__item {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Corner actions — Share + QR icons. Sit in normal flow at the top of the
   About column (above About Me) rather than overlaid on the banner, so the
   banner image/slogan stays fully visible. Always a white tile regardless
   of card theme, since the QR code needs reliable contrast to stay
   scannable and this keeps both icons visually consistent. */

.htc-corner-actions {
    display: flex;
    gap: 0.5rem;
}

/* No border here — whatever follows (About Me/Company disclosure, or the
   calendar block) already carries its own border-top, so adding one here
   too would double up into two adjacent divider lines. */
.htc-corner-actions--about {
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.htc-icon-btn {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 4px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.htc-icon-btn:hover {
    transform: scale(1.08);
}

.htc-icon-btn svg,
.htc-icon-btn img {
    display: block;
    width: 100%;
    height: 100%;
}

.htc-share-btn svg {
    color: #222222;
}

.htc-share-btn--copied::after {
    content: "Copied!";
    position: absolute;
    top: 110%;
    right: 0;
    background: #222222;
    color: #ffffff;
    font-size: calc(var(--htc-font-size, 16px) * 0.85);
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.htc-qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.htc-qr-modal:target {
    display: block;
}

.htc-qr-modal__backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
}

.htc-qr-modal__panel {
    position: relative;
    width: min(90vw, 320px);
    margin: 12vh auto 0;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.htc-qr-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.htc-qr-modal__close:hover {
    background: rgba(0, 0, 0, 0.08);
}

.htc-qr-modal__close svg {
    width: 18px;
    height: 18px;
}

.htc-qr-modal__code {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.htc-qr-modal__code svg,
.htc-qr-modal__code img {
    display: block;
    width: 100%;
    height: auto;
}

.htc-qr-modal__hint {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: #666666;
}

/* Mobile polish — bigger tap targets than the cramped defaults a component
   this small tends to ship with. */

.htc-contact {
    padding: 0.15rem 0;
}

.htc-social {
    gap: 0.65rem;
}

.htc-social__icon {
    width: 40px;
    height: 40px;
}

.htc-social__icon svg {
    width: 19px;
    height: 19px;
}

/* Desktop: two-column layout.
   Banner/avatar/logo move into the left column with identity and contacts,
   so the whole "who is this" block sits together, pinned in place. The right
   column (About sections) grows and shrinks with its own content — no
   internal scrolling — so a long bio just makes the whole card taller. Card
   drops its mobile max-width cap and fills whatever container it's placed
   in — 1024px is the classic tablet-landscape threshold, so phones and
   tablets (portrait and landscape) stay on the polished single-column
   layout and only genuinely wide desktop viewports get the split. NOTE:
   this is a viewport media query, so it depends on the host page having a
   correct <meta name="viewport" content="width=device-width,
   initial-scale=1"> tag — without it, mobile browsers report a ~980px
   layout viewport and this will incorrectly trigger even on phones. */

@media (min-width: 1024px) {
    .htc {
        max-width: 100%;
    }

    .htc-shell {
        flex-direction: row;
        /* Stretch (not flex-start): the two columns rarely end up the same
           height — contacts/social/VCF on the left vs. About disclosures +
           calendar on the right. With flex-start each column is only as
           tall as its own content, so the shorter one leaves the card's own
           background exposed below it with no divider running through it —
           looks like a stray gap/bug rather than intentional whitespace.
           Stretch makes both columns fill the row height so
           .htc-col--right's border-left (and any future left-column
           border) runs the card's full height regardless of which side is
           taller. */
        align-items: stretch;
    }

    .htc-col--left {
        /* Was a hard flex: 0 0 300px, which forced every contact line (phone,
           email, website) to wrap inside that fixed width no matter how long
           the text was. width: max-content lets the column grow to fit its
           widest line intrinsically; min/max-width caps how far it can grow
           or shrink so one long email/website can't compromise the whole
           card layout — beyond max-width, overflow-wrap above takes over. */
        flex: 0 1 auto;
        width: max-content;
        min-width: 300px;
        max-width: 360px;
    }

    .htc-col--right {
        flex: 1 1 auto;
        min-width: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .htc-about {
        padding: 1.5rem;
    }

    .htc-about > *:first-child {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }
}