/* Public page layouts (menu, booking, cover, branches): the regions the page
   render class wraps, plus per-layout rhythm. Linked by company.php after the
   page tokens, so it only uses the page's own custom properties. */

/* ── Compact header (menu layout) ─────────────────────────── */
.pl-header-compact {
    --hero-height: min(62vw, 300px);
}

.pl-header-compact .profile--classic,
.pl-header-compact .profile--shape,
.pl-header-compact .profile--banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sl-space-4);
    row-gap: var(--sl-space-1);
    align-items: center;
    justify-items: start;
    text-align: start;
    margin-bottom: var(--sl-space-5);
}

.pl-header-compact .profile--banner {
    grid-template-columns: auto minmax(0, 1fr);
}

.pl-header-compact .profile--banner > .profile-banner {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-bottom: var(--sl-space-2);
}

.pl-header-compact .profile > .avatar-wrap {
    grid-row: span 2;
    margin: 0;
}

.pl-header-compact .profile--banner > .avatar-wrap--banner {
    margin-top: 0;
}

.pl-header-compact .avatar--classic,
.pl-header-compact .avatar-fallback--classic,
.pl-header-compact .avatar--banner,
.pl-header-compact .avatar-fallback--banner,
.pl-header-compact .avatar--shape,
.pl-header-compact .avatar-fallback--shape {
    width: 64px;
    height: 64px;
    font-size: var(--sl-text-2xl);
}

.pl-header-compact .profile > .profile-name,
.pl-header-compact .profile > .profile-title--logo {
    align-self: end;
    margin: 0;
    font-size: var(--sl-text-2xl);
    line-height: var(--sl-leading-tight);
}

.pl-header-compact .profile > .profile-bio {
    align-self: start;
    margin: 0;
    max-width: none;
    font-size: var(--sl-text-sm);
    text-align: start;
}

.pl-header-compact .profile > .profile-socials {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: var(--sl-space-3);
}

.pl-header-compact .profile--hero,
.pl-header-compact .profile--cutout {
    margin-bottom: var(--sl-space-4);
}

/* ── Collapsed link list (menu layout) ────────────────────── */
.pl-links-collapsed {
    margin-bottom: var(--sl-space-6);
}

.pl-links-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sl-space-3);
    min-height: 52px;
    padding-inline: var(--sl-space-5);
    border: var(--biz-edge, 1px solid var(--border));
    border-radius: min(var(--radius-btn), 26px);
    background: var(--biz-surface, var(--bg-card));
    box-shadow: var(--biz-shadow, none);
    backdrop-filter: var(--card-blur);
    color: var(--text-h);
    font-size: var(--sl-text-md);
    font-weight: var(--sl-weight-bold);
    list-style: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.pl-links-toggle::-webkit-details-marker {
    display: none;
}

.pl-links-toggle:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.pl-links-toggle:focus-visible {
    outline: 3px solid var(--text-h);
    outline-offset: 3px;
}

.pl-links-toggle .sl-i {
    font-size: 20px;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.pl-links-collapsed[open] > .pl-links-toggle .sl-i {
    transform: rotate(180deg);
}

.pl-links-collapsed > .social-grid {
    margin-top: var(--sl-space-3);
    margin-bottom: 0;
}

/* ── Cover layout: the photo runs under the top bar ───────── */
body .card:has(.biz-cover) {
    padding-top: 0;
}

.card:has(.biz-cover) > .card-topbar {
    position: absolute;
    top: var(--sl-space-4);
    inset-inline: var(--sl-space-4);
    width: auto;
    margin: 0;
    z-index: var(--sl-z-sticky);
}

@media (min-width: 571px) {
    .card:has(.biz-cover) > .card-topbar {
        top: var(--sl-space-5);
        inset-inline: var(--sl-space-6);
    }
}

/* ── Per-layout rhythm ────────────────────────────────────── */
body.pl-menu .biz-catalog {
    margin-top: var(--sl-space-1);
}

body.pl-booking .biz-book-wrap {
    margin-top: calc(var(--sl-space-2) * -1);
}

body.pl-booking .biz-status-wrap {
    margin-bottom: var(--sl-space-4);
}

body.pl-cover .biz-status-wrap {
    margin-top: var(--sl-space-5);
}

body.pl-branches .biz-picker {
    margin-bottom: var(--sl-space-8);
}

body.pl-menu .page-main > .social-grid,
body.pl-cover .page-main > .social-grid,
body.pl-booking .page-main > .social-grid {
    margin-top: var(--sl-space-2);
}