/**
 * Path: nplsportspro/assets/css/templates/parts/dynamic-title.css
 * Clean 3-Line Card Layout (Title > Meta > Tools)
 */

/* Main Outer Card */
.nplsp-2line-card-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Clean Gray Border */
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 1. LINE 1: TITLE ROW */
.nplsp-2line-title-row {
    padding: 20px 25px !important;
    border-bottom: 1px solid #f1f5f9 !important; /* Soft divider */
}

.nplsp-2line-title-row h1 {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* 2. LINE 2: META ROW */
.nplsp-2line-meta-row {
    padding: 12px 25px !important;
    background: #f8fafc !important; /* Very slight gray to distinguish from title */
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.nplsp-2line-meta-item {
    font-size: 13px !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nplsp-2line-meta-item strong { color: #475569 !important; }
.nplsp-2line-meta-item a { color: #3b82f6 !important; text-decoration: none !important; font-weight: 600 !important; }
.nplsp-2line-meta-item i.dashicons { color: #94a3b8 !important; font-size: 16px !important; width: 16px !important; height: 16px !important; }

/* 3. LINE 3: TOOLS ROW (Share Left, Resizer Right) */
.nplsp-2line-tools-row {
    padding: 15px 25px !important;
    background: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* Share Box (Left) */
.nplsp-2line-share-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nplsp-2line-share-text {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.nplsp-2line-socials .nplsp-social-share { margin: 0 !important; padding: 0 !important; display: inline-flex !important; gap: 6px !important; }
.nplsp-2line-socials .nplsp-social-share-title { display: none !important; }
.nplsp-2line-socials .nplsp-social-share a { margin: 0 !important; padding: 6px 10px !important; border-radius: 4px !important; font-size: 14px !important; }

/* Resizer Box (Right) */
.nplsp-2line-resizer-box {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nplsp-2line-resizer-text {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    margin-right: 5px !important;
}

.nplsp-2line-resizer-box button {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.nplsp-2line-resizer-box button:hover { background: #3b82f6 !important; color: #ffffff !important; border-color: #3b82f6 !important; }

/* RESPONSIVE STANDARDS (7 Devices) */
@media (min-width: 2560px) { .nplsp-2line-title-row h1 { font-size: 46px !important; } }
@media (max-width: 1024px) { .nplsp-2line-title-row h1 { font-size: 30px !important; } }
@media (max-width: 768px) { 
    .nplsp-2line-tools-row { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
}
@media (max-width: 480px) { 
    .nplsp-2line-title-row h1 { font-size: 24px !important; } 
    .nplsp-2line-title-row, .nplsp-3line-meta-row, .nplsp-3line-tools-row { padding: 15px !important; }
    .nplsp-2line-meta-row { gap: 10px !important; flex-direction: column !important; align-items: flex-start !important; }
    .nplsp-2line-resizer-text { display: none !important; }
}
@media (max-width: 320px) { .nplsp-2line-title-row h1 { font-size: 20px !important; } }