/* =========================================================
   VeloVerse - main stylesheet
   Dark cinematic design system: near-black page, charcoal
   surfaces, bold white type and a restrained lime accent.
   All colours come from the tokens below, so a page only
   needs the shared classes to match the rest of the site.
   ========================================================= */

/* Contents (in file order)
   1.  Design tokens (colours, sizes, font) and base element styles
   2.  Header, navigation, buttons and placeholder images
   3.  Original homepage layout: hero, sections, card grids, anatomy, footer
   4.  Responsive rules for the layout above
   5.  Shared helpers and the Bicycle Types pages
   6.  Components and Anatomy pages
   7.  Bicycles list, bicycle detail, search and filters
   8.  Compare Bicycles page
   9.  Dark cinematic layer: later overrides for typography, focus, headers and cards
   10. Homepage (cinematic hero, explore cards, promo band) and its responsive rules
   11. Reduced motion and error pages
   12. Photography: photos, photo credits and licensed photos
   13. Component photo cards, brand and model details
   14. Compare page extras: difference badges, highlighted rows, subgrid

   The cascade: when two rules have the same specificity, the one that comes
   later in the file wins. Later sections rely on this to restyle earlier ones,
   so the order of the rules matters.

   Breakpoints: max-width 1024px = tablet, max-width 720px = phone,
   max-width 380px = very narrow phone, min-width 1025px = desktop only. */

/* ---------- Design tokens ---------- */
/* Custom properties (names starting with --) work like variables. They are set once
   on :root (the <html> element), every element inherits them, and rules read them
   with var(--name), e.g. color: var(--color-accent). Change a value here to change it everywhere. */
:root {
    color-scheme: dark; /* native form controls and scrollbars follow the dark theme */

    --color-accent: #c8f031;          /* lime: buttons, active states, small highlights only */
    --color-accent-hover: #d9ff5a;
    --color-accent-soft: rgba(200, 240, 49, 0.12);
    --color-on-accent: #0a0a0b;       /* text placed on lime */
    --color-text: #f5f5f4;
    --color-muted: #a1a1aa;           /* about 7.5:1 on the page background */
    --color-border: #26262b;
    --color-border-strong: #3a3a41;
    --color-bg: #0a0a0b;              /* page background */
    --color-bg-light: #111113;        /* alternate section background */
    --color-surface: #161618;         /* cards and panels */
    --color-surface-2: #1d1d20;       /* raised elements inside cards */
    --color-panel: #18181b;           /* side panels, e.g. "Part of the … system" */
    --color-footer: #050506;
    --color-footer-text: #a1a1aa;
    --color-danger: #f87171;

    /* Shared corner radius, card shadow, maximum page width and font list */
    --radius: 14px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    --container: 1232px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
/* border-box: width and height include padding and border, so sizes are easier to predict */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

/* Images never overflow their container; display: block removes the small gap under inline images */
img {
    max-width: 100%;
    display: block;
}

h1, h2, h3 {
    line-height: 1.15;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

/* Centred page column: never wider than --container, with space at the sides */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.text-accent {
    color: var(--color-accent);
}

/* Hidden visually but still read by screen readers (an accessibility helper).
   Unlike display: none, the text stays available to assistive technology:
   it is shrunk to 1px, clipped and taken out of the layout with position: absolute. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Header and navigation ---------- */
/* position: relative lets z-index work, so the header stays above the page content */
.site-header {
    position: relative;
    z-index: 50;
    background: rgba(10, 10, 11, 0.92);
    border-bottom: 1px solid var(--color-border);
}

/* Flexbox lays the children out in a row: logo on the left, navigation on the right
   (justify-content: space-between), both centred vertically (align-items: center) */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4rem;
}

.logo-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 27.5px;     /* keeps the 48 x 30 drawing in proportion */
    color: var(--color-accent);
}

.site-nav ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative; /* keeps the hidden "(coming soon)" text inside the link */
    display: block;
    padding: 8px 12px;
    font-size: 0.95rem;
    color: var(--color-muted);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
}

a.nav-link:hover,
a.nav-link:focus-visible {
    color: var(--color-text);
    background: var(--color-surface);
}

/* The current page: white text with a thin lime underline */
.nav-link.is-active {
    color: var(--color-text);
    font-weight: 600;
}

/* ::after adds an empty decorative box. position: absolute places it relative to the
   nearest positioned ancestor, here the .nav-link (position: relative) */
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* ---------- Buttons ---------- */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* inline-flex in a column stacks the label and an optional <small> line, centred */
.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn small {
    font-weight: 400;
    font-size: 0.75rem;
}

/* Primary call to action (class name kept from the light design) */
.btn-dark {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.btn-dark:hover {
    background: var(--color-accent-hover);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---------- Placeholder images ---------- */
.placeholder-image {
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 70% 20%, rgba(200, 240, 49, 0.07), transparent 60%),
        var(--color-surface-2);
}

/* object-fit: cover fills the frame and crops the edges instead of stretching the image */
.placeholder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pinned to the bottom-left corner of the figure, which is position: relative */
.placeholder-image figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--color-muted);
    background: rgba(10, 10, 11, 0.75);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

/* ---------- Hero ---------- */
.hero {
    padding: 96px 0;
}

/* CSS grid: two equal columns (1fr = one share of the free space) with a 64px gap */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

/* clamp(min, preferred, max): the size follows 5% of the screen width (5vw)
   but never goes below 2.5rem or above 4rem */
.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

/* "Your Bike" sits on its own line, as in the wireframe */
.hero h1 .text-accent {
    display: block;
}

.lead {
    font-size: 1.15rem;
    color: var(--color-muted);
    max-width: 34em;
    margin-bottom: 32px;
}

/* ---------- Sections ---------- */
.section {
    padding: 80px 0;
}

.section-light {
    background: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.section-subtitle {
    color: var(--color-muted);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 16px 0 4px;
}

/* ---------- Card grids ---------- */
.card-grid {
    display: grid;
    gap: 24px;
}

/* repeat(4, 1fr) = four equal columns; the media queries further down use fewer columns on small screens */
.card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
}

.card h3 {
    font-size: 1.2rem;
}

.card p,
.type-card p,
.model-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
}


.type-card .placeholder-image {
    aspect-ratio: 9 / 8;
    margin-bottom: 20px;
}

.type-card h3,
.model-card h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

/* ---------- Anatomy section ---------- */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

.anatomy-image {
    box-shadow: var(--shadow);
}

.system-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.system-list li {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.system-list p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-footer);
    color: var(--color-footer-text);
    padding: 64px 0 32px;
}

.site-footer .logo {
    color: #fff;
    margin-bottom: 16px;
}

/* 2fr 1fr 1fr: the first column is twice as wide as each of the other two */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-about p {
    max-width: 26em;
}

.footer-heading {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--color-accent);
}

.footer-links small {
    font-size: 0.7rem;
    margin-left: 4px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.footer-bottom p {
    margin: 0;
}

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

/* A media query applies the rules inside it only when its condition is true.
   max-width: 1024px means "screen 1024px wide or less". These rules come after the
   desktop rules above, so on small screens they win. */

/* Tablet: two columns, header wraps onto two rows */
@media (max-width: 1024px) {
    .header-inner {
        flex-wrap: wrap;
        padding-top: 16px;
        padding-bottom: 8px;
        gap: 8px;
    }

    /* Navigation moves below the logo and wraps onto extra lines if needed */
    .site-nav {
        width: 100%;
    }

    .site-nav ul {
        flex-wrap: wrap;
        gap: 4px;
    }

    .nav-link {
        padding: 6px 10px;
    }

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

    .hero-grid,
    .split-grid {
        gap: 40px;
    }
}

/* Mobile: single column */
@media (max-width: 720px) {
    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 48px 0;
    }

    .section {
        padding: 56px 0;
    }

    .hero-grid,
    .split-grid,
    .card-grid-4,
    .card-grid-3,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 24px;
    }

    .btn {
        width: 100%;
    }
}

/* =========================================================
   Shared helpers added with the Bicycle Types pages
   ========================================================= */
.text-center {
    text-align: center;
}

.narrow {
    max-width: 960px;
}

.centred {
    margin-left: auto;
    margin-right: auto;
}

.centred-row {
    justify-content: center;
}

.text-link {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible {
    text-decoration: underline;
}

/* Limits long descriptions on cards to three lines */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.empty-state {
    padding: 24px;
    color: var(--color-muted);
    background: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.section-more {
    margin: 32px 0 0;
}

.eyebrow-accent {
    color: var(--color-accent);
}

.btn-light {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text);
    width: 100%;
    padding: 10px 16px;
}

.btn-light:hover,
.btn-light:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---------- Inner page header ---------- */
.page-hero {
    padding: 56px 0 72px;
}

.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
}

.page-hero-image {
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 20px;
}

.breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-accent);
}

/* Attribute selector: matches the breadcrumb item marked aria-current="page" in the HTML */
.breadcrumb [aria-current="page"] {
    color: var(--color-accent);
}

.info-chip {
    display: inline-flex;
    flex-direction: column;
    padding: 12px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.info-chip .eyebrow {
    margin: 0;
}

/* ---------- Bicycle type tiles (list page) ---------- */
.type-tile {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.type-tile .placeholder-image {
    aspect-ratio: 3 / 2;
    border-radius: 0;
}

/* flex: 1 makes the body take all the space left under the image */
.type-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.type-tile h2,
.type-tile h3 {
    font-size: 1.2rem;
}

.type-tile p {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.type-tile .best-use {
    color: var(--color-text);
    font-weight: 600;
}

/* Pushes the button to the bottom so all tiles line up */
.type-tile .btn {
    margin-top: auto;
}

/* ---------- "Understanding the Differences" ---------- */
.factor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.factor h3 {
    font-size: 1.05rem;
    padding-left: 14px;
    border-left: 3px solid var(--color-accent);
}

.factor p {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ---------- Pros & Cons (dark section) ---------- */
.section-dark {
    background: var(--color-footer);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section-dark .section-subtitle {
    color: var(--color-muted);
}

.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pros-cons-panel {
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
}

.pros-cons-panel h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 8px;
}

/* Plain text list: no ticks or crosses, items separated by thin lines */
.pc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pc-list li {
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
}

.pc-list li:last-child {
    padding-bottom: 0;
}

/* ---------- Related types ---------- */
.related-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.related-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    text-align: center;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.related-card span {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.related-card:hover,
.related-card:focus-visible {
    border-color: var(--color-accent);
}

/* ---------- Responsive rules for the new sections ---------- */
@media (max-width: 1024px) {
    .factor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .page-hero {
        padding: 32px 0 48px;
    }

    .factor-grid,
    .pros-cons,
    .related-list {
        grid-template-columns: 1fr;
    }

    .pros-cons-panel {
        padding: 24px;
    }
}

/* =========================================================
   Components & Anatomy pages
   ========================================================= */
.page-hero-compact {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.section-tight {
    padding: 48px 0;
}

.muted-note {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.tag {
    display: inline-block;
    padding: 3px 10px;
    margin-right: 6px;
    border-radius: 6px;
    background: var(--color-accent-soft);
}

/* ---------- Anatomy diagram ---------- */
.anatomy-panel {
    padding: 48px 32px 32px;
    border-radius: 24px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

/* On narrow screens the diagram keeps a readable size and scrolls inside its own box */
.anatomy-scroll {
    overflow-x: auto;
}

.anatomy-svg {
    display: block;
    width: 100%;
    min-width: 640px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-bg);
    border-radius: var(--radius);
}

/* SVG shapes use stroke (line colour and width) and fill instead of border and background */
.anatomy-bike .frame {
    stroke: var(--color-text);
    stroke-width: 9;
}

.anatomy-bike .part {
    stroke: #8a8a93;
    stroke-width: 5;
}

.anatomy-bike .thick {
    stroke-width: 9;
}

.anatomy-bike .filled {
    fill: #8a8a93;
}

.anatomy-bike .thin {
    stroke: #71717a;
    stroke-width: 3;
}

.anatomy-bike .tyre {
    stroke: #3f3f46;
    stroke-width: 12;
}

.anatomy-bike .rim {
    stroke: #94a3b8;
    stroke-width: 5;
}

.anatomy-bike .spokes line {
    stroke: #3a3a41;
    stroke-width: 1.5;
}

.anatomy-bike .hub {
    fill: #8a8a93;
    stroke: none;
}

.anatomy-label line {
    stroke: var(--color-accent);
    stroke-width: 1.5;
}

.anatomy-label circle {
    fill: var(--color-accent);
}

.anatomy-label rect {
    fill: var(--color-surface);
    stroke: var(--color-border);
    stroke-width: 1.5;
}

.anatomy-label text {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    fill: var(--color-text);
}

.anatomy-label a:hover rect,
.anatomy-label a:focus-visible rect {
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

.anatomy-label a:hover text,
.anatomy-label a:focus-visible text {
    fill: var(--color-on-accent);
}

/* ---------- System cards ---------- */
/* :target matches the element whose id is in the address after #, so a linked card is highlighted */
.system-card:target {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.part-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

/* li + li: every item that follows another item, so there is space between items but not above the first */
.part-list li + li {
    margin-top: 8px;
}

.part-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--color-bg-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.part-list-more {
    color: var(--color-accent);
    font-size: 0.8rem;
    white-space: nowrap;
}

.part-list a:hover,
.part-list a:focus-visible {
    background: var(--color-accent-soft);
}

/* ---------- "How it works together" steps ---------- */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.flow-steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.flow-steps li span:last-child {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.flow-step-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-light);
    font-weight: 700;
}

.flow-step-final .flow-step-number {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}

/* ---------- Component detail ---------- */
.info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.info-block {
    padding: 32px;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-bg-light);
}

.info-block h2 {
    font-size: 1.4rem;
}

.info-block p {
    color: var(--color-muted);
    margin: 0;
}

.related-system {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 40px;
    align-items: start;
}

.related-parts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.related-part {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
}

.related-part span {
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
}

.related-part:hover,
.related-part:focus-visible {
    border-color: var(--color-accent);
}

/* "Part of the … system" panel on component detail pages: a dark card,
   with lime used only for the small labels, the top accent line and the current component */
.system-panel {
    padding: 32px;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 24px;
    background: var(--color-panel);
    color: var(--color-text);
}

.system-panel h2 {
    font-size: 1.5rem;
    color: var(--color-text);
}

.system-panel p {
    color: #c4c4cc;
}

.system-panel .eyebrow {
    color: var(--color-accent);
}

.system-panel .eyebrow + h2 {
    margin-top: 4px;
}

.system-panel .chip-list {
    margin-top: 12px;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Component pills: other components are quiet outlined links,
   the component being viewed is highlighted in lime */
.chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-2);
    color: #d4d4d8;
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

a.chip:hover,
a.chip:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.chip-current {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .related-system {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .anatomy-panel {
        padding: 32px 16px 16px;
    }

    .flow-steps {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .flow-steps li {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 12px;
    }

    .flow-steps li span:last-child {
        flex-basis: 100%;
        padding-left: 56px;
        margin-top: -8px;
    }

    .info-columns,
    .related-parts {
        grid-template-columns: 1fr;
    }
}

/* Only shown on small screens, where the diagram scrolls sideways */
.anatomy-hint {
    display: none;
    font-size: 0.85rem;
    color: var(--color-muted);
    text-align: center;
}

@media (max-width: 720px) {
    .anatomy-hint {
        display: block;
    }
}

/* =========================================================
   Bicycles list page
   ========================================================= */

/* Small year / type / frame summary on each bicycle card */
.bike-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0 0 12px;
    font-size: 0.85rem;
}

.bike-facts dt {
    color: var(--color-muted);
}

.bike-facts dd {
    margin: 0;
    font-weight: 600;
}

/* =========================================================
   Bicycle detail page
   ========================================================= */

/* Two-column list of specifications: label on the left, value on the right */
.spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    margin: 0;
}

/* Each div holds one dt (label) and one dd (value), pushed to opposite sides by space-between */
.spec-table div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.spec-table dt {
    color: var(--color-muted);
}

.spec-table dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.spec-table a {
    color: var(--color-accent);
}

@media (max-width: 720px) {
    .spec-table {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Bicycle search (Bicycles list page)
   ========================================================= */
.search-form {
    margin-bottom: 24px;
}

.search-row {
    max-width: 640px;
    display: flex;
    gap: 12px;
}

.search-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.search-row input {
    flex: 1;
    /* min-width: 0 lets the input shrink inside the flex row instead of pushing the button out */
    min-width: 0;
    padding: 12px 16px;
    font: inherit;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}

.search-row input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.search-row .btn {
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.search-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--color-muted);
    margin-bottom: 24px;
}

/* ---------- Bicycle filters (same form as the search box) ---------- */
/* Three equal columns for the dropdowns plus an "auto" column just wide enough for the buttons */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 16px;
    align-items: end;
    margin-top: 20px;
}

.filter-field select {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}

.filter-field select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.filter-actions .btn {
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .filter-actions {
        /* 1 / -1 = from the first to the last grid line, so the buttons get a whole row */
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .search-row {
        flex-direction: column;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Compare Bicycles page
   (the two dropdowns reuse the filter styles from the Bicycles page)
   ========================================================= */
.compare-grid {
    grid-template-columns: 1fr 1fr auto;
    margin-top: 0;
}

/* Validation message above the comparison */
.form-message {
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius);
    background: rgba(248, 113, 113, 0.08);
    color: var(--color-text);
}

/* Bicycle A and Bicycle B summary cards */
.compare-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.compare-cards .eyebrow {
    margin-top: 0;
}

/* Needed: a later .eyebrow rule sets a muted colour, so this more specific rule keeps "Bicycle A/B" lime */
.compare-cards .eyebrow-accent {
    color: var(--color-accent);
}

/* Side-by-side specification table */
.compare-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    /* Fixed layout: column widths come from the header row, not from the content */
    table-layout: fixed;
}

.compare-table th,
.compare-table td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
    /* Long words or links may break anywhere instead of widening the table */
    overflow-wrap: anywhere;
}

.compare-table thead th {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-accent);
    font-weight: 600;
}

.compare-table thead th:first-child {
    width: 28%;
}

.compare-table tbody th {
    color: var(--color-muted);
    font-weight: 500;
}

.compare-table tbody td {
    font-weight: 600;
}

.compare-table tbody tr + tr {
    border-top: 1px solid var(--color-border);
}

/* Zebra stripes: every second row gets a slightly lighter background */
.compare-table tbody tr:nth-child(even) {
    background: var(--color-bg-light);
}

.compare-note {
    margin-top: 24px;
}

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

@media (max-width: 720px) {
    .compare-grid,
    .compare-cards {
        grid-template-columns: 1fr;
    }

    .compare-table th,
    .compare-table td {
        padding: 12px 10px;
        font-size: 0.85rem;
    }

    .compare-table thead th:first-child {
        width: 30%;
    }
}

/* =========================================================
   Dark cinematic layer (UI redesign)
   Shared typography, focus, page headers and the new
   homepage sections. Everything uses the tokens at the top.
   ========================================================= */

/* Many rules below repeat selectors from earlier in the file (h1, .section-title, .btn,
   .page-hero ...). This is intentional: with the same specificity the later rule wins,
   so each one overrides only the properties it sets and keeps the rest of the earlier rule. */

/* ---------- Typography ---------- */
body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

h1 {
    letter-spacing: -0.035em;
}

.section-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
}

.eyebrow {
    letter-spacing: 0.14em;
}

/* ::selection styles text that the user highlights */
::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* ---------- Keyboard focus: always visible, never removed ---------- */
/* :focus-visible applies when the browser decides focus should be shown (mainly keyboard use),
   so a mouse click does not leave an outline but tabbing always does */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Links that jump to a section stop below the sticky header */
[id] {
    scroll-margin-top: 96px;
}

/* ---------- Skip link (first thing keyboard users reach) ---------- */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
    text-decoration: none;
}

/* The link waits above the screen (top: -60px) and slides into view when it gets keyboard focus */
.skip-link:focus {
    top: 12px;
}

/* ---------- Header: sticky on larger screens ---------- */
/* min-width: 1025px = desktop only (just above the 1024px tablet breakpoint).
   position: sticky keeps the header at the top while scrolling; backdrop-filter blurs the page behind it */
@media (min-width: 1025px) {
    .site-header {
        position: sticky;
        top: 0;
        background: rgba(10, 10, 11, 0.8);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

.logo {
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.site-nav a.nav-link {
    font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
    letter-spacing: 0.01em;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-light {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
}

/* Arrow used after text links */
.arrow {
    /* inline-block is needed because transform does not move plain inline elements */
    display: inline-block;
    transition: transform 0.2s;
}

a:hover .arrow,
a:focus-visible .arrow {
    transform: translateX(4px);
}

/* ---------- Inner page header: dark stage with a soft lime glow ---------- */
.page-hero {
    position: relative;
    padding: 72px 0 88px;
    /* Two background layers: the first one listed is painted on top */
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(200, 240, 49, 0.08), transparent 60%),
        linear-gradient(180deg, #0f0f11 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.75rem);
    line-height: 1.02;
}

.page-hero-image {
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.lead {
    color: #c4c4cc;
}

/* ---------- Sections and cards ---------- */
.card,
.type-tile,
.related-card,
.info-chip,
.pros-cons-panel,
.anatomy-panel {
    border-color: var(--color-border);
}

.type-tile,
.related-card,
.related-part {
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.type-tile:hover,
.related-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.type-tile .placeholder-image {
    border-bottom: 1px solid var(--color-border);
}

.empty-state {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.info-block {
    background: var(--color-surface);
}

.factor h3 {
    color: var(--color-text);
}

/* ---------- Specification and comparison tables ---------- */
.spec-table dd {
    color: var(--color-text);
}

.compare-table tbody td {
    color: var(--color-text);
}

/* Very narrow phones: the table keeps its three columns but may scroll sideways
   inside its own box instead of squeezing the text */
@media (max-width: 380px) {
    .compare-table-wrap {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 340px;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--color-border);
}

.footer-note {
    margin-top: 16px;
    font-size: 0.85rem;
    color: #8b8b93;
}

/* =========================================================
   Homepage
   ========================================================= */

/* ---------- Cinematic hero ---------- */
/* position: relative makes the hero the reference box for the absolutely positioned art and
   ::before gradient inside it. isolation: isolate starts a new stacking context, so their
   negative z-index values put them behind the text but still inside the hero. */
.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min() picks the smaller value: 88% of the screen height, but at most 820px */
    min-height: min(88vh, 820px);
    padding: 96px 0 0;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(55% 70% at 72% 45%, rgba(200, 240, 49, 0.10), transparent 65%),
        radial-gradient(80% 60% at 70% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
        var(--color-bg);
}

/* Large bicycle illustration on the right, fading into the dark */
.home-hero-art {
    position: absolute;
    /* inset is shorthand for top, right, bottom, left: the art covers the right part of the hero
       and runs slightly past its right edge */
    inset: 0 -6% 0 40%;
    z-index: -2; /* behind the readability gradient below */
    margin: 0;
    display: flex;
    align-items: center;
}

.home-hero-art img {
    width: 100%;
    height: auto;
    opacity: 0.95;
}

/* Gradient that keeps the headline readable over the artwork */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--color-bg) 0%, rgba(10, 10, 11, 0.92) 32%, rgba(10, 10, 11, 0.2) 70%, transparent 100%);
}

/* Flex children with auto margins would shrink, so the container keeps full width */
.home-hero > .container,
.hero-quicklinks {
    width: 100%;
}

.home-hero-content {
    max-width: 640px;
}

.home-hero h1 {
    font-size: clamp(3.2rem, 8.5vw, 7rem);
    line-height: 0.95;
    margin-bottom: 28px;
}

.home-hero h1 .text-accent {
    display: block;
}

.home-hero .lead {
    font-size: 1.2rem;
    max-width: 30em;
}

/* Quick links along the bottom of the hero */
.hero-quicklinks {
    margin-top: 88px;
    border-top: 1px solid var(--color-border);
    background: rgba(10, 10, 11, 0.6);
}

.hero-quicklinks ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-quicklinks li {
    /* flex: 1 1 0 = grow, shrink, start from zero width, so all links share the row equally */
    flex: 1 1 0;
}

.hero-quicklinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 4px;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    padding-right: 20px;
    margin-right: 20px;
}

.hero-quicklinks li:last-child a {
    border-right: 0;
    margin-right: 0;
}

.hero-quicklinks a:hover,
.hero-quicklinks a:focus-visible {
    color: var(--color-accent);
}

/* ---------- Section heading used on the homepage ---------- */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-bottom: 40px;
}

.section-head .section-subtitle {
    margin-bottom: 0;
    max-width: 36em;
}

/* ---------- Explore cards ---------- */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    background:
        radial-gradient(90% 60% at 50% 18%, rgba(200, 240, 49, 0.08), transparent 70%),
        linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
    transition: border-color 0.25s, transform 0.25s;
}

.explore-card:hover,
.explore-card:focus-visible {
    border-color: rgba(200, 240, 49, 0.55);
    transform: translateY(-4px);
}

.explore-number {
    margin-bottom: 28px;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.explore-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.explore-card p {
    flex: 1; /* pushes the link to the bottom so all four cards line up */
    color: var(--color-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* ---------- Bicycle type cards on the homepage ---------- */
.type-card {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.type-card .placeholder-image {
    border: 1px solid var(--color-border);
}

.type-card .text-link {
    margin-top: auto;
}

/* ---------- Anatomy section ---------- */
.anatomy-image {
    border: 1px solid var(--color-border);
}

.system-list li {
    padding: 16px 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.system-list li:last-child {
    border-bottom: 1px solid var(--color-border);
}

.system-number {
    flex: 0 0 44px;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding-top: 3px;
}

/* ---------- Featured model cards ---------- */
.model-card {
    display: flex;
    flex-direction: column;
    padding: 0 0 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.model-card .placeholder-image {
    aspect-ratio: 16 / 10;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
}

.model-card .eyebrow,
.model-card h3,
.model-card p,
.model-card .text-link {
    margin-left: 24px;
    margin-right: 24px;
}

.model-card .text-link {
    margin-top: auto;
}

/* ---------- Compare promotion band ---------- */
.promo-band {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 64px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 100% 50%, rgba(200, 240, 49, 0.14), transparent 60%),
        var(--color-surface);
}

.promo-band h2 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.02;
}

.promo-band p {
    color: var(--color-muted);
    max-width: 32em;
}

/* Two simple columns that hint at a side-by-side comparison */
.promo-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.promo-visual div {
    padding: 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    background: rgba(10, 10, 11, 0.55);
}

.promo-visual span {
    display: block;
    height: 8px;
    margin-top: 12px;
    border-radius: 4px;
    background: var(--color-border-strong);
}

/* :first-child and :nth-child(n) pick spans by position to make bars of different widths */
.promo-visual span:first-child {
    margin-top: 0;
    width: 55%;
    background: var(--color-accent);
}

.promo-visual span:nth-child(3) {
    width: 70%;
}

.promo-visual span:nth-child(4) {
    width: 45%;
}

/* ---------- Homepage responsive rules ---------- */
@media (max-width: 1024px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-hero-art {
        inset: 0 -10% 0 20%;
        opacity: 0.6;
    }

    .promo-band {
        grid-template-columns: 1fr;
        padding: 48px;
    }
}

@media (max-width: 720px) {
    .home-hero {
        min-height: 0;
        padding-top: 56px;
    }

    /* On phones the art becomes a normal flex item again; order: 2 places it after the text */
    .home-hero-art {
        position: relative;
        inset: auto;
        order: 2;
        margin: 24px -20% 0 0;
        opacity: 0.8;
    }

    .home-hero::before {
        background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 11, 0.4) 100%);
    }

    .hero-quicklinks {
        order: 3;
        margin-top: 0;
    }

    .hero-quicklinks li {
        flex: 1 1 50%;
    }

    .hero-quicklinks a {
        border-right: 0;
        margin-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .explore-grid {
        grid-template-columns: 1fr;
    }

    .promo-band {
        padding: 32px 24px;
    }

    .page-hero {
        padding: 48px 0 56px;
    }
}

/* ---------- Respect reduced-motion preferences ---------- */
/* prefers-reduced-motion matches when the user has asked their operating system for less animation.
   Transitions become almost instant and the hover "lift" effects are switched off.
   !important makes these declarations beat the normal rules above. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .type-tile:hover,
    .related-card:hover,
    .explore-card:hover,
    .explore-card:focus-visible {
        transform: none;
    }

}

/* ---------- Error pages ---------- */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    background: radial-gradient(50% 60% at 50% 30%, rgba(200, 240, 49, 0.08), transparent 70%);
}

.error-code {
    margin: 0 0 8px;
    font-size: clamp(6rem, 22vw, 13rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.06em;
    /* Transparent text with only an outline (text-stroke) */
    color: transparent;
    -webkit-text-stroke: 2px var(--color-border-strong);
}

/* The homepage anatomy figure shows the whole illustration rather than cropping it */
.anatomy-image {
    aspect-ratio: 4 / 3;
}

.anatomy-image img {
    object-fit: contain;
    padding: 24px;
}

/* =================================================================
   V3 photography: licensed photos stored locally as WebP.
   Credits are listed in IMAGE-CREDITS.md and shown on each photo.
   ================================================================= */
.photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface-2);
}

.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Small credit pill: muted text on a dark backing for contrast */
/* Pinned to the bottom-right corner of the .photo figure (position: relative) */
.photo-credit {
    position: absolute;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 3px 9px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--color-muted);
    background: rgba(10, 10, 11, 0.8);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    /* nowrap + overflow: hidden + ellipsis: a long credit is cut off with "..." instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-credit a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 2px;
}

.photo-credit a:hover,
.photo-credit a:focus-visible {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

/* Card photo frames (the 3:2 ratio itself is set on the image further down) */
.type-tile .photo {
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.type-card .photo {
    margin-bottom: 20px;
}

.page-hero-image.photo {
    aspect-ratio: 16 / 10;
}

.anatomy-image.photo {
    aspect-ratio: 4 / 3;
}

.anatomy-image.photo img {
    object-fit: cover;
    padding: 0;
}

/* Homepage hero photo: fills the right side and fades into the dark behind the headline */
.home-hero-art.photo {
    position: absolute; /* keeps the hero layout from .home-hero-art */
    border-radius: 0;
    overflow: visible;
    background: none;
}

.home-hero-art.photo img {
    height: 100%;
    object-fit: cover;
    object-position: 65% 50%;
    opacity: 1;
}

.home-hero-art .photo-credit {
    top: 16px;
    bottom: auto;
    right: calc(10% + 16px); /* the hero photo extends past the right edge of the screen */
}

/* The readability gradient must not block clicks on the photo credit */
.home-hero::before {
    pointer-events: none;
}

@media (max-width: 720px) {
    .home-hero-art.photo {
        position: relative;
        margin: 24px 0 0;
        aspect-ratio: 4 / 3;
        opacity: 1;
    }

    .home-hero-art .photo-credit {
        top: auto;
        bottom: 10px;
        right: 10px;
    }
}

/* On small cards the credit sits under the photo, so it never covers the bicycle */
/* The figure grows with its content and the image itself keeps the 3:2 ratio */
.type-tile .photo,
.type-card .photo {
    aspect-ratio: auto;
    background: none;
}

.type-tile .photo img,
.type-card .photo img {
    aspect-ratio: 3 / 2;
    height: auto;
    background: var(--color-surface-2);
}

.type-card .photo img {
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

/* position: static puts the credit back into the normal flow, under the image */
.type-tile .photo-credit,
.type-card .photo-credit {
    position: static;
    display: block;
    max-width: none;
    padding: 6px 0 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.type-tile .photo-credit {
    padding: 8px 20px 0;
}

.type-card .photo {
    overflow: visible;
}


/* ---------- Component photo cards (Components page) ---------- */
.part-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

/* Only cards that link to a component page react on hover */
/* :has(.text-link) matches a .part-card only if it contains an element with the class text-link */
.part-card:has(.text-link):hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
}

/* Reduced motion: keep the border highlight but switch off the lift. This sits here, after the
   hover rule, because the main reduced-motion block above comes earlier in the file and would lose. */
@media (prefers-reduced-motion: reduce) {
    .part-card:has(.text-link):hover {
        transform: none;
    }
}

.part-card .photo,
.part-card .placeholder-image {
    aspect-ratio: 3 / 2;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.part-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.part-card-body .eyebrow {
    margin-bottom: 6px;
}

.part-card h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.part-card p {
    color: var(--color-muted);
    font-size: 0.92rem;
}

.part-card .text-link {
    margin-top: auto;
}

.parts-extra-title {
    margin: 56px 0 20px;
    font-size: 1.4rem;
}

/* ---------- Brand and model details ---------- */
.brand-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Keep the text and arrow on one line (.btn normally stacks its content) */
.brand-facts .btn {
    flex-direction: row;
    gap: 6px;
}

.speciality-list {
    margin-top: 8px;
}

.spec-source {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--color-muted);
}

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

.feature-list li {
    position: relative;
    padding: 6px 0 6px 22px;
    color: var(--color-muted);
}

/* Small lime dot in place of a bullet */
.feature-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* =================================================================
   Brand and model photos from Wikimedia Commons (CC BY / CC BY-SA).
   The whole bicycle stays visible (contain, not cover), and the credit with the
   licence and the list of changes sits under the photo instead of on top of it.
   ================================================================= */
.photo.photo-licensed {
    aspect-ratio: auto;
    border: 0;
    overflow: visible;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.photo.photo-licensed img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: contain;
    background: var(--color-surface-2);
    border-radius: var(--radius);
}

.photo.photo-licensed .photo-credit {
    position: static;
    display: block;
    max-width: none;
    padding: 8px 0 0;
    white-space: normal;
    background: none;
    border: 0;
    border-radius: 0;
    line-height: 1.5;
}

.page-hero-image.photo-licensed img {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

/* Inside cards the photo runs edge to edge, so the credit needs the card's side padding */
.type-tile .photo.photo-licensed,
.model-card .photo.photo-licensed {
    border-bottom: 0;
    margin-bottom: 4px;
}

.type-tile .photo.photo-licensed img,
.model-card .photo.photo-licensed img {
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.type-tile .photo.photo-licensed .photo-credit {
    padding: 8px 20px 0;
}

.model-card .photo.photo-licensed .photo-credit {
    padding: 8px 24px 4px;
}

.type-card .photo.photo-licensed img {
    border: 1px solid var(--color-border);
}

/* Short trademark note under the brand and model lists */
.trademark-note {
    margin-top: 32px;
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* =================================================================
   Compare page: photo cards, difference summary and highlighted rows
   ================================================================= */
.compare-card .type-tile-body h2 {
    margin-bottom: 12px;
}

.compare-chips {
    margin: 0 0 16px;
}

.compare-use {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.compare-use strong {
    color: var(--color-text);
    font-weight: 600;
}

.compare-card .text-link {
    margin-top: auto;
}

.compare-summary {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.compare-summary p {
    margin: 0;
}

.compare-summary strong {
    color: var(--color-accent);
}

.compare-summary .compare-legend {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.8;
}

/* "Differs" label: text, not colour alone, shows which rows are different */
.diff-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    border: 1px solid rgba(200, 240, 49, 0.45);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

.compare-table tbody tr.row-different th,
.compare-table tbody tr.row-different td {
    background: var(--color-accent-soft);
}

/* An inset box-shadow draws a 4px lime bar on the left edge without changing the cell width */
.compare-table tbody tr.row-different th:first-child {
    box-shadow: inset 4px 0 0 var(--color-accent);
}

.compare-table tbody td.value-missing,
.compare-legend .value-missing {
    color: var(--color-muted);
    font-style: italic;
    font-weight: 400;
}

@media (max-width: 720px) {
    .compare-table .diff-badge {
        display: block;
        width: fit-content;
        margin: 6px 0 0;
    }
}

/* Line the two cards up: photo + credit in one row, text in the next, even when one
   photo credit is longer than the other (subgrid; older browsers simply skip this) */
/* @supports applies the rules inside only if the browser understands that property and value */
@supports (grid-template-rows: subgrid) {
    .compare-cards {
        grid-template-rows: auto auto;
    }

    /* subgrid: the card reuses the two rows of .compare-cards, so both cards share the same row heights */
    .compare-card {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}