/* ========================================
   YOLO Yacht Card - Unified Styles v3.7.2
   Bootstrap Grid Compatible
   ======================================== */

/* ========================================
   THEME OVERRIDES - Force Proper Layout
   ======================================== */

/* Override WordPress theme constraints on fleet containers */
body .yolo-ys-our-fleet,
#content .yolo-ys-our-fleet,
.entry-content .yolo-ys-our-fleet,
main .yolo-ys-our-fleet,
.site-content .yolo-ys-our-fleet,
.wp-block-post-content .yolo-ys-our-fleet,
article .yolo-ys-our-fleet {
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Force Bootstrap container-fluid to work */
body .yolo-ys-our-fleet .container-fluid,
#content .yolo-ys-our-fleet .container-fluid,
.entry-content .yolo-ys-our-fleet .container-fluid,
main .yolo-ys-our-fleet .container-fluid,
article .yolo-ys-our-fleet .container-fluid {
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 100% !important;
}

/* Force Bootstrap row to work */
body .yolo-ys-our-fleet .row,
#content .yolo-ys-our-fleet .row,
.entry-content .yolo-ys-our-fleet .row,
main .yolo-ys-our-fleet .row,
article .yolo-ys-our-fleet .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

/* Force Bootstrap columns to work */
body .yolo-ys-our-fleet [class*="col-"],
#content .yolo-ys-our-fleet [class*="col-"],
.entry-content .yolo-ys-our-fleet [class*="col-"],
main .yolo-ys-our-fleet [class*="col-"],
article .yolo-ys-our-fleet [class*="col-"] {
    position: relative !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

/* Bootstrap Grid column widths */
body .yolo-ys-our-fleet .col-6,
#content .yolo-ys-our-fleet .col-6,
.entry-content .yolo-ys-our-fleet .col-6,
main .yolo-ys-our-fleet .col-6,
article .yolo-ys-our-fleet .col-6 {
    width: 50% !important;
}

body .yolo-ys-our-fleet .col-4,
#content .yolo-ys-our-fleet .col-4,
.entry-content .yolo-ys-our-fleet .col-4,
main .yolo-ys-our-fleet .col-4,
article .yolo-ys-our-fleet .col-4 {
    width: 33.333333% !important;
}

/* Override WordPress theme constraints on search results */
body .yolo-ys-search-results,
#content .yolo-ys-search-results,
.entry-content .yolo-ys-search-results,
main .yolo-ys-search-results,
.site-content .yolo-ys-search-results,
.wp-block-post-content .yolo-ys-search-results,
article .yolo-ys-search-results {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ========================================
   FLEET SECTION HEADERS
   ======================================== */

.yolo-ys-fleet-section {
    margin-bottom: 60px !important;
}

.yolo-ys-fleet-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
    color: #1e3a8a !important;
    text-align: center !important;
}

.yolo-ys-fleet-badge {
    display: inline-block !important;
    background: #dc2626 !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
}

/* ========================================
   CLICKABLE CARD (v80.1)
   ======================================== */

/* Make entire card clickable with stretched link */
.yolo-ys-clickable-card {
    position: relative !important;
    cursor: pointer !important;
}

/* Stretched link covers the entire card */
.yolo-ys-card-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Ensure interactive elements are above the card link */
.yolo-ys-clickable-card .swiper-button-prev,
.yolo-ys-clickable-card .swiper-button-next,
.yolo-ys-clickable-card .swiper-pagination {
    z-index: 10 !important;
    position: relative !important;
}

/* Details button visual styling (no longer an <a> tag) */
.yolo-ys-clickable-card .yolo-ys-details-btn {
    position: relative !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   YACHT CARD
   ======================================== */

.yolo-ys-yacht-card {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
}

.yolo-ys-yacht-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* YOLO Charters Logo on yacht cards - v95.12: Reverted to v95.3 working version */
.yolo-ys-yacht-logo {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    max-width: 100px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   YACHT IMAGE
   ======================================== */

.yolo-ys-yacht-image {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.yolo-ys-yacht-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
    display: block !important;
}

.yolo-ys-yacht-card:hover .yolo-ys-yacht-image img {
    transform: scale(1.05) !important;
}

.yolo-ys-yacht-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 80px !important;
    color: #9ca3af !important;
}

/* ========================================
   YACHT CONTENT
   ======================================== */

.yolo-ys-yacht-content {
    padding: 20px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.yolo-ys-yacht-location {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-bottom: 12px !important;
}

.yolo-ys-yacht-header {
    margin-bottom: 20px !important;
}

.yolo-ys-yacht-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
    word-wrap: break-word !important;
}

.yolo-ys-yacht-model {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e3a8a !important;
    margin: 0 !important;
    word-wrap: break-word !important;
}

/* ========================================
   SPECS GRID (Bootstrap Grid Compatible)
   ======================================== */

.yolo-ys-yacht-specs-grid {
    margin-bottom: 20px !important;
}

/* Justify spec items within each row */
.yolo-ys-yacht-specs-grid .row {
    justify-content: space-between !important;
}

/* Specs row - justified layout with space-between */
.yolo-ys-specs-row {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.yolo-ys-spec-item {
    text-align: left !important;
}

.yolo-ys-spec-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.yolo-ys-spec-label {
    font-size: 13px !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
}

/* Refit year BOLD only */
.yolo-ys-refit-bold {
    font-weight: 900 !important;
}

/* ========================================
   PRICE
   ======================================== */

.yolo-ys-yacht-price {
    font-size: 16px !important;
    color: #059669 !important;
    margin-bottom: 15px !important;
    padding: 12px !important;
    background: #f0fdf4 !important;
    border-radius: 4px !important;
    text-align: center !important;
}

.yolo-ys-yacht-price strong {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* ========================================
   DETAILS BUTTON
   ======================================== */

.yolo-ys-details-btn,
body .yolo-ys-details-btn,
a.yolo-ys-details-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: #b91c1c !important;
    color: white !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

.yolo-ys-details-btn:hover,
a.yolo-ys-details-btn:hover {
    background: #991b1b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.3) !important;
    color: white !important;
}

/* ========================================
   NO YACHTS MESSAGE
   ======================================== */

.yolo-ys-no-yachts {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #f3f4f6 !important;
    border-radius: 8px !important;
}

.yolo-ys-no-yachts p {
    font-size: 18px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* ========================================
   RESPONSIVE
   Note: Global mobile responsive fixes are in global-mobile-responsive.css
   These are page-specific enhancements for yacht cards
   ======================================== */

@media (max-width: 767.98px) { /* v95.10: Changed to Bootstrap 5 breakpoint */
    /* v91.14: Match Our Yachts - 15px horizontal padding */
    body .yolo-ys-our-fleet,
    #content .yolo-ys-our-fleet,
    .entry-content .yolo-ys-our-fleet,
    main .yolo-ys-our-fleet,
    article .yolo-ys-our-fleet,
    body .yolo-ys-search-results,
    #content .yolo-ys-search-results,
    .entry-content .yolo-ys-search-results,
    main .yolo-ys-search-results,
    article .yolo-ys-search-results {
        padding: 0 15px 30px 15px !important;
    }
    
    /* Adjust Bootstrap grid spacing for mobile */
    body .yolo-ys-our-fleet .row,
    #content .yolo-ys-our-fleet .row,
    .entry-content .yolo-ys-our-fleet .row,
    main .yolo-ys-our-fleet .row,
    article .yolo-ys-our-fleet .row,
    body .yolo-ys-search-results .row,
    #content .yolo-ys-search-results .row,
    .entry-content .yolo-ys-search-results .row,
    main .yolo-ys-search-results .row,
    article .yolo-ys-search-results .row {
        margin-right: -8px !important;
        margin-left: -8px !important;
    }
    
    body .yolo-ys-our-fleet [class*="col-"],
    #content .yolo-ys-our-fleet [class*="col-"],
    .entry-content .yolo-ys-our-fleet [class*="col-"],
    main .yolo-ys-our-fleet [class*="col-"],
    article .yolo-ys-our-fleet [class*="col-"],
    body .yolo-ys-search-results [class*="col-"],
    #content .yolo-ys-search-results [class*="col-"],
    .entry-content .yolo-ys-search-results [class*="col-"],
    main .yolo-ys-search-results [class*="col-"],
    article .yolo-ys-search-results [class*="col-"] {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    
    .yolo-ys-yacht-image {
        height: 200px !important;
    }
    
    .yolo-ys-fleet-title {
        font-size: 24px !important;
    }
    
    .yolo-ys-yacht-name {
        font-size: 18px !important;
    }
    
    .yolo-ys-spec-value {
        font-size: 16px !important;
    }
    
    .yolo-ys-yacht-card {
        margin-bottom: 16px !important;
    }
    
    /* Smaller logo on mobile - v95.12: Reverted to v95.3 working version */
    .yolo-ys-yacht-logo {
        max-width: 70px !important;
        max-height: 45px !important;
        top: 8px !important;
        left: 8px !important;
    }
}

@media (max-width: 575.98px) { /* v95.10: Changed to Bootstrap 5 breakpoint */
    /* v91.14: Match Our Yachts - 10px horizontal padding */
    body .yolo-ys-our-fleet,
    #content .yolo-ys-our-fleet,
    .entry-content .yolo-ys-our-fleet,
    main .yolo-ys-our-fleet,
    article .yolo-ys-our-fleet,
    body .yolo-ys-search-results,
    #content .yolo-ys-search-results,
    .entry-content .yolo-ys-search-results,
    main .yolo-ys-search-results,
    article .yolo-ys-search-results {
        padding: 0 10px 20px 10px !important;
    }
    
    body .yolo-ys-our-fleet .container-fluid,
    #content .yolo-ys-our-fleet .container-fluid,
    .entry-content .yolo-ys-our-fleet .container-fluid,
    main .yolo-ys-our-fleet .container-fluid,
    article .yolo-ys-our-fleet .container-fluid,
    body .yolo-ys-search-results .container-fluid,
    #content .yolo-ys-search-results .container-fluid,
    .entry-content .yolo-ys-search-results .container-fluid,
    main .yolo-ys-search-results .container-fluid,
    article .yolo-ys-search-results .container-fluid {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    body .yolo-ys-our-fleet .row,
    #content .yolo-ys-our-fleet .row,
    .entry-content .yolo-ys-our-fleet .row,
    main .yolo-ys-our-fleet .row,
    article .yolo-ys-our-fleet .row,
    body .yolo-ys-search-results .row,
    #content .yolo-ys-search-results .row,
    .entry-content .yolo-ys-search-results .row,
    main .yolo-ys-search-results .row,
    article .yolo-ys-search-results .row {
        margin-right: -5px !important;
        margin-left: -5px !important;
    }
    
    body .yolo-ys-our-fleet [class*="col-"],
    #content .yolo-ys-our-fleet [class*="col-"],
    .entry-content .yolo-ys-our-fleet [class*="col-"],
    main .yolo-ys-our-fleet [class*="col-"],
    article .yolo-ys-our-fleet [class*="col-"],
    body .yolo-ys-search-results [class*="col-"],
    #content .yolo-ys-search-results [class*="col-"],
    .entry-content .yolo-ys-search-results [class*="col-"],
    main .yolo-ys-search-results [class*="col-"],
    article .yolo-ys-search-results [class*="col-"] {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
    
    /* Full-width card on mobile */
    .yolo-ys-yacht-card {
        border-radius: 0 !important;  /* No rounded corners for edge-to-edge */
        margin-bottom: 15px !important;
    }
    
    .yolo-ys-yacht-image {
        height: 220px !important;  /* Taller image for better visual on mobile */
    }
    
    .yolo-ys-fleet-title {
        font-size: 20px !important;
        padding: 0 15px !important;  /* Add padding to title only */
    }
    
    .yolo-ys-yacht-name {
        font-size: 17px !important;
    }
    
    .yolo-ys-spec-value {
        font-size: 15px !important;
    }
    
    .yolo-ys-spec-label {
        font-size: 11px !important;
    }
    
    /* v100.25: Featured badge mobile */
    .yolo-ys-featured-badge {
        height: 50px !important;
        padding: 0 10px !important;
    }
    
    .yolo-ys-featured-stars i {
        font-size: 10px !important;
    }
    
    .yolo-ys-featured-text {
        font-size: 8px !important;
    }
    
    /* v100.25: Equipment row mobile */
    .yolo-ys-equipment-row {
        padding: 8px 10px !important;
    }
    
    .yolo-ys-equipment-item {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
    
    .yolo-ys-equipment-item i {
        font-size: 10px !important;
    }
}

/* ========================================
   v100.25: FEATURED BADGE (matches search results)
   ======================================== */

.yolo-ys-featured-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    height: 60px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

.yolo-ys-featured-stars {
    display: flex !important;
    gap: 2px !important;
}

.yolo-ys-featured-stars i {
    font-size: 12px !important;
    color: #f59e0b !important;
}

.yolo-ys-featured-text {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ========================================
   v100.25: EQUIPMENT ROW (matches search results)
   ======================================== */

.yolo-ys-equipment-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    background: #fafafa !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 -20px !important; /* Extend to card edges */
    margin-bottom: 15px !important;
}

.yolo-ys-equipment-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    color: #374151 !important;
    background: #fff !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #e5e7eb !important;
}

.yolo-ys-equipment-item i {
    font-size: 11px !important;
}

/* ========================================
   v100.25: SPECS GRID - Single row layout (matches search results)
   ======================================== */

.yolo-ys-yacht-specs-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
    padding: 12px !important;
    background: #f9fafb !important;
    border-radius: 6px !important;
}

.yolo-ys-yacht-specs-grid .yolo-ys-spec-item {
    text-align: center !important;
    flex: 1 !important;
    min-width: 50px !important;
}

.yolo-ys-yacht-specs-grid.has-refit .yolo-ys-spec-item {
    flex: 0 0 auto !important;
    min-width: 45px !important;
}

/* ========================================
   v100.25: PRICE CONTAINER (matches search results)
   ======================================== */

.yolo-ys-yacht-price-container {
    margin-bottom: 15px !important;
    padding: 12px !important;
    background: #f0fdf4 !important;
    border-radius: 4px !important;
    text-align: center !important;
}

.yolo-ys-price-final {
    font-size: 16px !important;
    color: #059669 !important;
}

.yolo-ys-price-final strong {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.yolo-ys-price-period {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin-left: 4px !important;
}