/* /account/account-compass.css
 * Page-specific styles for the /account/compass spoke.
 * Most chrome comes from account-spoke.css and the global compass.css.
 * Only layout deviations and component-specific tweaks live here.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * ROW 2: 2/3 + 1/3 editor grid
 * -------------------------------------------------------------------------- */
.compass-grid-editor {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    margin-top: 0; /* gap between rows is handled by the outer spoke-card-grid */
}

/* --------------------------------------------------------------------------
 * For You carousel card — remove side padding so the track bleeds edge-to-edge
 * inside the card, matching the hub-page carousel aesthetic.
 * -------------------------------------------------------------------------- */
.compass-card-body-carousel {
    padding: 0;
    overflow: hidden;
}
/* Round the bottom corners of the track to match the card's border-radius */
.compass-card-body-carousel .compass-carousel {
    border-radius: 0 0 12px 12px;
}
/* But keep a little top-padding so the carousel header has breathing room */
.compass-card-body-carousel .compass-carousel-header {
    padding: 16px 20px 8px;
}

/* --------------------------------------------------------------------------
 * Suggestions card — stack cell + channel mounts with a divider between them
 * -------------------------------------------------------------------------- */
.compass-suggestions-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Each mount renders its own .compass-sidebar card when populated.
   When empty (no recs), the mount is invisible — no orphan padding. */
.compass-suggestions-body .compass-sidebar-mount:not(:empty) {
    /* no extra margin needed here; gap on parent handles spacing */
}

/* --------------------------------------------------------------------------
 * Responsive: collapse editor row to single column on tablet / mobile
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .compass-grid-editor {
        grid-template-columns: 1fr;
    }
}