/**
 * Timeline Widget - CSS (v10.1 - User Modifications)
 * - Changed content border-radius to 4px.
 * - Styled year/subheading to be black background with white text.
 * - Adjusted responsive logic for arrows.
 */

/* --- General Wrapper & Navigation --- */
.manual-timeline-wrapper { width: 100%; position: relative; padding: 20px 0; }
.timeline-nav-container { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; }
.timeline-nav-viewport { overflow: hidden; flex-grow: 1; }
.timeline-nav-slider { display: flex; justify-content: center; position: relative; transition: transform 0.4s ease; padding: 10px 0; }

/* --- Timeline Items & Highlight Lines --- */
.timeline-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 15px; cursor: pointer; flex-shrink: 0; position: relative; z-index: 2; }
.timeline-nav-highlight-line { position: absolute; left: 0; width: 100%; height: 1px; background-color: transparent; transition: background-color 0.3s, height 0.3s; z-index: 3; }
.timeline-nav-highlight-line.top { top: -10px; }
.timeline-nav-highlight-line.bottom { bottom: -10px; }
.timeline-nav-title { margin: 0; white-space: nowrap; transition: color 0.3s; color: #666; }

/* --- Interaction States --- */
.timeline-nav-item:hover .timeline-nav-highlight-line { background-color: #CF000E; }
.timeline-nav-item.is-selected .timeline-nav-highlight-line { height: 2px; background-color: #333; }
.timeline-nav-item.is-selected .timeline-nav-title { font-weight: bold; }

/* --- Arrow Buttons --- */
.timeline-nav-arrow {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    flex-shrink: 0;
    transition: opacity 0.3s, background-color 0.3s;
}
.timeline-nav-arrow:hover { background-color: #e9e9e9; }
.timeline-nav-arrow .arrow-icon { width: 10px; height: 10px; stroke: #000; fill: none; }
.timeline-nav-arrow:disabled { opacity: 0.4; cursor: not-allowed; background-color: #f5f5f5; }

/* --- Responsive Adjustments for Arrows --- */
@media (max-width: 767px) {
    .timeline-nav-container { justify-content: space-between; }
    .timeline-nav-arrow { width: 32px; height: 32px; margin: 0; }
}
@media (min-width: 768px) {
    .timeline-nav-arrow.next { display: none; }
}

/* --- Content Carousel --- */
.timeline-content-viewport { width: 100%; overflow: hidden; }
.timeline-content-slider { display: flex; position: relative; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); margin: 0 -10%; }
.timeline-content-item { width: 33.333%; flex-shrink: 0; box-sizing: border-box; padding: 0 15px; }

/* --- MODIFICATION: Border-radius changed to 4px --- */
.timeline-content-inner { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 20px; 
    border-radius: 4px; /* Changed from 12px to 4px */
    width: 100%; 
    opacity: 0.4; 
    transform: scale(0.85); 
    transition: opacity 0.5s, transform 0.5s; 
}
.timeline-content-item.is-selected .timeline-content-inner { opacity: 1; transform: scale(1); }

/* --- MODIFICATION: Border-radius changed to 4px --- */
.timeline-content-img { flex: 1.5; }
.timeline-content-img img { 
    width: 100%; 
    height: auto; 
    border-radius: 4px; /* Changed from 8px to 4px */
    display: block; /* Fix potential bottom space */
}
.timeline-content-text { flex: 1; text-align: left; }

/* --- MODIFICATION: Year/Date button style changed to black background --- */
.timeline-content-subheading { 
    display: inline-block; 
    border: 1px solid #000; /* Border color to black */
    background-color: #000; /* Background to black */
    color: #fff; /* Text color to white */
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 14px; 
    margin-bottom: 15px; 
}
.timeline-content-heading { font-size: 20px; font-weight: bold; margin: 0; line-height: 1.4; }

/* --- Responsive Content Adjustments --- */
@media (max-width: 991px) and (min-width: 768px) {
    .timeline-content-slider { margin: 0 -5%; }
    .timeline-content-item { width: 50%; }
    .timeline-content-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 767px) {
    .timeline-content-slider { margin: 0; }
    .timeline-content-item { width: 100%; padding: 0 10px; }
}