/**
 * Tour card — premium "GetYourGuide-style" card design.
 *
 * Koristi se na:
 *   - Homepage `featured-tours` partial
 *   - Tours archive list page
 *   - Detalji ture "Slične ture" sekcija (potencijalno)
 *
 * BEM prefiks: `tc-` (tour card) — namjerno različit od `tr-tour-card`
 * (legacy markup u greben-polish.css / tours-archive.css / tour-detail.css)
 * radi izolacije scope-a.
 *
 * Layout strategija:
 *   - Full-width fluid card sa fixed aspect-ratio image (3:2)
 *   - Bedževi preko slike (top-left absolute), price pill (bottom-right absolute)
 *   - Body sa rating row, title (1 line clamp), desc (2 line clamp), meta row
 *   - Footer sa cancellation note + orange CTA pill
 *   - Hover: subtle elevation + image zoom
 *
 * Color tokens (lokalni — ne ovise od brand.css token rename-a):
 *   - Coral/Orange #ff6b35 — primary CTA, "Najprodavanija" badge
 *   - Navy #1f2a44 — secondary badge "Za putnike kruzera"
 *   - Yellow #f59e0b — "Privatna" badge
 *   - Green #10b981 — "Cjelodnevna avantura" / cancellation icon
 *   - Star yellow #f5b400
 */

/* =============================================================================
   1. Card container
   ============================================================================= */
.tc-card {
    --tc-coral: #ff6b35;
    --tc-coral-dk: #e8531a;
    --tc-navy: #1f2a44;
    --tc-yellow: #f59e0b;
    --tc-green: #10b981;
    --tc-star: #f5b400;
    --tc-text: #0f172a;
    --tc-muted: #64748b;
    --tc-border: rgba(15, 23, 42, 0.08);

    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--tc-border);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}
.tc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10), 0 20px 40px rgba(15, 23, 42, 0.10);
}
.tc-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.tc-card__link:hover {
    color: inherit;
    text-decoration: none;
}

/* =============================================================================
   2. Image area — slika + bedževi + price pill overlay
   ============================================================================= */
.tc-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f1f5f9;
}
.tc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-card:hover .tc-card__img {
    transform: scale(1.06);
}

/* Top-left badge stack */
.tc-card__badges {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    z-index: 2;
    pointer-events: none; /* badge je samo info — klik preko cele slike ide na link */
}

.tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    /* Reset Bootstrap span defaults */
    border: 0;
    text-decoration: none;
}
.tc-badge i {
    font-size: 0.72rem;
}
.tc-badge--coral {
    background: linear-gradient(135deg, var(--tc-coral) 0%, #ff8055 100%);
}
.tc-badge--navy {
    background: linear-gradient(135deg, var(--tc-navy) 0%, #2d3a5c 100%);
}
.tc-badge--yellow {
    background: linear-gradient(135deg, var(--tc-yellow) 0%, #fbbf24 100%);
    color: #1f2a44;
}
.tc-badge--yellow i { color: #1f2a44; }
.tc-badge--green {
    background: linear-gradient(135deg, var(--tc-green) 0%, #34d399 100%);
}
/* #038 — Hourly tour type badge (clock icon, blue tint). */
.tc-badge--blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
/* #121 (2026-06-01) — Group tour type badge (people icon, teal tint).
   Ranije grupne ture nisu imale type badge dok su sve ostale (private/
   tiered/hourly) imale, što je vizuelno bilo nekonzistentno na arhivskoj
   listi (admin nije mogao odmah identifikovati tip ture). */
.tc-badge--teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* Bottom-right price pill */
.tc-card__price-tag {
    position: absolute;
    bottom: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    color: var(--tc-text);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.1;
}
.tc-card__price-prefix {
    color: var(--tc-muted);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: lowercase;
}
.tc-card__price-original {
    color: var(--tc-muted);
    text-decoration: line-through;
    font-size: 0.78rem;
    font-weight: 500;
}
.tc-card__price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tc-text);
}
.tc-card__price-suffix {
    color: var(--tc-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

/* =============================================================================
   3. Body — rating, title, desc, meta
   ============================================================================= */
.tc-card__body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

/* Rating row */
.tc-card__rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--tc-text);
}
.tc-card__stars {
    color: var(--tc-star);
    letter-spacing: 0.05em;
    line-height: 1;
    font-size: 0.85rem;
}
.tc-card__stars i {
    margin-right: 1px;
}
.tc-card__rating strong {
    font-weight: 700;
    color: var(--tc-text);
}
.tc-card__reviews-count {
    color: var(--tc-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Title */
.tc-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tc-text);
    line-height: 1.35;
    /* Ograniči na 2 linije sa ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Description (2 line clamp) */
.tc-card__desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--tc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* Meta row */
.tc-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--tc-border);
}
.tc-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--tc-text);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}
.tc-meta i {
    color: var(--tc-coral);
    font-size: 0.85rem;
}

/* =============================================================================
   4. Footer — cancellation note + CTA dugme
   ============================================================================= */
.tc-card__footer {
    margin-top: auto; /* gurnuti footer na dno čak i ako body ima manje teksta */
    padding-top: 0.7rem;
    border-top: 1px solid var(--tc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.tc-card__cancellation {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--tc-text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.tc-card__cancellation i {
    color: var(--tc-green);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.tc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--tc-coral);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.30);
}
.tc-card:hover .tc-card__cta {
    background: var(--tc-coral-dk);
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.40);
}
.tc-card__cta i {
    transition: transform 0.2s ease;
}
.tc-card:hover .tc-card__cta i {
    transform: translateX(2px);
}

/* =============================================================================
   5. Focus states (a11y)
   ============================================================================= */
.tc-card__link:focus-visible {
    outline: 3px solid var(--tc-coral);
    outline-offset: 3px;
    border-radius: 14px;
}

/* =============================================================================
   6. Responsive
   ============================================================================= */
@media (max-width: 575.98px) {
    .tc-card__image { aspect-ratio: 16 / 10; }
    .tc-card__body { padding: 0.85rem 0.95rem 1rem; gap: 0.45rem; }
    .tc-card__title { font-size: 1rem; }
    .tc-card__desc { font-size: 0.85rem; }
    .tc-card__meta { gap: 0.55rem 0.85rem; }
    .tc-meta { font-size: 0.78rem; }
    .tc-card__cancellation { font-size: 0.75rem; }
    .tc-card__cta { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
    .tc-badge { font-size: 0.68rem; padding: 0.28rem 0.6rem; }
    .tc-card__price-amount { font-size: 1rem; }
}

/* =============================================================================
   7. Reduced motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .tc-card,
    .tc-card__img,
    .tc-card__cta,
    .tc-card__cta i {
        transition: none;
    }
    .tc-card:hover {
        transform: none;
    }
    .tc-card:hover .tc-card__img,
    .tc-card:hover .tc-card__cta,
    .tc-card:hover .tc-card__cta i {
        transform: none;
    }
}