/**
 * EverythingReps — Blog Styles
 * archive.php + home.php + single.php + erp-card.php ortak stilleri.
 */

/* ===== Container / okuma kolonu ===== */
.erp-blog-main,
.erp-single {
max-width: 1120px;
margin: 0 auto;
padding: 40px 24px 64px;
}

.erp-single {
max-width: 760px;
}

/* ===== Blog hero (home.php) ===== */
.erp-blog-hero {
margin-bottom: 40px;
text-align: center;
}
.erp-blog-hero__title {
font-size: clamp(30px, 5vw, 46px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.05;
margin: 0 0 16px;
}
.erp-blog-hero__intro {
max-width: 720px;
margin: 0 auto;
font-size: 16px;
line-height: 1.7;
color: #444;
}

/* ===== Archive header (archive.php) ===== */
.erp-archive-header {
margin-bottom: 36px;
}
.erp-archive-title {
font-size: clamp(28px, 4.5vw, 42px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.1;
margin: 0 0 12px;
}
.erp-archive-desc {
max-width: 760px;
font-size: 16px;
line-height: 1.7;
color: #444;
}

/* ===== Kart grid ===== */
.erp-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

/* ===== Kart ===== */
.erp-card {
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease;
}
.erp-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

.erp-card__thumb-link {
display: block;
text-decoration: none;
}

.erp-card__thumb {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #1b1b1b;
}
.erp-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Fallback (featured image YOK) */
.erp-card__thumb--fallback {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
background: linear-gradient(135deg, #444, #111);
}
.erp-card__fallback-title {
color: #fff;
font-size: clamp(17px, 2vw, 21px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -.3px;
text-shadow: 0 1px 12px rgba(0,0,0,.25);
z-index: 1;
}
.erp-card__fallback-quote {
position: absolute;
top: 8px;
left: 16px;
color: rgba(255,255,255,.35);
font-size: 52px;
font-weight: 800;
font-family: Georgia, serif;
line-height: 1;
}

/* Kategori-bazlı fallback renkleri */
.erp-card[data-cat="sneaker-care-styling"] .erp-card__thumb--fallback { background: linear-gradient(135deg, #1D9E75, #04342C); }
.erp-card[data-cat="sneaker-news"]         .erp-card__thumb--fallback { background: linear-gradient(135deg, #378ADD, #042C53); }
.erp-card[data-cat="best-reps-guides"]     .erp-card__thumb--fallback { background: linear-gradient(135deg, #444, #111); }
.erp-card[data-cat="replica-buying-guides"].erp-card__thumb--fallback { background: linear-gradient(135deg, #D85A30, #4A1B0C); }
.erp-card[data-cat="rep-site-reviews"]     .erp-card__thumb--fallback { background: linear-gradient(135deg, #7B4DC4, #2A1551); }
.erp-card[data-cat="celebrities-with-sneakers"] .erp-card__thumb--fallback { background: linear-gradient(135deg, #C43D6E, #4A0F26); }

/* Kart gövde */
.erp-card__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.erp-card__cat {
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: #888;
}
.erp-card__title {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.3px;
margin: 8px 0 10px;
}
.erp-card__title a {
color: #111;
text-decoration: none;
}
.erp-card__title a:hover {
color: #D85A30;
}
.erp-card__excerpt {
font-size: 13.5px;
color: #555;
line-height: 1.55;
margin: 0 0 14px;
flex: 1;
}
.erp-card__date {
font-size: 12px;
color: #999;
}

/* ===== Single post ===== */
.erp-single__cat {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: #888;
text-decoration: none;
margin-bottom: 14px;
}
.erp-single__cat:hover { color: #D85A30; }

.erp-single__title {
font-size: clamp(26px, 4vw, 38px);
font-weight: 800;
line-height: 1.14;
letter-spacing: -.8px;
margin: 0 0 18px;
}
.erp-single__meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 13.5px;
color: #888;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 20px;
margin-bottom: 28px;
}
.erp-single__meta strong { color: #555; font-weight: 600; }

.erp-single__featured {
margin-bottom: 28px;
border-radius: 10px;
overflow: hidden;
}
.erp-single__featured img {
width: 100%;
height: auto;
display: block;
}

/* İçerik tipografisi */
.erp-single__content {
font-size: 18px;
line-height: 1.75;
color: #222;
}
.erp-single__content > p { margin: 0 0 22px; }
.erp-single__content h2 {
font-size: clamp(23px, 3vw, 28px);
font-weight: 800;
letter-spacing: -.5px;
line-height: 1.2;
margin: 40px 0 16px;
}
.erp-single__content h3 {
font-size: clamp(18px, 2.4vw, 21px);
font-weight: 700;
letter-spacing: -.3px;
margin: 30px 0 12px;
}
.erp-single__content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 8px 0;
}
.erp-single__content a {
color: #1763b8;
text-decoration: underline;
}
.erp-single__content ul,
.erp-single__content ol {
margin: 0 0 22px;
padding-left: 1.4em;
}
.erp-single__content li { margin-bottom: 8px; }
.erp-single__content blockquote {
border-left: 4px solid #111;
padding-left: 20px;
margin: 28px 0;
font-style: italic;
color: #333;
}

/* İlgili yazılar */
.erp-related {
border-top: 1px solid #e6e6e6;
margin-top: 44px;
padding-top: 26px;
}
.erp-related__label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: #888;
margin-bottom: 14px;
}
.erp-related__item {
display: block;
font-size: 16px;
color: #111;
text-decoration: none;
font-weight: 600;
padding: 11px 0;
border-bottom: 1px solid #f0f0f0;
}
.erp-related__item:hover { color: #D85A30; }
.erp-related__arrow { color: #bbb; margin-right: 10px; }

/* ===== Pagination ===== */
.erp-blog-main .navigation.pagination {
margin-top: 44px;
}
.erp-blog-main .nav-links {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.erp-blog-main .page-numbers {
padding: 10px 16px;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
color: #111;
font-weight: 600;
font-size: 14px;
}
.erp-blog-main .page-numbers.current {
background: #111;
color: #fff;
border-color: #111;
}
.erp-blog-main .page-numbers:hover:not(.current) {
background: #f5f5f5;
}

.erp-no-posts {
font-size: 16px;
color: #666;
padding: 40px 0;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
.erp-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.erp-post-grid { grid-template-columns: 1fr; }
.erp-blog-main,
.erp-single { padding: 28px 18px 48px; }
.erp-single__content { font-size: 16.5px; line-height: 1.7; }
}