/* Studio Profile V2 -- Two-Column Layout
 *
 * Desktop: 1fr + 280px sidebar grid at 1024px+
 * Mobile: single column with bottom bar clearance
 */

/* Page wrapper */
.sp-page {
    max-width: 100%;
    padding-bottom: calc(var(--sp-bottom-bar-h) + 20px); /* mobile bar clearance */
}

@media (min-width: 1024px) {
    .sp-page {
        padding-bottom: 0;
    }
}

/* Two-column layout (flex, matching master profile) */
.sp-page__grid {
    padding: 0 var(--gutter);
}

@media (min-width: 1024px) {
    .sp-page__grid {
        display: flex;
        gap: var(--space-6);
        padding: var(--space-12) var(--gutter) var(--space-16);
        align-items: flex-start;
    }
}

/* Main content column */
.sp-main {
    flex: 1;
    min-width: 0;
}

/* Sidebar */
.sp-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .sp-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        position: sticky;
        top: calc(var(--header-h) + var(--sp-section-nav-h) + var(--space-4));
        width: var(--sp-sidebar-width);
        flex-shrink: 0;
    }
}

/* Section wrapper */
.sp-section {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .sp-section {
        padding: var(--space-6) 0 var(--space-8);
    }
}

.sp-section:last-child {
    border-bottom: none;
}

/* Section title */
.sp-section__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-text);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 1024px) {
    .sp-section__title {
        font-size: var(--text-3xl);
        letter-spacing: -0.01em;
    }
}

.sp-section__subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 400;
    font-family: var(--font-ui);
}

/* About section text */
.sp-about__text {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-secondary);
    max-width: var(--sp-about-max);
}

/* Sidebar widgets — canonical class .sp-sidebar-card (parity with .mp-sidebar-card)
 * Alias .sp-widget retained for one cycle for backward-compat. */
.sp-sidebar-card,
.sp-widget {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.sp-sidebar-card__title,
.sp-widget__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

/* Today's hours widget */
.sp-hours-today {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sp-hours-today__day {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.sp-hours-today__time {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
}

/* Sidebar phone widget */
.sp-sidebar-phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-brand-accent);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.sp-sidebar-phone:hover {
    opacity: 0.85;
}

.sp-sidebar-phone svg {
    flex-shrink: 0;
}

 /*
 * Content width constraint ()
 * Applied to text-heavy sections for readability on wide screens
 * ---------------------------------------------------------------- */

.sp-content-inner {
    max-width: var(--sp-text-section-max);
}

/* Reviews section inner constraint */
.sp-reviews-aggregate,
.sp-reviews-list {
    max-width: var(--sp-text-section-max);
}

/* Services section inner constraint */
.sp-services__list,
.sp-services__pills {
    max-width: var(--sp-text-section-max);
}