/* 
 * Typography Hierarchy and Card Overflow Fixes
 * Version: 4.2.2
 */

/* ==========================================================================
   CARD OVERFLOW FIX - Prevent cards from being cut off
   ========================================================================== */

/* Ensure the trips grid doesn't overflow */
.clem-trips-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Ensure cards don't get cut off */
.clem-trip-card,
.clem-horizontal-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Fix for carousel/slider if used */
.clem-horizontal .clem-trip-card {
    min-width: 320px !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   TYPOGRAPHY HIERARCHY - Using H3, H4, P
   ========================================================================== */

/* Trip/Cruise Title - H3 */
.clem-trip-card h3,
.clem-trip-card h3 a {
    font-size: 1.125rem !important;  /* 18px */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    color: #000000 !important;
}

/* Price and Deposit - H4 */
.clem-trip-card h4,
.clem-trip-card .trip-price,
.clem-trip-card .trip-deposit {
    font-size: 0.875rem !important;  /* 14px */
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
}

/* Meta info - P */
.clem-trip-card p,
.clem-trip-card .trip-meta-icons {
    font-size: 0.813rem !important;  /* 13px */
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

/* Price styling */
.clem-trip-card .trip-price {
    color: #775495 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.clem-trip-card .trip-price .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* "per person" text */
.clem-trip-card .trip-price span {
    font-size: 0.75rem !important;  /* 12px */
    font-weight: 400 !important;
    color: #5a5a5a !important;
}

/* Deposit styling */
.clem-trip-card .trip-deposit {
    color: #c8e75a !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.clem-trip-card .trip-deposit .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Meta information */
.clem-trip-card .trip-meta-icons .meta-item {
    font-size: 0.813rem !important;
    color: #5a5a5a !important;
}

/* Button */
.clem-trip-card .trip-btn {
    font-size: 0.875rem !important;  /* 14px */
    font-weight: 600 !important;
    padding: 8px 16px !important;
    margin-top: 10px !important;
    background: #775495 !important;
    border-color: #775495 !important;
    color: #fffeec !important;
}

.clem-trip-card .trip-btn:hover {
    background: #5a3f70 !important;
    border-color: #5a3f70 !important;
}

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

@media (max-width: 768px) {
    /* Slightly smaller on mobile but maintain hierarchy */
    .clem-trip-card h3,
    .clem-trip-card h3 a {
        font-size: 1.125rem !important;  /* 18px */
    }
    
    .clem-trip-card .trip-price,
    .clem-trip-card .trip-deposit {
        font-size: 0.875rem !important;  /* 14px */
    }
    
    .clem-trip-card .trip-meta-icons,
    .clem-trip-card .trip-meta-icons .meta-item {
        font-size: 0.813rem !important;  /* 13px */
    }
    
    /* Ensure single column on mobile */
    .clem-trips-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   ADDITIONAL FIXES FOR SECTIONS/SHORTCODES
   ========================================================================== */

/* Fix for section grids (homepage displays) */
.clem-trips-section .clem-trips-grid,
.clem-cruises-section .clem-trips-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    overflow: visible !important;
}

/* Ensure wrapper doesn't clip cards */
.clem-trips-wrap,
.clem-cruises-wrap {
    overflow: visible !important;
}

.clem-trips-main {
    overflow: visible !important;
    width: 100% !important;
}

/* ==========================================================================
   CARD BODY SPACING - Compact layout
   ========================================================================== */

.clem-trip-card .trip-body {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Reduce gap between image and title */
.clem-trip-card .trip-thumb {
    margin-bottom: 0 !important;
}

.clem-trip-card .trip-body h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure proper spacing between elements */
.clem-trip-card .trip-body > * {
    margin-bottom: 6px !important;
}

.clem-trip-card .trip-body > *:last-child {
    margin-bottom: 0 !important;
}

/* Minimal card borders */
.clem-trip-card,
.clem-cruise-card,
.clem-horizontal-card,
.clem-vertical-card {
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.clem-trip-card:hover,
.clem-cruise-card:hover,
.clem-horizontal-card:hover,
.clem-vertical-card:hover {
    border: 1px solid #d0d0d0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   HOVER EFFECTS - Minimal
   ========================================================================== */

.clem-trip-card h3 a:hover {
    color: #775495 !important;
    text-decoration: none !important;
}

/* Subtle hover with minimal shadow */
.clem-trip-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}