/* ==========================================================================
   Learn Marathi — Case Study Sidebar Layout
   Page-specific: scoped to learnMarathi.html only.
   ========================================================================== */

/* ── Logo / top nav ──
   Fixed to the viewport (overriding the shared .top-nav's absolute
   positioning) so the sun stays in place alongside the fixed sidebar. */
.lm-page .top-nav {
    position: fixed;
    top: 0;
    left: 0;
}

.lm-page .about-link {
    color: #000000;
}

.lm-layout {
    padding-top: 140px;
}

/* ── Sidebar ──
   Fixed to the viewport so it stays in place, directly under the logo,
   while the content column scrolls independently. Positioned in px
   (not vw) so its left edge lines up with the logo at any viewport width. */
.lm-sidebar {
    position: fixed;
    top: 140px;
    left: var(--container-padding);
    width: 220px;
    z-index: 15;
}

/* Content sits clear of the fixed sidebar; its own max-width keeps line
   length readable, capped further by 8vw of right-hand breathing room. */
.lm-content {
    max-width: 960px;
    margin-left: calc(var(--container-padding) + 220px + 64px);
    padding-right: 8vw;
}

.lm-sidebar-nav {
    padding-top: 4px;
}

.lm-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.lm-sidebar-item {
    position: relative;
}

.lm-sidebar-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
}

.lm-sidebar-dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    background: #ffffff;
    margin-top: 3px;
    position: relative;
    z-index: 1;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.lm-sidebar-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1.5;
    transition: color 0.25s ease;
}

.lm-sidebar-link:hover .lm-sidebar-label {
    color: rgba(0, 0, 0, 0.7);
}

.lm-sidebar-item.is-active .lm-sidebar-dot {
    background: #000000;
    border-color: #000000;
}

.lm-sidebar-item.is-active .lm-sidebar-label {
    color: #000000;
}

/* ── Page title ── */
.lm-page-title {
    text-align: center;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 500;
    color: #000000;
    margin: 0 auto 32px;
}

/* ── Top metadata row ── */
.lm-meta-row {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 88px;
    width: fit-content;
    margin: 0 auto 40px;
    padding-bottom: 32px;
    text-align: center;
}

.lm-meta-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000000;
    opacity: 0.4;
    margin-bottom: 8px;
}

.lm-meta-value {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 1.6;
}

/* ── Hero image ── */
.lm-hero-image {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    border-radius: 16px;
    margin: 0 auto 56px;
}

/* ── Sections nested in the content column no longer need the full-bleed
   padding/max-width the shared .marathi-section rules apply for a
   sidebar-less layout ── */
.lm-content .marathi-section {
    max-width: none;
    margin: 0;
    padding: 64px 0;
    scroll-margin-top: 40px;
    border-top: none;
}

/* Shared components cap text at 680px by default; widen them so the wider
   content column isn't left with a large empty gap on the right. */
.lm-content .marathi-body,
.lm-content .marathi-decisions,
.lm-content .cs-table {
    max-width: 820px;
}

.lm-content .marathi-section:first-child {
    padding-top: 0;
}

/* ── Section headers: regular weight, smaller, number matching title size ── */
.lm-content .marathi-section-title {
    font-weight: 400;
    font-size: clamp(18px, 2.2vw, 26px);
}

.lm-content .marathi-section-number {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 400;
}

/* ── Flatten every bold/semi-bold weight on this page to regular ── */
.lm-content .marathi-lead,
.lm-content .marathi-quote p,
.lm-content .marathi-compare-header p,
.lm-content .marathi-decision-num,
.lm-content .marathi-decision-content strong,
.lm-content .marathi-chip,
.lm-content .marathi-outcome-num,
.lm-content .marathi-learning-title,
.lm-content .cs-table-label,
.lm-meta-label,
.lm-meta-value {
    font-weight: 400;
}

/* ── Strip the thin divider lines from this page's shared components ── */
.lm-content .marathi-compare {
    border: none;
}

.lm-content .marathi-compare-cell {
    border-right: none;
}

.lm-content .marathi-outcomes {
    border: none;
}

.lm-content .marathi-outcome-item {
    border-right: none;
}

/* ── Responsive: sidebar collapses into a horizontal scrollable tab bar ── */
@media (max-width: 900px) {
    .lm-layout {
        padding: 120px 24px 0;
    }

    .lm-sidebar {
        position: sticky;
        top: 0;
        left: auto;
        width: auto;
        z-index: 20;
        background: #ffffff;
        margin: 0 -24px 32px;
        padding: 14px 24px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lm-content {
        max-width: none;
        margin-left: 0;
        padding-right: 0;
    }

    .lm-sidebar-list {
        flex-direction: row;
        gap: 28px;
    }

    .lm-sidebar-item {
        flex: 0 0 auto;
    }

    .lm-sidebar-link {
        align-items: center;
    }

    .lm-sidebar-label {
        white-space: nowrap;
    }

    .lm-content .marathi-section {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .lm-layout {
        padding: 100px 20px 0;
    }

    .lm-meta-row {
        column-gap: 40px;
    }
}