/* =========================================================
   AI Hamdani - Mobile CSS
   File: home/mobile.css

   الفكرة:
   - يحافظ على تصميم الديسكتوب كما هو.
   - يطبق هذا التصميم فقط على الجوال.
   - الهيرو: النص يسار والصورة يمين/خلفية.
   - الإعلانات: تبقى أسطوانية 3D حتى على الجوال.
========================================================= */

/* =========================================
   MOBILE DESIGN (FIXED HERO LEFT/RIGHT)
========================================= */

@media (max-width: 768px) {
    /* =======================
             حل مشكلة خروج النص من الإعلانات
        ======================= */

    /* لكل البطاقات والإعلانات */
    .offer-card,
    .announcement-card,
    .uni-card,
    .program-card,
    [class*="card"] {
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* للنصوص الطويلة بدون مسافات (مثل المعرفات والرموز) */
    .offer-card p,
    .announcement-card p,
    .uni-card p,
    .program-card p,
    [class*="card"] p,
    [class*="card"] span,
    [class*="card"] h3,
    [class*="card"] h4 {
        word-break: break-all !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* النص الطويل جدًا مثل التواريخ والرموز */
    .offer-card [class*="date"],
    .offer-card [class*="time"],
    .uni-card [class*="code"],
    .uni-card [class*="reference"] {
        font-size: 9px !important;
        word-break: break-all !important;
        display: inline-block !important;
        max-width: 100% !important;
    }

    /* لأي نص بالبطاقة */
    .card-text,
    .card-content {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .hero {
        position: relative;
        height: 310px;
        min-height: 310px;
        display: block;
        overflow: hidden;
        margin: 0 -12px;
        border-radius: 0 0 22px 22px;
        background: #eef4ff;
    }

    .hero-copy {
        position: relative;
        z-index: 20;
        width: 52%;
        max-width: 190px;
        height: 310px;
        padding: 22px 0 18px 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }

    .hero h1 {
        font-size: 21px;
        line-height: 1;
        letter-spacing: -0.04em;
    }

    .hero p {
        font-size: 10.5px;
        line-height: 1.32;
        margin-top: 6px;
    }

    .checks {
        margin-top: 7px;
        gap: 4px;
        font-size: 9.2px;
        line-height: 1.25;
    }

    .checks li {
        gap: 5px;
    }

    .checks i {
        width: 12px;
        height: 12px;
        min-width: 12px;
        font-size: 7px;
    }

    .hero-actions {
        margin-top: 9px;
        width: 132px;
        gap: 5px;
        display: grid;
    }

    .btn {
        height: 29px;
        font-size: 9.5px;
        padding: 0 8px;
        border-radius: 8px;
    }

    .hero-visual {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero-layer {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hero-visual:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 6;
        pointer-events: none;
        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.90) 24%,
                rgba(255, 255, 255, 0.68) 42%,
                rgba(255, 255, 255, 0.32) 58%,
                rgba(255, 255, 255, 0.08) 74%,
                rgba(255, 255, 255, 0) 100%);
    }

    .plane {
        right: 8px;
        top: 14px;
        font-size: 20px;
    }

    .plane:before {
        width: 62px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .why-card {
        padding: 16px 10px;
        border-radius: 14px;
    }

    .why-icon {
        width: 46px;
        height: 46px;
    }

    .why-card h3 {
        font-size: 13px;
    }

    .why-card p {
        font-size: 10.5px;
    }

    /* =======================
         FINAL
      ======================= */

    .final h2 {
        font-size: 22px;
    }

    .apply-now-btn {
        width: 100%;
    }

    /* =======================
         تنسيق الإعلانات - تصغير الحجم
    ======================= */

    /* القسم الرئيسي للإعلانات */
    .offers-section,
    .announcements-section,
    .offers-layout {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* كل إعلان على حدة */
    .offer-card,
    .announcement-card,
    .offers-layout>* {
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        min-height: auto !important;
    }

    /* صورة الإعلان أو الأيقونة */
    .offer-card img,
    .announcement-card img,
    .offer-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* عنوان الإعلان */
    .offer-card h3,
    .announcement-card h3,
    .offer-title {
        font-size: 13px !important;
        margin: 4px 0 !important;
    }

    /* نص الإعلان */
    .offer-card p,
    .announcement-card p,
    .offer-desc {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* زر الإعلان إذا موجود */
    .offer-card .btn,
    .announcement-card .btn,
    .offer-btn {
        padding: 4px 10px !important;
        font-size: 9px !important;
        height: 26px !important;
        margin-top: 5px !important;
    }

    /* تقليل المسافات بين الإعلانات في حالة كانوا صفين */
    .offers-grid {
        gap: 6px !important;
    }   
}

@media (max-width: 390px) {

    .hero {
        height: 290px;
    }

    .hero-copy {
        width: 54%;
        max-width: 180px;
    }

    .hero h1 {
        font-size: 19px;
    }

    .hero p {
        font-size: 10px;
    }

    .checks {
        font-size: 8.5px;
    }

    .hero-layer {
        background-size: 122% auto;
    }

    .why-grid {
        gap: 8px;
    }
}


/* =======================
   TABLET / IPAD
======================= */
@media (min-width: 769px) and (max-width: 1150px) {

    .hero {
        grid-template-columns: 46% 54%;
        min-height: 420px;
    }

    .hero-copy {
        padding: 44px 0 44px 36px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .offers-layout {
        grid-template-columns: 1fr;
    }

    .side-ctas {
        grid-template-columns: 1fr 1fr;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .uni-card {
        flex-basis: 280px;
    }
}

/* ============================
   iPhone Optimization
============================ */

/* iPhone (12 / 13 / 14 / 15) */
@media (max-width: 430px) {

    body {
        -webkit-text-size-adjust: 100%;
    }

    .hero {
        height: 300px;
        min-height: 300px;
    }

    .hero-copy {
        width: 55%;
        max-width: 180px;
        padding-left: 12px;
    }

    .hero h1 {
        font-size: 20px;
    }

    .hero p {
        font-size: 10px;
    }

    .checks {
        font-size: 8.5px;
    }

    .hero-actions {
        width: 125px;
    }

    .btn {
        height: 28px;
        font-size: 9px;
    }

    /* الصورة تكون أوضح */
    .hero-layer {
        background-repeat: no-repeat;
        background-position: 100% center;
    }

    /* ضبط safe area */
    .home {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* WHY Section */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .why-card {
        padding: 14px 8px;
    }

    .why-card h3 {
        font-size: 12px;
    }

    .why-card p {
        font-size: 10px;
    }

}


/* iPhone Mini / SE */
@media (max-width: 375px) {

    .hero {
        height: 280px;
    }

    .hero-copy {
        width: 58%;
    }

    .hero h1 {
        font-size: 18px;
    }

    .hero p {
        font-size: 9.5px;
    }

    .checks {
        font-size: 8px;
    }

    .hero-actions {
        width: 115px;
    }

    .btn {
        height: 26px;
        font-size: 8.5px;
    }

    .hero-layer {
        background-repeat: no-repeat;
    }

}


/* iPhone Pro Max */
@media (min-width: 414px) and (max-width: 430px) {

    .hero {
        height: 320px;
    }

    .hero-copy {
        width: 50%;
    }

    .hero h1 {
        font-size: 22px;
    }

    .hero p {
        font-size: 11px;
    }

    .hero-layer {
        background-repeat: no-repeat;
    }

}