.reflections-archive-container {
    background: var(--dark-blue-color);
    position: relative;
    overflow: hidden;
}

/* The .reflections-list and .reflection-item classes from the original CSS are not directly used
   in the new archive-reflection.php structure. The Bootstrap grid handles the layout.
   However, if you want to retain some of their styling, you might need to adapt them.
   For now, I'm keeping only the .reflection-content and related styles as they are directly applicable.
*/

.reflection-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.reflection-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgb(255 255 255 / 10%), transparent);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}
.reflection-content:hover::before {
    transform: translateX(0%);
}

.reflection-content p {
    color: var(--white-color);
    font-size: 1.125rem;  /* 18px converted to rem (assuming base font-size is 16px) */
    line-height: 1.6;
    margin: 0;
    font-weight: var(--font-weight-light);
    text-align: center;
    position: relative;
}

.reflection-content p:first-of-type::before {
    content: '"';
    font-size: 3.75rem;  /* 60px converted to rem (assuming base font-size is 16px) */
    color: var(--primary-color);
    opacity: 0.4;
    position: absolute;
    top: -20px;
    right: -10px;
    font-family: serif;
}


/* Pagination styles for archive-reflection.php */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pagination-wrapper .page-numbers,
.pagination-wrapper .current {
    display: inline-block;
    min-width: 38px;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 6px;
    background: #f6f6f6;
    color: var(--dark-blue-color);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border: 1px solid #e0e0e0;
    text-align: center;
}
.pagination-wrapper .page-numbers:hover,
.pagination-wrapper .page-numbers:focus {
    background: #e0e0e0;
    color: #111;
    border-color: var(--primary-color);
}
.pagination-wrapper .current {
    background: var(--dark-blue-color);
    color: #fff;
    border-color: #fff;
    cursor: default;
}
.pagination-wrapper .prev,
.pagination-wrapper .next {
    font-weight: bold;
    background: #f0f0f0;
    color: var(--dark-blue-color);
    border: 1px solid #e0e0e0;
}
.pagination-wrapper .prev:hover,
.pagination-wrapper .next:hover {
    background: #e0e0e0;
    color: var(--primary-color);
}