/* Layout Components */

:root {
    /* Layout variables */
    --container-max-width: 1200px;
    --container-padding: 20px;
    --grid-gap: 20px;
    --section-spacing: 40px;
    --column-layout-width: 800px;
    --title-card-width: 400px; /* Width for the title card */
}

/* Container styles */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
    box-sizing: border-box;
    overflow-x: visible !important;
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

/* Force content page transparency */
.content-page,
div.content-page,
body .container .content-page,
.os-sections,
.os-sections.grid-layout,
.os-sections.column-layout {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    position: relative !important; 
    z-index: 1 !important;
}

/* Distro card base styling for layout contexts */
.distro-card, 
.comparison-section, 
.comparison-results, 
.content-section {
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Ensure overflow is handled correctly */
html, 
body {
    overflow-x: visible !important;
}

/* OS Section Layout Styles */
.os-sections {
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through to background elements */
}

/* Make sure the actual child elements inside os-sections are still clickable */
.os-sections > * {
    pointer-events: auto;
}

/* Grid Layout */
.os-sections.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--grid-gap);
    align-items: start;
}

/* Column Layout */
.os-sections.column-layout {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    align-items: center;
    width: 100%;
}

/* Make column layout cards use full container width */
.os-sections.column-layout > div {
    width: 100%;
    /* Remove max-width to allow full expansion */
    max-width: none;
}

/* Remove any width restrictions for column layout cards */
.column-mode .os-sections.column-layout > div {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Grid layout */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col {
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Specific column widths */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* Section spacing */
.section {
    margin-bottom: var(--section-spacing);
}

/* Flex utilities */
.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* Text alignment */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* Responsive adjustments for layouts */
@media (max-width: 992px) {
    .os-sections.grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .os-sections.grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 600px) {
    .os-sections.grid-layout {
        grid-template-columns: 1fr;
    }
}

/* 
 * Title Card styles - Currently not used but kept for future reference
 * Narrower card-based header alternative to the full-width header
 */
.title-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--card-bg) !important;
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    margin: 20px auto 30px;
    text-align: center;
    transition: var(--card-transition);
    box-shadow: 0 2px 4px var(--card-shadow) !important;
    border: 1px solid var(--card-border);
    z-index: 4;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    width: 100%;
    max-width: var(--title-card-width);
}

.title-card .card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.title-card .header-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.title-card .title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title-card .title {
    font-size: 2.5rem;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.title-card .tagline {
    margin: 5px 0 0;
    font-size: 1rem;
    color: #aaa;
    font-style: italic;
}

.title-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 6px 12px var(--card-hover-shadow) !important;
    border-color: var(--highlight-color);
    z-index: 5;
}