/* Zoo comparison pilot: incumbent BDO colours/type, independent of planner cards.
   Rhythm follows DESIGN.md's 4 / 8 / 16 / 24 / 32 / 48 spacing scale. */
body[data-category-page="zoo"] .trip-main {
    background: #fff;
    color: #0f172a;
    padding-block: 16px 48px;
}
body[data-category-page="zoo"] .trip-container {
    max-width: 1040px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 24px;
}
.category-comparison {
    --comparison-ink: #0f172a;
    --comparison-muted: #475569;
    --comparison-link: #003da5;
    --comparison-divider: #d5deea;
    --comparison-photo: 200px;
    color: var(--comparison-ink);
}
.category-comparison p { line-height: 1.6; }
.category-comparison-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 1rem; }
.category-comparison-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.category-comparison a { color: var(--comparison-link); text-underline-offset: .2em; }
.category-comparison a:focus-visible { outline: 3px solid #b47500; outline-offset: 4px; border-radius: 8px; }
.category-comparison-header { margin-bottom: 32px; }
.category-comparison-header h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 800; text-wrap: balance; }
.category-comparison-header p { font-size: 1rem; margin: 0; max-width: 68ch; color: var(--comparison-muted); }
.category-comparison h2 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 8px; font-weight: 750; }
.category-comparison-context { margin: 0 0 16px; max-width: 68ch; color: var(--comparison-muted); }
.category-comparison-list { list-style: none; padding: 0; margin: 0; }
/* The floated photograph lets facts follow the complete heading in normal flow.
   Keep the anchor's own box: display:contents removes keyboard focus in Chromium. */
.category-comparison-entry { display: flow-root; padding-block: 24px; border-top: 1px solid var(--comparison-divider); }
.category-comparison-link { display: block; min-height: 44px; text-decoration: none; }
.category-comparison-link img { float: left; width: var(--comparison-photo); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-right: 24px; background: #f8fafc; }
.category-comparison-link h3 { display: flow-root; margin: 0 0 8px; font-size: 1.375rem; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.category-comparison-link:hover h3 { text-decoration-thickness: 2px; }
/* Highlight both parts of the single link without drawing through its floated image. */
.category-comparison .category-comparison-link:focus-visible { outline: none; box-shadow: none; transition: none; }
.category-comparison-link:focus-visible img,
.category-comparison-link:focus-visible h3 { outline: 3px solid #b47500; outline-offset: 4px; }
.category-comparison-link:focus-visible h3 { border-radius: 8px; }
.category-comparison-details { margin-left: calc(var(--comparison-photo) + 24px); min-width: 0; }
.category-comparison dl { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; margin: 0; }
.category-comparison dl div { min-width: 0; max-width: 100%; }
.category-comparison dt { font-size: .875rem; font-weight: 600; color: var(--comparison-muted); }
.category-comparison dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.category-comparison-summary { margin: 8px 0 0; max-width: 68ch; }
.category-comparison-related { margin-top: 48px; --comparison-photo: 144px; }
.category-comparison-related h3 { font-size: 1.25rem; }
.category-comparison-type { margin: 0 0 8px; color: var(--comparison-muted); font-size: .875rem; font-weight: 600; }
.category-comparison ::selection { background: #003da5; color: #fff; }
@media (max-width: 650px) {
    body[data-category-page="zoo"] .trip-container { padding-inline: 16px; }
    .category-comparison { --comparison-photo: 88px; }
    .category-comparison-header { margin-bottom: 24px; }
    .category-comparison-link { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
    .category-comparison-link img { float: none; flex-shrink: 0; margin: 0; }
    .category-comparison-link h3 { flex: 1 1 8em; min-width: 0; margin: 0; }
    .category-comparison-details { margin: 16px 0 0; }
    .category-comparison dl { column-gap: 16px; }
    .category-comparison-related { --comparison-photo: 72px; margin-top: 32px; }
}