/*
 * Tour card.
 *
 * Presentation only: no markup, ordering or data changes.
 *
 * This file is the single home for tour card styling. Everything that used to
 * live in the site's Additional CSS for these cards was moved here, so the card
 * ships with the plugin and the customizer no longer has to carry it.
 *
 * The theme renders the image holder and the content holder as two siblings
 * inside the Isotope item, with no wrapper to hang a card surface on, and each
 * half paints its own background and rounds its own outer corners. They sit
 * flush, so together they read as one card.
 *
 * The card shadow is a drop-shadow filter on the item rather than a box-shadow
 * on a pseudo-element. The item's padding is the grid gutter and it is not the
 * same on every page (5px on some archives, 15px on others), so a pseudo-element
 * inset by a fixed amount left a white ring around the card wherever the gutter
 * was wider. drop-shadow follows the painted shape of the halves instead, so the
 * card looks identical at any gutter.
 *
 * The item itself is never transformed: Isotope positions these items, and
 * fighting it over transform is what breaks archive grids. The hover lift is
 * applied to the two halves; the shadow follows them on its own.
 */

.qodef-tours-standard-item {
    --etg-card-radius: 18px;
    --etg-card-orange: #ed741f;
    --etg-card-orange-dark: #c9540c;
    --etg-card-ink: #172033;
    --etg-card-body: #2e3947;
    /* The meta band keeps the brand orange, taken down a step in brightness so
       it sits under the photo instead of competing with it. */
    --etg-card-band: linear-gradient(135deg, #ffb375 0%, #ff9750 100%);
    --etg-card-band-ink: #53270a;
    --etg-card-band-line: rgba(255, 255, 255, 0.55);
}

/* Card surface
   ========================================================================== */

body .qodef-tours-standard-item {
    filter: drop-shadow(0 1px 1px rgba(23, 32, 51, 0.07)) drop-shadow(0 8px 16px rgba(23, 32, 51, 0.11));
    transition: filter 240ms ease;
}

body .qodef-tours-standard-item:hover {
    filter: drop-shadow(0 2px 3px rgba(23, 32, 51, 0.08)) drop-shadow(0 14px 26px rgba(23, 32, 51, 0.17));
}

body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder,
body .qodef-tours-standard-item .qodef-tours-standard-item-content-holder {
    position: relative;
    z-index: 1;
    transition: transform 240ms ease;
}

body .qodef-tours-standard-item:hover .qodef-tours-standard-item-image-holder,
body .qodef-tours-standard-item:hover .qodef-tours-standard-item-content-holder {
    transform: translateY(-4px);
}

/* Every part of the card has a fixed height, so each card in a row is identical
   and the meta rows line up. Isotope then has no uneven heights to work around.
   Carousels need the same treatment, or a slide with a shorter title ends up
   shorter than the one beside it. */
.qodef-tours-list-holder .qodef-tours-standard-item,
.qodef-tours-carousel-holder .qodef-tours-standard-item {
    display: flex;
    flex-direction: column;
}

.qodef-tours-list-holder .qodef-tours-standard-item .qodef-tours-standard-item-content-holder,
.qodef-tours-carousel-holder .qodef-tours-standard-item .qodef-tours-standard-item-content-holder {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.qodef-tours-list-holder .qodef-tours-standard-item .qodef-tours-standard-item-content-inner,
.qodef-tours-carousel-holder .qodef-tours-standard-item .qodef-tours-standard-item-content-inner {
    flex: 1 1 auto;
}

/* Keeps the meta row on the bottom edge, so a tour with no excerpt still lines
   up with its neighbours instead of ending short. */
.qodef-tours-list-holder .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content,
.qodef-tours-carousel-holder .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content {
    margin-top: auto;
}

/* Owl sizes each slide independently, so the row is only as tall as each card.
   Stretching the stage makes every visible slide share the tallest height. */
.qodef-tours-carousel-holder .owl-stage {
    display: flex;
    align-items: stretch;
}

.qodef-tours-carousel-holder .owl-item {
    display: flex;
    flex: 0 0 auto;
    float: none;
}

/* min-width:0 is what keeps a card inside its slide. A flex item defaults to
   min-width:auto, so a card whose longest word or image is wider than the slide
   refuses to shrink, overflows its slot and lands on top of the next card. */
.qodef-tours-carousel-holder .owl-item > * {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Media
   ========================================================================== */

/* Thumbnails are uploaded at 900x600, so the box is locked to 3:2 and covered.
   Without this a percentage-width image resolves to a fractional height and
   cards in the same row land 1-3px apart. */
body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder {
    position: relative;
    overflow: hidden;
    background: #eef1f5;
    border-top-left-radius: var(--etg-card-radius);
    border-top-right-radius: var(--etg-card-radius);
}

body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder > a {
    display: block;
    width: 100%;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

body .qodef-tours-standard-item:hover .qodef-tours-standard-item-image-holder img {
    transform: scale(1.08);
}

/* A light scrim along the bottom edge only. It stops a pale photo bleeding into
   the white card, without darkening half the picture. */
body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 28%;
    background: linear-gradient(to top, rgba(12, 20, 33, 0.3), transparent);
    content: '';
    pointer-events: none;
}

/* Price badge
   ========================================================================== */

/* A crisp white pill with the price in brand orange: it reads instantly on any
   photo, light or dark, and it leaves the orange to do the work rather than a
   saturated block competing with the image. */
body .qodef-tours-standard-item .qodef-tours-item-label-holder {
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(12, 20, 33, 0.16);
    animation: none;
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

body .qodef-tours-standard-item .qodef-tours-item-label-holder .qodef-tour-item-label {
    color: var(--etg-card-orange-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

/* The theme grows the badge on hover, which nudges the card contents. */
body .qodef-tours-standard-item:hover .qodef-tours-item-label-holder {
    padding: 4px 10px;
}

/* Favourite button
   ========================================================================== */

body .qodef-tours-standard-item .qodef-tours-favorite-button {
    top: 12px !important;
    right: 12px !important;
    z-index: 2;
}

/* One rule for both the favourites plugin's `preset` skin and the bare button,
   so the glyph is centred by the flexbox. The site's Additional CSS used to
   nudge the icon with margin-top, which is what pushed it off centre. */
body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #5f6d7e !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 12px rgba(12, 20, 33, 0.22) !important;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button i,
body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button i::before {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button:hover {
    color: var(--etg-card-orange) !important;
    background: #fff !important;
    transform: scale(1.08);
}

body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button.active {
    color: #fff !important;
    background: #e05c1a !important;
}

body .qodef-tours-standard-item .qodef-tours-favorite-button .simplefavorite-button.active:hover {
    color: #fff !important;
    background: #c9540c !important;
}

/* Body
   ========================================================================== */

body .qodef-tours-standard-item .qodef-tours-standard-item-content-holder {
    overflow: hidden;
    background: #fff;
    border-bottom-right-radius: var(--etg-card-radius);
    border-bottom-left-radius: var(--etg-card-radius);
}

body .qodef-tours-standard-item .qodef-tours-standard-item-content-inner {
    padding: 18px 18px 14px;
}

/* The title wrapper is a plain block; the two-line clamp lives on the title
   itself, where the font-size is known, so the box is exactly two lines tall on
   every card. */
body .qodef-tours-standard-item .qodef-tours-standard-item-title-price-holder {
    display: block;
    padding-right: 0;
    overflow: hidden;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-title-price-holder .qodef-tour-title {
    display: -webkit-box;
    height: 2.7em;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-title-price-holder .qodef-tour-title a {
    color: var(--etg-card-ink);
    transition: color 160ms ease;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-title-price-holder .qodef-tour-title a:hover {
    color: var(--etg-card-orange);
}

/* Excerpt: always exactly two lines tall, whatever the text length. Fixing the
   height, not just capping it, is what keeps every card identical. */
body .qodef-tours-standard-item .qodef-tours-standard-item-excerpt {
    display: -webkit-box;
    height: 3.2em;
    margin: 8px 0 0;
    overflow: hidden;
    color: var(--etg-card-body);
    font-size: 14px;
    line-height: 1.6;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* The badge over the photo already carries the price. */
body .qodef-tour-item-price-holder .qodef-tours-item-price,
body .qodef-tours-standard-item .qodef-tours-standard-item-price-holder .qodef-tours-price-holder {
    display: none;
}

/* Meta footer
   ========================================================================== */

/* Three facts, evenly divided, each one its own cell with a hairline between.
   Spacing no longer depends on how long the words happen to be, so every bar in
   a row lines up column for column. */
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 8px;
    overflow: hidden;
    color: var(--etg-card-band-ink);
    background: var(--etg-card-band);
    border-bottom-right-radius: var(--etg-card-radius);
    border-bottom-left-radius: var(--etg-card-radius);
    box-sizing: border-box;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tours-standard-item-bottom-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 10px 4px;
    font-size: 13px;
    line-height: 1.2;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tours-standard-item-bottom-item + .qodef-tours-standard-item-bottom-item::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 1px;
    background: var(--etg-card-band-line);
    content: '';
}

body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tours-standard-item-bottom-item > div,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tours-standard-item-bottom-item > div > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--etg-card-band-ink);
}

/* The site's own CSS painted .dripicons-location::before black wherever it
   appeared, which left one black pin among orange icons. */
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tour-info-icon,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tour-cat-item-icon,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .dripicons-location,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .dripicons-location::before {
    top: auto;
    flex: 0 0 auto;
    margin: 0;
    color: var(--etg-card-band-ink);
    font-size: 15px;
    line-height: 1;
}

/* Labels stay on one line. A name too long for its share of the bar gets an
   ellipsis instead of wrapping and pushing the bar taller. */
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tour-info-label,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tour-cat-item-text,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tour-duration-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--etg-card-band-ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content a:hover .qodef-tour-cat-item-text,
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content a:hover .dripicons-location::before {
    color: #2f1503;
}

/* Only the first category is shown on the card, so the bar stays readable no
   matter how many a tour is filed under. The full list is on the tour page. */
body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content .qodef-tours-tour-categories-item:nth-child(n+2) {
    display: none;
}

/* The tour "minimum age" field is used to carry the tour type on this site, so
   the stored value is replaced with the word it actually means. Moved here from
   the site's Additional CSS; edit the content below to change the wording.
   ========================================================================== */

.qodef-tour-min-age-holder .qodef-tour-info-label {
    font-size: 0 !important;
}

.qodef-tour-min-age-holder .qodef-tour-info-label::before {
    display: inline-block;
    margin-right: 5px;
    font-size: 12px !important;
    content: "Private";
}

.qodef-tour-min-age-label {
    display: inline;
}

/* Archive grid breathing room, kept from the site's own CSS.
   ========================================================================== */

.qodef-tours-list-holder.qodef-tours-row.qodef-tr-normal-space.qodef-tours-columns-3.qodef-tours-type-standard {
    padding-top: 15px;
    padding-bottom: 15px;
}

.qodef-tours-list-holder.qodef-tours-row.qodef-tr-normal-space.qodef-tours-columns-4.qodef-tours-type-standard {
    padding-top: 20px;
}

/* Favourites dashboard: the remove button on a saved tour.
   ========================================================================== */

.etg-favorite-tour-remove .simplefavorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    font-size: 0 !important;
    background: #fff5ee !important;
    border: 1px solid #f4c29e !important;
    border-radius: 12px;
    box-shadow: none !important;
}

.etg-favorite-tour-remove .simplefavorite-button i {
    margin: 0 !important;
    color: #f47c20 !important;
    font-size: 17px !important;
}

/* Responsive
   ========================================================================== */

@media only screen and (max-width: 1280px) {
    body .qodef-tours-standard-item .qodef-tours-standard-item-bottom-content {
        padding: 0 4px;
    }
}

@media only screen and (max-width: 1024px) {
    body .qodef-tours-standard-item .qodef-tours-standard-item-content-inner {
        padding: 16px 15px 12px;
    }
}

@media only screen and (max-width: 680px) {
    .qodef-tours-standard-item {
        --etg-card-radius: 16px;
    }

    body .qodef-tours-standard-item .qodef-tours-standard-item-excerpt {
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .qodef-tours-standard-item,
    body .qodef-tours-standard-item .qodef-tours-standard-item-image-holder,
    body .qodef-tours-standard-item .qodef-tours-standard-item-content-holder {
        transition: none;
    }

    body .qodef-tours-standard-item:hover .qodef-tours-standard-item-image-holder,
    body .qodef-tours-standard-item:hover .qodef-tours-standard-item-content-holder {
        transform: none;
    }
}

/* Tour carousel sections
   ==========================================================================
   Home and landing pages drop a tour carousel into a page-builder row. The row
   carried an asymmetric padding (left only) and a 5px radius, so the band never
   lined up with the cards inside it. These rules only apply to rows that
   actually contain a tour carousel, so no other section is affected.

   The long selector is deliberate: the page builder emits its own responsive
   overrides for this row at five classes deep, so the rule has to match that
   weight to win at every breakpoint. */

body .vc_row.wpb_row.vc_row-fluid.vc_row-has-fill:has(.qodef-tours-carousel-holder) {
    padding: 34px 24px 30px !important;
    background-color: #f6f7f9 !important;
    border-radius: 22px !important;
}

/* The carousel viewport has to clip horizontally for the slider to work, which
   also cropped the card shadows top and bottom. Vertical padding inside the
   viewport, cancelled by an equal negative margin, gives the shadow room
   without changing the layout or the slide width. */
.qodef-tours-carousel-holder .owl-stage-outer {
    margin: -12px 0 -20px;
    padding: 12px 0 20px;
}

.qodef-tours-carousel-holder .owl-dots {
    margin-top: 6px;
    line-height: 0;
    text-align: center;
}

.qodef-tours-carousel-holder .owl-dots .owl-dot {
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    background: transparent;
    border: 0;
}

.qodef-tours-carousel-holder .owl-dots .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    background: #cfd6df;
    border-radius: 999px;
    transition: width 200ms ease, background-color 200ms ease;
}

.qodef-tours-carousel-holder .owl-dots .owl-dot.active span,
.qodef-tours-carousel-holder .owl-dots .owl-dot:hover span {
    width: 22px;
    background: var(--etg-card-orange, #ed741f);
}

@media only screen and (max-width: 680px) {
    body .vc_row.wpb_row.vc_row-fluid.vc_row-has-fill:has(.qodef-tours-carousel-holder) {
        padding: 24px 12px 22px !important;
        border-radius: 18px !important;
    }
}