/* ==========================================================================
   Al Masa -- interactive cards and the gold portrait frame
   Loaded on every page after almasa-ui.css. Behaviour: public/js/almasa-fx.js
   (mouse-following light and gentle tilt).

   Card families
     .am-flash    numbers on the Portfolio page (icon + faded photo, flips to gold on hover)
     .am-dept     departments on the Organization Chart page
     .am-feature  the ten core activities on the About page
   Every card gets .am-fx from the script, which adds a light that follows the mouse and a
   slight 3-D tilt. Hover also flips the colours: navy <-> gold, so the card clearly answers
   the pointer. Touch devices and visitors who ask for less motion get the colour change only.
   ========================================================================== */

/* ---------- shared pointer effect ---------- */
.am-fx { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; isolation: isolate; }
.am-fx.is-tilting {
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
    transition: transform 0.12s ease-out, background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.am-fx__glow {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0;
    background: radial-gradient(circle 15rem at var(--mx) var(--my), rgba(255, 244, 205, 0.5), rgba(217, 178, 90, 0.16) 45%, transparent 70%);
    transition: opacity 0.3s ease;
}
.am-fx:hover > .am-fx__glow, .am-fx:focus-within > .am-fx__glow { opacity: 1; }
/* our own card families keep their content above the glow */
:is(.am-flash, .am-dept, .am-feature).am-fx > :not(.am-fx__glow) { position: relative; z-index: 2; }
:is(.am-flash, .am-dept, .am-feature).am-fx > :is(.am-flash__bg, .am-dept__ghost, .am-flash__shade) { position: absolute; }
.am-fx > .am-flash__bg, .am-fx > .am-dept__ghost { z-index: 0; }

/* ==========================================================================
   Portfolio numbers (flash cards): large icon + faded photograph, flips to gold on hover
   ========================================================================== */
.am-flash--visual { min-height: 15.5rem; padding-top: 1.6rem; gap: 0.5rem; align-items: center; background: #0B1556; }
.am-flash__bg {
    inset: 0; background-image: var(--img); background-size: cover; background-position: center; opacity: 0.5; transform: scale(1.04);
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.am-flash--visual::before { z-index: 3; }
.am-flash--visual > .am-flash__shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 21, 86, 0.28) 0%, rgba(11, 21, 86, 0.78) 62%, rgba(11, 21, 86, 0.95) 100%);
    transition: opacity 0.4s ease;
}
.am-flash__icon {
    display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 1.25rem; font-size: 2.1rem; margin: 0 auto 0.3rem;
    color: var(--am-gold-light); background: rgba(11, 21, 86, 0.82); border: 1px solid rgba(217, 178, 90, 0.7);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.8), 0 0 0 5px rgba(217, 178, 90, 0.1);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.am-flash--visual:hover { background: linear-gradient(160deg, #F6DE9A 0%, #D9B25A 55%, #B78E3B 100%); border-color: #FFF3C4; }
.am-flash--visual:hover > .am-flash__shade { opacity: 0; }
.am-flash--visual:hover .am-flash__bg { opacity: 0.22; transform: scale(1.12); mix-blend-mode: multiply; }
.am-flash--visual:hover .am-flash__icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); background: #0B1556; color: #F6DE9A; box-shadow: 0 18px 30px -14px rgba(11, 21, 86, 0.9), 0 0 0 6px rgba(11, 21, 86, 0.14); }
.am-flash--visual:hover .am-flash__num { background: none; -webkit-text-fill-color: #0B1556; color: #0B1556; }
.am-flash--visual:hover .am-flash__label { color: #0B1556; }
.am-flash--total .am-flash__icon { width: 5.6rem; height: 5.6rem; font-size: 2.6rem; margin: 0; }

/* ==========================================================================
   Departments (Organization Chart)
   ========================================================================== */
.am-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }
.am-dept {
    --card-bg: #FFFDF8; --card-fg: #0B1556; --card-soft: #475569;
    display: flex; flex-direction: column; gap: 1.1rem; overflow: hidden; padding: 1.6rem; border-radius: 1.3rem; color: var(--card-fg);
    background: var(--card-bg); border: 1px solid rgba(183, 142, 59, 0.32); box-shadow: 0 20px 40px -28px rgba(11, 21, 86, 0.5);
    transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}
.am-dept::after {                       /* gold edge that grows across the top on hover */
    content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, transparent, #D9B25A, transparent); transform: scaleX(0.2); opacity: 0.6; transition: transform 0.5s ease, opacity 0.4s ease;
}
.am-dept__ghost { inset-inline-end: -1.2rem; bottom: -1.6rem; font-size: 9rem; line-height: 1; color: #0B1556; opacity: 0.06; transform: rotate(-12deg); transition: transform 0.6s ease, opacity 0.4s ease, color 0.4s ease; pointer-events: none; }
.am-dept__head { display: flex; align-items: center; gap: 1rem; }
.am-dept__icon {
    flex: none; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 1.15rem; font-size: 1.95rem;
    color: var(--am-gold-light); background: linear-gradient(145deg, #0B1556, #1b2a8f); border: 1px solid rgba(217, 178, 90, 0.55);
    box-shadow: 0 14px 24px -14px rgba(11, 21, 86, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease, color 0.35s ease;
}
.am-dept__title { flex: 1; min-width: 0; }
.am-dept__title h3 { margin: 0 !important; font-size: 1.25rem !important; line-height: 1.25; }
.am-dept__badge { display: inline-block; margin-top: 0.35rem; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; background: rgba(183, 142, 59, 0.16); color: #7A5A1A; transition: background 0.35s, color 0.35s; }
.am-dept__people { display: grid; gap: 0.7rem; }
.am-dept__person { padding: 0.8rem 1rem; border-radius: 0.9rem; background: #F4EFE4; border: 1px solid rgba(183, 142, 59, 0.2); transition: background 0.35s ease, border-color 0.35s ease; }
.am-dept__person h4 { margin: 0 !important; font-size: 1.05rem !important; }
.am-dept__person p { margin: 0.15rem 0 0; font-size: 0.9375rem; color: var(--card-soft); }
.am-dept__text { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--card-soft); }

.am-dept:hover {
    --card-bg: #0B1556; --card-fg: #F8F2E6; --card-soft: rgba(248, 242, 230, 0.82);
    background: linear-gradient(155deg, #0B1556 0%, #1b2a8f 100%); border-color: #D9B25A; box-shadow: 0 28px 50px -24px rgba(3, 17, 105, 0.9);
}
.am-dept:hover::after { transform: scaleX(1); opacity: 1; }
.am-dept:hover .am-dept__icon { transform: translateY(-3px) rotate(-6deg) scale(1.07); background: linear-gradient(145deg, #F6DE9A, #D9B25A); color: #0B1556; }
.am-dept:hover .am-dept__ghost { transform: rotate(0deg) scale(1.1); opacity: 0.1; color: #D9B25A; }
.am-dept:hover :is(h3, h4) { color: #F8F2E6 !important; }
.am-dept:hover .am-dept__person { background: rgba(255, 255, 255, 0.08); border-color: rgba(217, 178, 90, 0.4); }
.am-dept:hover .am-dept__person p, .am-dept:hover .am-dept__text { color: rgba(248, 242, 230, 0.85) !important; }
.am-dept:hover .am-dept__badge { background: #D9B25A; color: #0B1556; }

/* ==========================================================================
   Core activities (About)
   ========================================================================== */
.am-feature {
    --card-fg: #0B1556; --card-soft: #475569;
    display: flex; flex-direction: column; gap: 0.9rem; padding: 1.6rem 1.4rem 1.5rem; border-radius: 1.2rem; overflow: hidden;
    background: #FFFDF8; border: 1px solid rgba(183, 142, 59, 0.32); box-shadow: 0 18px 36px -26px rgba(11, 21, 86, 0.5);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}
.am-feature__icon {
    display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 1.1rem; font-size: 1.9rem; color: var(--am-gold-light);
    background: linear-gradient(145deg, #0B1556, #1b2a8f); border: 1px solid rgba(217, 178, 90, 0.55);
    box-shadow: 0 12px 22px -14px rgba(11, 21, 86, 0.8); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s, color 0.35s;
}
.am-feature h4 { margin: 0 !important; font-size: 1.1rem !important; }
.am-feature p { margin: 0; font-size: 0.95rem !important; line-height: 1.65; color: var(--card-soft); }
.am-feature:hover { background: linear-gradient(155deg, #0B1556, #1b2a8f); border-color: #D9B25A; box-shadow: 0 26px 46px -24px rgba(3, 17, 105, 0.9); }
.am-feature:hover .am-feature__icon { transform: translateY(-3px) rotate(-6deg) scale(1.07); background: linear-gradient(145deg, #F6DE9A, #D9B25A); color: #0B1556; }
.am-feature:hover h4 { color: #F8F2E6 !important; }
.am-feature:hover p { color: rgba(248, 242, 230, 0.85) !important; }

/* ---------- dark theme: cards sit on navy, hover flips to gold ---------- */
html.dark .am-dept, html.dark .am-feature { --card-bg: #0F1857; --card-fg: #F8F2E6; --card-soft: rgba(248, 242, 230, 0.8); background: #0F1857 !important; border-color: rgba(217, 178, 90, 0.3) !important; }
html.dark .am-dept__ghost { color: #D9B25A; opacity: 0.07; }
html.dark .am-dept__person { background: rgba(255, 255, 255, 0.06); border-color: rgba(217, 178, 90, 0.25); }
html.dark .am-dept__badge { background: rgba(217, 178, 90, 0.18); color: #F6DE9A; }
html.dark .am-dept :is(h3, h4), html.dark .am-feature h4 { color: #F8F2E6 !important; }
html.dark .am-dept__person p, html.dark .am-dept__text, html.dark .am-feature p { color: rgba(248, 242, 230, 0.8) !important; }
html.dark .am-dept:hover, html.dark .am-feature:hover { background: linear-gradient(155deg, #F6DE9A, #D9B25A 60%, #B78E3B) !important; border-color: #FFF3C4 !important; }
html.dark .am-dept:hover :is(h3, h4), html.dark .am-feature:hover h4 { color: #0B1556 !important; }
html.dark .am-dept:hover .am-dept__person p, html.dark .am-dept:hover .am-dept__text, html.dark .am-feature:hover p { color: #1F2A6B !important; }
html.dark .am-dept:hover .am-dept__icon, html.dark .am-feature:hover .am-feature__icon { background: #0B1556; color: #F6DE9A; }
html.dark .am-dept:hover .am-dept__person { background: rgba(11, 21, 86, 0.12); border-color: rgba(11, 21, 86, 0.3); }
html.dark .am-dept:hover .am-dept__badge { background: #0B1556; color: #F6DE9A; }
html.dark .am-dept:hover .am-dept__ghost { color: #0B1556; opacity: 0.12; }

/* ==========================================================================
   Executive portraits: a gold frame whose colour keeps moving
   ========================================================================== */
.am-exec-section { padding-block: clamp(4rem, 8vw, 6.5rem); border-block: 1px solid rgba(217, 178, 90, 0.6); color: var(--am-cream); }
.am-exec-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .am-exec-grid { grid-template-columns: 1fr 1fr; } }
.am-exec { max-width: 30rem; width: 100%; margin-inline: auto; }

.am-frame-wrap { position: relative; isolation: isolate; }
.am-frame {
    position: relative; z-index: 2; padding: 0.7rem; border-radius: 1.5rem;
    background: linear-gradient(135deg, #FFF3C4 0%, #D9B25A 22%, #8A6420 48%, #E8C26A 72%, #FFF3C4 100%); background-size: 300% 300%;
    box-shadow: 0 0 0 2px rgba(255, 236, 170, 0.55), 0 0 34px 6px rgba(217, 178, 90, 0.5), 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    animation: am-frame-glow 3.2s ease-in-out infinite alternate, am-frame-sheen 5s linear infinite;
}
.am-frame__inner { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 1.05rem; border: 3px solid #0B1556; background: #0B1556; }
.am-frame__inner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.am-frame-wrap:hover .am-frame__inner img { transform: scale(1.05); }
.am-frame__inner::after {                /* a soft sheen that crosses the portrait now and then */
    content: ''; position: absolute; inset-block: 0; width: 40%; inset-inline-start: -60%; transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 244, 205, 0.28), transparent); animation: am-frame-sweep 6s ease-in-out 1.5s infinite;
}
.am-frame__plate {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 3; padding: 3.2rem 1.4rem 1.2rem; text-align: center;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 43, 0.92) 70%);
}
.am-frame__plate strong { display: block; font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; color: #F6DE9A; }
html[lang="ar"] .am-frame__plate strong { letter-spacing: 0; text-transform: none; font-size: 1.2rem; }
.am-frame__crown {
    position: absolute; top: 1.1rem; inset-inline-start: 1.1rem; z-index: 3; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    font-size: 1.25rem; color: #0B1556; background: linear-gradient(145deg, #FFF3C4, #D9B25A); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7);
}

.am-exec__caption { text-align: center; margin-top: 2rem; }
.am-exec__role { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.9375rem; color: #F6DE9A; border: 1px solid rgba(217, 178, 90, 0.55); background: rgba(217, 178, 90, 0.1); }
.am-exec__caption h3 { margin: 0.9rem 0 0.2rem; font-size: clamp(1.6rem, 3vw, 2.1rem) !important; }
.am-exec__title { margin: 0 0 1rem; font-weight: 600; color: #F6DE9A; }
.am-exec__summary { max-width: 28rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.75; color: rgba(248, 242, 230, 0.88); }
.am-exec__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.am-exec__facts li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-radius: 0.8rem; font-size: 0.9375rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(217, 178, 90, 0.35); }
.am-exec__facts i { color: #F6DE9A; }

/* ---------- motion ---------- */
@keyframes am-frame-glow { from { box-shadow: 0 0 0 2px rgba(255, 236, 170, 0.5), 0 0 26px 4px rgba(217, 178, 90, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.8); } to { box-shadow: 0 0 0 2px rgba(255, 244, 205, 0.8), 0 0 48px 12px rgba(232, 178, 70, 0.65), 0 30px 60px -20px rgba(0, 0, 0, 0.8); } }
@keyframes am-frame-sheen { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }
@keyframes am-frame-sweep { 0%, 55% { inset-inline-start: -60%; } 100% { inset-inline-start: 140%; } }

@media (max-width: 700px) {
    .am-flash--visual { min-height: 13.5rem; }
}
@media (hover: none) {
    .am-fx.is-tilting { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .am-fx.is-tilting { transform: none; }
    .am-frame, .am-frame__inner::after { animation: none; }
    .am-dept, .am-feature, .am-flash, .am-flash__bg, .am-dept__icon, .am-feature__icon, .am-flash__icon { transition-duration: 0.01ms; }
}

/* ---------- department chips ---------- */
.am-dept__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.am-dept__chip { padding: 0.35rem 0.9rem; border-radius: 0.7rem; font-size: 0.9375rem; font-weight: 600; background: #F4EFE4; border: 1px solid rgba(183, 142, 59, 0.22); transition: background 0.35s, border-color 0.35s, color 0.35s; }
.am-dept:hover .am-dept__chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(217, 178, 90, 0.45); color: #F8F2E6; }
html.dark .am-dept__chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(217, 178, 90, 0.25); color: #F8F2E6; }
html.dark .am-dept:hover .am-dept__chip { background: rgba(11, 21, 86, 0.12); border-color: rgba(11, 21, 86, 0.3); color: #0B1556; }
@media (min-width: 1100px) { .am-dept--wide { grid-column: span 2; } }
.am-dept > div:not(.am-fx__glow) { display: flex; flex-direction: column; gap: 1.1rem; }
.am-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

/* ==========================================================================
   "Across the 7 Emirates": vector landmark card (partials/emirates_landmarks.blade.php)
   ========================================================================== */
.lm-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lm-sun {
    position: absolute; top: 14%; inset-inline-end: 12%; width: 5.5rem; height: 5.5rem; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #FFF6D1, #F6DE9A 40%, rgba(217, 178, 90, 0) 72%); box-shadow: 0 0 60px 20px rgba(217, 178, 90, 0.35);
    animation: lm-sun 6s ease-in-out infinite alternate;
}
.lm-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF3C4; opacity: 0.2; animation: lm-twinkle 3.4s ease-in-out infinite; animation-delay: calc(var(--n) * -0.37s); }
.lm-star:nth-child(2) { top: 12%; left: 8%; } .lm-star:nth-child(3) { top: 26%; left: 22%; } .lm-star:nth-child(4) { top: 8%; left: 36%; }
.lm-star:nth-child(5) { top: 34%; left: 47%; } .lm-star:nth-child(6) { top: 16%; left: 58%; } .lm-star:nth-child(7) { top: 40%; left: 70%; }
.lm-star:nth-child(8) { top: 7%; left: 78%; } .lm-star:nth-child(9) { top: 30%; left: 88%; } .lm-star:nth-child(10) { top: 46%; left: 12%; }
.lm-star:nth-child(11) { top: 22%; left: 94%; } .lm-star:nth-child(12) { top: 50%; left: 30%; } .lm-star:nth-child(13) { top: 5%; left: 64%; }
.lm-star:nth-child(14) { top: 44%; left: 84%; } .lm-star:nth-child(15) { top: 36%; left: 4%; } .lm-star:nth-child(16) { top: 18%; left: 44%; } .lm-star:nth-child(17) { top: 52%; left: 60%; }

html[lang="ar"] 
.lm-dune { fill: rgba(217, 178, 90, 0.16); stroke: none; }
.lm-ground { fill: none; stroke: rgba(246, 222, 154, 0.5); stroke-width: 1.5; }
.lm-art { opacity: 0; transition: opacity 0.5s ease; }
.lm-art .d { fill: none; stroke: #F6DE9A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lm-art.is-active { opacity: 1; animation: lm-float 7s ease-in-out infinite; }
.lm-art.is-active .d { animation: lm-draw 2.1s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
.lm-art.is-active .d:nth-child(2) { animation-delay: 0.15s; } .lm-art.is-active .d:nth-child(3) { animation-delay: 0.3s; } .lm-art.is-active .d:nth-child(4) { animation-delay: 0.45s; }
.lm-art.is-active .d:nth-child(5) { animation-delay: 0.6s; } .lm-art.is-active .d:nth-child(6) { animation-delay: 0.75s; } .lm-art.is-active .d:nth-child(7) { animation-delay: 0.9s; }
.lm-art.is-active .d.f { animation: lm-draw 2.1s cubic-bezier(0.45, 0, 0.2, 1) forwards, lm-fill 1s ease 1.5s forwards; }
.lm-spark { fill: #FFF3C4; animation: lm-twinkle 1.6s ease-in-out infinite; }
.lm-cabins circle { fill: #F6DE9A; stroke: none; }
.lm-art.is-active .lm-cabins { transform-origin: 200px 100px; animation: lm-spin 24s linear infinite; }
.lm-cable { fill: none; stroke: rgba(246, 222, 154, 0.8); stroke-width: 1.4; stroke-dasharray: 4 5; }
.lm-rider { fill: #FFF3C4; filter: drop-shadow(0 0 5px #F6DE9A); }
.lm-art:not(.is-active) .lm-rider, .lm-art:not(.is-active) .lm-cabins { visibility: hidden; }


@keyframes lm-draw { to { stroke-dashoffset: 0; } }
@keyframes lm-fill { to { fill: rgba(217, 178, 90, 0.16); } }
@keyframes lm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lm-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes lm-sun { to { transform: scale(1.12); box-shadow: 0 0 80px 28px rgba(217, 178, 90, 0.5); } }
@keyframes lm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lm-sun, .lm-star, .lm-art.is-active, .lm-spark, .lm-art.is-active .lm-cabins { animation: none; }
    .lm-art .d { stroke-dashoffset: 0; animation: none !important; }
    .lm-art.is-active .d.f { fill: rgba(217, 178, 90, 0.16); }
    .lm-sky,     }

/* ==========================================================================
   Emirates showcase: full-width section, one large card per emirate (partials/emirates_showcase.blade.php)
   The drawings reuse the .lm-* classes above (strokes, sky, sun).
   ========================================================================== */
.em-showcase { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem); border-block: 1px solid rgba(217, 178, 90, 0.7); color: #F8F2E6; }
.em-container { max-width: 80rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.em-head { text-align: center; max-width: 48rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.em-head h2 { margin: 0.6rem 0 1rem; }
.em-head p { margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.8; color: rgba(248, 242, 230, 0.9) !important; }
.em-head::after { content: ''; display: block; width: 3.5rem; height: 3px; margin: 1.3rem auto 0; background: var(--am-gold-light); border-radius: 3px; }

.em-viewport { position: relative; direction: ltr; overflow: hidden; padding-block: 1.2rem 0; }
.em-track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); width: max-content; margin: 0; padding: 0; list-style: none; transition: transform 1s cubic-bezier(0.22, 0.8, 0.24, 1); will-change: transform; }
.em-slide { flex: none; width: min(76rem, calc(100vw - 3rem)); opacity: 0.32; transform: scale(0.93); transition: opacity 0.8s ease, transform 0.8s ease; }
.em-slide.is-active { opacity: 1; transform: none; }

.em-card {
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(1rem, 3vw, 3rem);
    min-height: clamp(24rem, 36vw, 31rem); padding: clamp(1.4rem, 3vw, 2.8rem); border-radius: 1.8rem; border: 1px solid rgba(217, 178, 90, 0.75);
    background: linear-gradient(165deg, #070D3A 0%, #0B1556 45%, #1b2a8f 100%); box-shadow: 0 40px 70px -36px rgba(0, 0, 0, 0.85);
}
html[dir="rtl"] .em-card { direction: rtl; }
.em-card__art svg { display: block; width: 100%; height: auto; max-height: 27rem; overflow: visible; }
.em-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.em-card__no { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.18em; color: #F6DE9A; direction: ltr; }
.am-page .em-card h3 { margin: 0 !important; font-size: clamp(2.2rem, 4.6vw, 3.8rem) !important; line-height: 1.1; color: #fff !important; }
.em-card__landmark { margin: 0 0 0.6rem; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; color: #F6DE9A !important; }
.em-card__stat { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.8rem; padding-inline-start: 1rem; border-inline-start: 3px solid #D9B25A; }
.em-card__stat strong { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.05; color: #F6DE9A; }
.em-card__stat span { font-size: 1.0625rem; color: rgba(248, 242, 230, 0.9); }
.em-card .am-btn { align-self: flex-start; }

.em-controls { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.6rem; }
.em-arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; border: 1px solid rgba(217, 178, 90, 0.7); background: rgba(255, 255, 255, 0.06); color: #F6DE9A; transition: background 0.25s, color 0.25s, transform 0.25s; }
.em-arrow:hover { background: #D9B25A; color: #0B1556; transform: scale(1.08); }
.em-arrow:focus-visible, .em-dot:focus-visible { outline: 3px solid #F6DE9A; outline-offset: 3px; }
.em-dots { display: flex; gap: 0.3rem; }
.em-dot { position: relative; width: 1.7rem; height: 1.7rem; border: 0; background: none; cursor: pointer; }
.em-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0.65rem; height: 0.65rem; margin: -0.325rem 0 0 -0.325rem; border-radius: 50%; background: rgba(248, 242, 230, 0.35); transition: background 0.3s, width 0.4s, margin 0.4s; }
.em-dot:hover::before { background: #F6DE9A; }
.em-dot.is-active::before { width: 1.5rem; margin-left: -0.75rem; border-radius: 999px; background: #D9B25A; }

@media (max-width: 800px) {
    .em-card { grid-template-columns: 1fr; text-align: start; }
    .em-card__art svg { max-height: 15rem; }
    .em-slide { width: calc(100vw - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
    .em-track, .em-slide { transition: none; }
}