/* 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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    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 {
    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: 1rem;
    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: 1.5rem;
    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: 2.1rem;
}

.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: 2.8rem;
}

/* 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: 1.4rem;
    font-weight: 700;
    margin: 0.5rem 0 0.2rem;
    line-height: 1.2;
    color: var(--htc-fg, #ffffff);
}

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

.htc-company {
    font-size: 0.8rem;
    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;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    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;
}

.htc-contact__value {
    flex: 1;
    word-break: break-all;
}

.htc-contact__label {
    font-size: 0.7rem;
    opacity: 0.5;
    margin-left: 0.2rem;
    flex-shrink: 0;
}

/* 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;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    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;
    font-size: 0.82rem;
    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: 1.1rem;
}

.htc-disclosure__body h2 {
    font-size: 1.05rem;
}

.htc-disclosure__body :is(h3, h4, h5, h6) {
    font-size: 1rem;
}

.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: 0.78rem;
}

.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: 0.78rem;
    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);
}

/* Add to Apple Wallet button */

.htc-wallet {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    justify-content: center;
}

.htc-wallet__btn {
    display: inline-block;
    line-height: 0;
    transition: opacity 0.15s ease;
}

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

/* 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: 0.85rem;
    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;
}

/* 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. */

.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: 0.85rem;
    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 {
    overflow-y: auto;
    border-radius: 8px;
}

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

/* Corner actions — Share + QR icons, grouped in the banner's top-right
   corner. 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 {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

/* When there's no banner to anchor to (banner_style: none), the group drops
   out of the corner and sits inline as normal small buttons instead. */
.htc-corner-actions--inline {
    position: static;
    margin: 0 1.25rem 0.5rem;
}

.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-corner-actions--inline .htc-icon-btn {
    width: 28px;
    height: 28px;
}

.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: 0.7rem;
    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) becomes an independently scrolling pane so a long
   bio doesn't push the card's overall height around. 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;
        align-items: flex-start;
    }

    .htc-col--left {
        flex: 0 0 300px;
    }

    .htc-col--right {
        flex: 1 1 auto;
        min-width: 0;
        max-height: min(72vh, 600px);
        overflow-y: auto;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        scrollbar-width: thin;
    }

    .htc-about {
        padding: 1.5rem;
    }

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