/* Page-specific styles for legislacao.html */

/* Nav background to cover timeline when scrolling - only in section 3/6 */
/* Section 3 - ONLY for legislacao page */
body:not(.index-page).scroll-section-three .fixed-nav,
body.scroll-section-six .fixed-nav {
    background-color: #380131 !important;
}

/* Brasil menu item always visible */
.menu .brasil-menu-item {
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 300px;
    margin-right: 40px;
}

.menu .brasil-menu-item a {
    color: #FD4950 !important;
    font-family: "MD Nichrome", sans-serif !important;
    font-size: 25px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

/* Section 1: Apply section 2/3 colors from index - ONLY for legislacao page, not index */
body:not(.index-page) .menu li a {
    color: #380131;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    transition: color 0.25s ease;
}

/* Mobile hamburger and search - same color as menu - ONLY for legislacao page */
body:not(.index-page) .mobile-search-icon svg {
    color: #380131;
}

/* Hamburger uses nav-separator color (#FD4950) in section 1 - ONLY for legislacao page */
body:not(.index-page) .hamburger-icon {
    color: #FD4950;
}

body:not(.index-page) .mobile-hamburger-box {
    border-left-color: #FD4950;
}

body:not(.index-page) .menu li a.active {
    color: #380131;
    font-weight: 800;
}

body:not(.index-page) .logo svg path:not(:first-child) {
    fill: #380131;
}

body:not(.index-page) .logo a {
    color: #FDFFDA;
}

body:not(.index-page) .search-icon {
    color: #FDFFDA;
}

body:not(.index-page) .search input {
    background-color: #380131;
    color: rgba(253, 255, 218, 0.30);
}

body:not(.index-page) .search input::placeholder {
    color: rgba(253, 255, 218, 0.30);
}

body:not(.index-page) .nav-separator {
    background-color: #FD4950;
}

/* Logo size and color (same as index) */
.logo svg {
    width: 137.159px;
    height: 21.3px;
}

.logo svg path:first-child {
    fill: #FD4950;
}

/* Section two: background #380131, text should be light - ONLY for legislacao page */
body:not(.index-page).scroll-section-two .fixed-text {
    color: #FDFFDA;
}

/* Logo color in section two - ONLY for legislacao page */
body:not(.index-page).scroll-section-two .logo svg path:not(:first-child) {
    fill: #380131;
}

/* Logo color in section three (same as section two) - ONLY for legislacao page */
body:not(.index-page).scroll-section-three .logo svg path:not(:first-child) {
    fill: #380131;
}

/* Section 2: background #380131, nav colors same as section 1 of index - ONLY for legislacao page */
body:not(.index-page) .section-two {
    background-color: #380131;
}

/* Section 4: Legislação Section 1 (empty, same background as section-one from index - gradient) */
.section-four {
    background: linear-gradient(180deg, #FDFFDA 16.94%, #380131 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    height: 100vh;
}

/* Section 5: Legislação Section 2 (same as section-two) */
.section-five {
    background-color: #380131;
}

/* Revert mobile menu colors for legislacao page (section 2 has #380131, not #FDFFDA) - ONLY for legislacao page */
body:not(.index-page).scroll-section-two .mobile-menu {
    background-color: #FDFFDA; /* Keep default light yellow */
}

body:not(.index-page).scroll-section-two .mobile-menu li a {
    color: #380131; /* Keep default dark purple */
}

body:not(.index-page).scroll-section-two .mobile-menu li:not(:last-child)::after {
    background-color: #380131; /* Keep default dark purple separator */
}

body:not(.index-page).scroll-section-two .mobile-menu li a:hover {
    background-color: rgba(56, 1, 49, 0.05); /* Keep default hover */
}

/* Section 2 styles - ONLY for legislacao page, not index */
body:not(.index-page).scroll-section-two .section-two {
    background-color: #380131;
}

body:not(.index-page).scroll-section-two .menu li a {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-two .mobile-search-icon svg {
    color: #FDFFDA;
}

/* Hamburger uses nav-separator color (#FDFFDA) in section 2 */
body:not(.index-page).scroll-section-two .hamburger-icon {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-two .mobile-hamburger-box {
    border-left-color: #FDFFDA;
}

body:not(.index-page).scroll-section-two .menu li a.active {
    color: #FDFFDA;
    font-weight: 800;
}

body:not(.index-page).scroll-section-two .logo svg path:not(:first-child) {
    fill: #FDFFC2;
}

body:not(.index-page).scroll-section-two .logo a {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-two .search-icon {
    color: #380131;
}

body:not(.index-page).scroll-section-two .search input {
    background-color: #FDFFDA;
    color: rgba(56, 1, 49, 0.30);
}

body:not(.index-page).scroll-section-two .search input::placeholder {
    color: rgba(56, 1, 49, 0.30);
}

body:not(.index-page).scroll-section-two .nav-separator {
    background-color: #FDFFDA;
}

/* Brasil menu item doesn't change in section 2 */
body:not(.index-page).scroll-section-two .menu .brasil-menu-item a {
    color: #FD4950 !important;
}

/* Section 3/6: same background as section 2 (#380131) - ONLY for legislacao page */
body:not(.index-page) .section-three {
    background-color: #380131;
}

.section-six {
    background-color: #380131;
}

/* Section 3 - ONLY for legislacao page */
body:not(.index-page).scroll-section-three .section-three,
body.scroll-section-six .section-six {
    background-color: #380131;
    display: block;
    align-items: normal;
    justify-content: normal;
}

/* Revert mobile menu colors for legislacao page section 3/6 (has #380131, not #FDFFDA) */
/* Section 3 styles - ONLY for legislacao page, not index */
body:not(.index-page).scroll-section-three .mobile-menu,
body.scroll-section-six .mobile-menu {
    background-color: #FDFFDA; /* Keep default light yellow */
}

body:not(.index-page).scroll-section-three .mobile-menu li a,
body.scroll-section-six .mobile-menu li a {
    color: #380131; /* Keep default dark purple */
}

body:not(.index-page).scroll-section-three .mobile-menu li:not(:last-child)::after,
body.scroll-section-six .mobile-menu li:not(:last-child)::after {
    background-color: #380131; /* Keep default dark purple separator */
}

body:not(.index-page).scroll-section-three .mobile-menu li a:hover,
body.scroll-section-six .mobile-menu li a:hover {
    background-color: rgba(56, 1, 49, 0.05); /* Keep default hover */
}

body:not(.index-page).scroll-section-three .menu li a,
body.scroll-section-six .menu li a {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-three .mobile-search-icon svg,
body.scroll-section-six .mobile-search-icon svg {
    color: #FDFFDA;
}

/* Hamburger uses nav-separator color (#FDFFDA) in section 3/6 */
body:not(.index-page).scroll-section-three .hamburger-icon,
body.scroll-section-six .hamburger-icon {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-three .mobile-hamburger-box,
body.scroll-section-six .mobile-hamburger-box {
    border-left-color: #FDFFDA;
}

body:not(.index-page).scroll-section-three .menu li a.active,
body.scroll-section-six .menu li a.active {
    color: #FDFFDA;
    font-weight: 800;
}

body:not(.index-page).scroll-section-three .logo svg path:not(:first-child),
body.scroll-section-six .logo svg path:not(:first-child) {
    fill: #FDFFC2;
}

body:not(.index-page).scroll-section-three .logo a,
body.scroll-section-six .logo a {
    color: #FDFFDA;
}

body:not(.index-page).scroll-section-three .search-icon,
body.scroll-section-six .search-icon {
    color: #380131;
}

body:not(.index-page).scroll-section-three .search input,
body.scroll-section-six .search input {
    background-color: #FDFFDA;
    color: rgba(56, 1, 49, 0.30);
}

body:not(.index-page).scroll-section-three .search input::placeholder,
body.scroll-section-six .search input::placeholder {
    color: rgba(56, 1, 49, 0.30);
}

body:not(.index-page).scroll-section-three .nav-separator,
body.scroll-section-six .nav-separator {
    background-color: #FDFFDA;
}

/* Brasil menu item doesn't change in section 3/6 */
body:not(.index-page).scroll-section-three .menu .brasil-menu-item a,
body.scroll-section-six .menu .brasil-menu-item a {
    color: #FD4950 !important;
}

/* Section 4: removed - should keep same colors as section 3 (defined in index.css) */
/* Section 4 colors are now handled by index.css to maintain consistency with section 3 */

/* Section 5: same nav colors as section 2 */
body.scroll-section-five .menu li a {
    color: #FDFFDA;
}

body.scroll-section-five .mobile-search-icon svg {
    color: #FDFFDA;
}

body.scroll-section-five .hamburger-icon {
    color: #FDFFDA;
}

body.scroll-section-five .mobile-hamburger-box {
    border-left-color: #FDFFDA;
}

body.scroll-section-five .menu li a.active {
    color: #FDFFDA;
    font-weight: 800;
}

body.scroll-section-five .logo svg path:not(:first-child) {
    fill: #FDFFC2;
}

body.scroll-section-five .logo a {
    color: #FDFFDA;
}

body.scroll-section-five .search-icon {
    color: #380131;
}

body.scroll-section-five .search input {
    background-color: #FDFFDA;
    color: rgba(56, 1, 49, 0.30);
}

body.scroll-section-five .search input::placeholder {
    color: rgba(56, 1, 49, 0.30);
}

body.scroll-section-five .nav-separator {
    background-color: #FDFFDA;
}

body.scroll-section-five .menu .brasil-menu-item a {
    color: #FD4950 !important;
}

/* Section 3 Layout - Two columns */
.section-three-layout {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 350px 1fr;
    grid-template-rows: minmax(0, 1fr); /* altura fixa para o scroll interno funcionar */
    gap: 100px;
    height: 100vh;
    box-sizing: border-box;
    align-items: start;
}

/* Remove right padding when timeline is present */
.section-three-layout:has(.content-area .timeline) {
    padding-right: 0 !important;
}

.filter-sidebar {
    position: sticky;
    top: 0;
    align-self: stretch;
    min-height: 0;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    container-name: filter-sidebar;
}

/* Scroll container = mesmo padding que content-area (147px top, 40px bottom) para não cortar */
.filter-sidebar-inner {
    flex: 1;
    min-height: 0;
    max-height: 100vh; /* ocupa a coluna toda; o padding fica dentro */
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 147px;
    padding-bottom: 40px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.filter-sidebar-inner::-webkit-scrollbar {
    display: none;
}

.sidebar-title {
    color: var(--ODDSGATE-RED, #FD4950);
    font-family: "MD Nichrome", sans-serif;
    font-size: clamp(32px, 17cqi, 60px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 50px;
}

.filter-title {
    color: #FD4950;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(14px, 6cqi, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-list li {
    color: rgba(253, 255, 218, 0.20);
    font-family: "MD Nichrome", sans-serif;
    font-size: clamp(22px, 12cqi, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.filter-list li:hover {
    color: rgba(253, 255, 218, 0.8);
}

.filter-list li.active {
    color: #FDFFDA;
}

/* Filter options container */

/* Filter options - sem max-height no desktop: o scroll da coluna esquerda mostra tudo */
.filter-options {
    margin-top: 0;
    margin-left: 0;
    overflow-y: auto; /* no mobile o JS define maxHeight e este scrolla */
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.filter-options::-webkit-scrollbar {
    display: none;
}

.filter-option {
    width: 210px;
    border-radius: 16px;
    background: var(--ODDSGATE-BERRY, #6B025D);
    color: #380131;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
}

.filter-options-ano .filter-option {
    width: 88px;
}

.filter-option:hover {
    opacity: 0.9;
}

.filter-option.selected,
.filter-options-ano .filter-option.selected {
    background: #FB7880 !important;
    color: #FDFFDA !important;
}

/* Container do input + sugestões: relative para a lista fazer overlay */
.filter-options {
    position: relative;
}

/* Regulador e palavra-chave: overflow visible para a lista de sugestões não ser cortada */
.filter-sidebar .filter-options-entidade,
.filter-sidebar .filter-options-palavra-chave {
    overflow: visible;
}

/* Lista de sugestões na sidebar: acima do conteúdo da coluna ao lado */
.filter-sidebar .suggestions-list {
    z-index: 100;
}

.filter-input-container {
    margin-top: 0;
}

.filter-input-wrapper {
    position: relative;
    width: 208px;
    height: 32px;
}

.filter-input {
    width: 100%;
    height: 32px;
    border-radius: 16px;
    background: #FB7880;
    color: rgba(253, 255, 218, 0.40);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0 40px 0 16px;
    border: none;
    outline: none;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

.filter-input::placeholder {
    color: rgba(253, 255, 218, 0.40);
}

.filter-input:focus {
    opacity: 0.9;
}

.filter-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(253, 255, 218, 0.40);
    pointer-events: none;
}

.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 208px;
    max-height: 188px;
    height: auto;
    min-height: 60px;
    border-radius: 0 0 15px 15px;
    background: rgba(251, 120, 128, 0.12);
    margin-top: 4px;
    margin-left: 0;
    padding: 0;
    padding-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 12px;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(56, 1, 49, 0.12);
}

.suggestions-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.suggestion-item {
    color: #FB7880;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 4px 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.suggestion-item:hover {
    opacity: 0.7;
}

/* Palavra-chave: results like menu search (title + excerpt), same filter look */
.suggestion-item-hint {
    color: rgba(251, 120, 128, 0.8);
    font-size: 14px;
}

.suggestion-item-result {
    display: block;
    text-decoration: none;
    color: inherit;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(251, 120, 128, 0.15);
}

.suggestion-item-result:last-child {
    border-bottom: none;
}

.suggestion-item-title {
    color: #FB7880;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 4px;
}

.suggestion-item-excerpt {
    color: rgba(251, 120, 128, 0.75);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-area {
    padding-top: 147px;
    padding-bottom: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    box-sizing: border-box;
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

/* Add padding when timeline is present to allow items to scale */
.content-area:has(.timeline) {
    padding-left: 100px;
    padding-right: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Timeline title - appears only when timeline exists - MOBILE ONLY */
.timeline-title {
    display: none; /* Hidden by default (desktop) */
}

.timeline-separator {
    display: none; /* Hidden by default (desktop) */
}

/* Mobile pequeno (xs: < 576px) */
@media (max-width: 575px) {
    .timeline-title {
        display: block;
        font-family: "MD Nichrome", sans-serif;
        font-weight: 500;
        font-size: 32px;
        line-height: 32px;
        color: #FD4950;
        text-align: center;
        padding: 12px 0;
        margin: 0;
        position: fixed;
        top: 48.333px; /* Nav height */
        left: 0;
        right: 0;
        z-index: 998;
        background-color: #380131; /* Match section 3 background */
        width: 100%;
    }

    /* Timeline separator - same as nav-separator */
    .timeline-separator {
        display: block;
        height: 1.333px;
        background-color: #FD4950;
        width: 100%;
        margin: 0;
        position: fixed;
        top: calc(48.333px + 32px + 24px); /* Nav height + title line-height + title padding */
        left: 0;
        right: 0;
        z-index: 998;
    }
}

.content-area::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.content-area .timeline {
    padding-top: 0;
    margin-top: 0;
}

.content-area:has(.timeline) {
    padding-top: 0; /* Title will be positioned right below nav */
}

/* Ensure content-area without timeline has proper top padding */
.content-area:not(:has(.timeline)) {
    padding-top: 147px;
}

.content-area h2 {
    color: #FD4950;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(28px, 6vmin, 42px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 15px 0;
    max-width: 789px;
}

.content-area h3 {
    color: #FD4950;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(20px, 4.5vmin, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 15px 0;
    max-width: 789px;
}

.content-area p {
    color: rgba(253, 73, 80, 0.8);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(14px, 3vmin, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 10px 0;
}

.content-area p:last-of-type {
    margin-bottom: 20px;
}

.content-area ul {
    color: rgba(253, 73, 80, 0.8);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(14px, 3vmin, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 20px 0;
    padding-left: 20px;
    max-width: 419px;
    list-style-type: disc;
}

.content-area ul li {
    margin-bottom: 8px;
}

.content-area ul li:last-child {
    margin-bottom: 0;
}

.cta-button {
    background-color: #FDFFDA;
    color: #FD4950;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 20px;
}

.cta-button:hover {
    background-color: #FD4950;
    color: #FDFFDA;
}

/* Timeline styles */
.timeline {
    position: relative;
    padding: 0;
    /* Add padding to allow items to scale without being cut */
    /* Top padding needs to be large enough to allow first item to be centered */
    padding-top: 100px;
    padding-bottom: 50px;
    /* Ensure timeline content can scale */
    min-height: 100%;
}

/* Vertical line - fixed to section 3 */
.timeline::before {
    content: '';
    position: fixed;
    left: var(--timeline-line-left, 50%);
    top: var(--timeline-line-top, 0);
    height: var(--timeline-line-height, 100vh);
    width: 2px;
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        #FDFFDA 0,
        #FDFFDA 12px,
        transparent 12px,
        transparent 24px
    );
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    /* Hide until positioned correctly */
    opacity: 0;
    /* Smooth transition only after initial render */
    transition: left 0.3s ease, top 0.3s ease, height 0.3s ease, opacity 0.1s ease;
}

/* Show line when ready */
.timeline.line-ready::before {
    opacity: 1;
}

/* Disable transition on initial render */
.timeline.no-transition::before {
    transition: none;
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px !important;
    transform-origin: center center;
    will-change: transform, opacity;
    /* Prevent items from being cut when scaling */
    overflow: visible;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Alternating layout */
.timeline-item:nth-child(odd) {
    justify-content: flex-start;
    padding-right: calc(50% + 30px);
}

.timeline-item:nth-child(even) {
    justify-content: flex-end;
    padding-left: calc(50% + 30px);
}

/* Timeline dot */
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: #FB7880;
    border-radius: 50%;
    top: 20px;
    z-index: 2;
}

/* Card content */
.timeline-content {
    width: 100%;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: left;
}

.timeline-item:nth-child(even) .result-title,
.timeline-item:nth-child(even) .result-excerpt {
    text-align: left;
}

/* Keyword tag */
.result-keyword {
    display: inline-block;
    color: #FB7880;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 6px !important;
    margin-top: 0;
    padding: 0;
    border: none;
    text-transform: uppercase;
}

.result-title {
    color: #FDFFDA;
    font-family: "MD Nichrome", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    margin-bottom: 6px !important;
    margin-top: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result-excerpt {
    color: #FFFFFF;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    margin-bottom: 6px !important;
    margin-top: 0;
    padding: 0;
}

.read-more-link {
    color: #FDFFDA;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: none;
    margin-top: 0;
    padding: 0;
    display: inline-block;
    transition: opacity 0.3s ease, text-decoration 0.3s ease;
}

.read-more-link:hover {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    opacity: 0.7;
}

.no-results {
    color: rgba(253, 255, 218, 0.6);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    padding: 60px 0;
}

/* Filter display */
.filter-display {
    color: #FDFFDA;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 40px;
    text-align: center;
}

/* Bootstrap Breakpoints - Legislação */

/* Mobile filter CTA and dropdown - hidden on desktop */
.mobile-filter-cta,
.mobile-filter-dropdown,
.mobile-filter-overlay {
    display: none;
}

/* Mobile pequeno (xs: < 576px) */
@media (max-width: 575px) {
    /* Show mobile filter elements */
    .mobile-filter-cta,
    .mobile-filter-dropdown,
    .mobile-filter-overlay {
        display: block;
    }
    .section-three-layout {
        padding: 0 20px;
        grid-template-columns: 1fr;
        gap: 30px;
        height: auto;
        min-height: 100vh;
    }
    
    /* Remove left padding when timeline is present */
    .section-three-layout:has(.content-area .timeline) {
        padding-left: 0 !important;
    }
    
    /* Hide filter sidebar on mobile - e não usar container/cqi (manter valores fixos) */
    .filter-sidebar {
        display: none !important;
        container-type: normal;
    }
    
    /* Mobile: valores fixos em px (sem clamp) – override às regras base */
    .filter-sidebar .sidebar-title {
        font-size: 42px !important;
    }
    .filter-sidebar .filter-title {
        font-size: 20px !important;
    }
    .filter-sidebar .filter-list li {
        font-size: 40px !important;
    }
    
    /* Mobile filter CTA - floating button at bottom */
    .mobile-filter-cta {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000; /* Above dropdown */
        background-color: #FD4950;
        color: #FDFFDA;
        border: none;
        border-radius: 25px;
        width: 300px;
        height: 38px;
        padding: 0;
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-filter-cta:active {
        transform: translateX(-50%) scale(0.95);
    }
    
    /* Mobile filter dropdown - slides up from bottom */
    .mobile-filter-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(80vh - 58px); /* Account for CTA height (38px) + gap (20px) */
        background-color: #6B025D;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 999; /* Below CTA */
        overflow-y: auto;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        padding-bottom: 58px; /* Space for CTA (38px height + 20px gap) */
    }
    
    .mobile-filter-dropdown.active {
        transform: translateY(0);
    }
    
    .mobile-filter-dropdown-content {
        padding: 20px;
        padding-bottom: 20px;
    }
    
    /* Inner box with title */
    .mobile-filter-inner-box {
        background-color: rgba(56, 1, 49, 0.5); /* #38013180 converted to rgba */
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 0; /* Remove margin-bottom */
    }
    
    .mobile-filter-inner-title {
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 16px;
        color: #FD4950;
        margin: 0 0 20px 5px;
    }
    
    /* Filter grid layout */
    .mobile-filter-grid {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Entidade 2x maior que Ano */
        gap: 20px;
        margin-bottom: 16px;
        grid-auto-rows: auto; /* Let items define their own height */
    }
    
    .mobile-filter-grid .filter-item-full {
        grid-column: 1 / -1; /* Full width */
    }
    
    .mobile-filter-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: auto; /* Let content define height */
    }
    
    .mobile-filter-item-label {
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        color: #FDFFDA;
        padding-left: 5px;
    }
    
    /* Filter items in mobile dropdown */
    .mobile-filter-item .filter-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-filter-item .filter-list li {
        color: rgba(253, 255, 218, 0.20);
        font-family: "MD Nichrome", sans-serif;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 8px;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .mobile-filter-item .filter-list li.active {
        color: #FDFFDA;
    }
    
    .mobile-filter-item .filter-list li:hover {
        color: rgba(253, 255, 218, 0.8);
    }
    
    /* Filter options container: relative para a lista de sugestões fazer overlay */
    .mobile-filter-item .filter-options-container {
        position: relative;
    }

    .mobile-filter-item .filter-option,
    .mobile-filter-item .filter-input,
    .mobile-filter-item .suggestions-list {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .mobile-filter-item .suggestions-list {
        display: none;
    }
    
    /* Remove margins from filter options in mobile */
    .mobile-filter-item .filter-option {
        margin-bottom: 0 !important;
    }
    
    /* Input styles for mobile dropdown */
    .mobile-filter-item .filter-input {
        background-color: #380131 !important;
        color: rgba(253, 255, 218, 0.40);
        margin: 0;
    }
    
    .mobile-filter-item .filter-input::placeholder {
        color: rgba(253, 255, 218, 0.40);
    }
    
    /* Input styles for mobile dropdown */
    .mobile-filter-item .filter-input {
        background-color: #380131 !important;
        color: rgba(253, 255, 218, 0.40);
    }
    
    .mobile-filter-item .filter-input::placeholder {
        color: rgba(253, 255, 218, 0.40);
    }
    
    /* Overlay to close dropdown */
    .mobile-filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 997;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .content-area:has(.timeline) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: calc(48.333px + 32px + 16px + 1.333px) !important; /* Nav + title + separator (reduced spacing) */
    }
    
    /* Timeline line on left side */
    .timeline::before {
        left: 20px !important;
        transform: translateX(0) !important;
    }
    
    /* All items on right side of line, aligned left */
    /* Keep item box fixed size - only content scales */
    .timeline-item {
        padding-left: 50px !important; /* 20px padding between dot and article */
        padding-right: 0 !important;
        justify-content: flex-start !important;
        transform: none !important; /* No scale on item box */
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Allow dot to be visible outside item bounds */
    }
    
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 50px !important; /* 20px padding between dot and article */
        padding-right: 0 !important;
        justify-content: flex-start !important;
        transform: none !important; /* No scale on item box */
        overflow: visible !important; /* Allow dot to be visible outside item bounds */
    }
    
    /* Timeline dot on left line - centered on line at 20px */
    .timeline-dot {
        left: 1px !important; /* Center dot on line */
        transform: translateX(-50%) !important;
        position: absolute !important;
        margin-left: 20px !important; /* Position dot at 20px to align with line */
    }
    
    /* Content aligned left - increased font size, scaled down via JS */
    .timeline-content {
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Timeline font sizes for mobile pequeno */
    .timeline-content .result-title {
        font-size: 22px !important;
        line-height: 26px !important;
    }
    
    .timeline-content .result-excerpt {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    
    .timeline-content .result-keyword {
        font-size: 12px !important;
        line-height: 14px !important;
    }
    
    .timeline-content .read-more-link {
        font-size: 13px !important;
        line-height: 16px !important;
    }
    
    .timeline-item:nth-child(even) .timeline-content {
        text-align: left !important;
    }
    
    /* Ensure all text elements are aligned left */
    .timeline-item .result-title,
    .timeline-item .result-excerpt,
    .timeline-item .result-keyword {
        text-align: left !important;
    }
    
    .timeline-item:nth-child(even) .result-title,
    .timeline-item:nth-child(even) .result-excerpt {
        text-align: left !important;
    }
    
    /* content-area h2/h3/p/ul usam clamp() da regra base */
    .content-area h2,
    .content-area h3 {
        max-width: 100%;
    }
    
    .content-area ul {
        max-width: 100%;
    }
}

/* Mobile grande / Tablet pequeno (sm: ≥ 576px) */
@media (min-width: 576px) and (max-width: 767px) {
    .section-three-layout {
        padding: 0 25px;
        grid-template-columns: 1fr;
        gap: 35px;
        height: auto;
        min-height: 100vh;
    }
    
    .filter-sidebar {
        position: relative;
        padding-top: 25px;
    }
    
    .sidebar-title {
        margin-bottom: 35px;
    }
    
    .filter-option,
    .filter-input-wrapper,
    .suggestions-list {
        width: 100%;
        max-width: 100%;
    }
    
    .content-area:has(.timeline) {
        padding-left: 25px;
        padding-right: 25px;
    }
    
    /* content-area h2/h3/p/ul usam clamp() da regra base */
    .content-area h2,
    .content-area h3 {
        max-width: 100%;
    }
    
    .content-area ul {
        max-width: 100%;
    }
    
    /* Timeline font sizes for mobile grande / tablet pequeno */
    .timeline-content .result-title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 14px;
        line-height: 18px;
    }
    
    .timeline-content .result-keyword {
        font-size: 13px;
        line-height: 15px;
    }
    
    .timeline-content .read-more-link {
        font-size: 13px;
        line-height: 16px;
    }
}

/* Tablet (md: ≥ 768px) */
@media (min-width: 768px) and (max-width: 991px) {
    .section-three-layout {
        padding: 0 30px;
        grid-template-columns: 280px 1fr;
        gap: 50px;
    }
    
    .filter-option {
        width: 100%;
        max-width: 210px;
    }
    
    .filter-input-wrapper {
        width: 100%;
        max-width: 208px;
    }
    
    .suggestions-list {
        width: 100%;
        max-width: 208px;
    }
    
    .content-area:has(.timeline) {
        padding-left: 50px;
        padding-right: 50px;
    }
    
    /* content-area h2/h3/p/ul usam clamp() da regra base */
    .content-area h2,
    .content-area h3 {
        max-width: 100%;
    }
    
    .content-area ul {
        max-width: 100%;
    }
    
    /* Timeline font sizes for tablet */
    .timeline-content .result-title {
        font-size: 24px;
        line-height: 28px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 15px;
        line-height: 19px;
    }
    
    .timeline-content .result-keyword {
        font-size: 13px;
        line-height: 15px;
    }
    
    .timeline-content .read-more-link {
        font-size: 14px;
        line-height: 17px;
    }
}

/* Desktop pequeno (lg: ≥ 992px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .section-three-layout {
        padding: 0 35px;
        grid-template-columns: 320px 1fr;
        gap: 70px;
    }
    
    /* Timeline font sizes for desktop pequeno */
    .timeline-content .result-title {
        font-size: 24px;
        line-height: 28px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 15px;
        line-height: 19px;
    }
    
    .timeline-content .result-keyword {
        font-size: 13px;
        line-height: 15px;
    }
    
    .timeline-content .read-more-link {
        font-size: 14px;
        line-height: 17px;
    }
}

/* Desktop (xl: ≥ 1200px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .section-three-layout {
        padding: 0 40px;
    }
    
    /* Timeline font sizes for desktop - base sizes */
    .timeline-content .result-title {
        font-size: 24px;
        line-height: 28px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 15px;
        line-height: 19px;
    }
    
    .timeline-content .result-keyword {
        font-size: 13px;
        line-height: 15px;
    }
    
    .timeline-content .read-more-link {
        font-size: 14px;
        line-height: 17px;
    }
}

/* Desktop com altura reduzida (telas largas e baixas) */
@media (min-width: 1200px) and (max-height: 700px) {
    /* Timeline font sizes for desktop com altura reduzida */
    .timeline-content .result-title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 14px;
        line-height: 18px;
    }
    
    .timeline-content .result-keyword {
        font-size: 12px;
        line-height: 14px;
    }
    
    .timeline-content .read-more-link {
        font-size: 13px;
        line-height: 16px;
    }
}

/* Desktop grande (xxl: ≥ 1400px) */
@media (min-width: 1400px) {
    .section-three-layout {
        padding: 0 calc((100vw - 1400px) / 2);
        max-width: none;
    }
    
    /* Timeline font sizes for desktop grande - base sizes */
    .timeline-content .result-title {
        font-size: 26px;
        line-height: 30px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 16px;
        line-height: 20px;
    }
    
    .timeline-content .result-keyword {
        font-size: 14px;
        line-height: 16px;
    }
    
    .timeline-content .read-more-link {
        font-size: 15px;
        line-height: 18px;
    }
}

/* Desktop grande com altura reduzida (telas largas e baixas) */
@media (min-width: 1400px) and (max-height: 700px) {
    /* Timeline font sizes for desktop grande com altura reduzida */
    .timeline-content .result-title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .timeline-content .result-excerpt {
        font-size: 14px;
        line-height: 18px;
    }
    
    .timeline-content .result-keyword {
        font-size: 12px;
        line-height: 14px;
    }
    
    .timeline-content .read-more-link {
        font-size: 13px;
        line-height: 16px;
    }
}