/* =========================================================
   Safaris — Marketplace landing, safari card, filter panel
   Companion sheet to ato-public.css. Enqueue AFTER it.

   Rules obeyed:
   - Zero hardcoded palette colours. Every colour is a
     --ato-* token, a green-keyed rgba(var(--shadow),...) tint or
     plain white for text sitting on the dark hero scrim.
   - Radii stay inside 3-14px (--ato-radius-sm .. -xl).
   - Container 1180px / 28px side padding (matches .pp-wrap).
   - Uppercase tracking labels never drop below 11px.
   ========================================================= */

/* ---------------------------------------------------------
   0. Marketplace scope + shared furniture
   --------------------------------------------------------- */

.ato-mk {
    font-family: var(--ato-font-body);
    color: var(--ato-text-main);
    font-size: var(--ato-fs-base);
    line-height: 1.65;
    background: var(--ato-bg-white);
}

.ato-mk *,
.ato-mk *::before,
.ato-mk *::after {
    box-sizing: border-box;
}

/* Same measurements as .ato-container / theme .pp-wrap */
.ato-mk-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

.ato-mk-eyebrow {
    display: block;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ato-secondary);
    margin: 0 0 14px;
}

/* ---------------------------------------------------------
   1. Hero search block
   --------------------------------------------------------- */

.ato-mk-hero {
    position: relative;
    isolation: isolate;
    padding: 88px 0 72px;
    overflow: hidden;
}

.ato-mk-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Dark scrim so white type stays legible over any photograph.
   Built on --olive-dark (12,51,43), never a neutral grey. */
.ato-mk-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(var(--shadow), 0.72) 0%,
            rgba(var(--shadow), 0.58) 45%,
            rgba(var(--shadow), 0.80) 100%);
}

.ato-mk-hero-inner {
    text-align: center;
}

.ato-mk-hero h1,
.ato-mk-hero-title {
    font-family: var(--ato-font-heading);
    font-weight: 400;
    font-size: clamp(30px, 4.6vw, 53px);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0 0 16px;
}

.ato-mk-hero-sub {
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-reading);
    line-height: 1.6;
    color: var(--ato-on-dark);
    max-width: 640px;
    margin: 0 auto 30px;
}

/* --- Segmented toggle: Safaris / Operators --- */

.ato-mk-toggle {
    display: inline-flex;
    padding: 4px;
    margin: 0 auto 26px;
    background: rgba(var(--shadow), 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ato-radius-lg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ato-mk-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 10px 26px;
    border: none;
    border-radius: var(--ato-radius-md);
    background: transparent;
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease;
}

.ato-mk-toggle-btn:hover,
.ato-mk-toggle-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.ato-mk-toggle-btn.is-active,
.ato-mk-toggle-btn.is-active:hover {
    background: var(--ato-primary);
    color: #fff;
    box-shadow: var(--ato-shadow-sm);
}

/* --- Horizontal search bar --- */

.ato-mk-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    box-shadow: var(--ato-shadow-lg);
    overflow: hidden;
}

/* Tap target: the field's 14/18 padding and its 4px gap are now carried as
   custom properties rather than applied here. The select below consumes them
   as its own padding, so the whole 62.6px field IS the control instead of a
   23.6px select floating in a field of inert padding. The field's own box does
   not change: its height is still driven by the select's outer height, which
   is unchanged, and the label keeps its position to the pixel. */
.ato-mk-search-field {
    --mk-pad-y: 14px;
    --mk-pad-x: 18px;
    --mk-lbl-h: 11px;
    --mk-lbl-gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-left: 1px solid var(--ato-border-color);
    text-align: left;
}

.ato-mk-search-field:first-child {
    border-left: none;
}

/* Lifted out of flow so the select can own the full field height. It keeps its
   exact position -- the field's former padding, now --mk-pad-* -- and
   pointer-events:none hands a tap on the label straight through to the select
   underneath instead of relying on label-for behaviour, which focuses a select
   but does not reliably open it. font-size is the same 11px, read from
   --mk-lbl-h, which is also what the select's top padding is built from, so
   the two can never drift apart. */
.ato-mk-search-label {
    position: absolute;
    top: var(--mk-pad-y);
    left: var(--mk-pad-x);
    right: var(--mk-pad-x);
    pointer-events: none;
    font-family: var(--ato-font-label);
    font-size: var(--mk-lbl-h);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    line-height: 1;
}

/* Tap target, and the only one of the six that is a real resize rather than a
   hit zone. A <select> cannot carry a ::after -- generated content does not
   render on a form control -- so the box itself has to grow, and there was
   room for it: the field was already 62.6px and the select only 23.6px of it.
   Moving the field's padding onto the select makes the select's border box the
   whole field while every pixel of text stays where it was, because each
   padding edge is the old value plus the field padding it replaced.

   The caret is drawn as two background gradients and is positioned from the
   right and bottom edges, which have both moved outward, so both offsets are
   re-expressed against the same custom properties. Vertically the old
   `calc(50% + 1px)` centred the caret on a 23.6px box; the equivalent measured
   from the bottom of the new box is the field padding plus 8.3px. */
.ato-mk-search-select {
    width: 100%;
    max-width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: calc(var(--mk-pad-y) + var(--mk-lbl-h) + var(--mk-lbl-gap) + 2px)
             calc(var(--mk-pad-x) + 20px)
             calc(var(--mk-pad-y) + 2px)
             var(--mk-pad-x);
    margin: 0;
    font-family: var(--ato-font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ato-dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - var(--mk-pad-x) - 9px) calc(100% - var(--mk-pad-y) - 8.3px),
                         calc(100% - var(--mk-pad-x) - 4px) calc(100% - var(--mk-pad-y) - 8.3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* The +3px offset drew the ring clear of a 23.6px select sitting inside the
   field. The select is now the field, and `.ato-mk-search` clips with
   overflow:hidden, so an outward ring would be sliced off at the field edges.
   Drawn just inside instead -- same colour, same width. */
.ato-mk-search-select:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: -2px;
    border-radius: var(--ato-radius-sm);
}

.ato-mk-search-field.is-set .ato-mk-search-label {
    color: var(--ato-primary);
}

.ato-mk-search-action {
    flex: 0 0 auto;
    display: flex;
    padding: 8px;
}

.ato-mk-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 148px;
    padding: 0 26px;
    border: none;
    border-radius: var(--ato-radius-md);
    background: var(--ato-primary);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ato-mk-search-submit:hover,
.ato-mk-search-submit:focus-visible {
    background: var(--ato-primary-hover);
}

.ato-mk-search-submit svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* --- Quick-link chips --- */

.ato-mk-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 26px auto 0;
    max-width: 900px;
}

.ato-mk-chips-label {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-on-dark);
    margin-right: 4px;
}

.ato-mk-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--ato-radius-sm);
    background: rgba(var(--shadow), 0.42);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ato-mk-chip:hover,
.ato-mk-chip:focus-visible {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------
   2. "Discover Uganda Safaris" section
   --------------------------------------------------------- */

.ato-mk-section {
    padding: 66px 0 84px;
}

.ato-mk-section-head {
    max-width: 720px;
    margin: 0 0 34px;
}

.ato-mk-section-head.is-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ato-mk-section-title {
    font-family: var(--ato-font-heading);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    color: var(--ato-title-color);
    margin: 0 0 12px;
}

.ato-mk-section-intro {
    font-size: var(--ato-fs-reading);
    line-height: 1.65;
    color: var(--ato-text-main);
    margin: 0;
}

/* Results toolbar above the grid */
.ato-mk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 18px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-mk-count {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    margin: 0;
}

.ato-mk-count strong {
    color: var(--ato-dark);
}

.ato-mk-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ato-mk-sort-wrap label {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-mk-sort {
    font-family: var(--ato-font-body);
    font-size: 13.5px;
    color: var(--ato-dark);
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
}

.ato-mk-sort:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: 2px;
}

/* Active-filter pills (each removes itself with a plain link) */
.ato-mk-active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.ato-mk-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    background: var(--ato-bg-light);
    color: var(--ato-dark);
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ato-mk-active-pill:hover {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
    text-decoration: none;
}

.ato-mk-active-pill .x {
    font-size: 14px;
    line-height: 1;
    color: var(--ato-text-muted);
}

.ato-mk-active-clear {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ato-primary);
    text-decoration: none;
    align-self: center;
    padding: 6px 4px;
}

.ato-mk-active-clear:hover {
    color: var(--ato-primary-hover);
    text-decoration: underline;
}

/* Sidebar column: slightly narrower than the default 280px so the
   main column still fits a genuine 3-up grid inside 1180px. */
.ato-mk .ato-tours-page-wrapper.with-sidebar {
    grid-template-columns: 250px 1fr;
    gap: 32px;
}

/* Card grid: 3-up desktop, 2-up tablet, 1-up mobile */
.ato-mk .ato-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ato-grid-gap);
}

@media (max-width: 1079px) {
    .ato-mk .ato-tours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 699px) {
    .ato-mk .ato-tours-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------
   3. Safari card (.at-tour / .ato-tour-card)
   The base card shell was never defined anywhere — the rules
   in ato-public.css only layer overlays on top of a shell the
   theme was assumed to provide. It is defined here.
   --------------------------------------------------------- */

a.at-tour.ato-tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ato-text-main);
    box-shadow: var(--ato-shadow-sm);
}

a.at-tour.ato-tour-card:hover,
a.at-tour.ato-tour-card:focus-within {
    box-shadow: var(--ato-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(var(--shadow), 0.16);
    text-decoration: none;
}

a.at-tour.ato-tour-card .at-tour-img {
    position: relative;
    line-height: 0;
    aspect-ratio: 3 / 2;
    background: var(--ato-bg-light);
}

/*
 * height:100% here was indeterminate, and that is the uneven card heights.
 *
 * The parent declares aspect-ratio 3/2 but no height. A percentage height
 * resolves against a definite parent height, an aspect-ratio alone does not
 * make one, so this fell back to auto and the photograph's OWN intrinsic
 * ratio sized the box instead. Measured on one grid: 1.15, 1.333, 1.497 and
 * 1.5 side by side, all claiming to be 3/2.
 *
 * Giving the image the ratio directly makes it definite. Positioning is left
 * alone on purpose: the tag chip, wishlist button, gallery badge and operator
 * disc are absolutely positioned in this same box with tuned stacking, so
 * this must not become an absolute fill.
 */
a.at-tour.ato-tour-card .at-tour-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

a.at-tour.ato-tour-card:hover .at-tour-img img {
    transform: scale(1.045);
}

/* Top-left activity tag chip */
a.at-tour.ato-tour-card .ato-tag-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 72px);
    padding: 5px 11px;
    border-radius: var(--ato-radius-sm);
    background: var(--ato-bg-white);
    color: var(--ato-dark);
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: var(--ato-shadow-sm);
}

/* A featured card already gets .ato-featured-ribbon top-left,
   so push the tag chip down out of its way. */
a.at-tour.ato-tour-card.ato-featured .ato-tag-chip {
    top: 48px;
}

/* Top-right wishlist heart */
a.at-tour.ato-tour-card .ato-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ato-radius-full);
    background: var(--ato-bg-white);
    color: var(--ato-text-muted);
    cursor: pointer;
    box-shadow: var(--ato-shadow-sm);
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

a.at-tour.ato-tour-card .ato-wishlist-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

a.at-tour.ato-tour-card .ato-wishlist-btn:hover,
a.at-tour.ato-tour-card .ato-wishlist-btn:focus-visible {
    color: var(--ato-danger);
    transform: scale(1.08);
}

a.at-tour.ato-tour-card .ato-wishlist-btn.active {
    color: var(--ato-danger);
}

a.at-tour.ato-tour-card .ato-wishlist-btn.active svg {
    fill: currentColor;
}

a.at-tour.ato-tour-card .ato-wishlist-btn.ato-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Circular operator logo overlapping the image's bottom-left */
a.at-tour.ato-tour-card .ato-card-oplogo {
    position: absolute;
    left: 16px;
    bottom: -22px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: var(--ato-radius-full);
    overflow: hidden;
    background: var(--ato-bg-white);
    border: 2px solid var(--ato-bg-white);
    box-shadow: var(--ato-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

a.at-tour.ato-tour-card .ato-card-oplogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

a.at-tour.ato-tour-card .ato-card-oplogo .ato-oplogo-initial {
    font-family: var(--ato-font-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    color: var(--ato-primary);
}

/* Body: leave room for the overlapping logo */
a.at-tour.ato-tour-card .at-tour-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 32px 18px 12px;
}

a.at-tour.ato-tour-card .at-tour-body h3 {
    font-family: var(--ato-font-heading);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.22;
    letter-spacing: 0;
    color: var(--ato-title-color);
    margin: 0;
    min-height: 2.44em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a.at-tour.ato-tour-card:hover .at-tour-body h3 {
    color: var(--ato-primary);
}

/* Operator line + verified tick */
a.at-tour.ato-tour-card .at-tour-op {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--ato-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.at-tour.ato-tour-card .at-tour-op .op-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

a.at-tour.ato-tour-card .at-tour-op .vbadge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: var(--ato-radius-full);
    background: var(--ato-primary);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

/* Rating row */
a.at-tour.ato-tour-card .at-tour-rate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    color: var(--ato-text-muted);
}

a.at-tour.ato-tour-card .at-tour-rate .score {
    font-weight: 700;
    color: var(--ato-dark);
}

/* Meta row: destination · duration */
a.at-tour.ato-tour-card .at-tour-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-family: var(--ato-font-label);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

a.at-tour.ato-tour-card .at-tour-meta-row .dot {
    color: var(--ato-rule);
}

/* Footer: price, cancellation affordance, CTA */
a.at-tour.ato-tour-card .at-tour-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px 18px;
    margin-top: auto;
    border-top: 1px solid var(--ato-border-color);
}

a.at-tour.ato-tour-card .at-tour-px {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    font-family: var(--ato-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ato-primary);
}

/* The base sheet sets this label to 0.48rem (~7.7px), below the
   11px floor in the type scale. Restored here. */
a.at-tour.ato-tour-card .at-tour-px small,
a.at-tour.ato-tour-card .at-tour-px .from {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    margin: 0;
    line-height: 1;
}

a.at-tour.ato-tour-card .at-tour-px .pp {
    font-family: var(--ato-font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ato-text-muted);
}

/* .ato-card-cancel removed with the "Free cancellation available" line it
   styled: this marketplace takes no booking and cannot promise a cancellation
   policy that belongs to the operator. */

/* CTA rendered as a span (nested <button>/<a> is invalid inside <a>) */
a.at-tour.ato-tour-card .ato-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    border-radius: var(--ato-radius-md);
    background: var(--ato-primary);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.2s ease;
}

a.at-tour.ato-tour-card:hover .ato-card-cta {
    background: var(--ato-primary-hover);
}

/* ---------------------------------------------------------
   4. Filter panel — palette + type-scale pass
   Only overrides. Structure, ids, names and JS hooks are
   untouched so includes/filters-ajax.php keeps working.
   --------------------------------------------------------- */

.ato-sidebar-filters.ato-filters-v2 {
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
    font-size: var(--ato-fs-small);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-header {
    background: var(--ato-primary) !important;
    padding: 15px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-header h3 {
    font-family: var(--ato-font-label);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.ato-sidebar-filters.ato-filters-v2 .ato-reset-link {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-sm);
    padding: 4px 10px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-title {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-dark);
    background: var(--ato-bg-light);
    padding: 13px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-title:hover {
    background: var(--ato-bg-light);
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-section {
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-content {
    padding: 12px 16px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs input {
    font-family: var(--ato-font-body);
    font-size: 13px;
    padding: 9px 10px;
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    color: var(--ato-dark);
    background: var(--ato-bg-white);
}

/* The base sheet focuses these inputs with a leftover rust rgba
   (196,60,46). Re-keyed to the green palette. */
.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs input:focus {
    border-color: var(--ato-primary);
    box-shadow: 0 0 0 3px rgba(var(--shadow), 0.10);
}

.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs .sep {
    color: var(--ato-rule);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox {
    font-size: 13px;
    color: var(--ato-text-main);
    padding: 7px 0;
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox:hover {
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox .count {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--ato-text-muted);
    background: var(--ato-bg-light);
    border-radius: var(--ato-radius-sm);
    padding: 2px 7px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-show-more {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-show-more:hover {
    color: var(--ato-secondary-hover);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-footer {
    background: var(--ato-bg-light);
    border-top: 1px solid var(--ato-border-color);
    padding: 14px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-footer .ato-button {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-md);
    padding: 12px 18px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-track {
    background: var(--ato-bg-light);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-thumb {
    background: var(--ato-rule);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-thumb:hover {
    background: var(--ato-primary);
}

/* Duration presets — fill the min/max day inputs */
.ato-filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.ato-duration-preset {
    appearance: none;
    border: 1px solid var(--ato-border-color);
    background: var(--ato-bg-white);
    border-radius: var(--ato-radius-sm);
    color: var(--ato-text-main);
    font-family: var(--ato-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ato-duration-preset:hover,
.ato-duration-preset:focus-visible {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
}

.ato-duration-preset.is-active {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: #fff;
}

/* Mobile filter toggle */
.ato-mk .ato-mobile-filter-toggle {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-md);
}

/* ---------------------------------------------------------
   5. Empty state / loading
   --------------------------------------------------------- */

.ato-mk .ato-loading-content {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ato-mk .ato-no-results-box {
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    background: var(--ato-bg-light);
    padding: 48px 28px;
    text-align: center;
}

/* ---------------------------------------------------------
   6. Responsive
   --------------------------------------------------------- */

/* Search bar collapses to stacked full-width fields under 820px */
@media (max-width: 819px) {
    .ato-mk-search {
        flex-direction: column;
        border-radius: var(--ato-radius-md);
    }

    .ato-mk-search-field {
        --mk-pad-y: 12px;
        --mk-pad-x: 16px;
        flex: 1 1 auto;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--ato-border-color);
    }

    .ato-mk-search-field:first-child {
        border-top: none;
    }

    .ato-mk-search-action {
        width: 100%;
        padding: 10px 12px 12px;
    }

    .ato-mk-search-submit {
        width: 100%;
        min-width: 0;
        padding: 14px 20px;
    }
}

@media (max-width: 900px) {
    .ato-mk .ato-tours-page-wrapper.with-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .ato-mk-hero {
        padding: 56px 0 48px;
    }

    .ato-mk-wrap {
        padding: 0 20px;
    }

    .ato-mk-section {
        padding: 44px 0 56px;
    }

    .ato-mk-toggle-btn {
        min-width: 0;
        flex: 1 1 0;
        padding: 10px 18px;
    }

    .ato-mk-toggle {
        display: flex;
        width: 100%;
        max-width: 320px;
    }

    .ato-mk-chips {
        justify-content: flex-start;
    }

    .ato-mk-toolbar {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.at-tour.ato-tour-card,
    a.at-tour.ato-tour-card .at-tour-img img,
    a.at-tour.ato-tour-card:hover .at-tour-img img {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------ guides
   Names an operator publishes on its own site. Deliberately typographic, with
   no portraits and no avatar circles: some photo-to-name pairings on the source
   pages are by page position only, so a face here could caption the wrong
   person. Names carry the weight instead.

   Three of the six launch operators publish nobody, so this list is simply
   absent on their safaris — do not add a placeholder person or a silhouette
   avatar to "balance" the layout.
   ------------------------------------------------------------------------- */
.ato-guides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.ato-guide {
    background: var(--ato-bg-light);
    border: 1px solid var(--ato-border-color);
    border-left: 3px solid var(--ato-primary);
    border-radius: 3px;
    padding: 13px 15px;
    min-width: 0;
}

.ato-guide__name {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: var(--ato-fs-reading);
    font-weight: 600;
    color: var(--ato-title-color);
    line-height: 1.25;
    /* Ugandan names are often published surname-first and can be long; wrap
       rather than truncate, because a clipped name is a misspelt name. */
    overflow-wrap: break-word;
}

.ato-guide__role {
    display: block;
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* Inside the operator profile's tab panel the column is narrower. */
.ato-guides--panel {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ato-op-note {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin: 14px 0 0;
}

@media (max-width: 520px) {
    .ato-guides,
    .ato-guides--panel {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------- card foot, unpriced cards
   31 of 43 safaris carry no published price, so a card with no price row is the
   normal case, not the exception. The price row is gone from those cards, but the
   space it occupied is still reserved — otherwise the horizontal rule above the
   footer lands ~39px lower on unpriced cards, and a row mixing the two gets a
   visibly ragged set of dividers even though the cards themselves are the same
   height and the buttons already line up.

   The spacer is a non-breaking space carrying the price row's exact typography,
   so its line box is computed the same way the price row's is. Change the price
   font-size or line-height and this tracks it automatically — no frozen pixel
   value to go stale. Measured: price row 28.6px + 10px flex gap = 38.6px.
   ------------------------------------------------------------------------- */
a.at-tour.ato-tour-card .at-tour-foot:not(:has(.at-tour-px))::before {
    content: "\00a0";
    display: block;
    font-family: var(--ato-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    /* purely a spacer: never announced, never selectable */
    speak: never;
    user-select: none;
    pointer-events: none;
}

/* =========================================================
   Illustrated guide cards
   Destination directory + Things To Do.

   Enqueued on those two pages by ATO_Guides::enqueue_card_styles(),
   because this sheet's own condition in safaris.php covers only tour
   views and the safari-grid shortcodes. Rules here refine
   ato-guides.css, so every selector is scoped to .ato-dest-directory
   or .ato-things-to-do: that keeps them winning on specificity rather
   than on source order, which would otherwise depend on which sheet
   the browser received first.

   Same card language as the theme's .ugsa-hub-card: photograph on
   top, hairline border, small radius, lift on hover.
   Zero hardcoded palette colours.
   ========================================================= */

/* ---- 1. the shared card shell ---- */

.ato-dest-directory .ato-card,
.ato-things-to-do .ato-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-md);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ato-dest-directory .ato-card:hover,
.ato-things-to-do .ato-card:hover,
.ato-dest-directory .ato-card:focus-within,
.ato-things-to-do .ato-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--ato-secondary);
    box-shadow: 0 12px 28px rgba(var(--shadow), .13);
}

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

    .ato-dest-directory .ato-card,
    .ato-things-to-do .ato-card {
        transition: none;
    }

    .ato-dest-directory .ato-card:hover,
    .ato-things-to-do .ato-card:hover,
    .ato-dest-directory .ato-card:focus-within,
    .ato-things-to-do .ato-card:focus-within {
        transform: none;
    }
}

/* ---- 2. the thumbnail ---- */

/* The aspect ratio is declared on the box rather than inherited from the
   file, so the row height is known before the photograph arrives and
   nothing on the page moves when it does. */
.ato-dest-directory .ato-card-media,
.ato-things-to-do .ato-card-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 26 / 17;
    overflow: hidden;
    background: var(--ato-bg-light);
}

.ato-dest-directory .ato-card-media-img,
.ato-things-to-do .ato-card-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.ato-dest-directory .ato-card:hover .ato-card-media-img,
.ato-things-to-do .ato-card:hover .ato-card-media-img {
    transform: scale(1.04);
}

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

    .ato-dest-directory .ato-card-media-img,
    .ato-things-to-do .ato-card-media-img {
        transition: none;
    }

    .ato-dest-directory .ato-card:hover .ato-card-media-img,
    .ato-things-to-do .ato-card:hover .ato-card-media-img {
        transform: none;
    }
}

/* ---- 3. the placeholder, for a term with no photograph yet ---- */

/* Identical box to the image so the grid keeps its rhythm; a card with no
   picture must not be shorter than its neighbours. Six tints of the one
   brand green, picked from the name, so a given place always draws the
   same block instead of changing between loads. */
.ato-dest-directory .ato-card-media--none,
.ato-things-to-do .ato-card-media--none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ato-bg-light);
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-dest-directory .ato-card-media--t0,
.ato-things-to-do .ato-card-media--t0 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .04), rgba(var(--shadow), .12));
}

.ato-dest-directory .ato-card-media--t1,
.ato-things-to-do .ato-card-media--t1 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .06), rgba(var(--shadow), .15));
}

.ato-dest-directory .ato-card-media--t2,
.ato-things-to-do .ato-card-media--t2 {
    background-image: linear-gradient(160deg, rgba(var(--shadow), .05), rgba(var(--shadow), .13));
}

.ato-dest-directory .ato-card-media--t3,
.ato-things-to-do .ato-card-media--t3 {
    background-image: linear-gradient(110deg, rgba(var(--shadow), .07), rgba(var(--shadow), .16));
}

.ato-dest-directory .ato-card-media--t4,
.ato-things-to-do .ato-card-media--t4 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .03), rgba(var(--shadow), .10));
}

.ato-dest-directory .ato-card-media--t5,
.ato-things-to-do .ato-card-media--t5 {
    background-image: linear-gradient(200deg, rgba(var(--shadow), .06), rgba(var(--shadow), .14));
}

.ato-dest-directory .ato-card-media-letter,
.ato-things-to-do .ato-card-media-letter {
    font-family: var(--ato-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ato-primary);
    opacity: .34;
    user-select: none;
}

/* ---- 4. destination directory ---- */

/* The directory lists 52 places, so it is set three to a row inside the
   theme's 780px prose column rather than two: at two columns the page ran to
   26 rows of card once the photographs went in. Things To Do stays at two,
   because each of its entries carries a paragraph of description.

   min() keeps a track from ever being wider than its container, which is
   what stops a 222px minimum forcing a sideways scroll on a narrow phone. */
.ato-dest-directory .ato-guide-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(222px, 100%), 1fr));
    gap: 18px;
}

.ato-dest-directory .ato-guide-item-link {
    display: block;
    margin: 0;
    text-decoration: none;
    color: inherit;
}

.ato-dest-directory .ato-guide-item-link:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: -3px;
}

.ato-dest-directory .ato-card-head {
    display: block;
    padding: 15px 18px 0;
}

.ato-dest-directory .ato-guide-item-name {
    font-size: 1.1875rem;
}

.ato-dest-directory .ato-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 18px 16px;
}

.ato-dest-directory .ato-guide-item-desc {
    margin: 0 0 14px;
}

/* Pushed to the bottom so the badge row lines up across a row of cards
   whose descriptions run to different lengths. */
.ato-dest-directory .ato-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: auto 0 0;
}

.ato-dest-directory .ato-guide-item-badge {
    margin-right: 0;
}

/* ---- 5. things to do ---- */

.ato-things-to-do .ato-ttd-list {
    grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr));
    gap: 22px;
}

.ato-things-to-do .ato-ttd-media {
    position: relative;
    display: block;
}

/* The running number moves off the text column and onto the photograph,
   which frees the full card width for the title. */
.ato-things-to-do .ato-ttd-num {
    position: absolute;
    left: 12px;
    bottom: -17px;
    z-index: 1;
    width: 34px;
    height: 34px;
    font-size: 0.9375rem;
    box-shadow: 0 3px 10px rgba(var(--shadow), .28);
}

.ato-things-to-do .ato-ttd-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 18px 18px;
    min-width: 0;
}

.ato-things-to-do .ato-ttd-desc {
    margin: 0 0 12px;
}

.ato-things-to-do .ato-ttd-link {
    align-self: flex-start;
    margin-top: auto;
}

/* ---- 6. the photographer credit on a card ---- */

/* CC BY and CC BY-SA require the attribution to be visible wherever the
   work is shown, and a thumbnail grid is showing it. Set small and quiet,
   but present, and clickable through to the source and the deed. */
.ato-dest-directory .ato-card-credit,
.ato-things-to-do .ato-card-credit {
    order: 99;
    margin: 12px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--ato-border-color);
    font-size: 0.625rem;
    line-height: 1.45;
    text-align: left;
    color: var(--ato-text-muted);
}

/* ---- 7. narrow widths ---- */

@media (max-width: 640px) {

    .ato-dest-directory .ato-guide-grid,
    .ato-things-to-do .ato-ttd-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ato-dest-directory .ato-card-media,
    .ato-things-to-do .ato-card-media {
        /* A touch shallower once the card runs full width, so the
           photograph does not push the words below the fold on a phone. */
        aspect-ratio: 16 / 9;
    }

    .ato-dest-directory .ato-card-media-letter,
    .ato-things-to-do .ato-card-media-letter {
        font-size: 2.25rem;
    }
}

/* Base mark, duplicated here because this sheet loads on the archive and
   homepage where ato-public.css's copy is also present — identical rules, so
   whichever wins produces the same result. */
.ato-vbadge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;background:rgba(var(--shadow, 36, 22, 9), .055);border:1px solid var(--ato-border-color, rgba(var(--shadow, 36, 22, 9), .18));color:var(--ato-dark, #241609);font-size:12.5px;font-weight:600;line-height:1.2;text-transform:none;vertical-align:middle;white-space:nowrap}
.ato-vbadge-mark{width:19px;height:19px;flex:0 0 auto;display:block}
.ato-vbadge-mark path:first-child{fill:var(--ato-accent, #a8750f)}
.ato-vbadge-mark .ato-vbadge-tick{fill:none;stroke:var(--ato-bg-white, #fffaf0);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ato-vbadge-text{display:inline-block}

/* --- badge variants: one mark, four placements -------------------------- */

/* Beside an operator name in body copy: no tinted pill, just the seal and the
   words, because it sits inside a sentence rather than beside a heading. */
.ato-vbadge--inline {
    background: none;
    border: 0;
    padding: 0;
    gap: 6px;
    font-size: 12px;
}

.ato-vbadge--inline .ato-vbadge-mark {
    width: 16px;
    height: 16px;
}

/* Over a photograph. The soft tint is invisible on an image, so this variant is
   opaque, and the border goes because the fill already separates it. */
.ato-vbadge--on-image {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--ato-bg-white, #fffaf0);
    border: 0;
    box-shadow: 0 2px 8px rgba(var(--shadow, 36, 22, 9), .22);
    padding: 5px 11px 5px 8px;
    font-size: 11.5px;
}

/* Tight card furniture: the seal alone, with the label for assistive tech only.
   No pill — at this size a background would read as a smudge. */
.ato-vbadge--mark {
    background: none;
    border: 0;
    padding: 0;
    gap: 0;
}

.ato-vbadge--mark .ato-vbadge-mark {
    width: 15px;
    height: 15px;
}

/* The safari card's operator line is small and tight, so pull the seal onto the
   text baseline rather than letting it stretch the row. */
a.at-tour.ato-tour-card .at-tour-op .ato-vbadge--mark {
    vertical-align: middle;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
   Tap targets -- round 18b
   ========================================================================== */

/* #5 Wishlist heart: 32x32 as shipped. It is absolutely positioned over the
   card image and lives inside the card's own <a>, so growing the box would
   enlarge the visible white disc and, because it is pinned by top/right, slide
   it inward at the same time. The box is left alone and a transparent 44x44
   ::after is centred on it instead. At top:12 / right:12 that zone stops 6px
   short of the media box on both edges, so it never leaves the image, and the
   only clicks it takes from the card link are the ones already in the heart's
   own corner. The tag chip and featured ribbon are top-LEFT and are not
   touched. */
a.at-tour.ato-tour-card .ato-wishlist-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

/* #6 Duration presets: 39.5-46.4 x 27.2. Padding would have worked across but
   not down -- a 44px chip makes the preset row 17px taller and pushes the
   min/max inputs and every filter group below them down the sidebar -- and
   widening the chips would slide chips 2 to 4 along the row. So this is a hit
   zone in both axes and nothing in the sidebar moves at all.

   The four chips sit on one line with a 6px gap. A 44px zone on the narrowest
   chip reaches 2.25px into that gap from each side, so neighbouring zones stop
   1.5px short of each other: they abut at worst and never overlap, which would
   put the wrong preset under the tap. Vertically the zone reaches 8.4px above
   the chips, into .ato-filter-content's 12px top padding, and 8.4px below,
   into the row's own 10px bottom margin -- neither the accordion header above
   nor the day inputs below is reached. min-width rather than width so the
   46.4px chip keeps its own, larger, box. */
.ato-duration-preset {
    position: relative;
}

.ato-duration-preset::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
}