@charset "UTF-8";

/**
 * تجاوب شامل — يشمل كل أحجام الآيباد (حتى 1199px)
 * sm: ≤767  |  md/iPad: 768–1199  |  lg: ≥1200
 */

/* ─── أساس: ملء عرض الشاشة ─── */
html {
    width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

main,
.navbar,
.site-footer,
main > section,
main > header {
    width: 100%;
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: min(100%, var(--container-max));
    margin-inline: auto;
}

/* ═══════════════════════════════════════════
   TABLET & iPad — 768px إلى 1199px
   (يشمل iPad Pro بعرض 1024px)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --container-max: 100%;
        --container-pad: clamp(1.25rem, 3.5vw, 2.5rem);
        --section-pad-y: clamp(3.5rem, 6vw, 5rem);
        --nav-height: 72px;
    }

    /* ── تنقل أفقي — بدون همبرغر ── */
    .nav-backdrop,
    .nav-toggle {
        display: none !important;
    }

    .nav-container {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .logo {
        order: 0;
        max-width: none;
        font-size: clamp(1.1rem, 2vw, 1.45rem);
        white-space: nowrap;
    }

    .nav-links {
        display: flex !important;
        position: static !important;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2px;
        margin: 0 !important;
        padding: 0 !important;
        max-height: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links li {
        margin: 0 !important;
        border: none !important;
        flex-shrink: 0;
    }

    .nav-links a {
        display: block;
        padding: 10px 12px !important;
        min-height: var(--touch-min) !important;
        line-height: 1.2;
        font-size: clamp(0.8rem, 1.6vw, 0.92rem) !important;
        white-space: nowrap;
        border-radius: 10px;
    }

    .nav-links a:hover,
    .nav-links a.is-active {
        background: rgba(108, 92, 231, 0.22);
    }

    html[dir="ltr"] .nav-links li {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .lang-toggle {
        order: 2;
        margin-inline-start: 0;
        flex-shrink: 0;
    }

    /* ── Hero — يملأ العرض ── */
    .hero {
        min-height: auto;
        width: 100%;
        padding-top: calc(var(--nav-height) + var(--safe-top) + 2rem);
        padding-bottom: 3rem;
    }

    .hero .container {
        width: 100%;
        max-width: 100%;
    }

    .hero-card {
        width: 100%;
        max-width: none;
        padding: clamp(2rem, 4vw, 3rem);
    }

    .hero h1 {
        font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    }

    .hero-subtitle {
        font-size: clamp(1.25rem, 3vw, 2rem);
    }

    .hero p {
        font-size: clamp(1rem, 2.2vw, 1.25rem);
        max-width: 50ch;
        margin-inline: auto;
    }

    .hero-btns {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .hero-btns .btn-main,
    .hero-btns .btn-outline {
        width: auto;
        max-width: none;
        flex: 0 1 auto;
    }

    /* ── إحصائيات ── */
    .stats-section {
        width: 100%;
        margin-top: -1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(0.75rem, 2vw, 1.25rem);
    }

    /* ── أقسام بعرض كامل ── */
    .gallery-section,
    .draw-section,
    .projects-section,
    .about-section,
    .journey-section,
    .goals-section,
    .contact-section {
        width: 100%;
    }

    .section-title {
        font-size: clamp(1.85rem, 4vw, 2.75rem);
        margin-bottom: 2rem;
    }

    .section-lead {
        margin-top: -1.5rem;
        max-width: min(640px, 90%);
    }

    /* ── معرض: عمودان ── */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 1.5rem);
        width: 100%;
    }

    .image-wrapper {
        height: clamp(220px, 28vw, 320px);
    }

    .gallery-filters {
        width: 100%;
    }

    /* ── عنّي ── */
    .about-content {
        flex-direction: row;
        align-items: center;
        text-align: start;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        padding: clamp(1.75rem, 4vw, 2.5rem);
        width: 100%;
    }

    .profile-placeholder {
        flex-shrink: 0;
        width: clamp(180px, 28vw, 260px);
        height: clamp(180px, 28vw, 260px);
        font-size: clamp(4rem, 10vw, 6rem);
        margin-inline: 0;
    }

    .skills-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
    }

    /* ── مشاريع وأهداف ── */
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 1.5rem);
    }

    .goals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 1.5rem);
    }

    /* ── رحلة ── */
    .timeline {
        max-width: 100%;
        width: 100%;
    }

    /* ── رسم ── */
    .draw-panel {
        width: 100%;
    }

    .draw-toolbar {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .draw-canvas-wrap,
    #draw-canvas {
        width: 100%;
    }

    /* ── تواصل ── */
    .contact-wrapper {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(1.5rem, 4vw, 2.5rem);
        padding: clamp(1.75rem, 4vw, 2.5rem);
        width: 100%;
    }

    .contact-info {
        flex: 0 0 min(340px, 38%);
    }

    .contact-info .section-title {
        text-align: start;
    }

    .contact-form-container {
        flex: 1;
        min-width: 0;
    }

    .social-links {
        justify-content: flex-start;
    }

    /* ── تذييل ── */
    .footer-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand nav"
            "copy copy";
        align-items: center;
        text-align: start;
        gap: 1rem 2rem;
        width: 100%;
    }

    .footer-brand {
        grid-area: brand;
        text-align: start;
    }

    .footer-nav {
        grid-area: nav;
        justify-content: flex-end;
    }

    .footer-copy {
        grid-area: copy;
        text-align: center;
    }

    /* ── Lightbox ── */
    .lightbox {
        max-width: min(92vw, 880px);
    }

    /* ── PWA ── */
    .pwa-install {
        left: 50%;
        right: auto;
        max-width: min(480px, calc(100% - 32px));
        transform: translateX(-50%) translateY(110%);
    }

    .pwa-install.is-visible {
        transform: translateX(-50%) translateY(0);
    }

    body.has-pwa-banner .back-to-top {
        bottom: calc(1.5rem + var(--safe-bottom));
    }
}

/* ═══════════════════════════════════════════
   iPad عمودي ضيق (768–900px)
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) {
    .nav-container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo lang"
            "nav nav";
    }

    .logo {
        grid-area: logo;
    }

    .lang-toggle {
        grid-area: lang;
        justify-self: end;
    }

    .nav-links {
        grid-area: nav;
        width: 100%;
        justify-content: flex-start;
        padding-top: 4px !important;
    }

    .about-content {
        flex-direction: column;
        text-align: center;
    }

    .profile-placeholder {
        margin-inline: auto;
    }

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

    .contact-wrapper {
        flex-direction: column;
    }

    .contact-info {
        flex: none;
        width: 100%;
    }

    .contact-info .section-title {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

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

    .goals-grid .goal-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 420px;
        margin-inline: auto;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════
   Desktop كبير — ≥1200px
   ═══════════════════════════════════════════ */
@media (min-width: 1200px) {
    :root {
        --container-max: 1200px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-card {
        max-width: 900px;
    }
}

/* ═══════════════════════════════════════════
   Landscape phones قصيرة
   ═══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--safe-top) + 0.5rem);
        padding-bottom: 1rem;
    }

    .hero-card {
        padding: 1rem 1.25rem;
    }

    .hero h1 {
        font-size: 1.65rem;
    }

    .hero-shapes .shape {
        display: none;
    }
}

/* ═══════════════════════════════════════════
   لوحة الإدارة — تابلت
   ═══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
    body.admin-body .container-wide,
    body.admin-body .admin-header {
        max-width: 100%;
        width: 100%;
    }

    body.admin-body .messages-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin-body .message-card:first-child {
        grid-column: 1 / -1;
    }
}