/* ==========================================================
   Editorial guides: destination directory + things to do.
   Depends on ato-public.css for the --ato-* tokens.
   ========================================================== */

.ato-guide {
    max-width: 100%;
}

.ato-guide-lede {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ato-text-muted);
    margin: 0 0 34px;
    max-width: 62ch;
}

.ato-guide-group {
    margin: 0 0 46px;
}

.ato-guide-group-title {
    font-family: var(--ato-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ato-primary-dark);
    margin: 0 0 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ato-border-color);
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ato-guide-count {
    font-family: var(--ato-font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ato-secondary);
    background: rgba(176, 141, 79, .12);
    border-radius: var(--ato-radius-sm);
    padding: 3px 9px;
    flex: 0 0 auto;
}

.ato-guide-group-intro {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ato-text-muted);
    margin: 0 0 22px;
    max-width: 68ch;
}

/* ---------- destination directory ---------- */

.ato-guide-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.ato-guide-item {
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-md);
    padding: 18px 20px 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ato-guide-item:hover {
    border-color: var(--ato-secondary);
    box-shadow: 0 8px 22px rgba(var(--shadow), .08);
    transform: translateY(-2px);
}

.ato-guide-item-link {
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.ato-guide-item-name {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ato-primary-dark);
}

.ato-guide-item-link:hover .ato-guide-item-name {
    color: var(--ato-primary);
}

.ato-guide-item-region {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    margin-top: 4px;
}

.ato-guide-item-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--ato-text-muted);
    margin: 0 0 12px;
}

.ato-guide-item-count {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ato-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--ato-secondary);
    padding-bottom: 2px;
}

.ato-guide-item-count:hover {
    color: var(--ato-secondary-hover);
}

@media (max-width: 640px) {

    .ato-guide-grid {
        grid-template-columns: 1fr;
    }

    .ato-guide-group-title {
        font-size: 1.35rem;
    }
}

.ato-guide-item-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ato-bg-white);
    background: var(--ato-primary);
    border-radius: var(--ato-radius-sm);
    padding: 3px 8px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Photographer credit under a featured image. Required by CC BY and CC BY-SA,
   which oblige the attribution to be visible rather than held in meta. */
.ato-img-credit {
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--ato-text-muted);
    margin: 6px 0 0;
    text-align: right;
}

.ato-img-credit a {
    color: var(--ato-text-muted);
    text-decoration: underline;
}

.ato-img-credit a:hover {
    color: var(--ato-primary);
}

/*
 * The safari preview on a destination guide. The cards themselves come from
 * ato-marketplace.css; this only has to give the block a top edge that separates it
 * from several thousand words of prose, and stop the three card grid collapsing into
 * one narrow column on a tablet.
 */
.ato-guide-safaris {
    margin: 46px 0 0;
    padding: 30px 0 0;
    border-top: 1px solid var(--ato-border-color);
}

.ato-guide-safaris-title {
    font-family: var(--ato-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ato-primary-dark);
    margin: 0 0 10px;
}

.ato-guide-safaris-intro {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ato-text-muted);
    margin: 0 0 24px;
    max-width: 68ch;
}

.ato-guide-safaris-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
    margin: 0 0 24px;
}

/*
 * The activity cards on /things-to-do/. That page is now nothing but this directory,
 * so the cards carry it: 104 of them in nine themed groups.
 *
 * auto-fill rather than auto-fit, because a theme with a single activity should leave
 * a card-sized card and empty space beside it, not stretch one card across the row.
 */
.ato-actgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.ato-actcard {
    display: flex;
    flex-direction: column;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ato-actcard:hover,
.ato-actcard:focus-visible {
    border-color: var(--ato-secondary);
    box-shadow: 0 8px 22px rgba(var(--shadow), .10);
    transform: translateY(-2px);
}

/* the media block is shared with the destination cards; only the ratio differs here */
.ato-actcard .ato-card-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.ato-actcard .ato-card-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ato-actcard-body {
    display: block;
    padding: 13px 15px 15px;
}

.ato-actcard-name {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ato-primary-dark);
}

.ato-actcard-desc {
    display: block;
    margin-top: 5px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ato-text-muted);
}

@media (max-width: 480px) {

    .ato-actgrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .ato-actcard-body {
        padding: 10px 11px 12px;
    }

    .ato-actcard-name {
        font-size: 0.9375rem;
    }
}
/* Route from an editorial guide into the marketplace. */
.ato-guide-tomarket {
    margin: 40px 0 0;
    padding: 22px 24px;
    background: var(--ato-bg-light);
    border: 1px solid var(--ato-border-color);
    border-left: 3px solid var(--ato-primary);
    border-radius: var(--ato-radius-md);
}

.ato-guide-tomarket-line {
    margin: 0 0 12px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ato-text-muted);
}

.ato-guide-tomarket-cta {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ato-bg-white);
    background: var(--ato-primary);
    border-radius: var(--ato-radius-sm);
    padding: 10px 18px;
    text-decoration: none;
}

.ato-guide-tomarket-cta:hover {
    background: var(--ato-primary-dark);
    color: var(--ato-bg-white);
}

/*
 * Directory pages: the filter bar and the compact row lists.
 *
 * /destinations/ carries 52 image cards plus every attraction page nested under them,
 * and /things-to-do/ carries 106 activity guides. Cards are kept for the entries that
 * have photographs and rows are used for the ones that do not, which is the data
 * talking rather than a style choice: none of the attraction pages has a featured
 * image and only five activity terms do. Rows also keep a 200 item page from becoming
 * a multi megabyte scroll.
 */

/* The filter is hidden until its script runs, so a reader never meets a search box
   that does nothing. The [hidden] attribute does the work; this just makes sure a
   stylesheet cannot accidentally override it. */
.ato-dirfilter[hidden] {
    display: none !important;
}

.ato-dirfilter {
    margin: 0 0 28px;
    padding: 16px 18px;
    background: var(--ato-bg-light, #f7f6f3);
    border: 1px solid var(--ato-border-color);
    border-radius: 10px;
}

.ato-dirfilter-label {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ato-primary-dark);
    margin: 0 0 8px;
}

.ato-dirfilter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--ato-dark, #222);
    background: var(--ato-bg-white, #fff);
    border: 1px solid var(--ato-border-color);
    border-radius: 8px;
}

.ato-dirfilter-input:focus {
    outline: 2px solid var(--ato-accent, #c8102e);
    outline-offset: 1px;
}

.ato-dirfilter-status {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: .88rem;
    color: var(--ato-muted, #666);
}

/* Groups inside a directory section: one per parent destination, or per theme. */
.ato-dirgroup {
    margin: 0 0 22px;
}

.ato-dirgroup[hidden] {
    display: none !important;
}

.ato-dirgroup-title {
    font-family: var(--ato-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ato-primary-dark);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ato-border-color);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ato-dirgroup-title a {
    color: inherit;
    text-decoration: none;
}

.ato-dirgroup-title a:hover,
.ato-dirgroup-title a:focus {
    text-decoration: underline;
}

.ato-dirgroup-count {
    font-size: .8rem;
    font-weight: 400;
    color: var(--ato-muted, #666);
}

/* The rows themselves. Two columns where there is room, one on a phone. */
.ato-dirlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 2px 18px;
}

.ato-dirlist-item {
    display: block;
    padding: 7px 0;
    color: var(--ato-dark, #222);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.ato-dirlist-item[hidden] {
    display: none !important;
}

.ato-dirlist-item:hover,
.ato-dirlist-item:focus {
    color: var(--ato-primary-dark);
}

.ato-dirlist-item:hover .ato-dirlist-name,
.ato-dirlist-item:focus .ato-dirlist-name {
    text-decoration: underline;
}

.ato-dirlist-name {
    display: block;
    font-size: .97rem;
    line-height: 1.35;
}

.ato-dirlist-desc {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--ato-muted, #666);
    margin-top: 1px;
}

@media (max-width: 600px) {
    .ato-dirlist {
        grid-template-columns: 1fr;
    }

    .ato-dirfilter {
        padding: 14px;
    }
}

/*
 * The places-in-this-area block appended to each destination guide.
 *
 * The attraction pages are children of the guide in the page tree, so they were
 * reachable by URL and from the directory but the guide itself said nothing about
 * them. Three agents flagged that same gap at the end of their blocks.
 *
 * It reuses .ato-dirlist for the rows, so only the frame needs rules here.
 */
.ato-guide-children {
    margin: 40px 0 8px;
    padding: 22px 24px;
    background: var(--ato-bg-light, #f7f6f3);
    border: 1px solid var(--ato-border-color);
    border-radius: 10px;
}

.ato-guide-children h2 {
    font-family: var(--ato-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ato-primary-dark);
    margin: 0 0 6px;
}

.ato-guide-children > p {
    margin: 0 0 14px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ato-muted, #666);
}

@media (max-width: 600px) {
    .ato-guide-children {
        padding: 18px 16px;
    }
}
/*
 * ==========================================================
 * Activity archive (/safaris/activity/<slug>/).
 *
 * This sheet was registered for editorial PAGES only and never reached this
 * archive; templates/taxonomy-ato_activity.php now asks for it explicitly.
 * Everything below is scoped to .ato-taxonomy-page-v2 except the two sidebar
 * safety rules, which are deliberately global.
 * ==========================================================
 */

/*
 * No empty column, ever.
 *
 * The track and the <aside> are emitted by one condition in
 * ATO_Shortcodes::tours_shortcode(), so they cannot come apart today. These two
 * rules make that structural rather than a thing to remember: a wrapper that
 * claims a sidebar and has not got one, or has an empty one, collapses to a
 * single column instead of reserving 280 pixels of nothing.
 */
.ato-tours-page-wrapper.with-sidebar > .ato-sidebar-area:empty,
.ato-operators-page-wrapper.with-sidebar > .ato-sidebar-area:empty {
    display: none;
}

@supports selector(:has(*)) {

    .ato-tours-page-wrapper.with-sidebar:not(:has(> .ato-sidebar-area)),
    .ato-tours-page-wrapper.with-sidebar:has(> .ato-sidebar-area:empty) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The sticky, internally scrolling sidebar is a desktop device. Once the
   column has gone full width it is just a short box with a scrollbar in it. */
@media (max-width: 1024px) {

    .ato-taxonomy-page-v2 .ato-sticky-sidebar {
        position: static;
        max-height: none;
    }

    .ato-taxonomy-page-v2 .ato-sticky-sidebar #ato-filters-form {
        overflow-y: visible;
    }
}

/* ---------- the guide block: heading, authorship, article ---------- */

.ato-taxonomy-page-v2 .ato-guide-block {
    margin: 56px 0 0;
    padding: 46px 0 0;
    border-top: 1px solid var(--ato-border-color, #d9c1a0);
}

/* Nothing above it to be separated from, on an activity with no safaris. */
.ato-taxonomy-page-v2 .ato-guide-block--lead {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

/*
 * .ato-section-h2 ships with `margin: 0 0 20px` - no top margin at all - so the
 * only gap between the listings heading and the lede paragraph above it is that
 * paragraph's own bottom margin. On the page the heading reads as though it is
 * sitting on the text rather than introducing the section below it.
 *
 * Added here rather than on the shared rule because .ato-section-h2 is used on
 * several page types and this sheet loads last, so the change stays scoped to
 * the taxonomy pages that have a lede directly above the heading.
 */
.ato-taxonomy-page-v2 .ato-section-h2 {
    margin-top: 44px;
}

@media (max-width: 600px) {

    .ato-taxonomy-page-v2 .ato-section-h2 {
        margin-top: 32px;
    }
}

/*
 * .ato-section-h2 sets 25px, and the guide's own h2s are 27px. Left alone, the
 * heading that names the whole guide would be the smallest heading in it.
 */
.ato-taxonomy-page-v2 .ato-guide-block-title {
    font-size: 30px;
    line-height: 1.2;
    max-width: var(--ato-measure, 700px);
    margin: 0 0 26px;
    padding-bottom: 14px;
}

/*
 * The author block.
 *
 * "The Author details have no breathing space." It had none: the byline was a
 * line of text with a rule under it and a 22px margin, and the card that went
 * with it was at the other end of the page. Both are here now, inside one block
 * that holds the same measure as the prose, is separated from the article by
 * real space and a single rule, and reads as an answer to "who wrote this"
 * before the writing starts.
 */
.ato-taxonomy-page-v2 .ato-guide-authorship {
    max-width: var(--ato-measure, 700px);
    margin: 0 0 40px;
    padding: 0 0 32px;
    border-bottom: 1px solid var(--ato-border-color, #d9c1a0);
}

/* One rule under the block, not one under each part of it. */
.ato-taxonomy-page-v2 .ato-guide-authorship .ato-guide-byline,
.ato-taxonomy-page-v2 .ato-guide-authorship .ato-guide-byline--house {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    gap: 12px;
}

/* Only when a card follows does the byline need space under it. */
.ato-taxonomy-page-v2 .ato-guide-authorship .ato-guide-byline + .ato-guide-author {
    margin-top: 20px;
}

.ato-taxonomy-page-v2 .ato-guide-author {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 22px 24px;
    background: var(--ato-bg-white, #fff);
    border: 1px solid var(--ato-border-color, #d9c1a0);
    border-left: 3px solid var(--ato-secondary, #b08d4f);
    border-radius: var(--ato-radius-md, 10px);
}

/*
 * The disc is a 52px circle beside a 17px name on a 1.3 line box, so its centre
 * would sit a couple of pixels above the cap height of the first line. Nudged
 * down rather than centred on the whole card: centring drifts as the note grows.
 */
.ato-taxonomy-page-v2 .ato-author-disc {
    width: 52px;
    height: 52px;
    font-size: 15px;
    margin-top: 3px;
}

.ato-taxonomy-page-v2 .ato-author-name {
    font-size: 17px;
    line-height: 1.3;
}

.ato-taxonomy-page-v2 .ato-author-role {
    margin: 5px 0 0;
    line-height: 1.5;
}

/* The separator inside the card: it divides who they are from what they did. */
.ato-taxonomy-page-v2 .ato-author-note {
    margin: 16px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid var(--ato-border-color, #d9c1a0);
}

.ato-taxonomy-page-v2 .ato-author-links {
    margin: 10px 0 0;
}

/* 375px: the card stacks (ato-public.css already turns the flex column), so the
   job here is to stop the padding eating the line length and to keep the disc
   from becoming the loudest thing in the block. */
@media (max-width: 600px) {

    .ato-taxonomy-page-v2 .ato-guide-block {
        margin-top: 40px;
        padding-top: 32px;
    }

    .ato-taxonomy-page-v2 .ato-guide-block-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .ato-taxonomy-page-v2 .ato-guide-authorship {
        margin-bottom: 30px;
        padding-bottom: 24px;
    }

    .ato-taxonomy-page-v2 .ato-guide-author {
        gap: 14px;
        padding: 18px 16px;
    }

    .ato-taxonomy-page-v2 .ato-author-disc {
        width: 44px;
        height: 44px;
        font-size: 14px;
        margin-top: 0;
    }
}

/* ---------- an activity nobody sells ---------- */

/*
 * Rendered only when the archive has no safaris at all. It says so plainly and
 * routes to the marketplace's own contact form, which is the one channel that
 * does not promise a tour operator at the other end.
 */
.ato-taxonomy-page-v2 .ato-actnone {
    max-width: var(--ato-measure, 700px);
    margin: 48px 0 0;
    padding: 26px 28px 28px;
    background: var(--ato-bg-light, #f7f6f3);
    border: 1px solid var(--ato-border-color, #d9c1a0);
    border-left: 3px solid var(--ato-primary, #2f5d50);
    border-radius: var(--ato-radius-md, 10px);
}

.ato-taxonomy-page-v2 .ato-actnone-title {
    font-family: var(--ato-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ato-primary-dark, #241609);
    margin: 0 0 12px;
}

.ato-taxonomy-page-v2 .ato-actnone p {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ato-text-muted, #5a4735);
}

.ato-taxonomy-page-v2 .ato-actnone-cta {
    display: inline-block;
    margin: 4px 0 0;
    padding: 11px 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ato-bg-white, #fff);
    background: var(--ato-primary, #2f5d50);
    border-radius: var(--ato-radius-sm, 6px);
    text-decoration: none;
}

.ato-taxonomy-page-v2 .ato-actnone-cta:hover,
.ato-taxonomy-page-v2 .ato-actnone-cta:focus {
    background: var(--ato-primary-dark, #1f3f36);
    color: var(--ato-bg-white, #fff);
}

.ato-taxonomy-page-v2 .ato-actnone-alt {
    margin: 16px 0 0;
    font-size: 0.875rem;
}

@media (max-width: 600px) {

    .ato-taxonomy-page-v2 .ato-actnone {
        padding: 20px 16px 22px;
    }

    .ato-taxonomy-page-v2 .ato-actnone-cta {
        display: block;
        text-align: center;
    }
}
/*
 * The disclosure under the author card: the author's employer sells on this
 * page. Quiet, because it states a fact rather than making a claim, but not
 * hidden, because it is the reason the byline exists at all.
 */
.ato-taxonomy-page-v2 .ato-guide-disclosure {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ato-text-muted, #5a4735);
}

/*
 * A house guide's byline is a single italic line, and on 100 of the 104
 * activities it IS the author block. Between the rule under the h2 and the rule
 * under the block it was a sentence in a stripe, so where it is the only thing
 * in the block the block gives up its rule and the line takes a left edge.
 */
.ato-taxonomy-page-v2 .ato-guide-authorship .ato-guide-byline--house {
    font-size: 14px;
    line-height: 1.7;
    padding: 3px 0 3px 15px;
    border-left: 2px solid var(--ato-secondary, #b08d4f);
}

@supports selector(:has(*)) {

    .ato-taxonomy-page-v2 .ato-guide-authorship:has(> .ato-guide-byline--house) {
        margin-bottom: 32px;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* ==========================================================================
   ROUND 17K - THE GUIDE INTRO BLOCK
   The strip between the safari cards and the article: the "See all N" link,
   the heading that names the guide, the author, and the disclosure line.

   It was congested for one reason above all: THREE horizontal rules inside
   about two hundred vertical pixels. .ato-seeall brought a border-top from
   ato-public.css, .ato-guide-block brought another, and .ato-guide-authorship
   closed with a border-bottom. Stacked that close, rules stop reading as
   structure and start reading as a ladder. One rule, in the one place the page
   actually changes character - marketplace above, editorial below - does the
   whole job, and the space that replaces the other two is what makes the block
   look deliberate.

   This sheet loads after ato-public.css, so these override without touching a
   file another agent is working in.
   ========================================================================== */

/* Rule one of three, removed. The link keeps its air, loses its ceiling. */
.ato-taxonomy-page-v2 .ato-seeall {
    margin: 30px 0 0;
    padding-top: 0;
    border-top: 0;
}

.ato-taxonomy-page-v2 .ato-seeall-link {
    padding: 14px 24px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ato-border-color, #d9c1a0);
    background: var(--ato-bg-white, #fff);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ato-taxonomy-page-v2 .ato-seeall-link:hover,
.ato-taxonomy-page-v2 .ato-seeall-link:focus-visible {
    background: var(--ato-bg-light, #f7efe3);
    border-color: var(--ato-secondary, #b08d4f);
    box-shadow: 0 2px 10px rgba(var(--shadow, 36 22 9), .07);
}

.ato-taxonomy-page-v2 .ato-seeall-link::after {
    transition: transform .2s ease;
}

.ato-taxonomy-page-v2 .ato-seeall-link:hover::after {
    transform: translateX(3px);
}

/* The one rule that earns its place, with room either side of it. */
.ato-taxonomy-page-v2 .ato-guide-block {
    margin-top: 64px;
    padding-top: 52px;
}

/*
 * The guide's own h2s are 27px. At 30px the block title was only just ahead of
 * them, so the page read as a flat run of same-sized headings. Pushing it to
 * 34px and tightening the tracking gives the reader one obvious parent and a
 * set of children, which is the whole point of putting it there.
 */
.ato-taxonomy-page-v2 .ato-guide-block-title {
    font-size: clamp(28px, 3.2vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 32px;
}

/* Rule three of three, removed: the card's own border already closes the block. */
.ato-taxonomy-page-v2 .ato-guide-authorship {
    margin: 0 0 44px;
    padding: 0;
    border-bottom: 0;
}

.ato-taxonomy-page-v2 .ato-guide-author {
    padding: 26px 28px;
}

/*
 * The disclosure is a sibling of the card, not a child of it, so it rendered as
 * a loose sentence sitting under a bordered box - the visual grammar of
 * something left behind rather than a footnote. It cannot be moved into the
 * card without reaching into ATO_Guide_Authors::card(), so instead the wrapper
 * becomes the box and the card inside it goes flat. The disclosure then sits
 * under a hairline inside the same border, which is what it always meant.
 *
 * Guarded, because it only applies where a disclosure exists: an activity with
 * a house byline has no card and must not gain an empty frame.
 */
@supports selector(:has(*)) {

    .ato-taxonomy-page-v2 .ato-guide-authorship:has(> .ato-guide-disclosure) {
        background: var(--ato-bg-white, #fff);
        border: 1px solid var(--ato-border-color, #d9c1a0);
        border-left: 3px solid var(--ato-secondary, #b08d4f);
        border-radius: var(--ato-radius-md, 10px);
        padding: 26px 28px;
    }

    .ato-taxonomy-page-v2 .ato-guide-authorship:has(> .ato-guide-disclosure) .ato-guide-author {
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .ato-taxonomy-page-v2 .ato-guide-authorship:has(> .ato-guide-disclosure) .ato-guide-disclosure {
        margin: 18px 0 0;
        padding-top: 16px;
        border-top: 1px solid var(--ato-border-color, #d9c1a0);
    }
}

/* The author's own lines, given room to separate from one another. */
.ato-taxonomy-page-v2 .ato-author-role {
    margin-top: 3px;
}

.ato-taxonomy-page-v2 .ato-author-note {
    margin-top: 10px;
}

.ato-taxonomy-page-v2 .ato-author-links {
    margin-top: 12px;
}

/* It was indistinguishable from the sentence above it. Now it reads as a link. */
.ato-taxonomy-page-v2 .ato-author-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--ato-primary-dark, #241609);
    text-decoration: none;
    border-bottom: 1px solid var(--ato-secondary, #b08d4f);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}

.ato-taxonomy-page-v2 .ato-author-links a::after {
    content: '\2192';
    transition: transform .2s ease;
}

.ato-taxonomy-page-v2 .ato-author-links a:hover,
.ato-taxonomy-page-v2 .ato-author-links a:focus-visible {
    color: var(--ato-secondary, #b08d4f);
    border-color: transparent;
}

.ato-taxonomy-page-v2 .ato-author-links a:hover::after {
    transform: translateX(3px);
}

/* Clear water between the author and the first thing the author wrote. */
.ato-taxonomy-page-v2 .ato-activity-guide > h2:first-child {
    margin-top: 0;
}

@media (max-width: 600px) {

    .ato-taxonomy-page-v2 .ato-guide-block {
        margin-top: 44px;
        padding-top: 36px;
    }

    .ato-taxonomy-page-v2 .ato-guide-block-title {
        margin-bottom: 24px;
    }

    .ato-taxonomy-page-v2 .ato-guide-author,
    .ato-taxonomy-page-v2 .ato-guide-authorship:has(> .ato-guide-disclosure) {
        padding: 20px 18px;
    }

    .ato-taxonomy-page-v2 .ato-guide-authorship {
        margin-bottom: 34px;
    }
}

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

    .ato-taxonomy-page-v2 .ato-seeall-link,
    .ato-taxonomy-page-v2 .ato-seeall-link::after,
    .ato-taxonomy-page-v2 .ato-author-links a,
    .ato-taxonomy-page-v2 .ato-author-links a::after {
        transition: none;
    }

    .ato-taxonomy-page-v2 .ato-seeall-link:hover::after,
    .ato-taxonomy-page-v2 .ato-author-links a:hover::after {
        transform: none;
    }
}