/* ════════════════════════════════════════════════════════════════════
   home.css — تصميم الصفحة الرئيسية
   نُقل من inline في index.php للتخزين بالكاش.
   ════════════════════════════════════════════════════════════════════ */
/* ── override: جنه بيضيف margin-top:30px على #content في كل الصفحات ──
   على الصفحة الرئيسية ده بيخلي مسافة كبيرة بين الهيدر والهيرو
   بنخليها 10px بدل 30px ─────────────────────────────────────────── */
.home #content,
.blog #content {
    margin-top: 10px !important;
}

:root{
    --hp-primary:#c62828;
    --hp-primary-dark:#a61f1f;
    --hp-primary-soft:#fff3f3;
    --hp-text:#1f1f1f;
    --hp-muted:#6b7280;
    --hp-border:#e5e7eb;
    --hp-bg:#ffffff;
    --hp-card:#ffffff;
    --hp-radius:8px;
    --hp-shadow:0 2px 10px rgba(0,0,0,.06);
    --hp-shadow-hover:0 8px 22px rgba(198,40,40,.14);
}

.hp-home{
    max-width:1100px;
    margin:0 auto;
    padding:14px;
    direction:rtl;
    font-family:Tahoma, Arial, sans-serif;
    background:#ffffff;
}

.hp-section{
    margin-bottom:26px;
    background:#ffffff;
}

.hp-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:2px solid var(--hp-primary);
    margin-bottom:12px;
    background:#ffffff;
}

.hp-title{
    margin:0;
    background:var(--hp-primary);
    color:#fff;
    padding:7px 14px;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    border-radius:4px 4px 0 0;
}

/* ===== Hero Mixed Grid ===== */
.hp-mix-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:12px;
}

.hp-mix-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    background:#ffffff;
    border:1px solid var(--hp-border);
    border-radius:var(--hp-radius);
    overflow:hidden;
    box-shadow:var(--hp-shadow);
    text-decoration:none;
    color:inherit;
    transition:.18s ease;
}

.hp-mix-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--hp-shadow-hover);
    border-color:#f3b6b6;
}

/* ✨ تأثير اللمعة العابرة (Shine / Glare) */
.hp-mix-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    z-index:3;
    width:50%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    transform:skewX(-20deg);
    opacity:0;
}
.hp-mix-card:hover::after{
    animation:hp-shine .85s ease;
}
@keyframes hp-shine{
    0%   { left:-75%; opacity:0; }
    20%  { opacity:1; }
    100% { left:125%; opacity:0; }
}

/* ⬆️ حركة العنوان: يطلع لأعلى ويكبر عند المرور */
.hp-mix-content{
    transition:transform .3s ease;
}
.hp-mix-card:hover .hp-mix-content{
    transform:translateY(-6px);
}
.hp-mix-name{
    transition:transform .3s ease, letter-spacing .3s ease;
    transform-origin:right bottom;
}
.hp-mix-card:hover .hp-mix-name{
    transform:scale(1.06);
}

.hp-mix-card--featured{
    grid-row:span 2;
    min-height:420px;
}

.hp-mix-card:not(.hp-mix-card--featured){
    min-height:165px; /* يضمن أن صف الـ Grid يأخذ الارتفاع الصحيح بدل الانكماش لحجم المحتوى الأدنى */
}

.hp-mix-thumb{
    position:relative;
    background:#ffffff;
    overflow:hidden;
    flex:1;
    min-height:0;
}

.hp-mix-card--featured .hp-mix-thumb{
    height:100%;
    min-height:420px;
}

.hp-mix-card:not(.hp-mix-card--featured) .hp-mix-thumb{
    height:165px;
    flex-shrink:0;
}

/* الأخبار في الهيرو — cover يملا البوكس زي page-news.php */
.hp-mix-thumb:not(.hp-mix-thumb--mobile) img,
.hp-mix-news-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block;
    transition:transform .25s ease;
}

.hp-mix-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease;
}

/* صور الموبايل في الهيرو — contain علشان تظهر كاملة */
.hp-mix-thumb--mobile img{
    object-fit:contain !important;
    padding:8px;
    background:#fff;
}

.hp-mix-card:hover .hp-mix-thumb img{
    transform:scale(1.03);
}

.hp-mix-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08) 55%, rgba(0,0,0,0));
}

.hp-mix-badge{
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    background:var(--hp-primary);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:4px 8px;
    border-radius:20px;
    line-height:1;
}

.hp-mix-content{
    position:absolute;
    right:0;
    left:0;
    bottom:0;
    z-index:2;
    padding:14px;
    color:#fff;
}

.hp-mix-card:not(.hp-mix-card--featured) .hp-mix-content{
    padding:10px;
}

.hp-mix-meta{
    font-size:11px;
    opacity:.92;
    margin-bottom:5px;
}

.hp-mix-name{
    margin:0;
    font-size:13px;
    font-weight:700;
    line-height:1.7;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
    overflow-wrap:break-word;
}

.hp-mix-card--featured .hp-mix-name{
    font-size:21px;
    line-height:1.65;
    -webkit-line-clamp:3;
}

.hp-mix-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5f5f5;
}

/* ===== Last Articles ===== */
.hp-post-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}

/* كارت الأخبار — نفس تصميم page-news.php */
.hp-post-grid .news-hero-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 16/10;
    background: #1a1a1a;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hp-post-grid .news-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.hp-post-grid .news-hero-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.hp-post-grid .news-hero-card:hover img { transform: scale(1.05); }
.hp-post-grid .news-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.1) 60%);
}
.hp-post-grid .news-hero-body {
    position: absolute;
    bottom: 0; right: 0; left: 0;
    padding: 12px;
    direction: rtl;
}
.hp-post-grid .news-hero-cat {
    display: inline-block;
    background: #cc0000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}
/* البادج فوق على اليمين داخل الكارت */
.hp-post-grid .news-hero-cat--top {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    margin: 0;
}
.hp-post-grid .news-hero-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hp-post-grid .news-hero-no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #2a2a2a; color: #555;
}


/* ===== Latest Mobiles ===== */
.hp-mobile-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}

/* كارت أحدث الهواتف — نفس تصميم كارت "هواتف ذات صلة" */
.hp-mobile-grid .hp-rel-card{
    position:relative;
    border:1px solid #e8e8e8;
    border-radius:8px;
    background:#fff;
    display:flex;
    flex-direction:column;
    padding:0;
    height:auto;
    min-height:200px;
    text-decoration:none;
    color:inherit;
    overflow:hidden;
    transition:box-shadow .2s, transform .2s;
    min-width:0;
}
.hp-mobile-grid .hp-rel-card:hover{
    box-shadow:0 4px 14px rgba(0,0,0,.10);
    transform:translateY(-2px);
}

/* ✨ تأثير اللمعة العابرة (Shine / Glare) */
.hp-mobile-grid .hp-rel-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    z-index:3;
    width:50%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%
    );
    transform:skewX(-20deg);
    opacity:0;
}
.hp-mobile-grid .hp-rel-card:hover::after{
    animation:hp-shine .85s ease;
}
.hp-mobile-grid .m-card-link{
    text-decoration:none;
    color:inherit;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:0;
}
.hp-mobile-grid .m-card-thumb-wrap{
    aspect-ratio:1 / 1;
    width:100%;
    max-height:150px;
    overflow:hidden;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hp-mobile-grid .m-card-thumb-wrap img,
.hp-mobile-grid .m-card-thumb{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.hp-mobile-grid .m-card-brand{
    display:block;
    color:var(--hp-primary);
    font-size:11px;
    font-weight:700;
    text-align:center;
    direction:rtl;
}
.hp-mobile-grid .m-card-title{
    margin:0;
    font-size:13px;
    font-weight:700;
    color:var(--hp-text);
    line-height:1.6;
    text-align:center;
    direction:rtl;
    word-break:break-word;
    overflow-wrap:break-word;
}

.hp-empty{
    padding:18px;
    border:1px dashed var(--hp-border);
    background:#ffffff;
    color:var(--hp-muted);
    text-align:center;
    border-radius:var(--hp-radius);
    font-size:13px;
}

/* ===== Brands ===== */
.hp-brand-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}

.hp-brand-card{
    background:#fff;
    border:1px solid var(--hp-border);
    border-radius:var(--hp-radius);
    padding:18px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:var(--hp-text);
    box-shadow:var(--hp-shadow);
    transition:.18s ease;
    min-height:140px;
}

.hp-brand-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--hp-shadow-hover);
    border-color:#f3b6b6;
}

.hp-brand-card img{
    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:10px;
}

.hp-brand-name{
    font-size:14px;
    font-weight:700;
    text-align:center;
}
/* مسافة بصرية بين الهيرو والأقسام بعده */
.hp-section--hero{
    margin-bottom:24px;
}

/* زر "المزيد" الموحّد لكل الأقسام — على اليسار */
.hp-more-brands-wrap,
.hp-more-wrap{
    display:flex;
    justify-content:flex-end;
    margin-top:14px;
}
.hp-more-brands-btn,
.hp-more-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 22px;
    background:#cc0000;
    color:#fff;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 2px 8px rgba(204,0,0,0.25);
    transition:background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.hp-more-brands-btn:hover,
.hp-more-btn:hover{
    background:#a50000;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 4px 14px rgba(204,0,0,0.35);
}


/* ===== Apps ===== */
@media (max-width: 991px){
    .hp-mix-grid{
        grid-template-columns:1.5fr 1fr 1fr;
    }
    .hp-post-grid,
    .hp-mobile-grid,
    .hp-brand-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 767px){
    .hp-mix-grid{
        grid-template-columns:1fr 1fr;
    }
    .hp-mix-card--featured{
        grid-column:1 / -1;
        grid-row:auto;
        min-height:300px;
    }
    .hp-mix-card--featured .hp-mix-thumb{
        min-height:300px;
    }
    .hp-mix-card:not(.hp-mix-card--featured){
        min-height:165px;
    }
    .hp-post-grid,
    .hp-mobile-grid,
    .hp-brand-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
    }
    .hp-mix-name{
        font-size:12px;
    }
    .hp-mix-card--featured .hp-mix-name{
        font-size:18px;
    }
}

@media (max-width: 480px){
    .hp-home{
        padding:10px;
    }
    .hp-title{
        font-size:14px;
        padding:6px 11px;
    }
    .hp-mix-grid{
        grid-template-columns:1fr;
    }
    .hp-mix-card--featured,
    .hp-mix-card--featured .hp-mix-thumb{
        min-height:250px;
    }
    .hp-mix-card:not(.hp-mix-card--featured){
        min-height:180px;
    }
    .hp-mix-card:not(.hp-mix-card--featured) .hp-mix-thumb{
        height:180px;
    }
    .hp-post-grid,
    .hp-mobile-grid,
    .hp-brand-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* Smart TV / شاشات كبيرة جدًا — نفس تخطيط الديسكتوب، تكبير القراءة فقط لمسافة المشاهدة البعيدة */
@media (min-width: 1900px) {
    .hp-mix-name { font-size: 15px; }
    .hp-mix-card--featured .hp-mix-name { font-size: 24px; }
    .hp-mobile-grid .m-card-title { font-size: 15px; }
    .hp-title { font-size: 19px; }
}