/**
 * TLP Collaborators - Frontend styles v1.3.1
 *
 * Visual refresh + UI polishing:
 * - Floating pill bar with subtle shadow
 * - Card with default shadow and hover elevation
 * - Badge larger and properly stacked above orange info
 * - Bolder typography for legibility
 * - "Visit website" pill button as primary CTA
 */

.tlp-collab-wrapper {
    --tlp-primary: #f9951b;
    --tlp-primary-dark: #d85a30;
    --tlp-primary-soft: #FAEEDA;
    --tlp-info-bg: #f9951b;
    --tlp-info-text: #ffffff;
    --tlp-tier-basic: #888780;
    --tlp-tier-plus:  #185FA5;
    --tlp-tier-prime: #BA7517;
    --tlp-radius: 12px;
    --tlp-card-bg: #ffffff;
    --tlp-border: rgba(0, 0, 0, 0.08);
    --tlp-text: #2c2c2a;
    --tlp-text-muted: #5f5e5a;
    --tlp-placeholder-bg: #D3D1C7;
    --tlp-pill-inactive-bg: #F1EFE8;
    --tlp-shadow-rest: 0 2px 6px rgba(0, 0, 0, 0.06);
    --tlp-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.18);

    margin: 1rem 0;
    color: var(--tlp-text);
}

/* === Pills (floating card) === */

.tlp-collab-pills {
    background: #ffffff;
    border-radius: var(--tlp-radius);
    padding: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: var(--tlp-shadow-rest);
}

.tlp-collab-pills .tlp-pill {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
    background: transparent;
    color: var(--tlp-text-muted);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
    line-height: 1;
    font-family: inherit;
    white-space: nowrap;
}

.tlp-collab-pills .tlp-pill:hover {
    background: rgba(249, 149, 27, 0.10);
    color: var(--tlp-primary);
}

.tlp-collab-pills .tlp-pill.is-active,
.tlp-collab-pills .tlp-pill.is-active:hover {
    background: var(--tlp-primary);
    color: #ffffff;
}

.tlp-collab-pills .tlp-pill-icon {
    display: inline-flex;
    align-items: center;
}

.tlp-collab-pills .tlp-pill-count {
    background: var(--tlp-pill-inactive-bg);
    color: var(--tlp-text-muted);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tlp-collab-pills .tlp-pill:hover .tlp-pill-count {
    background: rgba(249, 149, 27, 0.18);
    color: var(--tlp-primary);
}

.tlp-collab-pills .tlp-pill.is-active .tlp-pill-count,
.tlp-collab-pills .tlp-pill.is-active:hover .tlp-pill-count {
    background: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

/* === Section title === */

.tlp-collab-section-title {
    margin: 0 0 1.25rem;
    font-size: 18px;
    font-weight: 700;
    color: var(--tlp-text);
}

.tlp-collab-section-title .tlp-count {
    color: var(--tlp-primary);
    margin-left: 4px;
    font-weight: 600;
}

/* === Grid === */

.tlp-collab-grid {
    display: grid;
    grid-template-columns: repeat(var(--tlp-columns, 3), 1fr);
    gap: 22px;
    /* Hide until JS finishes shuffling (avoids flicker on cached pages). */
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* JS adds .is-ready once shuffle is complete. CSS fallback shows the grid
   after 800ms in case JS fails to run (e.g. content blockers, errors). */
.tlp-collab-grid.is-ready,
.tlp-collab-wrapper.no-js .tlp-collab-grid {
    opacity: 1;
}

@media (max-width: 1024px) {
    .tlp-collab-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tlp-collab-grid {
        grid-template-columns: 1fr;
    }

    .tlp-collab-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .tlp-collab-pills .tlp-pill {
        flex: none;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* === Card === */

.tlp-collab-card {
    background: var(--tlp-card-bg);
    border: 1px solid var(--tlp-border);
    border-radius: var(--tlp-radius);
    overflow: visible; /* Important: badge protrudes */
    display: flex;
    flex-direction: column;
    box-shadow: var(--tlp-shadow-rest);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
}

.tlp-collab-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tlp-shadow-hover);
}

.tlp-collab-card.is-hidden {
    display: none;
}

.tlp-collab-card.is-tier-plus {
    border-color: var(--tlp-tier-plus);
}

.tlp-collab-card.is-tier-prime {
    border-color: var(--tlp-tier-prime);
}

/* === Thumb (image or placeholder) === */

.tlp-collab-thumb {
    position: relative;
    height: 200px;
    overflow: hidden; /* Image is clipped, badge is OUTSIDE this element */
    background: var(--tlp-placeholder-bg);
    border-radius: var(--tlp-radius) var(--tlp-radius) 0 0;
}

.tlp-collab-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.tlp-collab-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--tlp-placeholder-bg);
}

.tlp-collab-placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.85;
}

/* === Badge ===
   The badge is a sibling of .tlp-collab-thumb (NOT inside it),
   so the thumb's overflow:hidden does NOT clip it. It floats above
   the card with a high z-index, properly above the orange panel.
*/

.tlp-collab-badge {
    position: absolute;
    top: 200px; /* Same as thumb height -> badge centered at the boundary */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.tlp-badge-basic {
    background: var(--tlp-tier-basic);
}

.tlp-badge-plus {
    background: var(--tlp-tier-plus);
}

.tlp-badge-prime {
    background: var(--tlp-tier-prime);
}

.tlp-collab-badge .tlp-badge-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tlp-collab-badge .tlp-badge-stars {
    font-size: 10px;
    margin-top: 3px;
    letter-spacing: 1.5px;
}

/* === Distintiu badge (replaces tier badge when present) === */

.tlp-collab-card.is-dist-vehicle_oficial {
    border-color: #16A34A;
}

.tlp-collab-badge.tlp-badge-distintiu {
    width: auto;
    min-width: 100px;
    height: auto;
    top: 200px;
    border-radius: 16px;
    padding: 8px 12px;
    background: #16A34A;
    flex-direction: column;
    gap: 4px;
}

.tlp-collab-badge.tlp-badge-distintiu .tlp-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.tlp-collab-badge.tlp-badge-distintiu .tlp-badge-icon svg {
    width: 22px;
    height: 22px;
}

.tlp-collab-badge.tlp-badge-distintiu .tlp-badge-text-dist {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.1;
    white-space: nowrap;
}

/* === Info panel (orange, white text) === */

.tlp-collab-info {
    background: var(--tlp-info-bg);
    color: var(--tlp-info-text);
    padding: 2.5rem 1.1rem 1.25rem;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--tlp-radius) var(--tlp-radius);
}

/* When there's no badge at all (no tier, no distintiu), less top padding is needed */
.tlp-collab-card:not(.is-tier-basic):not(.is-tier-plus):not(.is-tier-prime):not(.is-dist-vehicle_oficial) .tlp-collab-info {
    padding-top: 1.25rem;
}

/* When distintiu badge is present, need more top space (it's wider and slightly taller) */
.tlp-collab-card.is-dist-vehicle_oficial .tlp-collab-info {
    padding-top: 3.25rem;
}

.tlp-collab-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--tlp-info-text);
    letter-spacing: 0.3px;
    line-height: 1.3;
    text-transform: uppercase;
}

.tlp-collab-desc {
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.45;
    color: var(--tlp-info-text);
}

/* === Contact list (phone, email, address) === */

.tlp-collab-contacts {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.tlp-collab-contacts li {
    margin: 0;
}

.tlp-collab-contacts .tlp-contact {
    color: var(--tlp-info-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.3;
    word-break: break-word;
    transition: opacity 0.15s ease;
}

.tlp-collab-contacts a.tlp-contact:hover {
    text-decoration: underline;
}

.tlp-collab-contacts .tlp-contact svg {
    flex-shrink: 0;
    stroke-width: 2.5;
}

.tlp-collab-contacts .tlp-contact-address {
    cursor: default;
}

/* === Visit website CTA pill === */

.tlp-collab-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    color: var(--tlp-primary);
    border: none;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    margin-top: 4px;
    align-self: center;
    line-height: 1;
}

.tlp-collab-cta svg {
    stroke-width: 2.5;
}

.tlp-collab-cta:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
    color: var(--tlp-primary-dark);
}

/* === Social icons === */

.tlp-collab-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.tlp-collab-social .tlp-social {
    color: var(--tlp-info-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background-color 0.18s ease;
}

.tlp-collab-social .tlp-social:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* === Empty state === */

.tlp-collab-empty {
    padding: 2rem;
    text-align: center;
    color: var(--tlp-text-muted);
}