/* ================================================
   CUSTOMER STORY — single template
   Shares the blog post's two-column shell
   (.single-post-wrapper / .single-post-container),
   so only the story-specific pieces live here.
   ================================================ */

.customer-story__breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 20px 0;
}

/* ------------------------------------------------
   Hero image
   ------------------------------------------------ */

.customer-story__hero {
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding: 0 20px;
}

.customer-story__hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
}

/* ------------------------------------------------
   Header
   ------------------------------------------------ */

.customer-story__header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 20px 0;
}

.customer-story__date {
    font-size: 0.9375rem;
    color: #6b6b70;
    margin: 0 0 0.75rem;
}

.customer-story__title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e1e23;
    margin: 0;
}

.customer-story__subtitle {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.25;
    color: #1e1e23;
    margin: 0.5rem 0 0;
}

/* ------------------------------------------------
   Sidebar — details
   ------------------------------------------------ */

.story-sidebar {
    position: relative;
}

.story-sidebar-sticky {
    position: sticky;
    top: 120px;
}

/* Vertical rule separating sidebar from content, as in the design. */
@media (min-width: 1025px) {
    .story-sidebar {
        border-right: 1px solid rgba(30, 30, 35, 0.12);
        padding-right: 2rem;
    }
}

/* ------------------------------------------------
   Sidebar section separators
   ------------------------------------------------
   One rule draws every divider: a line ABOVE each section,
   suppressed on whichever section happens to be first.

   The previous arrangement put a border-bottom on the details
   block and a border-top on the Let's connect widget. That is
   correct only while a table of contents sits between them - on
   a story with no H2s the TOC does not render, the two borders
   become adjacent and the column shows a double line.

   Drawing from the top and resetting :first-child means any
   combination of present sections produces exactly one line
   between neighbours and none at the top, with no per-case
   rules. Both borders also used different greys; they are one
   value now.
   ------------------------------------------------ */
.story-sidebar-sticky > * {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(30, 30, 35, 0.12);
}

.story-sidebar-sticky > *:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.story-details {
    margin: 0;
    padding: 0;
}

.story-details__row {
    margin-bottom: 1.375rem;
}

.story-details__row:last-child {
    margin-bottom: 0;
}

/* Each row has its own dot colour, as in the design. */
.story-details__row--client       .story-details__bullet { background-color: #00e65f; } /* green  */
.story-details__row--industry     .story-details__bullet { background-color: #ffd200; } /* yellow */
.story-details__row--use-cases    .story-details__bullet { background-color: #be91ff; } /* violet */
.story-details__row--capabilities .story-details__bullet { background-color: #7dcdff; } /* blue   */

/*
 * Spacing rhythm, largest gap to smallest: between groups (row margin, 22px),
 * then label to its first value (6px), then value to value (4px). It used to
 * run 22 / 2 / 8 — the label was glued to its first value while the values sat
 * further apart than the label did, so each group read as "label + item" and
 * then a stray item, rather than as one labelled list.
 *
 * The label also carried less weight than the values under it, which left it
 * receding rather than heading the group.
 */
.story-details__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b6b70;
    margin: 0 0 6px;
}

.story-details__bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00e65f;
    flex-shrink: 0;
}

.story-details__value {
    margin: 0;
    padding-left: 14px; /* aligns under the label text, past the bullet */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;       /* tighter than the label gap, so the values read as one list */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;  /* long values like "Travel/Transport & Infrastructure" wrap comfortably */
    color: #1e1e23;
}

.story-details__plain {
    display: block;
}

/*
 * Linked values: a leading chevron is always visible so it's obvious the item
 * is clickable without hovering. The trailing arrow is the hover flourish.
 */
.story-details__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    color: #1e1e23;
    text-decoration: none;
    transition: color 0.2s ease;
}

/*
 * The underline is what marks the row as clickable, so it sits on the LABEL
 * rather than the anchor: the anchor is a flex row that also holds the hover
 * arrow, and underlining that would drag the rule out under the arrow and
 * across the gap.
 *
 * border-bottom rather than text-decoration, so the colour and thickness are
 * controllable and the rule sits clear of the descenders.
 */
.story-details__link-label {
    min-width: 0;
    border-bottom: 1px solid #1e1e23;
    transition: border-color 0.2s ease;
}

.story-details__arrow {
    flex-shrink: 0;
    margin-top: 0.2em;
    opacity: 0;
    transform: translate(-2px, 2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover takes the text, the underline and the arrow to the same green. */
.story-details__link:hover,
.story-details__link:focus-visible {
    color: #00cc54;
}

.story-details__link:hover .story-details__link-label,
.story-details__link:focus-visible .story-details__link-label {
    border-bottom-color: #00cc54;
}

.story-details__link:hover .story-details__arrow,
.story-details__link:focus-visible .story-details__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* ------------------------------------------------
   Sidebar — table of contents
   ------------------------------------------------ */

.story-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.story-toc__item {
    margin: 0 0 0.625rem;
    padding: 0;
    list-style: none;
}

.story-toc__item::before,
.story-toc__item::marker {
    content: none;
}

/* Table of contents is styled by template-parts/snippets/toc.css. */

/* ------------------------------------------------
   Pull quote
   ------------------------------------------------ */

.customer-story__quote {
    margin: 0 0 2.5rem;
    padding: 2rem;
    background-color: #D4F4DD;
    border-radius: 10px;
}

.customer-story__quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #1e1e23;
}

/* ------------------------------------------------
   Story sub-heading
   ------------------------------------------------
   The line that introduces the article, above the first content
   heading. It carried NO margins at any width, so it sat flush
   against "About <client>" on desktop as well as mobile -
   measured 0px between them at 390, 768 and 1440.

   24px matches the bottom margin the content headings already
   use, so the rhythm of the column is unchanged; only the
   collision goes away. The first content heading has its top
   margin reset to 0, which is why the gap has to come from here.
   ------------------------------------------------ */
.customer-story__sub-heading {
    margin: 0 0 1.5rem;
}

.customer-story__quote blockquote p:first-child { margin-top: 0; }
.customer-story__quote blockquote p:last-child  { margin-bottom: 0; }

.customer-story__quote figcaption {
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #326446;
}

/* ------------------------------------------------
   Content
   ------------------------------------------------ */

.customer-story__content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1e23;
    margin: 2.5rem 0 1rem;
    scroll-margin-top: 120px; /* so TOC anchors clear the sticky header */
}

.customer-story__content h2:first-child {
    margin-top: 0;
}

.customer-story__content p {
    font-size: 1rem;
    line-height: 1.7;
    color: #1e1e23;
}

.customer-story__content ul,
.customer-story__content ol {
    padding-left: 1.25rem;
    line-height: 1.7;
}

.customer-story__content li {
    margin-bottom: 0.5rem;
}

.customer-story__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ------------------------------------------------
   Related stories
   ------------------------------------------------ */

.story-related {
    border-top: 1px solid rgba(30, 30, 35, 0.12);
    margin-top: 4rem;
    padding: 3rem 0 5rem;
}

.story-related__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.story-related__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e1e23;
    margin: 0 0 2rem;
}

.story-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */

@media (max-width: 1024px) {
    .customer-story__title    { font-size: 1.875rem; }
    .customer-story__subtitle { font-size: 1.375rem; }

    .story-sidebar-sticky { position: static; }

    /*
     * Below the sticky breakpoint the sidebar stops being a column and stacks
     * ABOVE the article, but nothing separated the two: the story's
     * sub-heading sat flush against the Let's connect button - measured 0px.
     * On desktop the two are side by side and this margin is irrelevant.
     */
    .customer-story__main { margin-top: 2.5rem; }

    .story-details {
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .story-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .customer-story__hero        { margin-top: 1rem; }
    .customer-story__hero-image  { aspect-ratio: 16 / 9; }

    .customer-story__header-inner { padding-top: 1.75rem; }

    .customer-story__title    { font-size: 1.5rem; }
    .customer-story__subtitle { font-size: 1.125rem; }

    .customer-story__quote {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .customer-story__content h2 { font-size: 1.25rem; }

    .story-related        { padding: 2.5rem 0 3rem; }
    .story-related__grid  { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* ------------------------------------------------
   Sticky sidebar — scrollable when it outgrows the viewport

   A sticky panel does not scroll: the page moves behind it and the panel
   itself stays put, so anything past the bottom edge of the viewport can
   never be reached. That was invisible while the sidebar was short. Adding
   Industry, Use Cases and Capabilities above the table of contents pushed it
   over, and a story with more than a few headings lost the end of its TOC
   with no way to get at it.

   Capping the height and letting the panel take its own scrollbar restores
   the whole thing. Only below the sticky breakpoint — above it the sidebar
   is static and flows with the page, where a cap would clip it instead.
   ------------------------------------------------ */

@media (min-width: 1025px) {
    .story-sidebar-sticky {
        max-height: calc(100vh - 140px); /* 120px offset + breathing room */
        overflow-y: auto;
        overscroll-behavior: contain;    /* don't chain to the page at the ends */
        padding-right: 6px;              /* keep text off the scrollbar */
        scrollbar-width: thin;
        scrollbar-color: rgba(30, 30, 35, 0.25) transparent;
    }

    .story-sidebar-sticky::-webkit-scrollbar { width: 6px; }
    .story-sidebar-sticky::-webkit-scrollbar-track { background: transparent; }
    .story-sidebar-sticky::-webkit-scrollbar-thumb {
        background: rgba(30, 30, 35, 0.22);
        border-radius: 3px;
    }
    .story-sidebar-sticky:hover::-webkit-scrollbar-thumb { background: rgba(30, 30, 35, 0.38); }
}