@import url('event-sections-base.css');

/* Ceremony Program — shared timeline component */
.event-program {
    --program-bg: transparent;
    --program-accent: #7c5295;
    --program-line: rgba(124, 82, 149, 0.35);
    --program-dot: #7c5295;
    --program-title: #5a3d6e;
    --program-subtitle: rgba(90, 61, 110, 0.65);
    --program-time: rgba(124, 82, 149, 0.85);
    --program-title-ar: #4a3058;
    --program-title-en: rgba(124, 82, 149, 0.75);
    --program-heading-size: clamp(1.85rem, 7vw, 2.35rem);
    --program-item-gap: 2.5rem;
    --program-padding-y: 2.5rem;
    --program-padding-x: 1.25rem;
    --program-timeline-gap: 1.25rem;

    background: var(--program-bg);
    padding: var(--program-padding-y) var(--program-padding-x);
    text-align: center;
}

.event-program--compact {
    --program-heading-size: 1.35rem;
    --program-item-gap: 1.75rem;
    --program-padding-y: 1.25rem;
    --program-padding-x: 0.75rem;
    --program-timeline-gap: 1rem;
}

.event-program--custom-bg {
    background: var(--program-bg) !important;
}

.event-families--custom-bg {
    background: var(--families-bg) !important;
}

/* Default: program stays clear when it follows families (unless custom color set) */
.event-families ~ .event-program:not(.event-program--custom-bg) {
    --program-bg: transparent;
    background: transparent !important;
    border-top: 1px solid color-mix(in srgb, var(--program-accent, #7c5295) 14%, transparent);
    margin-top: 1rem;
    padding-top: calc(var(--program-padding-y, 2.5rem) + 0.25rem);
}

.event-families--compact ~ .event-program--compact:not(.event-program--custom-bg) {
    margin-top: 0.65rem;
    padding-top: calc(var(--program-padding-y, 1.25rem) + 0.15rem);
}

.event-program__heading {
    margin-bottom: 2rem;
}

.event-program--compact .event-program__heading {
    margin-bottom: 1.25rem;
}

.event-program__title {
    font-size: var(--program-heading-size);
    font-weight: 700;
    color: var(--program-title);
    line-height: 1.35;
    margin: 0 0 0.5rem;
}

.event-program__subtitle {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: var(--program-subtitle);
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

.event-program__timeline {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0.5rem 0;
    direction: ltr;
}

.event-program__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--program-line);
    border-radius: 1px;
}

.event-program__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--program-timeline-gap);
    width: 100%;
    margin-bottom: var(--program-item-gap);
    direction: ltr;
}

.event-program__item:last-child {
    margin-bottom: 0;
}

.event-program__item::before {
    content: '';
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--program-dot);
    border: 2px solid var(--eventy-card-bg, var(--families-card-bg, var(--program-bg, #fff)));
    box-shadow: 0 0 0 2px var(--program-line);
    z-index: 1;
}

/* Odd items → right half; even → left half (text faces center line) */
.event-program__item--right .event-program__content {
    grid-column: 2;
    text-align: left;
}

.event-program__item--left .event-program__content {
    grid-column: 1;
    text-align: right;
}

.event-program__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    direction: rtl;
}

.event-program__time {
    display: block;
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    font-weight: 500;
    color: var(--program-time);
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}

.event-program__title-ar {
    display: block;
    font-size: clamp(1.15rem, 4vw, 1.35rem);
    font-weight: 700;
    color: var(--program-title-ar);
    line-height: 1.45;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.event-program__title-en {
    display: block;
    font-size: clamp(0.62rem, 1.9vw, 0.72rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--program-title-en);
    line-height: 1.35;
    word-break: break-word;
    direction: ltr;
    unicode-bidi: isolate;
}