/* Guides hub (/guides, /de/ratgeber, /fr/guides), the breadcrumb, related
   guides and key figures of every guide. Built on the guide article styles in
   design-system.css: cards, section titles, the STAR steps and the contents
   list's hairlines. Nothing here adds a new surface, grey text, capitals,
   an underline, a hover fade or a font size of its own (see the guide
   region there). */

/* The hub reads like Opportunities and Hire Talent: its title stands under
   the language switch without a card, and each guide is a job-card sized
   card in the two-column grid (design-system.css centres an odd last one). */
.guide-hub {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Title to cards as on Hire Talent: 50px on a wide screen, 40px on a phone. */
.guide-hub-title {
    margin: 0 0 var(--spacing-md);
    text-align: center;
}

/* One height for every guide card, as for job cards (.jobs-grid in
   design-system.css): each row takes the tallest card's height. */
.guide-cards {
    grid-auto-rows: 1fr;
}

.guide-card {
    scroll-margin-top: calc(var(--header-height) + var(--spacing-md));
}

/* One row of tags, level with the card beside it (--row-tags-height,
   Layout.astro alignCardRows), as on job cards. */
.guide-card .tags {
    min-height: var(--row-tags-height, 0px);
}

.guide-card-text {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* [C] Vincent, 9 November 2026: a guide card carries no button, as a job
   card carries none; the whole card opens the guide. Its foot line tells
   what waits there: the reading time, a calculator and its figures' year, or
   the report's date. */
.guide-card-meta {
    width: fit-content;
    margin: auto 0 0;
    font-size: var(--font-size-body);
}

@media (max-width: 1000px) {
    /* The phone spacing of Hire Talent between switch, title and cards, for
       the hub title and a guide's breadcrumb alike. */
    .guide-language-shell {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .guide-hub,
    .guide {
        padding-top: var(--spacing-sm);
    }

    .guide-hub-title {
        margin-bottom: calc(var(--spacing-md) / 2);
    }

    .guide-card {
        scroll-margin-top: calc(var(--header-height-mobile) + var(--spacing-md));
    }
}

/* A guide's heading stands above its card where Hire Talent and the hub
   show their title: centred under the language switch, in the title's size
   and at the hub title's distance to switch and card. The hub link leads it
   as the breadcrumb, the guide's own title follows as the page heading, and
   where both do not fit one line the title takes the next line whole. */
.guide-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 0.4em;
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-title);
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    color: var(--color-text-primary);
}

/* As a flex row the markup's spaces drop out, so the arrow keeps the same
   gap on both sides. */
.guide-breadcrumb {
    display: flex;
    gap: 0.4em;
}

/* The arrow stays in the text colour; the gradient belongs to the lines. */
.guide-breadcrumb::after {
    content: '›';
    color: var(--color-text-primary);
}

/* Underlined as the header navigation: the page's own title carries the
   gradient line as the current page, the hub link grows it from the middle
   on hover while the title's line steps back. The line is a background on
   the inline text, so a title over two lines underlines each line. Its
   padding sets the line at the header's distance below the baseline
   (--underline-gap): the text box ends 0.21em below it, the line is
   --underline-weight thick. */
.guide-breadcrumb a,
.guide-title-text {
    padding-bottom: calc(var(--underline-gap) - 0.21em + var(--underline-weight));
    background: var(--gradient-brand) no-repeat center bottom / 0% var(--underline-weight);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-breadcrumb a {
    /* As a flex item the link is a block; at the normal line height its box
       ends where the title's inline text box ends, so both lines align. */
    line-height: normal;
    color: inherit;
    text-decoration: none;
}

.guide-title-text {
    background-size: 100% var(--underline-weight);
}

@media (hover: hover) {
    .guide-breadcrumb a:hover {
        background-size: 100% var(--underline-weight);
    }

    .guide-heading:has(.guide-breadcrumb a:hover) .guide-title-text {
        background-image: linear-gradient(90deg, rgba(0, 40, 247, 0.7) 0%, rgba(35, 8, 235, 0.7) 20%, rgba(49, 8, 204, 0.7) 40%, rgba(94, 4, 237, 0.7) 60%, rgba(149, 1, 253, 0.7) 80%, rgba(176, 4, 239, 0.7) 100%);
    }
}

.guide-breadcrumb a:focus-visible {
    outline: 1px solid var(--glass-border-hover);
    outline-offset: 2px;
}

/* The article stacks its cards by margin on a phone, without the hub's gap,
   so the heading carries that gap itself. */
@media (max-width: 1000px) {
    .guide-heading {
        margin-bottom: calc(var(--spacing-md) / 2 + var(--spacing-lg));
    }

    /* A title over two lines keeps room between its first line's underline
       and the second line. */
    .guide-heading .guide-title {
        line-height: 1.7;
    }
}

/* A guide in a list: title, description and reading time, one hairline
   between guides, as in the contents list of an article. */
.guide-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-links li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.guide-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spacing-md);
    row-gap: 0.3rem;
    padding: var(--spacing-md) 0;
    color: inherit;
    text-decoration: none;
}

.guide-links li:first-child .guide-link {
    padding-top: 0;
}

.guide-links li:last-child .guide-link {
    padding-bottom: 0;
}

.guide-link-title,
.guide-link-text,
.guide-link-meta {
    grid-column: 1;
    margin: 0;
}

.guide-link-title {
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text-black);
}

.guide-link-text {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-text-primary);
}

.guide-link-meta {
    color: var(--color-text-primary);
}

.guide-link-arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    font-size: var(--font-size-subtitle);
    color: var(--color-text-black);
}

.guide-related-all {
    width: fit-content;
    margin-top: var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* Key figures: the STAR steps with a figure for the letter. */
.guide-stats-figure {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
}

.guide-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
    margin: 0;
}

.guide-stat dt {
    white-space: nowrap;
}

.guide-stat dd {
    margin: 0;
    color: var(--color-text-primary);
}

.guide-stats-note {
    color: var(--color-text-primary);
}

@media (max-width: 640px) {
    .guide-stats {
        grid-template-columns: 1fr;
    }

    .guide-link-arrow {
        display: none;
    }
}