/* 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);
    color: #495057;
    border: 1px solid rgba(108,117,125,.28);
}

/* 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: 1.5rem;  /* 24px horizontal */
    --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;
}

/* 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 */
.row.service-list-wrapper > .services-item {
    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 {
        /* 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 {
        /* Desktop: 4 columns, 3 gaps of 1.5rem between them */
        flex: 0 0 calc((100% - 4.5rem) / 4);
        max-width: calc((100% - 4.5rem) / 4);
    }
}

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

/* Card wrapper - more breathing room inside */
.pca-tour-card .pca-card-wrapper.card {
    /* padding removed - was causing unnecessary space */
    border: 1px solid #e5e7eb !important; /* Subtle border */
    border-radius: 8px !important;
    background: #ffffff;
    overflow: hidden;
    box-shadow: none !important;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

/* Card base styles */
.services-item.grid .card {
    border: none;
    border-radius: var(--radius-lg);          /* 8px from tokens.css */
    overflow: hidden;
    background-color: var(--color-background); /* #ffffff from tokens.css */
    transition: box-shadow 160ms ease, transform 160ms ease;
    transform: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    position: relative;
    outline: none;
}

/* 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 {
    box-shadow: none !important;
    transform: none !important;
}

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

/* Image container */
.pca-card-image {
    height: 192px !important;
    border-radius: 8px 8px 0 0 !important; /* top-left, top-right, bottom-right, bottom-left */
    overflow: hidden !important;
    margin: 0 !important;
}

.pca-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Title section padding */
.pca-tour-card .card-body.p-4.pb-2 {
    padding: 16px 16px 8px 16px !important; /* Content padding with reduced bottom */
}

/* Main content section */
.pca-tour-card .card-body.p-4.pt-0 {
    padding: 0 16px 16px 16px !important; /* Continue padding from title */
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

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

/* Title styling - matching mock */
.pca-tour-card .tour-card-title,
.pca-tour-card .card-body .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: 1rem;
    font-weight: 600;
    line-height: 21px !important;
    color: #333;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em;
    text-transform: none;
    display: -webkit-box;
    line-clamp: 2;                      /* Standard property for linters */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.1em;
}

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

/* Badge container - matching mock spacing */
.tour-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0.5rem 0 !important;
}

/* 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: 400;
    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.5rem 0 !important;
    padding-top: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 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: inline-flex;
    flex-direction: row;            /* Inline layout per backup */
    align-items: center;
    line-height: 1.1;
    text-align: start; /* RTL-aware alignment */
}

/* 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: var(--fs-xs) !important;     /* 12px from tokens */
    color: var(--color-muted);              /* #6b7280 from tokens */
    font-weight: var(--weight-regular);     /* 400 from tokens */
    opacity: 0.8;
    text-transform: none;
    margin-inline-end: 0.25rem;             /* Space before amount */
}

/* 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: 16px !important;
    font-weight: 600 !important;
    color: #333;
    margin-top: 0;                           /* Inline with prefix */
}

/* Optional pickup location */
.tour-pickup-location {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);                /* 8px from tokens.css */
    margin-top: 8px !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 to match backup */
.tour-badge-trust,
.tour-badge-paylater {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border-radius: 4px !important;
    padding: 0 10px !important;
}

/* Lighter hover: no lift/shadow per backup; keep focus styles elsewhere */
.tour-card-link:hover .pca-card-wrapper,
.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: none !important;
    transform: none !important;
    border-color: #c8d0d5 !important;
    background-color: #fcfcfd !important;
}

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

/* Compact body paddings to match backup */
.services-item.grid .card-body.p-4 {
    padding: 0.875rem !important;
}
.services-item.grid .card-body.p-4.pt-0 {
    padding-top: 0 !important;
}
.services-item.grid .card-body.p-4.pb-2 {
    padding-bottom: 0.125rem !important;
}

/* ========================================
   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 */
    }

    .pca-tour-card .card-body.p-4.pb-2,
    .pca-tour-card .card-body.p-4.pt-0 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .services-item.grid .card-body.p-4 {
        padding: 1rem !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;
}