/**
 * Day tour archive — [output-posts-archive post-type='day-trip']
 *
 * Everything is scoped under .tr-tours so it cannot reach the transfer cards,
 * the checkout or the portal, all of which still use the older .card markup.
 *
 * No font-family is declared anywhere in this plugin: typography comes from the
 * Elementor global kit, and that stays true here. Only sizes and weights are set.
 */

.tr-tours {
    /* The greys the design needs that the site palette does not name yet. Local
       to this block rather than added to the global token list, which is
       deliberately small. */
    /* The design's near-black ink. --e-a-color-txt-accent was the wrong source:
       Elementor's "accent" text colour is the brand blue, and the design
       deliberately keeps navy for the button alone so that blue text still reads
       as a link. --transfer-ride-main-dark is the site's own #072131, which is
       ink in everything but name. */
    --tr-tours-ink: var(--transfer-ride-main-dark, #12171c);
    --tr-tours-body: #5a6572;
    --tr-tours-muted: #8a94a0;
    --tr-tours-chip-text: #41505e;
    --tr-tours-hairline: #edf1f4;

    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ---------- Section ---------- */

.tr-tours__section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tr-tours__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--trasnfer-ride-light-hover);
}

.tr-tours__title {
    margin: 0;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tr-tours-ink);
}

.tr-tours__count {
    font-size: 13px;
    font-weight: 500;
    color: var(--tr-tours-muted);
    white-space: nowrap;
}

/* An explicit 1 / 2 / 3 ladder rather than auto-fill. auto-fill resolves against
   whatever width the Elementor container happens to have, which on a wide page
   produced a fourth column and cards too narrow to read. Three is the ceiling. */
.tr-tours__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 768px) {
    .tr-tours__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

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

/* ---------- Card ---------- */

.tr-tour-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--trasnfer-ride-light-hover);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .04), 0 8px 20px rgba(16, 32, 48, .05);
    transition: box-shadow .25s ease, transform .25s ease;
}

.tr-tour-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 32, 48, .06), 0 18px 40px rgba(16, 32, 48, .11);
}

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

    .tr-tour-card,
    .tr-tour-card:hover {
        transform: none;
        transition: none;
    }
}

.tr-tour-card__media {
    position: relative;
    height: 180px;
    background: #dde3e9;
}

/* `.elementor img` sets height:auto at the same specificity this rule used to
   have (0,1,1), so on a tie it won on source order and the fixed 180px media box
   collapsed to the image's natural height. Going through .tr-tours .tr-tour-card
   outranks it. */
.tr-tours .tr-tour-card .tr-tour-card__media-link,
.tr-tours .tr-tour-card .tr-tour-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.tr-tour-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(12, 26, 40, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    pointer-events: none;
}

.tr-tour-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 0;
}

/* Elementor's kit typography lands as `.elementor-kit-NNN h3` (0,1,1) and beat
   the single class this used to be, so the title rendered at the kit's heading
   size instead of the design's. Everything from the design except the family,
   which stays inherited. */
.tr-tours .tr-tour-card h3.tr-tour-card__title {
    margin: 0;
    /* 21px is the design's large-card title size (Day Tour Card.dc.html) rather
       than the 17px the page grid used. */
    font-size: 21px;
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tr-tours-ink);
    /* Balances the last line instead of leaving one orphaned word. Ignored by
       browsers that don't support it. */
    text-wrap: pretty;
}

/* font:inherit so a theme link rule cannot resize the title from underneath. */
.tr-tours .tr-tour-card .tr-tour-card__title a,
.tr-tours .tr-tour-card .tr-tour-card__title a:link,
.tr-tours .tr-tour-card .tr-tour-card__title a:visited {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-decoration: none;
}

.tr-tours .tr-tour-card .tr-tour-card__title a:hover,
.tr-tours .tr-tour-card .tr-tour-card__title a:focus {
    color: var(--transfer-ride-main);
    text-decoration: none;
}

/* Same reasoning as the media rule: generic `ul` styling from the theme or an
   Elementor widget would otherwise put bullets and indentation back. */
.tr-tours .tr-tour-card ul.tr-tour-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-tours .tr-tour-card .tr-tour-card__chip {
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--trasnfer-ride-light-hover);
    color: var(--tr-tours-chip-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/* Fixed two-line height keeps the footers of a row aligned whatever the copy
   length. */
.tr-tour-card__blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tr-tours-body);
}

.tr-tour-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 16px 15px;
    border-top: 1px solid var(--tr-tours-hairline);
}

.tr-tour-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tr-tour-card__price-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tr-tours-muted);
}

/* Ink, not accent: the accent is reserved for the button, so blue text does not
   compete with the one thing on the card that is clickable-looking by colour. */
.tr-tour-card__price {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tr-tours-ink);
}

/* The theme sets a link colour with enough specificity to beat a single class,
   which left white-on-navy reading as black-on-navy. Every state is spelled out
   through .tr-tours .tr-tour-card so the label stays white in all of them. */
.tr-tours .tr-tour-card .tr-tour-card__cta,
.tr-tours .tr-tour-card .tr-tour-card__cta:link,
.tr-tours .tr-tour-card .tr-tour-card__cta:visited {
    padding: 11px 15px;
    border-radius: 8px;
    background: var(--transfer-ride-main);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .18s ease;
}

.tr-tours .tr-tour-card .tr-tour-card__cta:hover,
.tr-tours .tr-tour-card .tr-tour-card__cta:focus,
.tr-tours .tr-tour-card .tr-tour-card__cta:active {
    background: var(--transfer-ride-main-hover);
    color: #fff;
    text-decoration: none;
}

/* ---------- Mobile "show all" ---------- */

.tr-tours__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--trasnfer-ride-light-hover);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--transfer-ride-main);
    cursor: pointer;
    transition: background .18s ease;
}

.tr-tours__toggle:hover {
    background: #f3f6f9;
}

.tr-tours__toggle[hidden] {
    display: none;
}

.tr-tours__toggle-arrow::before {
    content: "\2193";
    font-size: 13px;
}

.tr-tours__section.is-expanded .tr-tours__toggle-arrow::before {
    content: "\2191";
}

/* Collapsing is driven by is-collapsible, which the script only adds on mobile.
   With scripting off the class never lands, the button stays hidden and every
   card renders — so the list is always complete for crawlers and for no-JS. */
.tr-tours__section.is-collapsible:not(.is-expanded) .tr-tours__grid > *:nth-child(n+5) {
    display: none;
}

/* The single-column grid is the base rule above, so mobile only adjusts rhythm. */
@media (max-width: 767px) {
    .tr-tours {
        gap: 30px;
    }

    .tr-tours__title {
        font-size: 20px;
    }
}