/* ==========================================================================
   SOCIAL SQUARE LAYOUT
   Grid system, page structure, responsive breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE STRUCTURE
   -------------------------------------------------------------------------- */
.ss-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ss-header {
    position: sticky;
    top: 0;
    z-index: var(--ss-z-header);
    background: var(--ss-header-bg);
    border-bottom: var(--ss-border-hairline) solid var(--ss-header-border);
    height: var(--ss-header-height);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    transition: background var(--ss-transition-normal), border-color var(--ss-transition-normal);
}

.ss-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--ss-content-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--ss-spacing-xl);
}

.ss-header__logo {
    display: flex;
    align-items: center;
    gap: var(--ss-spacing-sm);
    text-decoration: none;
    flex-shrink: 0;
}

.ss-header__logo-img {
    height: 32px;
    width: auto;
}

.ss-header__logo-text {
    font-family: var(--ss-font-heading);
    font-size: var(--ss-type-h4);
    font-weight: var(--ss-weight-bold);
    color: var(--ss-text-primary);
    letter-spacing: -0.01em;
}

.ss-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ss-spacing-sm);
}

/* --------------------------------------------------------------------------
   MAIN CONTENT AREA
   -------------------------------------------------------------------------- */
.ss-main {
    flex: 1;
    width: 100%;
    max-width: var(--ss-content-max-width);
    margin: 0 auto;
    padding: var(--ss-spacing-xl) var(--ss-spacing-xl) var(--ss-spacing-3xl);
}

.ss-main--wide {
    max-width: var(--ss-content-max-width-wide);
}

.ss-main--narrow {
    max-width: var(--ss-content-max-width-narrow);
}

.ss-main--fullwidth {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* With sidebar layout */
.ss-layout-with-sidebar {
    display: grid;
    grid-template-columns: var(--ss-sidebar-width) 1fr;
    gap: var(--ss-spacing-xl);
    max-width: var(--ss-content-max-width-wide);
    margin: 0 auto;
    padding: var(--ss-spacing-xl);
}

.ss-sidebar {
    position: sticky;
    top: calc(var(--ss-header-height) + var(--ss-spacing-xl));
    height: fit-content;
    max-height: calc(100vh - var(--ss-header-height) - var(--ss-spacing-2xl));
    overflow-y: auto;
    background: var(--ss-sidebar-bg);
    border-radius: var(--ss-radius-lg);
    border: var(--ss-border-hairline) solid var(--ss-border-default);
    padding: var(--ss-spacing-md);
}

/* --------------------------------------------------------------------------
   CONTENT GRIDS
   Used by hub plugins for card layouts
   -------------------------------------------------------------------------- */
.ss-grid {
    display: grid;
    gap: var(--ss-spacing-lg);
}

.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ss-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Auto-fit responsive grids */
.ss-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ss-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ss-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* Masonry (for SNAPICS) — CSS-only approximation */
.ss-masonry {
    columns: 4;
    column-gap: var(--ss-spacing-lg);
}

.ss-masonry > * {
    break-inside: avoid;
    margin-bottom: var(--ss-spacing-lg);
}

/* --------------------------------------------------------------------------
   SECTION PATTERNS
   -------------------------------------------------------------------------- */
.ss-section {
    margin-bottom: var(--ss-spacing-2xl);
}

.ss-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ss-spacing-lg);
}

.ss-section__title {
    font-family: var(--ss-font-heading);
    font-size: var(--ss-type-h2);
    font-weight: var(--ss-weight-bold);
    color: var(--ss-text-primary);
}

.ss-section__action {
    font-family: var(--ss-font-ui);
    font-size: var(--ss-type-ui);
    font-weight: var(--ss-weight-medium);
    color: var(--ss-text-link);
    text-decoration: none;
}

.ss-section__action:hover {
    color: var(--ss-text-link-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   PERSISTENT PLAYER BAR CONTAINER
   MUSICVERSE plugin injects into this. Sits outside #ss-main-content
   so AJAX page swaps don't destroy the playing audio.
   -------------------------------------------------------------------------- */
.ss-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--ss-z-player);
    height: var(--ss-player-height);
    background: var(--ss-header-bg);
    border-top: var(--ss-border-hairline) solid var(--ss-border-default);
    box-shadow: 0 -4px 6px rgba(15, 23, 42, 0.04);
    transform: translateY(100%);
    transition: transform var(--ss-transition-slow);
}

.ss-player-bar--active {
    transform: translateY(0);
}

/* When player is active, add padding to bottom of main to prevent overlap */
body.ss-player-active .ss-main {
    padding-bottom: calc(var(--ss-spacing-3xl) + var(--ss-player-height));
}

body.ss-player-active .ss-footer {
    margin-bottom: var(--ss-player-height);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ss-footer {
    background: var(--ss-footer-bg);
    color: var(--ss-footer-text);
    border-top: var(--ss-border-hairline) solid rgba(255, 255, 255, 0.05);
}

.ss-footer__inner {
    max-width: var(--ss-content-max-width-wide);
    margin: 0 auto;
    padding: var(--ss-spacing-2xl) var(--ss-spacing-xl);
}

.ss-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ss-spacing-xl);
    margin-bottom: var(--ss-spacing-2xl);
}

.ss-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--ss-spacing-lg);
    border-top: var(--ss-border-hairline) solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1023px) {
    .ss-header__inner {
        padding: 0 var(--ss-spacing-lg);
    }

    .ss-main {
        padding: var(--ss-spacing-lg) var(--ss-spacing-lg) var(--ss-spacing-2xl);
    }

    .ss-layout-with-sidebar {
        grid-template-columns: 1fr;
    }

    .ss-sidebar {
        position: static;
        max-height: none;
    }

    .ss-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ss-grid--5 { grid-template-columns: repeat(3, 1fr); }

    .ss-masonry { columns: 3; }

    .ss-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 599px) {
    :root {
        --ss-type-hero: 2.25rem;
        --ss-type-h1: 1.75rem;
        --ss-type-h2: 1.375rem;
        --ss-type-h3: 1.125rem;
        --ss-type-display: 2.5rem;
    }

    .ss-header {
        height: 56px;
    }

    .ss-header__inner {
        padding: 0 var(--ss-spacing-md);
    }

    .ss-header__logo-text {
        font-size: var(--ss-type-body);
    }

    .ss-main {
        padding: var(--ss-spacing-md) var(--ss-spacing-md) var(--ss-spacing-xl);
    }

    .ss-grid--2,
    .ss-grid--3,
    .ss-grid--4,
    .ss-grid--5 {
        grid-template-columns: 1fr;
    }

    .ss-masonry { columns: 2; }

    .ss-footer__grid { grid-template-columns: 1fr; }
    .ss-footer__bottom { flex-direction: column; gap: var(--ss-spacing-md); text-align: center; }

    .ss-player-bar {
        height: var(--ss-player-height-mobile);
        bottom: var(--ss-bottom-nav-height);
    }

    /* Mobile bottom navigation */
    .ss-header .ss-hub-nav { display: none; }
    .ss-bottom-nav { display: flex; }
}

/* Desktop */
@media (min-width: 600px) {
    .ss-bottom-nav { display: none; }
}

/* Widescreen */
@media (min-width: 1440px) {
    .ss-main {
        max-width: var(--ss-content-max-width-wide);
    }

    .ss-grid--5 { grid-template-columns: repeat(5, 1fr); }
}