/**
 * AWD Timeline Stylesheet
 * ------------------------
 * Description:   Responsive vertical timeline layout with alternating left/right content blocks.
 * Author:        Austin Web and Design
 *
 * Features:
 * - Center vertical line with year markers
 * - Alternating image/text layout for desktop
 * - Stacked layout for mobile (≤ 768px)
 * - Styled titles, dates, and descriptions
 * - Flexible container widths and image handling
 *
 * Responsive Support:
 * - Optimized for desktop, tablet, and mobile screens
 *
 * Dependencies:
 * - Optional: Spectra AOS or Fancybox (if using animations or modals)
 */

/* ================================
   Timeline Container & Vertical Line
   ================================ */
.awd-timeline-wrapper { position: relative; padding: 2rem 0; }
.awd-timeline-line { position: absolute; top: 90px; bottom: 0; left: 50%; width: 3px; background-color: #8e0100; transform: translateX(-50%); z-index: 0; }
.awd-timeline { position: relative; display: flex; flex-direction: column; gap: 3rem; z-index: 1; }

/* ================================
   Year Marker
   ================================ */
.awd-timeline-year-marker { text-align: center; font-size: 16px; font-weight: bold; margin: 2rem 0 1rem; color: #fff; }
.awd-timeline-year-marker span { display: inline-block; background-color: #8e0100; border-radius: 50%; height: 46px; width: 46px; line-height: 46px; overflow: hidden; }

/* ================================
   Event & Layout
   ================================ */
.awd-timeline-event { display: flex; justify-content: center; }
.awd-timeline-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; gap: 2rem; }

/* Alternating Layout */
.awd-timeline-item.even .awd-timeline-text { order: 1; text-align: right; }
.awd-timeline-item.even .awd-timeline-image { order: 2; }
.awd-timeline-item.odd .awd-timeline-text { order: 2; text-align: left; }
.awd-timeline-item.odd .awd-timeline-image { order: 1; }

/* Shared Layout */
.awd-timeline-text, .awd-timeline-image { flex: 0 0 48%; }
.awd-timeline-text { text-align: left; }

/* ================================
   Text Styling
   ================================ */
.awd-timeline-date { font-weight: bold; font-size: 1.2rem; color: #b10000; }
.awd-timeline-title { font-size: 1.75rem; margin: 0.25em 0; }
.awd-timeline-subtitle { font-size: 1.2rem; color: #777; margin-bottom: 0.5rem; font-style: italic; text-transform: capitalize; }
.awd-timeline-description { color: #444; }

/* ================================
   Image Styling
   ================================ */
.awd-timeline-image img { display: block; width: 100%; height: auto; border-radius: 0; }

/* ================================
   Responsive Layout
   ================================ */
@media (max-width:768px) {
  .awd-timeline-item { flex-direction: column; text-align: center; }
  .awd-timeline-text, .awd-timeline-image { flex: 1 1 100%; order: unset !important; text-align: center !important; }
  .awd-timeline-line { left: 8px; transform: none; }
}