/* A host's page (host.php): the header card, the contact and social icon
   tiles, About, and the events. Big cards from tablet up, small ones on
   phones. On Pro the host's background and icon colours come from
   includes/branding.php (--host-icon-bg / --host-icon-fg). */
.hp { max-width: 1400px; margin: 0 auto; padding: 24px 0 48px; }
.hp-back { margin-bottom: 24px; }

/* ── Header card: the cover photo on top, the picture half over its edge, and the
   name and Follow below it on the card, so a busy photo never hides them ── */
.hp-head { border-radius: 20px; background: var(--pp-surface-2); color: var(--pp-text); overflow: hidden; }
.hp-cover { display: block; width: 100%; height: 230px; object-fit: cover; background: var(--pp-surface-3); }
.hp-body { position: relative; display: flex; align-items: center; gap: 20px; padding: 40px 34px; }
.hp-id { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1; }
.hp-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #fff; display: block; box-sizing: border-box; }
.hp-avatar-empty { background: #d9d9d9; }
.hp-names { min-width: 0; }
.hp-name { margin: 0; font: 700 clamp(26px, 3vw, 32px)/1.15 'Inter', sans-serif; letter-spacing: -.01em; color: var(--pp-text); overflow-wrap: anywhere; }
.hp-aka { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--pp-text-muted); }
.hp-aka b { color: var(--pp-text); }
/* No cover: Follow in the top corner, as on a new profile */
.hp-follow { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
/* With a cover */
.hp-head.has-cover .hp-body { align-items: flex-start; padding: 0 24px 20px 16px; }
.hp-head.has-cover .hp-avatar { margin-top: -60px; border: 3px solid var(--pp-surface-2); }
.hp-head.has-cover .hp-id { align-items: flex-start; }
.hp-head.has-cover .hp-names { padding-top: 14px; }
.hp-head.has-cover .hp-follow { position: static; align-self: flex-end; flex-shrink: 0; }
.hp-followers { font-size: 16px; color: var(--pp-text); white-space: nowrap; }
.hp-followers b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-follow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 0 14px 0 10px;
    border: 0; border-radius: 6px; background: #fff; color: #000; cursor: pointer; white-space: nowrap;
    font: 600 14px 'Inter', sans-serif; text-decoration: none; transition: background-color .15s;
}
.hp-follow-btn .pp-icon { font-size: 17px; }
.hp-follow-btn:hover { background: #e2e2e6; }
.hp-follow-btn.is-on { background: var(--pp-pill); color: var(--pp-text); }
.hp-follow-btn.is-on:hover { background: var(--pp-pill-hover); }
.hp-follow-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Contact and social icons: square tiles in the host's colour on Pro ── */
.hp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hp-link {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
    background: var(--host-icon-bg, #fff); color: var(--host-icon-fg, #000);
    transition: transform .15s, filter .15s;
}
.hp-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hp-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hp-link svg, .hp-link .pp-icon { width: 24px; height: 24px; font-size: 24px; }

/* ── About ── */
.hp-about { margin-top: 28px; }
.hp-about h2, .hp-events h2 { margin: 0 0 12px; font: 600 24px/1.2 'Inter', sans-serif; color: var(--pp-text); }
.hp-about-text {
    font-size: 15px; line-height: 1.55; color: var(--pp-text);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.hp-about-text.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.hp-more {
    display: block; margin: 14px auto 0; padding: 6px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    color: var(--pp-text); font: 500 15px 'Inter', sans-serif;
}
.hp-more:hover { background: var(--pp-pill); }

/* ── Events ── */
.hp-events { margin-top: 36px; }
.hp-past { margin-top: 44px; }
.hp-grid { margin: 0; }
.hp-small { display: none; }
.hp-empty { padding: 56px 20px; border-radius: 16px; background: var(--pp-surface); text-align: center; color: var(--pp-text-muted); }
.hp-empty p { margin: 12px 0 0; font-size: 16px; }

@media (max-width: 1100px) { .hp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 860px)  { .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ── Phones: a tall header card, the name at the top and Follow at the bottom; small cards ── */
@media (max-width: 600px) {
    .hp { padding-top: 16px; }
    .hp-back { margin-bottom: 16px; }
    .hp-cover { height: 150px; }
    .hp-body { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px 16px; }
    .hp-id { gap: 16px; }
    .hp-avatar { width: 96px; height: 96px; }
    .hp-name { font-size: 24px; }
    .hp-aka { font-size: 14px; }
    .hp-follow, .hp-head.has-cover .hp-follow { position: static; align-self: flex-end; }
    .hp-head.has-cover .hp-body { padding: 0 16px 16px; }
    .hp-head.has-cover .hp-avatar { margin-top: -48px; }
    .hp-head.has-cover .hp-names { padding-top: 10px; }
    .hp-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px -16px 0; padding: 0 16px; }
    .hp-links::-webkit-scrollbar { display: none; }
    .hp-link { flex-shrink: 0; }
    .hp-about h2, .hp-events h2 { font-size: 22px; }
    .hp-about-text { -webkit-line-clamp: 4; line-clamp: 4; }
    .hp-big { display: none; }
    .hp-small { display: block; }
    .hp-small > a { display: block; text-decoration: none; margin-bottom: 12px; }
}
@media (max-width: 360px) {
    .hp-avatar { width: 80px; height: 80px; }
    .hp-head.has-cover .hp-avatar { margin-top: -40px; }
    .hp-name { font-size: 21px; }
}