.pca-tours-section {
    margin-top: 3rem;
}

/* Interaction styles for tour cards */
.tour-card-link:focus-visible, .tour-card-link:hover {
    outline: none;
    text-decoration: none;
}
.tour-card-link .pca-card-wrapper {
    transition: box-shadow .16s ease, transform .16s ease;
}
@media (prefers-reduced-motion: reduce) {
    .tour-card-link .pca-card-wrapper { transition: none; }
}
.tour-card-link:hover .pca-card-wrapper {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}
.tour-card-link:focus-visible .pca-card-wrapper {
    box-shadow: 0 0 0 3px rgba(13,110,253,.35), 0 8px 24px rgba(0,0,0,.12);
}

/* Title color remains stable on hover for parity with backup */

/* Trust badges */
.tour-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8125rem; line-height: 1.25; font-weight: 500; }
/* Muted neutral badges: light gray background + dark gray text to reduce hierarchy */
.tour-badge-trust {
    background: rgba(108,117,125,.10); /* bs-secondary (#6c757d) @10% */
    color: #495057;                     /* bs-gray-700 */
    border: 1px solid rgba(108,117,125,.28);
}
.tour-badge-paylater {
    background: rgba(108,117,125,.10) !important; /* Neutral gray - same as trust badge */
    color: #495057 !important;        /* Gray text - reduced hierarchy */
    border: 1px solid rgba(108,117,125,.28) !important;
    font-weight: 500;
}

/* Same-Day Available badge - green for immediate availability */
.tour-badge-sameday {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 500;
}

/* Available Tomorrow badge - green for next-day availability */
.tour-badge-tomorrow {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 500;
}

/* Trust signals - stacked vertically with icons */
.pca-trust-signals {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px - internal gap stays tight */
    margin: 0.5rem 0 0 0; /* 8px top only, price handles bottom separation */
    font-size: 12px;
    color: #6b7280;
}

.pca-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pca-trust-item svg {
    flex-shrink: 0;
    color: #6b7280; /* Gray to maintain hierarchy */
}

/* Global neutralization for non-highlight badges (as requested) */
span.tour-badge:not(.tour-badge-instant):not(.tour-badge-pickup):not(.tour-popular):not(.tour-scarcity):not(.tour-badge-quality) {
    background: #f1f1f1;
    color: #767676;
}
/**
 * Tour Card Shared Styles
 * Reusable styles for tour cards across grid.php and content.php
 * Replaces: tour-card-grid.css, tour-card-clean.css, tour-badges.css
 *
 * @package TravelerChildTheme
 * @since 1.0.0
 */

/* ========================================
   GRID SPACING - FIX CRAMPED LAYOUT
======================================== */

/* Override Bootstrap's negative margins and set up proper grid */
.row.service-list-wrapper {
    /* Explicitly declare flexbox (don't rely on Bootstrap) */
    display: flex !important;
    flex-wrap: wrap !important;

    /* Kill Bootstrap's negative margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;

    /* Override Bootstrap gutter variables */
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;

    /* Define responsive gap variables (rem for better browser scaling) */
    --card-column-gap-desktop: 1rem;     /* 16px horizontal - tighter for wider cards */
    --card-row-gap-desktop: 1.25rem;     /* 20px vertical */
    --card-column-gap-tablet: 1rem;      /* 16px horizontal */
    --card-row-gap-tablet: 1rem;         /* 16px vertical */
    --card-column-gap-mobile: 0.75rem;   /* 12px horizontal */
    --card-row-gap-mobile: 0.75rem;      /* 12px vertical */

    /* Apply proper gaps between cards */
    column-gap: var(--card-column-gap-desktop) !important;
    row-gap: var(--card-row-gap-desktop) !important;

    /* No padding - parent container handles it */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   EQUAL HEIGHT CARDS - FIX UNEVEN ALIGNMENT
======================================== */

/* Make all tour cards in a row equal height (prevents jagged grid) */
.row.service-list-wrapper.service-tour > .services-item {
    display: flex;
    flex-direction: column;
    height: 100%; /* Stretch to match tallest card in row */
}

.row.service-list-wrapper.service-tour .full-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.row.service-list-wrapper.service-tour .pca-card-wrapper,
.row.service-list-wrapper.service-tour .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

/* Push price/info row to bottom of card for perfect alignment */
.row.service-list-wrapper.service-tour .card-body.pt-0 {
    margin-top: auto; /* Flexbox magic: pushes this element to bottom */
}

/* Grid items - consolidated and scoped to .row.service-list-wrapper */
.row.service-list-wrapper > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Override Bootstrap's column padding */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Responsive column widths - Account for gaps in flex-basis */
/* Support both direct .services-item children AND .pca-tour-card-wrapper wrapper */
.row.service-list-wrapper > .services-item,
.row.service-list-wrapper > .pca-tour-card-wrapper {
    flex: 0 0 100%; /* Mobile: 1 column, no gaps to account for */
    max-width: 100%;
}

@media (min-width: 641px) and (max-width: 1023px) {
    .row.service-list-wrapper > .services-item,
    .row.service-list-wrapper > .pca-tour-card-wrapper {
        /* Tablet: 2 columns, 1 gap of 1rem between them */
        flex: 0 0 calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
    }
}

@media (min-width: 1024px) {
    .row.service-list-wrapper > .services-item,
    .row.service-list-wrapper > .pca-tour-card-wrapper {
        /* Desktop: 4 columns, 3 gaps of 1rem (tighter) for wider cards */
        flex: 0 0 calc((100% - 3rem) / 4);
        max-width: calc((100% - 3rem) / 4);
    }
}

/* ========================================
   CARD WRAPPER & LAYOUT
======================================== */

/* Card wrapper - darker border for contrast, no shadow */
.pca-tour-card .pca-card-wrapper.card {
    /* padding removed - was causing unnecessary space */
    border: 1px solid #d1d5db !important; /* Darker border for contrast */
    border-radius: var(--radius-lg, 8px) !important;
    overflow: hidden !important; /* Ensure child elements respect border-radius */
    background-color: var(--color-background, #ffffff);
    transition: box-shadow 160ms ease, transform 160ms ease;
    transform: none;
    box-shadow: none !important; /* Remove box shadow */
    position: relative;
    outline: none;
}

/* Ensure all child elements respect parent border-radius */
.pca-tour-card .pca-card-wrapper.card > *,
.pca-tour-card .pca-card-wrapper.card .pca-card-layout {
    border-radius: 0 !important; /* Remove child border-radius to respect parent */
}

/* Card base styles */
.services-item.grid .card {
    border: 1px solid #d1d5db; /* Darker border for contrast */
    border-radius: var(--radius-lg);          /* 8px from tokens.css */
    overflow: hidden !important; /* Ensure child elements respect border-radius */
    background-color: var(--color-background); /* #ffffff from tokens.css */
    transition: box-shadow 160ms ease, transform 160ms ease;
    transform: none;
    box-shadow: none; /* Remove box shadow */
    position: relative;
    outline: none;
}

/* Ensure all child elements respect parent border-radius */
.services-item.grid .card > *,
.services-item.grid .card .pca-card-layout {
    border-radius: 0 !important; /* Remove child border-radius to respect parent */
}

/* Remove all parent theme border classes effects */
.pca-tour-card .item {
    border: none !important;
    box-shadow: none !important;
}

.item.service-border.st-border-radius.card {
    border-radius: var(--radius-lg) !important;   /* 8px from tokens.css */
    border: none !important;
    box-shadow: none !important;
}

/* Full Card Link Styles */
.full-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    cursor: default;
}

/* Only the card surface shows a pointer cursor */
.full-card-link .card { cursor: pointer; }

/* ========================================
   HOVER & FOCUS STATES
======================================== */

/* Card hover state */
.pca-tour-card a:hover .pca-card-wrapper.card,
.pca-tour-card a:hover .card,
.services-item.grid .full-card-link:hover .card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px);
}

.pca-tour-card a:focus .card,
.pca-tour-card a:focus .pca-card-wrapper.card {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Focus state for accessibility */
.pca-tour-card a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Force disable conflicting hover effects */
.services-item.grid .item.service-border.st-border-radius.card,
.pca-tour-card .pca-card-wrapper.card {
    box-shadow: none !important; /* Remove box shadow */
    transform: none !important;
    border-radius: var(--radius-lg, 8px) !important;
    border: 1px solid #d1d5db !important; /* Darker border for contrast */
}

/* ========================================
   CARD CONTENT LAYOUT
======================================== */

/* Image container (exclude hover containers from fixed height) */
.pca-card-image:not(.pca-image-hover-container) {
    height: 160px !important; /* Reduced from 192px for compact cards */
    border-radius: 4px !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.pca-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px; /* 2px radius for card images */
}

/* Header section - contains image and title */
.pca-tour-card header {
    margin: 0;
    padding: 0;
}

/* ========================================
   LEFT-ALIGNED CARD CONTENT
   Consistent left rail for faster scanning
======================================== */
.pca-tour-card .pca-card-content,
.pca-tour-card .pca-card-header,
.pca-tour-card .pca-card-body {
    text-align: left;
}

.pca-tour-card .tour-card-title,
.pca-tour-card .tour-badges-mobile,
.pca-tour-card .pca-trust-signals {
    text-align: left;
}

/* Meta-price row: rating left, price right (space-between preserved) */
.pca-tour-card .pca-tour-meta-price-row {
    text-align: left;
}

/* Badges align to left edge */
.pca-tour-card .tour-badges-mobile {
    display: flex;
    justify-content: flex-start;
}

/* ========================================
   STACKED CARD LAYOUT
   Rating > Title > Badge > Trust > Price
======================================== */

/* Stacked layout container - flex column for sticky price */
.pca-card-content--stacked {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Rating row at top */
.pca-tour-rating-top {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 0.375rem; /* 6px - breathing room before title */
}

.pca-tour-rating-top .pca-rating-star {
    color: #F59E0B;
    font-size: 14px;
    line-height: 1;
}

.pca-tour-rating-top .pca-rating-value {
    font-weight: 600;
    color: #1F2937;
}

.pca-tour-rating-top .pca-rating-count {
    color: #6B7280;
    font-weight: 400;
    font-size: 13px;
}

/* Price sticky to bottom of card */
.pca-card-content--stacked .pca-tour-price-row {
    margin-top: auto;
    padding-top: 0.75rem; /* 12px - stronger CTA separation */
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pca-card-content--stacked .tour-price-prefix {
    font-size: 12px;
    color: #6B7280;
    font-weight: 400;
}

.pca-card-content--stacked .tour-price-amount {
    font-size: 18px;
    font-weight: 700;
    color: #1F2937;
}

/* Tomorrow badge more subtle than Same-day */
.tour-badge-tomorrow {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    opacity: 0.85;
}

/* Same-day stays prominent */
.tour-badge-sameday {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

/* ========================================
   DESKTOP-ONLY CARD CONTENT STYLES
   Mobile uses tour-card-mobile-horizontal.css
======================================== */
@media (min-width: 768px) {
    /* Title section padding - desktop only - tighter spacing */
    .pca-tour-card .card-body.p-4.pb-2 {
        padding: 8px 12px 0 12px !important;
    }

    /* Main content section - desktop only - reduced gap */
    .pca-tour-card .card-body.p-4.pt-0 {
        padding: 0 12px 0 12px !important;
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* 8px - consistent rhythm */
        flex: 1;
    }

    /* Card content padding for desktop vertical layout */
    .pca-tour-card .pca-card-content {
        padding: 20px 12px 20px 12px !important;
    }

    .pca-tour-card .pca-card-header {
        padding: 0 !important;
        margin-bottom: 0.5rem !important; /* 8px - consistent rhythm */
    }

    .pca-tour-card .pca-card-body {
        padding: 0 !important;
        gap: 0.5rem !important; /* 8px - consistent rhythm */
    }

    /* Trust signal - compact for desktop */
    /* Trust simple - text only, no background */
    .pca-tour-card .tour-trust-simple {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 500;
        color: #6B7280; /* Gray text */
    }

    .pca-tour-card .tour-trust-simple svg {
        width: 12px;
        height: 12px;
        color: #6B7280; /* Gray checkmark */
        flex-shrink: 0;
    }

    /* Rating row - bottom of card */
    .pca-tour-card .pca-tour-rating-bottom {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
    }

    .pca-tour-card .pca-tour-rating-bottom .pca-rating-star {
        color: #F59E0B; /* Amber star */
        font-size: 14px;
        line-height: 1;
    }

    .pca-tour-card .pca-tour-rating-bottom .pca-rating-value {
        font-weight: 600;
        color: #1F2937;
    }

    .pca-tour-card .pca-tour-rating-bottom .pca-rating-count {
        color: #6B7280;
        font-weight: 400;
    }

    /* Meta-price row alignment */
    .pca-tour-card .pca-tour-meta-price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2px;
    }

    /* Price row for desktop */
    .pca-tour-card .pca-tour-price-row {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
}

/* ========================================
   STAR RATING (GetYourGuide Pattern)
======================================== */

/* Rating container - below title */
.pca-tour-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1;
}

/* Star icon - gold/yellow */
.pca-rating-star {
    color: #FFB800;
    font-size: 14px;
    line-height: 1;
}

/* Rating value - bold */
.pca-rating-value {
    font-weight: 600;
    color: #1a1a1a;
}

/* Review count - muted */
.pca-rating-count {
    color: #6b7280;
    font-weight: 400;
}

/* ========================================
   CARD TITLE
======================================== */

/* Title styling - clean selector for div.tour-card-title */
.pca-tour-card .tour-card-title,
article.services-item.grid .tour-card-title {
    font-family: var(--font-body), "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 0.9375rem; /* 15px - slightly smaller for compact look */
    font-weight: 600;
    line-height: 1.3 !important;
    color: #333;
    margin: 0 !important;
    letter-spacing: -0.01em;
    text-transform: none;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desktop only: Fixed title height for grid alignment */
@media (min-width: 768px) {
    .pca-tour-card .tour-card-title,
    article.services-item.grid .tour-card-title {
        min-height: 40px !important;
        max-height: 40px !important;
    }
}

/* ========================================
   BADGES
======================================== */

/* Badge container - simplified text display */
.tour-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0 0 !important; /* Reduced from 10px */
}

/* Simple trust text - no badge styling */
.tour-trust-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.tour-trust-item {
    position: relative;
    cursor: default;
}

.tour-trust-separator {
    margin: 0 3px;
}

/* Tooltip on hover - positioned relative to card */
.tour-trust-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #fefefe;
    color: #000000;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    pointer-events: none;
}

/* Tooltip arrow */
.tour-trust-item[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 12px;
    margin-bottom: 2px;
    border: 5px solid transparent;
    border-top-color: #000000;
    z-index: 1000;
    pointer-events: none;
}

/* Badge styling - compact */
.tour-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500; /* Increased from 400 for better visibility */
    font-family: var(--font-body);
    line-height: 1.3;
    gap: 3px;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin: 0;
    border: none;
}

/* Badge color variants */
span.tour-badge:not(.tour-badge-instant):not(.tour-badge-pickup):not(.tour-popular):not(.tour-scarcity):not(.tour-badge-quality) {
    background: #f1f1f1;
    color: #767676;
}

span.tour-badge.tour-badge-instant {
    background: #cfe9ff;
    color: #0b5394;
}

span.tour-badge.tour-badge-pickup {
    background: lavender;
    color: #5b3a8f;
}

span.tour-badge.tour-popular {
    background: #ffe4d6;
    color: #b5460a;
}

span.tour-badge.tour-scarcity {
    background: #ffd9d9;    /* Slightly lighter for WCAG AA compliance */
    color: #be1e3c;         /* Darker text for better contrast (4.6:1) */
}

span.tour-badge.tour-badge-quality {
    background: #fff4d6;
    color: #8b6914;
}

/* ========================================
   PRICE & INFO ROW

   Production-ready stacked price layout.
   Scoped to tour contexts only to prevent
   unintended styling elsewhere.

   Rollback: Remove flex-direction:column
   and margin-top:0.2rem to restore inline.
======================================== */

/* Price row - scoped to tour contexts */
.pca-tour-card .tour-info-row,
.services-item .tour-info-row,
.single-st_tours .tour-info-row {
    margin: 0 !important;
    padding-top: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Duration styling */
.tour-duration {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);                /* 8px from tokens.css */
    color: var(--color-muted);           /* #6b7280 from tokens.css */
    font-size: var(--fs-sm);             /* 14px from tokens.css */
    font-weight: var(--weight-medium);   /* 500 from tokens.css */
}

.tour-duration i {
    color: var(--color-muted);           /* #6b7280 from tokens.css */
    font-size: var(--fs-sm);             /* 14px from tokens.css */
    margin-top: 0.125rem;                /* Fine-tune alignment */
}

/* Price styling - stacked "From" above price, scoped to tour contexts */
.pca-tour-card .tour-price,
.services-item .tour-price,
.single-st_tours .tour-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-align: start;
}

/* Prevent wrapping issues on narrow cards */
@media (max-width: 400px) {
    .pca-tour-card .tour-price,
    .services-item .tour-price {
        min-width: max-content;
    }
}

.tour-price-prefix {
    font-size: 11px !important;
    color: #6b7280;
    font-weight: 400;
    opacity: 0.8;
    text-transform: none;
    margin-bottom: 2px;
}

/* Wrapper to keep amount and suffix together */
.tour-price-value {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

/* Scoped amount styling with stacked spacing */
.pca-tour-card .tour-price-amount,
.services-item .tour-price-amount,
.single-st_tours .tour-price-amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333;
    margin-top: 0;
}

.tour-price-suffix {
    font-size: 12px !important;
    color: #6b7280;
    font-weight: 400;
    margin-left: 4px;
}

/* Optional pickup location */
.tour-pickup-location {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);                /* 8px from tokens.css */
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0;
    font-size: 0.875rem;                  /* 14px */
    color: #495057;
    line-height: 1.4;
    font-weight: 500;
}

.tour-pickup-location i {
    color: #6c757d;
    font-size: 0.9375rem;                /* 15px */
    margin-top: 0.0625rem;               /* Fine-tune alignment */
}

/* Trust badges compact pill size */
.tour-badge-trust,
.tour-badge-paylater,
.tour-badge-sameday,
.tour-badge-tomorrow {
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 500; /* Bolder for better readability */
    border-radius: 4px !important;
    padding: 0 8px !important;
}

/* Premium hover effects */
.tour-card-link:hover .pca-card-wrapper {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Image zoom on hover */
@media (hover: hover) and (pointer: fine) {
    .tour-card-link:hover .pca-image-hover-container .pca-image-primary {
        transform: scale(1.03);
    }

    .pca-image-hover-container .pca-image-primary {
        transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
    }
}

/* Compact grid spacing like backup */
.services-item.grid {
    margin-bottom: 1rem;
}

/* Removed conflicting body padding rules - spacing controlled by .pca-tour-card selectors */

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 1024px) {
    .row.service-list-wrapper {
        column-gap: var(--card-column-gap-tablet) !important;
        row-gap: var(--card-row-gap-tablet) !important;
    }
}

@media (max-width: 768px) {
    .row.service-list-wrapper {
        column-gap: var(--card-column-gap-mobile) !important;
        row-gap: var(--card-row-gap-mobile) !important;
        /* No side padding needed - parent handles it */
    }

    /* Card body padding handled by tour-card-mobile-horizontal.css */

    .card-footer-cta {
        padding: 10px 14px;
        margin-top: 6px;
    }
}

/* Mobile spacing optimization for ≤480px to match 8px container padding */
@media (max-width: 480px) {
    .row.service-list-wrapper {
        column-gap: 8px !important; /* Match container padding for consistency */
        row-gap: 8px !important;
    }

    /* Ensure wrapper has no additional spacing */
    .row.service-list-wrapper > .pca-tour-card-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure article has no side spacing */
    .pca-tour-card-wrapper > .pca-tour-card {
        margin: 0 !important;
    }
}

/* ========================================
   UTILITY CLASSES
======================================== */

.pca-tour-card {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Remove all possible transitions that might cause hover effects */
.services-item,
.services-item.grid,
.full-card-link,
.item,
.card,
.item.service-border.st-border-radius.card {
    transition: all 0.2s ease-in-out !important;
}

/* HOMEPAGE OVERRIDE: Force 4 columns for featured tours */
#tours-grid .row.service-list-wrapper.service-tour > .col-lg-3.item-service,
#tours-grid .row.service-list-wrapper > .col-lg-3.item-service,
.pca-tours-section .row.service-list-wrapper.service-tour > .col-lg-3,
.pca-tours-section .row > .col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}


/* Homepage Tours Grid Container - Centered at 1226px */
.pca-tours-section .pca-content-wrapper {
    max-width: 1226px; /* 76.625rem */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Featured Tour Card - class retained for Hotjar tracking, visual highlight removed */

/* Image Hover Preview */
.pca-card-image {
    position: relative;
}

.pca-image-hover-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 160px !important; /* Reduced from 192px for compact cards */
    background: #f7f7f7;
    border-radius: 4px !important;
}

.pca-image-hover-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 2px !important; /* 2px radius for card images */
    transition: opacity 0.35s ease-in-out !important;
}

.pca-image-hover-container .pca-image-primary {
    opacity: 1;
    z-index: 1;
}

.pca-image-hover-container .pca-image-hover {
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

/* Desktop hover - fade to 2nd image */
@media (hover: hover) and (pointer: fine) {
    .tour-card-link:hover .pca-image-hover-container .pca-image-primary {
        opacity: 0;
    }

    .tour-card-link:hover .pca-image-hover-container .pca-image-hover {
        opacity: 1;
    }
}

/* Mobile - no hover effect, single image only */
@media (hover: none) {
    .pca-image-hover {
        display: none !important;
    }
}

.tour-badge-featured-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: rgb(64 85 169);
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.05px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
    backdrop-filter: blur(4px);
}

/* Emoji sizing fix for tour badge */
/* Defensive CSS in case WordPress emoji-to-SVG conversion happens (plugins, caching) */
.tour-badge-featured-overlay img.emoji,
.tour-badge-featured-overlay .emoji {
    height: 16px !important;
    width: 16px !important;
    vertical-align: middle !important;
    margin: 0 2px 0 0 !important;
    display: inline-block !important;
}

/* Native emoji rendering (when WordPress emoji disabled) */
.tour-badge-featured-overlay {
    line-height: 24px; /* Match badge height for perfect vertical centering */
}

/* Seasonal Badge - Whale Watching Tour */
.tour-badge-seasonal-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: rgb(14 207 233 / 95%); /* Bright cyan ocean blue */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.05px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
    backdrop-filter: blur(4px);
}

/* Emoji sizing for seasonal badge */
.tour-badge-seasonal-overlay img.emoji,
.tour-badge-seasonal-overlay .emoji {
    height: 16px !important;
    width: 16px !important;
    vertical-align: middle !important;
    margin: 0 2px 0 0 !important;
    display: inline-block !important;
}

/* Native emoji rendering */
.tour-badge-seasonal-overlay {
    line-height: 24px; /* Match badge height for perfect vertical centering */
}

/* CRO-202: Urgency Badge - "Selling fast" */
.tour-badge-urgency {
    position: absolute;
    top: 8px;
    right: 8px; /* Top-right to avoid overlap with Must Do badge in top-left */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: #F97316; /* Orange - urgency color */
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.05px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
}

/* Emoji sizing for urgency badge */
.tour-badge-urgency img.emoji,
.tour-badge-urgency .emoji {
    height: 16px !important;
    width: 16px !important;
    vertical-align: middle !important;
    margin: 0 2px 0 0 !important;
    display: inline-block !important;
}

/* Tour Duration Meta - Below Title */
.tour-duration-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.tour-duration-meta svg {
    flex-shrink: 0;
    color: #49c39f;
    opacity: 1;
}

/* Check Availability Button - Card Footer */
.card-footer-cta {
    padding: 8px 12px;
    margin-top: auto; /* Push to bottom */
}

.btn-check-availability {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: #3B82F6;  /* Solid blue - clear CTA */
    color: #ffffff;       /* White text */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-check-availability:hover {
    background: #2563EB;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.btn-check-availability:focus-visible {
    outline: 2px solid #324fbe;
    outline-offset: 2px;
}

/* ========================================
   TOUR CARD CAROUSEL v2
   Swipeable image gallery with excerpt slide
   CSS scroll-snap for native performance
======================================== */

/* Carousel Container */
.pca-card-carousel {
    position: relative;
    width: 100%;
    height: 160px !important;
    max-height: 160px !important;
    overflow: hidden !important;
    border-radius: 4px;
    background: #f7f7f7;
    margin: 0;
    cursor: pointer; /* Indicate clickable */
}

/* Carousel Track - horizontal scroll */
.pca-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    max-height: 160px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Prevent page scroll bleed - allow vertical page scroll, carousel handles horizontal */
    overscroll-behavior-x: contain;
    touch-action: pan-y;
}

/* Smooth scroll only for users who don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .pca-carousel-track {
        scroll-behavior: smooth;
    }
}

.pca-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Individual Slides */
.pca-carousel-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    max-height: 160px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.pca-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Excerpt Slide */
.pca-carousel-slide--excerpt {
    background: linear-gradient(135deg, #fff8f0 0%, #ffe6cc 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    gap: 6px;
}

.pca-carousel-excerpt-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin: 0;
}

.pca-carousel-excerpt {
    font-size: 0.8rem !important;
    line-height: 1.4;
    color: #374151;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.pca-carousel-excerpt p {
    margin: 0;
    font-size: 0.8rem !important;
}

/* Dot Indicators - always visible so users know there are more images */
.pca-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1px;
    z-index: 10;
    padding: 2px 4px;
    border-radius: 12px;
    opacity: 1; /* Always visible */
}

/* Dot button - larger tap area with small visual dot */
.pca-carousel-dot {
    /* Larger tap target - meets WCAG 2.2 minimum (24px), aims for usability (32px+) */
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Touch devices get larger targets (44px per Apple HIG) */
@media (pointer: coarse) {
    .pca-carousel-dot {
        width: 44px;
        height: 44px;
    }
}

/* Visual dot using pseudo-element */
.pca-carousel-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

.pca-carousel-dot:hover::after {
    background: rgba(255, 255, 255, 0.75);
}

.pca-carousel-dot.active::after {
    background: #fff;
    transform: scale(1.3);
}

/* Mobile: slightly larger visual dots */
@media (max-width: 767px) {
    .pca-carousel-dot::after {
        width: 7px;
        height: 7px;
    }
}

/* Touch hint on mobile - gradient fade on right edge */
@media (hover: none) {
    .pca-card-carousel::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 5;
    }

    .pca-card-carousel.scrolled::before {
        opacity: 0;
    }
}

/* Desktop - subtle right edge hint */
@media (hover: hover) and (pointer: fine) {
    .pca-card-carousel::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 16px;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 5;
    }

    .pca-card-carousel.scrolled::before {
        opacity: 0;
    }

    /* Allow mouse wheel horizontal scroll on desktop */
    .pca-carousel-track {
        scroll-snap-type: x proximity; /* Less strict snapping for mouse */
    }
}

/* Badges positioned over carousel */
.pca-card-carousel .tour-badge-urgency,
.pca-card-carousel .tour-badge-seasonal-overlay,
.pca-card-carousel .tour-badge-featured-overlay {
    z-index: 15; /* Above dots and touch hint */
}

/* Accessibility - focus visible on dots */
.pca-carousel-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Keyboard focus on carousel container */
.pca-card-carousel:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
    .pca-carousel-dot::after,
    .pca-card-carousel::before,
    .pca-carousel-nav {
        transition: none;
    }
}

/* ========================================
   CAROUSEL NAVIGATION ARROWS
   Desktop/tablet hover reveal controls
======================================== */

/* Navigation Arrows - hidden by default */
.pca-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* Hidden state - prevents invisible focusable elements */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.pca-carousel-nav--prev { left: 8px; }
.pca-carousel-nav--next { right: 8px; }

.pca-carousel-nav:hover {
    background: #fff;
}

.pca-carousel-nav:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.pca-carousel-nav svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Disabled state (at slide boundaries) */
.pca-carousel-nav:disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show arrows on hover/focus (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
    .pca-card-carousel:hover .pca-carousel-nav:not(:disabled),
    .pca-card-carousel:focus-within .pca-carousel-nav:not(:disabled) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Tablet with trackpad/mouse */
@media (pointer: fine) {
    .pca-card-carousel:hover .pca-carousel-nav:not(:disabled) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Hide arrows completely on touch devices */
@media (hover: none) and (pointer: coarse) {
    .pca-carousel-nav {
        display: none !important;
    }
}