/* sloppish.com shared styles */

/* ---- Section dividers ---- */
.separator {
    text-align: center;
    margin: 3em 0;
    height: 20px;
    position: relative;
}

.separator::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00ff41 20%, #00ff41 40%, transparent 45%, transparent 55%, #00ff41 60%, #00ff41 80%, transparent);
    opacity: 0.3;
}

.separator::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border: 1px solid #00ff41;
    opacity: 0.4;
    /* half circle left, half square right */
    border-radius: 50% 0 0 50%;
}

/* ---- Pull quotes ---- */
.pull-quote {
    font-size: 1.6rem;
    color: #666;
    text-align: center;
    padding: 2em 2.5em;
    margin: 2.5em 0;
    font-style: italic;
    position: relative;
    border-top: none;
    border-bottom: none;
}

.pull-quote::before,
.pull-quote::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
}

.pull-quote::before {
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2) 30%, rgba(0, 255, 65, 0.2) 70%, transparent);
}

.pull-quote::after {
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2) 30%, rgba(0, 255, 65, 0.2) 70%, transparent);
}

/* Subtle circuit-trace background */
.pull-quote {
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 65, 0.03) 49.5%, rgba(0, 255, 65, 0.03) 50.5%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 65, 0.02) 49.5%, rgba(0, 255, 65, 0.02) 50.5%, transparent 50.5%);
    background-size: 40px 40px;
}

@media (max-width: 600px) {
    .pull-quote { font-size: 1.3rem; padding: 1.5em 1em; }
}

/* ---- Article cards (main page) ---- */
.article-card {
    display: block;
    padding: 28px 0 28px 16px;
    border-bottom: 1px solid #151515;
    text-decoration: none;
    transition: border-color 0.3s, padding-left 0.2s;
    position: relative;
}

.article-card:hover {
    border-bottom-color: #00ff41;
    padding-left: 20px;
}

.article-card:first-child {
    border-top: 1px solid #151515;
}

/* Type indicator bar */
.article-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 3px;
    border-radius: 1px;
    transition: opacity 0.2s;
}

.article-card:hover::before {
    opacity: 1;
}

/* Color by type */
.article-card[data-type="longform"]::before {
    background: #00ff41;
    opacity: 0.3;
}

.article-card[data-type="weekly"]::before {
    background: #41c8ff;
    opacity: 0.3;
}

.article-card[data-type="scorecard"]::before {
    background: #ff9f41;
    opacity: 0.3;
}

/* Type label */
.article-card .type-label {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: inline-block;
}

.article-card[data-type="longform"] .type-label { color: #00ff41; }
.article-card[data-type="weekly"] .type-label { color: #41c8ff; }
.article-card[data-type="scorecard"] .type-label { color: #ff9f41; }

.article-card h2 {
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.article-card:hover h2 { color: #00ff41; }

.article-card .deck {
    font-size: 1rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: 10px;
}

.article-card .meta {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: #444;
    letter-spacing: 1px;
}