/**
 * CV Detail Page Styles
 * Maximizes screen space for CV cards
 *
 * Root cause: The .ds-container has max-width: 1280px which limits the card width
 * Solution: Override container and card styles for CV pages specifically
 */

/* ========================================
   GLOBAL OVERRIDES FOR ALL CV SECTION PAGES
   ======================================== */

/* Target the main content wrapper when it contains CV elements */
body #content {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

body #content .ds-container {
    max-width: none !important;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ========================================
   CV CARD SPECIFIC OVERRIDES
   ======================================== */

/* Direct targeting of the profile card */
#profile-main {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 120px) !important;
    height: auto;
    margin: 0 !important;
}

/* Double specificity to override any existing styles */
.ds-card#profile-main,
div.ds-card#profile-main {
    width: 100% !important;
    max-width: none !important;
}

/* Ensure the header above the card uses full width */
.block-header {
    width: 100%;
    margin-bottom: 1rem;
}

/* ========================================
   CV CARD INTERNAL LAYOUT
   ======================================== */

/* Ensure card body fills available space */
#profile-main .pm-body {
    min-height: calc(100vh - 180px);
    width: 100%;
}

/* Optimize card sections padding */
#profile-main .ds-card-header {
    padding: 1.25rem 1.5rem;
}

#profile-main .ds-card-body {
    padding: 1.5rem;
}

/* Make tabs more compact */
.tab-nav.tn-justified {
    margin-bottom: 0;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Small and medium screens */
@media (max-width: 1199px) {
    body #content .ds-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #profile-main .pmb-block {
        padding: 20px 15px 0;
    }
}

/* Large screens - optimize sidebar width */
@media (min-width: 1200px) {
    #profile-main .pm-overview {
        width: 220px;
    }

    #profile-main .pm-body {
        padding-left: 220px;
    }

    #profile-main .pmb-block {
        padding: 30px 35px 0;
    }
}

/* Extra large screens - add minimal side margins for readability */
@media (min-width: 1600px) {
    body #content .ds-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}