/* ==========================================================
   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 {
    /* Row gap and tap-zone height are the same number on purpose. A row is
       ~35.8px tall, so the row PITCH is the ceiling on any hit zone: at the
       old 2px gap no zone could reach 44px without reaching into the next
       row's. The gap is opened to 10px and the zone at the bottom of this
       sheet is sized from this same property, so zone height == pitch and
       adjacent zones touch without ever overlapping. Change one and the
       other follows; they cannot drift apart. */
    --ato-dirlist-row-gap: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: var(--ato-dirlist-row-gap) 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;
    }
}

/*
 * ==========================================================
 * Tap targets -- guide and directory surfaces
 *
 * Blueprint Part 10: 44x44 is the target, but not at the cost of moving the
 * page. Controls with room were grown; controls whose growth would have
 * shifted a neighbour were given a transparent, absolutely positioned
 * ::after hit zone, which cannot affect layout. Decided per control, and the
 * reason for each choice is written above the rule.
 *
 * Two mechanics bite here and are invisible in the rules themselves:
 *
 *  - An absolutely positioned ::after resolves its offsets against the
 *    PADDING box of its positioned ancestor, not the border box. On an
 *    element with a bottom border, `bottom: -12px` therefore ends 1px short
 *    of where the arithmetic says it does. Every zone below that sits on a
 *    bordered element adds that 1px back explicitly.
 *  - Zones on controls that abut must not overlap, or the wrong control
 *    receives the tap. That is why .ato-dirlist derives the gap and the zone
 *    from one custom property, and why the FAQ summaries below are grown
 *    rather than zoned.
 *
 * Deliberately NOT touched: inline links inside body copy (WCAG 2.5.8 exempts
 * links in a sentence, and a zone on one would overlap the line above).
 * ========================================================== */

/*
 * Directory rows (/destinations/, and the "Places to Visit in This Area"
 * block on each guide). Zoned rather than grown: the rows carry no background
 * and a transparent bottom border, so opening the grid's row gap and growing
 * the row's padding look identical on screen, and keeping the padding as-is
 * puts the no-overlap rule in exactly one place -- the gap property above.
 *
 * Zone height = row border box + --ato-dirlist-row-gap = the row pitch, so
 * consecutive zones meet edge to edge and never overlap.
 */
.ato-dirlist-item {
    position: relative;
}

.ato-dirlist-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--ato-dirlist-row-gap, 10px) / -2);
    /* Half the gap, PLUS the row's own 1px bottom border, which the padding
       box this offset resolves against does not include. */
    bottom: calc(var(--ato-dirlist-row-gap, 10px) / -2 - 1px);
}

/*
 * "N safaris" under each destination card. 66.6 x 22.6 and it cannot be
 * grown: its underline IS its 1px bottom border, so vertical padding would
 * drop the rule away from the text, and it is the card's last child, so the
 * padding would also grow the card and move every card below it.
 *
 * 12px clear of the border box on each side: above, that lands inside the
 * 12px bottom margin of .ato-guide-item-desc and stops short of
 * .ato-guide-item-link; below, inside the card's own 16px bottom padding. So
 * the zone reaches no other control in either direction.
 */
.ato-guide-item-count {
    position: relative;
}

.ato-guide-item-count::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    /* -12px plus the element's 1px bottom border: see the note at the top. */
    bottom: -13px;
}

/*
 * Region headings in the directory. 29.6px tall, and a flex item in a
 * baseline-aligned h3 sitting next to the count chip -- vertical padding
 * there moves the baseline and pushes the whole group down the page, so this
 * one is zoned too.
 *
 * 8px above sits inside the 28px of clear space over the heading; 8px below
 * sits inside the heading's 6px padding + 1px rule + 12px margin, stopping
 * ~6px short of the first row's own zone. The 4px sideways stays well inside
 * the 10px flex gap before .ato-dirgroup-count, which is not a control.
 */
.ato-dirgroup-title a {
    position: relative;
}

.ato-dirgroup-title a::after {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -4px;
    right: -4px;
}

/*
 * FAQ accordion toggles on the destination guides (.page-content) and on the
 * activity guides that live on the taxonomy archive (.ato-activity-guide).
 * One line of 17px/1.8 text: 28.8-30.6px tall depending on width.
 *
 * GROWN, not zoned, and this is the one control where that is forced rather
 * than preferred: consecutive <details> elements carry no margin and abut
 * with a 0px gap, so any zone taller than the summary itself would overlap
 * the neighbouring summary's zone and hand taps to the wrong question.
 * Element boxes that abut merely touch, so growing is the only safe move.
 *
 * 9px each side clears 44px even on the shortest (28.8px) case.
 */
.page-content details > summary,
.ato-activity-guide details > summary {
    padding: 9px 0;
    cursor: pointer;
}