/* ===================================================================
   Point One OS — "The Experience Behind Point One OS"

   Markup: p1_experience_shortcode() in inc/p1-experience.php.
   Behaviour: assets/js/p1-experience.js.

   Everything is scoped under .p1-exp so the section can sit on any page
   without reaching into Astra's or Elementor's styles, or theirs into it.

   Type is SF Pro, the face the site already self-hosts (see the @font-face
   block in assets/css/style.css) — no extra download, and the variable
   weight at 200 gives the wide light heading the design asks for. The
   dates and figures use tabular numerals and a little tracking to read as
   data rather than prose.
   =================================================================== */
.p1-exp {
    --e-ink-2: #08191F;
    --e-panel: #0B2229;
    --e-line: #17383F;
    --e-line-soft: #102C33;
    --e-teal: #00C2A8;
    --e-teal-txt: #4FD8C4;
    --e-mist: #9CB3B7;
    --e-mist-dim: #6F8A8F;
    --e-chalk: #EAF3F3;

    --e-step: 260ms cubic-bezier(.22, .61, .36, 1);

    position: relative;
    box-sizing: border-box;
    padding: 72px 24px 88px;
    /* No background: whatever sits behind shows through, and only the panel
       below paints itself. Everything else is as it was. */
    background: none;
    color: var(--e-mist);
    font-family: "SF Pro", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    overflow: hidden;
}

.p1-exp *,
.p1-exp *::before,
.p1-exp *::after {
    box-sizing: border-box;
}

/* The panels and plates are switched with the hidden attribute, and a class
   that sets display would quietly beat it. */
.p1-exp [hidden] {
    display: none !important;
}

.p1-exp__track,
.p1-exp__stage {
    position: relative;
    max-width: 1232px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------- Buttons ----------------
   Astra dresses every <button> through `.ast-container button`, which is a
   class and an element and so outranks a single class of ours — that is what
   filled the era tiles and the chapter rows with the accent colour. These
   reach past it, and !important covers the Elementor kit's own button rules
   on top of that. Nothing below needs to fight it again. */
.p1-exp button.p1-exp__era,
.p1-exp button.p1-exp__chapter,
.p1-exp button.p1-exp__nudge {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
}


/* ---------------- The track ---------------- */
.p1-exp__track {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 18px;
}

.p1-exp__stage {
    margin-top: 34px;
}

.elementor-kit-6 button.p1-exp__nudge {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid #00C2A8 !important;
    border-radius: 50% !important;
    color: #00C2A8;
    cursor: pointer;
    transition: border-color var(--e-step), color var(--e-step), background var(--e-step);
}


.elementor-kit-6 button.p1-exp__nudge:hover {
    background-color: #00C2A8;
    color: #fff;
}

.p1-exp__nudge:hover:not(:disabled),
.p1-exp__nudge:focus-visible:not(:disabled) {
    background: rgba(0, 194, 168, .07);
    border-color: var(--e-teal);
    color: var(--e-teal);
}

.p1-exp__nudge:disabled {
    opacity: .3;
    cursor: default;
}

/* However many eras there are, they share the width until they would be
   narrower than 132px; past that the rail scrolls and the script keeps the
   selected one in view. */
.p1-exp__rail {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding-bottom: 6px;
}

.p1-exp__rail::-webkit-scrollbar {
    display: none;
}

.entry-content ol.p1-exp__eras {
    --p1-exp-count: 4;
    --e-inset: calc(100% / (var(--p1-exp-count) * 2));
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 1fr);
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The spine, and the travelled part of it, inset to the first and last dot
   centres rather than the container edges. */
.p1-exp__eras::before,
.p1-exp__eras::after {
    content: "";
    position: absolute;
    bottom: 9px;
    height: 3px;
}

.p1-exp__eras::before {
    left: var(--e-inset);
    right: var(--e-inset);
    background: var(--e-line);
}

.p1-exp__eras::after {
    left: var(--e-inset);
    width: var(--e-reach, 0%);
    background: var(--e-teal);
    transition: width var(--e-step);
}

.p1-exp__era {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 0 6px !important;
    background: none;
    border: 0;
    color: var(--e-mist-dim);
    cursor: pointer;
    transition: color var(--e-step);
}

.p1-exp__era-range {
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
}

.p1-exp__era-dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #357874;
    box-shadow: inset 0 0 0 2px var(--e-line);
    transition: box-shadow var(--e-step), background var(--e-step), transform var(--e-step);
}

.p1-exp__era:hover {
    color: var(--e-mist);
}

.p1-exp__era:hover .p1-exp__era-dot {
    box-shadow: inset 0 0 0 2px var(--e-teal-txt);
}

.p1-exp__era[aria-selected="true"] {
    color: var(--e-teal-txt);
}

.p1-exp__era[aria-selected="true"] .p1-exp__era-dot {
    background: var(--e-teal);
    box-shadow: 0 0 0 4px rgba(0, 194, 168, .18), inset 0 0 0 2px var(--e-teal);
    transform: scale(1.18);
}

/* Eras already passed read as travelled, not active */
.p1-exp__era.is-past .p1-exp__era-dot {
    background: var(--e-teal);
    box-shadow: inset 0 0 0 2px var(--e-teal);
}


/* ---------------- The stage ---------------- */
.p1-exp__panel {
    border: 1px solid var(--e-line-soft);
    border-radius: 18px;
    background: #081626;
    overflow: hidden;
}

.p1-exp__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 26px 32px 22px;
    border-bottom: 1px solid var(--e-line-soft);
}

.p1-exp__head-range {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--e-teal-txt);
}

.p1-exp__head-title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.2;
    color: #fff;
}

.p1-exp__cols {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr) 352px;
}

/* One chapter: nothing to choose between, so the list column goes */
.p1-exp__cols.is-single {
    grid-template-columns: minmax(0, 1fr) 352px;
}

.p1-exp__cols.is-single .p1-exp__chapters {
    display: none;
}

/* No photographs yet: the detail takes the width rather than sitting beside
   an empty frame */
.p1-exp__cols.is-flat {
    grid-template-columns: 268px minmax(0, 1fr);
}

.p1-exp__cols.is-single.is-flat {
    grid-template-columns: minmax(0, 1fr);
}


/* --- The chapters within an era --- */
.p1-exp__chapters {
    padding: 26px 0;
    border-right: 1px solid var(--e-line-soft);
}

.p1-exp__chapters-label {
    margin: 0 0 14px;
    padding: 0 28px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--e-mist-dim);
}

.p1-exp__chapter-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-exp__chapter {
    position: relative;
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: 100%;
    padding: 13px 24px 13px 28px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background var(--e-step);
}

.p1-exp__chapter:hover {
    background: rgba(0, 194, 168, .05);
}

/* The connector, drawn per row so the last row ends the line rather than it
   running on into the padding */
.p1-exp__chapter::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 26px;
    bottom: -10px;
    width: 1px;
    background: var(--e-line);
}

.p1-exp__chapter-list li:last-child .p1-exp__chapter::before {
    display: none;
}

.p1-exp__chapter-mark {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--e-panel);
    box-shadow: inset 0 0 0 1.5px var(--e-line);
    transition: box-shadow var(--e-step), background var(--e-step);
}

.p1-exp__chapter[aria-selected="true"] .p1-exp__chapter-mark {
    background: var(--e-teal);
    box-shadow: 0 0 0 3px rgba(0, 194, 168, .16), inset 0 0 0 2px var(--e-teal);
}

.p1-exp__chapter-period {
    display: block;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    color: var(--e-teal-txt);
}

.p1-exp__chapter-name {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--e-mist);
    transition: color var(--e-step);
}

.p1-exp__chapter[aria-selected="true"] .p1-exp__chapter-name {
    color: #fff;
    font-weight: 500;
}


/* --- A chapter's detail --- */
.p1-exp__details {
    min-width: 0;
}

.p1-exp__detail {
    padding: 26px 34px 32px;
}

.p1-exp__detail-period {
    display: block;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--e-teal-txt);
}

.p1-exp__detail-title {
    margin: 6px 0 20px;
    font-weight: 600;
    font-size: clamp(19px, 2.1vw, 25px);
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}

/* The Detail editor's own output. A bulleted list gets the tick; paragraphs
   are left as paragraphs. Both come out of the same field. */
.p1-exp__body {
    max-width: 62ch;
}

.p1-exp__body p {
    margin: 0 0 14px;
}

.p1-exp__body> :last-child {
    margin-bottom: 0;
}

.p1-exp__body ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p1-exp__body ul li {
    position: relative;
    padding-left: 29px;
    color: #fff;
}

.p1-exp__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    color: var(--e-teal);
    /* The tick, as a mask so it takes the accent from colour above */
    -webkit-mask-image: var(--e-tick);
    mask-image: var(--e-tick);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p1-exp {
    --e-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.5 2.5 2.5 4.5-5"/></svg>');
    padding: 0;
}

.p1-exp__body ol {
    margin: 0;
    padding-left: 22px;
}

.p1-exp__body a {
    color: var(--e-teal-txt);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p1-exp__body strong {
    color: var(--e-chalk);
}

.p1-exp__contributed {
    max-width: 62ch;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--e-line-soft);
    color: #fff;
}

.p1-exp__contributed h5 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--e-teal-txt);
}

.p1-exp__contributed p {
    margin: 0 0 12px;
}

.p1-exp__contributed p:last-child {
    margin-bottom: 0;
}


/* --- The plate: one photograph per chapter --- */
.p1-exp__plates {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 26px 32px 30px 0;
}

.p1-exp__plate {
    display: grid;
    border: 1px solid var(--e-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--e-ink-2);
}

.p1-exp__plate-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    object-fit: cover;
}


/* ---------------- Focus and motion ---------------- */
.p1-exp :focus-visible {
    outline: 2px solid var(--e-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.p1-exp .is-swapping {
    animation: p1-exp-rise var(--e-step) both;
}

@keyframes p1-exp-rise {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .p1-exp *,
    .p1-exp .is-swapping {
        animation: none !important;
        transition-duration: 1ms !important;
    }

    .p1-exp__rail {
        scroll-behavior: auto;
    }
}


/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {

    .p1-exp__cols,
    .p1-exp__cols.is-flat {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .p1-exp__cols.is-single,
    .p1-exp__cols.is-single.is-flat {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The plate becomes a band under the detail */
    .p1-exp__plates {
        grid-column: 1 / -1;
        padding: 0 32px 30px;
    }

    .p1-exp__plate {
        flex: 0 0 auto;
        min-height: 0;
        aspect-ratio: 21 / 9;
    }
}

@media (max-width: 780px) {
    .p1-exp__era .p1-exp__era-dot {
        display: none;
    }

    .p1-exp__rail {
        padding-bottom: 0;
    }

    .p1-exp__eras::before,
    .p1-exp__eras::after {
        display: none;
    }

    .p1-exp {
        padding: 0;
    }

    .p1-exp__cols,
    .p1-exp__cols.is-flat,
    .p1-exp__cols.is-single,
    .p1-exp__cols.is-single.is-flat {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The chapter list turns into a scrolling row of its own */
    .p1-exp__chapters {
        padding: 20px 0 18px;
        border-right: 0;
        border-bottom: 1px solid var(--e-line-soft);
    }

    .p1-exp__chapters-label {
        padding: 0 20px;
    }

    .p1-exp__chapter-list {
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 20px 6px;
    }

    .p1-exp__chapter-list li {
        flex: none;
        width: 210px;
    }

    .p1-exp__chapter {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 12px 14px !important;
        border: 1px solid var(--e-line-soft);
        border-radius: 10px;
    }

    .p1-exp__chapter::before,
    .p1-exp__chapter-mark {
        display: none;
    }

    .p1-exp__chapter[aria-selected="true"] {
        background: rgba(0, 194, 168, .07);
        border-color: var(--e-teal);
    }

    .p1-exp__head,
    .p1-exp__detail {
        padding-left: 20px;
        padding-right: 20px;
    }

    .p1-exp__plates {
        padding: 0 20px 24px;
    }

    .p1-exp__plate {
        aspect-ratio: 16 / 10;
    }

    .p1-exp__track {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 10px;
    }

    .p1-exp__nudge {
        width: 38px;
        height: 38px;
    }

    .p1-exp__era-range {
        font-size: 13px;
    }
}