/* =========================================================
 * Al-Jathnan — Global Components & Utilities
 * ======================================================= */

/* ---------- Containers ---------- */
.aj-container {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container));
    margin-inline: auto;
}

.aj-container--wide {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container-wide));
    margin-inline: auto;
}

.aj-container--narrow {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container-narrow));
    margin-inline: auto;
}

/* ---------- Sections ---------- */
.aj-section {
    position: relative;
    padding-block: var(--aj-section-space);
}

.aj-section--compact {
    padding-block: var(--aj-section-space-sm);
}

.aj-section--no-top {
    padding-block-start: 0;
}

.aj-section--no-bottom {
    padding-block-end: 0;
}

/* ---------- Surfaces ---------- */
.aj-surface--light {
    background: var(--aj-cream);
    color: var(--aj-charcoal);
}

.aj-surface--warm {
    background: var(--aj-cream-warm);
    color: var(--aj-charcoal);
}

.aj-surface--gold-soft {
    background: var(--aj-gold-soft);
    color: var(--aj-navy);
}

.aj-surface--brand {
    background: var(--aj-navy);
    color: var(--aj-white);
}

.aj-surface--dark {
    background: var(--aj-navy-deep);
    color: var(--aj-white);
}

/* Dark surface: قلّب ألوان النصوص */
.aj-surface--brand h1,
.aj-surface--brand h2,
.aj-surface--brand h3,
.aj-surface--brand h4,
.aj-surface--brand .aj-display,
.aj-surface--brand .aj-section-title,
.aj-surface--dark h1,
.aj-surface--dark h2,
.aj-surface--dark h3,
.aj-surface--dark h4,
.aj-surface--dark .aj-display,
.aj-surface--dark .aj-section-title {
    color: var(--aj-white);
}

.aj-surface--brand p,
.aj-surface--brand li,
.aj-surface--dark p,
.aj-surface--dark li {
    color: rgba(255, 255, 255, 0.78);
}

.aj-surface--brand .aj-eyebrow,
.aj-surface--dark .aj-eyebrow {
    color: var(--aj-gold-bright);
}

/* ---------- Buttons ---------- */
.aj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding-inline: 28px;
    border: 1.5px solid transparent;
    border-radius: var(--aj-radius-pill);
    font-family: var(--aj-font-body);
    font-size: var(--aj-text-base);
    font-weight: var(--aj-weight-bold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--aj-duration) var(--aj-ease),
        background-color var(--aj-duration-fast) var(--aj-ease-soft),
        border-color var(--aj-duration-fast) var(--aj-ease-soft),
        color var(--aj-duration-fast) var(--aj-ease-soft),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-btn:hover {
    transform: translateY(-2px);
}

.aj-btn:active {
    transform: translateY(0);
}

.aj-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Primary — Navy */
.aj-btn--primary,
a.aj-btn--primary,
a.aj-btn--primary:visited {
    background: var(--aj-navy);
    color: var(--aj-white);
    box-shadow: 0 12px 30px rgba(10, 37, 64, 0.22);
}

.aj-btn--primary:hover,
a.aj-btn--primary:hover,
a.aj-btn--primary:focus {
    background: var(--aj-navy-soft);
    color: var(--aj-white);
    box-shadow: 0 16px 40px rgba(10, 37, 64, 0.28);
}

/* Gold */
.aj-btn--gold,
a.aj-btn--gold,
a.aj-btn--gold:visited {
    background: var(--aj-gold);
    color: var(--aj-navy-deep);
    box-shadow: var(--aj-shadow-gold);
}

.aj-btn--gold:hover,
a.aj-btn--gold:hover,
a.aj-btn--gold:focus {
    background: var(--aj-gold-bright);
    color: var(--aj-navy-deep);
}

/* Ghost */
.aj-btn--ghost,
a.aj-btn--ghost,
a.aj-btn--ghost:visited {
    border-color: var(--aj-line-strong);
    background: transparent;
    color: var(--aj-navy);
}

.aj-btn--ghost:hover,
a.aj-btn--ghost:hover,
a.aj-btn--ghost:focus {
    border-color: var(--aj-navy);
    background: var(--aj-white);
    color: var(--aj-navy);
}

/* Ghost Light — على خلفية داكنة */
.aj-btn--ghost-light,
a.aj-btn--ghost-light,
a.aj-btn--ghost-light:visited {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: var(--aj-white);
}

.aj-btn--ghost-light:hover,
a.aj-btn--ghost-light:hover,
a.aj-btn--ghost-light:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: var(--aj-white);
}

/* WhatsApp — أخضر */
.aj-btn--whatsapp,
a.aj-btn--whatsapp,
a.aj-btn--whatsapp:visited {
    background: #25D366;
    color: var(--aj-white);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.28);
}

.aj-btn--whatsapp:hover,
a.aj-btn--whatsapp:hover,
a.aj-btn--whatsapp:focus {
    background: #1EBE5D;
    color: var(--aj-white);
}

/* ---------- Button Sizes ---------- */
.aj-btn--sm {
    min-height: 44px;
    padding-inline: 20px;
    font-size: var(--aj-text-sm);
}

.aj-btn--lg {
    min-height: 62px;
    padding-inline: 36px;
    font-size: var(--aj-text-md);
}

/* ---------- Utilities ---------- */
.aj-text-center { text-align: center; }
.aj-text-right  { text-align: right; }
.aj-text-left   { text-align: left; }

.aj-relative { position: relative; }
.aj-absolute { position: absolute; }
.aj-hidden   { display: none !important; }
.aj-sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Section Header (مشترك بين السكشنات) ---------- */
.aj-section-head {
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}

.aj-section-head--right {
    margin-inline: 0;
    text-align: right;
}

.aj-section-head .aj-eyebrow {
    justify-content: center;
}

.aj-section-head--right .aj-eyebrow {
    justify-content: flex-start;
}

.aj-section-head .aj-lead {
    margin-inline: auto;
    margin-top: 18px;
}

.aj-section-head--right .aj-lead {
    margin-inline: 0;
}

/* ---------- Divider / Rule ---------- */
.aj-rule {
    width: 100%;
    height: 1px;
    background: var(--aj-line);
    border: 0;
    margin: 0;
}

.aj-rule--gold {
    background: linear-gradient(90deg, transparent, var(--aj-gold), transparent);
    height: 2px;
    max-width: 80px;
    margin-inline: auto;
}

/* ---------- Card Base ---------- */
.aj-card {
    position: relative;
    background: var(--aj-white);
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius);
    padding: clamp(24px, 3vw, 36px);
    transition:
        transform var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease),
        border-color var(--aj-duration-fast) var(--aj-ease-soft);
}

.aj-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--aj-shadow);
    border-color: var(--aj-line-gold);
}

/* ---------- Pattern / Decoration ---------- */
.aj-pattern-gold {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(201, 169, 97, 0.08), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(201, 169, 97, 0.06), transparent 45%);
}

/* ---------- Responsive Padding ---------- */
@media (max-width: 767px) {
    .aj-section-head {
        margin-bottom: 32px;
    }
    .aj-btn {
        min-height: 50px;
        padding-inline: 22px;
        font-size: var(--aj-text-sm);
    }
    .aj-btn--lg {
        min-height: 56px;
        padding-inline: 28px;
        font-size: var(--aj-text-base);
    }
}