/* 
 * MINE Catalog - Premium Dark & Gold Theme 
 * Dependencies: main.css (optional base), Google Fonts
 */

/* Import Base Variables */
@import 'base/_variables.css';
@import 'components/_branding.css';

/* Catalog-specific overrides */
.catalog-page {
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Setup */
body.catalog-page {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    /* Default to Cairo for easy RTL support */
    overflow-x: hidden;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
a,
button {
    font-family: var(--font-heading);
}

/* --- Navigation (Catalog Page Overrides) --- */
/* Base navbar styles come from main.css - these are catalog-specific overrides */

.catalog-page .navbar {
    background: transparent;
    transition: var(--transition-fast);
}

.catalog-page .navbar.scrolled {
    background: var(--bg-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.catalog-page .nav-container {
    max-width: 1400px;
}

/* Language toggle for catalog */
.catalog-page .lang-toggle {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

/* Nav links - ensure proper RTL support */
.catalog-page .nav-link {
    font-weight: 600;
}

.catalog-page .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--gold-gradient);
    transition: width 0.3s;
}

[dir="rtl"] .catalog-page .nav-link::after {
    right: 0;
    left: auto;
}

[dir="ltr"] .catalog-page .nav-link::after {
    left: 0;
    right: auto;
}

.catalog-page .nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--gold-primary);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    /* Or right */
    width: 100%;
    height: 100vh;
    background: var(--mine-navy);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-links {
    list-style: none;
    text-align: center;
    padding: 0;
}

.mobile-links li {
    margin: 2rem 0;
}

.mobile-links a {
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    transition: 0.3s;
}

.mobile-links a:hover {
    color: var(--gold-primary);
}

.close-menu {
    position: absolute;
    top: 2rem;
    right: 2rem;
    /* Will be left in RTL if we don't fix it */
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

[dir="rtl"] .close-menu {
    left: 2rem;
    right: auto;
}


/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, var(--mine-navy-light) 0%, var(--mine-navy) 100%);
    z-index: -1;
}

/* Optional: Subtle animated grid or particle background here */
.hero-bg-overlay::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('../images/card/background.png') repeat;
    opacity: 0.05;
    animation: rotateBg 100s linear infinite;
}

@keyframes rotateBg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-title span {
    display: block;
}

.gold-text {
    background: var(--gold-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.cta-btn {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cta-btn.primary {
    background: var(--gold-gradient);
    color: #000;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
}

.cta-btn.secondary {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.cta-btn.secondary:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.7;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--text-secondary);
    border-radius: 15px;
    display: block;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--gold-primary);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% {
        top: 10px;
        opacity: 1;
    }

    100% {
        top: 30px;
        opacity: 0;
    }
}

/* --- Formula Section --- */
.formula-section {
    padding: 6rem 0;
    background: var(--mine-navy-light);
    overflow: hidden;
}

.formula-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.formula-col {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease;
}

.formula-col.visible {
    opacity: 1;
    transform: translateY(0);
}

.dark-beam {
    background: var(--mine-navy);
    border-left: 1px solid var(--mine-navy-lighter);
    /* Right border in RTL? */
}

[dir="rtl"] .dark-beam {
    border-left: none;
    border-right: 1px solid var(--mine-navy-lighter);
}

.section-heading {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--gold-primary);
}

.big-text {
    font-size: 1.8rem;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 2rem;
}

.gem-icon-huge {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.03);
    /* Subtle watermark */
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

[dir="rtl"] .gem-icon-huge {
    right: auto;
    left: 2rem;
}

.formula-header {
    margin-bottom: 3rem;
}

.gold-gradient-text {
    font-size: 2.5rem;
    background: var(--gold-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.acronym-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.acronym-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.letter {
    font-size: 3rem;
    font-weight: 900;
    color: var(--mine-navy-lighter);
    -webkit-text-stroke: 1px var(--gold-primary);
    line-height: 1;
}

.acronym-item .text h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
}

.acronym-item .text p {
    margin: 0.5rem 0 0;
    color: #888;
}

/* --- Services Section --- */
.services-section {
    padding: 8rem 2rem;
}

.center-text {
    text-align: center;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.separator-gold {
    width: 80px;
    height: 3px;
    background: var(--gold-primary);
    margin: 0 auto 2rem;
}

.section-desc {
    font-size: 1.2rem;
    color: #aaa;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--bg-card);
    padding: 3rem 2rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    border: 1px solid var(--mine-navy-lighter);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold-dark);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2rem;
    color: var(--gold-primary);
    transition: 0.4s;
}

.service-card:hover .icon-wrapper {
    background: var(--gold-primary);
    color: #000;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: 0.5s;
    pointer-events: none;
}

.service-card:hover .card-glow {
    transform: translate(-50%, -50%) scale(2);
}

/* --- Portfolio --- */
.portfolio-section {
    background: var(--mine-navy);
    /* Deep Navy */
    padding: 8rem 0;
}

/* Portfolio Header uses common classes */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.filter-btn {
    background: none;
    border: 1px solid var(--mine-navy-lighter);
    color: #aaa;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: #000;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.portfolio-item {
    aspect-ratio: 1/1;
    /* Square by default */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.portfolio-item:hover .overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    transform: translateY(20px);
    transition: 0.4s;
}

.portfolio-item:hover .overlay-content {
    transform: translateY(0);
}

.overlay h4 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.overlay span {
    color: var(--gold-primary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: block;
}

.view-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.view-btn:hover {
    background: #fff;
    color: #000;
}

/* --- CTA Section --- */
.cta-section {
    padding: 6rem 0;
    background: linear-gradient(to top, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
}

.big-btn {
    margin-top: 2rem;
    padding: 1.2rem 3rem;
    font-size: 1.2rem;
}


/* --- Footer --- */
.catalog-footer {
    border-top: 1px solid var(--mine-navy-lighter);
    padding: 2rem 0;
    background: var(--mine-navy);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[dir="rtl"] .footer-content {
    flex-direction: row;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    color: #666;
    font-size: 1.2rem;
    transition: 0.3s;
}

.social-icons a:hover {
    color: var(--gold-primary);
}


/* --- Lightbox --- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
    animation: fadeIn 0.3s;
}

.lightbox-content-wrapper {
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.lightbox-content-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    border: 2px solid #333;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
    margin-top: 1rem;
}

.lightbox-caption h3 {
    color: var(--gold-primary);
    margin: 0;
}

.lightbox-caption p {
    color: #ccc;
    margin: 0.5rem 0 0;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 2rem;
    transition: 0.3s;
}

.lightbox-nav:hover {
    color: var(--gold-primary);
}

.lightbox-nav.prev {
    left: 1rem;
}

.lightbox-nav.next {
    right: 1rem;
}

/* In RTL, arrows should visually point correctly, but DOM position remains same. 
   Usually arrow icons flip automatically or we manually flip them? 
   FontAwesome arrows point left/right. 
   If RTL: Prev (left button) should probably show "Next" content or visually point Right?
   Standard: Left arrow goes to "Left" item. Right arrow goes to "Right".
   In RTL, "Next" usually means "Left" (reading right to left). 
   We handled this in JS keydown, but visual buttons need care.
   For now, we keep visual directional buttons.
*/

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s forwards;
}

/* Responsive */
@media (max-width: 768px) {

    .nav-actions,
    .nav-links {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .formula-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* Video Section Styles */
.videos-section {
    padding: 80px 0;
    background-color: var(--mine-navy-light);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Smaller distance between videos */
    margin-top: 40px;
}

.video-card {
    border: 4px solid #d4af37;
    /* Distinct Gold Frame */
    border-radius: 8px;
    /* Slightly rounded corners */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    background: var(--mine-navy);
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.5);
    border-color: #ffd700;
    /* Brighter gold on hover */
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* YouTube Facade Pattern */
.video-facade {
    cursor: pointer;
}

.video-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-facade:hover .play-btn-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}