/**
 * Attorna — Work Experience & Certificates section (scoped `xpe-` BEM)
 * Timeline (right in RTL) + vertical 2-column certificate Swiper + lightbox.
 */

.xpe-section {
    --xpe-gold: var(--color-gold, #B1976B);
    --xpe-gold-deep: #8C7448;
    --xpe-line: #D8CBAE;
    --xpe-ink: #333333;
    --xpe-muted: #777777;
    /* Timeline divider is biased toward the meta (date/company) column so the
       description column gets a bit more width for longer text.
       The row keeps 3 tracks — meta | 40px gutter | body — split 7fr / 8fr,
       so the gutter center is no longer at 50%. --xpe-center +
       --xpe-center-offset locate that gutter center exactly (as a % of width
       plus a small fixed-pixel correction for the tracks' gaps/gutter), and the
       grid tracks, the vertical line and the dots all derive from it so the
       divider always sits dead-center on the 40px gutter at any width.
       Keep --xpe-center in sync with the .xpe-timeline__main grid columns. */
    --xpe-center: 46.67%;
    --xpe-center-offset: 2.4px;

    padding-block: var(--section-spacing-md, 96px);
    background: #fff;
    overflow: hidden;
}

/* --- Header --------------------------------------------------------------- */
.xpe-header {
    text-align: center;
    margin-bottom: 48px;
}

.xpe-accent {
    display: block;
    width: 64px;
    height: 3px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--xpe-gold) 20%, var(--xpe-gold) 80%, transparent);
}

.xpe-title {
    font-size: var(--font-size-h2, 1.9rem);
    color: var(--xpe-ink);
    font-weight: var(--font-weight-bold, 700);
    margin: 0;
    line-height: 1.4;
}

/* --- Grid ------------------------------------------------------------------ */
.xpe-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: stretch;
}

/* --- Timeline --------------------------------------------------------------- */
.xpe-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Vertical connector line runs through the center of the 40px gutter of every
   row, dividing the meta column (right in RTL) from the body column (left).
   The gutter center is no longer at 50% (meta/body track split is 7fr/8fr,
   biased toward the body for wider descriptions) — see --xpe-center. */
.xpe-timeline__list::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    inset-inline-start: calc(var(--xpe-center) + var(--xpe-center-offset) - 0.5px);
    width: 1px;
    background: var(--xpe-line);
}

.xpe-timeline__item {
    position: relative;
    padding-block: 18px;
}

.xpe-timeline__item:first-child {
    padding-top: 4px;
}

.xpe-timeline__item:last-child {
    padding-bottom: 4px;
}

/* Dot centered on the line: box = 7px + 2 * 2px border = 11px. */
.xpe-timeline__dot {
    position: absolute;
    top: 28px;
    inset-inline-start: calc(var(--xpe-center) + var(--xpe-center-offset) - 5.5px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--xpe-gold);
    transition: background 0.25s ease-in-out;
}

/* 3-zone row: [meta | center gutter | body].
   meta/body split 7fr/8fr (biased toward body) so descriptions have more room;
   the gutter center matches --xpe-center.
   Track order follows inline flow (RTL): 1 = right (meta), 2 = center gutter, 3 = left (body).
   Children must be pinned explicitly so auto-placement does not drop the body
   into the middle 40px gutter. */
.xpe-timeline__main {
    display: grid;
    grid-template-columns: minmax(0, 7fr) 40px minmax(0, 8fr);
    column-gap: 16px;
    align-items: start;
}

/* Date + employer sit on the right (start) half, hugging the center line. */
.xpe-timeline__meta {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: left;
    min-width: 0;
    padding-top: 2px;
}

.xpe-timeline__date {
    font-weight: var(--font-weight-bold, 700);
    color: var(--xpe-gold);
    line-height: 1.5;
    transition: color 0.25s ease-in-out;
}

.xpe-timeline__company {
    color: var(--xpe-muted);
    font-size: 0.9rem;
    margin-top: 4px;
    line-height: 1.6;
}

.xpe-timeline__body {
    grid-column: 3;
    min-width: 0;
}

.xpe-timeline__role {
    color: var(--xpe-ink);
    font-size: 1.02rem;
    font-weight: var(--font-weight-bold, 700);
    margin: 0;
    line-height: 1.5;
    transition: color 0.25s ease-in-out;
}

.xpe-timeline__desc {
    color: var(--xpe-muted);
    line-height: 1.9;
    margin-top: 6px;
    font-size: 0.925rem;
}

.xpe-timeline__desc p {
    margin: 0 0 8px;
}

.xpe-timeline__desc p:last-child {
    margin-bottom: 0;
}

/* Hover micro-interaction */
.xpe-timeline__item:hover .xpe-timeline__dot {
    background: var(--xpe-gold);
}

.xpe-timeline__item:hover .xpe-timeline__role,
.xpe-timeline__item:hover .xpe-timeline__date {
    color: var(--xpe-gold-deep);
}

/* --- Certificates card ------------------------------------------------------- */
.xpe-certs__card {
    border: 1.5px solid #d4c5a9;
    border-radius: 24px;
    padding: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.xpe-swiper-wrap {
    position: relative;
    flex: 1;
}

.xpe-swiper {
    height: 676px;
}

.xpe-swiper .swiper-slide {
    display: flex;
}

.xpe-cert {
    width: 100%;
    aspect-ratio: 3 / 4;
}

.xpe-cert__btn {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #F7F3EA;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    display: block;
}

.xpe-cert__btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease-in-out;
}

.xpe-cert__btn:hover img {
    transform: scale(1.04);
}

.xpe-cert__btn:focus-visible {
    outline: 2px solid var(--xpe-gold);
    outline-offset: 2px;
}

/* --- Controls ----------------------------------------------------------------- */
.xpe-certs__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.xpe-certs__btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--xpe-gold);
    background: #fff;
    color: var(--xpe-gold);
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.25s ease-in-out, color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.xpe-certs__btn:hover {
    background: var(--xpe-gold);
    color: #fff;
}

.xpe-certs__btn:focus-visible {
    outline: 2px solid var(--xpe-gold-deep);
    outline-offset: 2px;
}

.xpe-certs__btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* --- Lightbox ------------------------------------------------------------------ */
.xpe-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 12, 6, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.xpe-lightbox.is-open {
    display: flex;
}

.xpe-lightbox__img {
    max-width: 88vw;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: xpe-fade-in 0.28s ease-in-out;
}

@keyframes xpe-fade-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.xpe-lightbox__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 1;
    display: grid;
    place-items: center;
    transition: background 0.25s ease-in-out;
}

.xpe-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Responsive ------------------------------------------------------------------- */
@media (max-width: 991px) {
    .xpe-grid {
        gap: 32px;
    }

    .xpe-swiper {
        height: 560px;
    }
}

@media (max-width: 767px) {
    .xpe-grid {
        grid-template-columns: 1fr;
    }

    .xpe-swiper {
        height: 460px;
    }

    .xpe-timeline__main {
        grid-template-columns: 1fr 32px 1fr;
        column-gap: 10px;
    }

    .xpe-timeline__dot {
        top: 22px;
    }

    .xpe-timeline__date {
        font-size: 0.95rem;
    }
}