/* ============================================================
   Homepage "Objetivos em Destaque" — horizontal-scroll teaser strip,
   same ribbon-card look as Jogar Airsoft's index.html ribbons widget
   (.ribbons-scroll-container/.ribbons-grid/.ribbon-card), reskinned with
   this project's own tokens (same reskin approach as objetivos.css).
   The overall progress bar (.home-obj-progress) shows total XP from
   objetivos.js's catalog (window.OBJETIVOS_TOTAL_XP); current XP is a
   placeholder until real per-player tracking exists (see home-objetivos.js).
   ============================================================ */

.home-obj-section {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2) 0 var(--space-3);
}

.home-obj-progress {
    margin: 0 var(--space-3) var(--space-2);
}

.home-obj-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.home-obj-progress-label span:last-child {
    color: var(--color-gold-bright);
    font-weight: 700;
}

.home-obj-progress-track {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.home-obj-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-bright));
    transition: width var(--transition-fast);
}

.home-obj-header {
    margin: 0 var(--space-3) var(--space-3);
}

.home-obj-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-text);
    margin: 0;
}

/* overflow-x:auto here forces the y-axis to clip too (a mixed-axis CSS
   rule — "visible" isn't allowed to pair with "auto"), so the XP badge's
   negative top offset needs real padding to sit in, not just visual
   breathing room, or its top edge gets cut off by the scroll container. */
.ribbons-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    padding: 14px var(--space-3) 10px;
}

.ribbons-scroll-container::-webkit-scrollbar {
    display: none;
}

.ribbons-grid {
    display: flex;
    gap: var(--space-3);
    min-width: min-content;
}

/* Shown instead of the grid once every featured card is completed. */
.ribbons-empty {
    width: 100%;
    margin: 0;
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border: 1px dashed #2a2a2a;
    border-radius: var(--radius-md);
}

.ribbon-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #2a2a2a;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-width: 240px;
    max-width: 240px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.ribbon-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold-bright);
}

.ribbon-card-left {
    display: flex;
    flex-shrink: 0;
}

.ribbon-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(244, 208, 63, 0.1);
    color: var(--color-gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon-icon svg {
    width: 24px;
    height: 24px;
}

.ribbon-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ribbon-card-right {
    flex: 1;
    min-width: 0;
}

.ribbon-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 3px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ribbon-description {
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ribbon-xp-border-badge {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-gold-bright);
    color: var(--color-gold-bright);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    z-index: 2;
}