/* --- General Layout --- */
        .content-primary { width: 100%; } 
        
        /* --- Profile Card Design --- */
        .profile-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            height: 100%;
            width: 100%;
            text-decoration: none !important;
        }

        .profile-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.2);
        }

        /* --- Image Headers (The Red Boxes) --- */
        .card-img-header {
            background-color: #800020; /* Deep Red */
            width: 100%;
            display: flex;
            align-items: flex-end; 
            justify-content: center; 
            padding: 0;
            box-sizing: border-box; 
            overflow: hidden; 
            position: relative;
        }

        /* Standard Bishop Height */
        .card-img-header.standard-size { height: 260px; }
        .card-img-header.standard-size img {
            width: 100%; 
            height: 100%; 
            object-fit: contain; 
            margin: 0; 
            padding: 0;
        }

        /* Patriarch Height (Double Size) */
        .card-img-header.patriarch-size { height: 500px; }
        
        /* Catholicos Height (1.5x Size) */
        .card-img-header.catholicos-size { height: 500px; }

        /* Patriarch & Catholicos Image Fill (Cover) */
        .card-img-header.patriarch-size img,
        .card-img-header.catholicos-size img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
            object-position: top center;
            display: block;
        }

        /* --- Card Body Text --- */
        .card-body {
            padding: 20px 15px;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            z-index: 2;
        }

        .card-name {
            color: #8B0000;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 8px;
            line-height: 1.3;
        }

        .card-role {
            color: #666;
            font-size: 0.9rem;
            font-style: italic;
            font-weight: 400;
        }

        /* --- Leaders Section Layout --- */
        .leaders-section {
            display: flex;
            flex-direction: column;
            gap: 40px;
            margin-bottom: 60px;
            align-items: center;
            width: 100%;
        }

        .leader-wrapper-patriarch { width: 100%; max-width: 500px; }
        .leader-wrapper-catholicos { width: 100%; max-width: 400px; }

        /* --- Metropolitans Grid --- */
        .metropolitans-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-top: 30px;
        }

        /* --- Modal Styles --- */
        .modal { 
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            background-color: rgba(0,0,0,0.7); 
            animation: fadeIn 0.3s; 
            
            /* Moves scrollbar to overlay, allowing whole popup to scroll */
            overflow-y: auto; 
        }
        
        .modal-content { 
            background-color: #fefefe; 
            margin: 30px auto; 
            border-radius: 12px; 
            width: 90%; 
            max-width: 500px; 
            animation: slideIn 0.3s; 
            position: relative; 
        }
        
        .modal-header { 
            background: linear-gradient(135deg, #8B0000 0%, #c41e3a 100%); 
            padding: 15px 20px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modal-header h2 { 
            color: #ffffff !important; 
            margin: 0; 
            font-size: 1.2rem; 
            font-weight: 600;
        }
        
        .modal-body { padding: 30px; text-align: center; }
        .modal-close { color: white; font-size: 28px; cursor: pointer; }
        
        /* Modal Image Container */
        .modal-img-container {
            background-color: #800020; 
            border-radius: 15px;
            padding: 0;
            margin-bottom: 20px;
            width: 100%; 
            height: 400px;
            overflow: hidden;
            border: 4px solid #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            display: flex;
            align-items: flex-end; 
            justify-content: center;
        }
        
        .modal-img-container img { 
            width: 100%; 
            height: 100%; 
            object-fit: contain; 
        }
        
        /* Transparent Navigation Buttons */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent; 
            color: #8B0000; 
            padding: 10px 20px;
            font-size: 40px; 
            cursor: pointer;
            border: none; 
            z-index: 100;
            transition: all 0.3s ease;
            user-select: none;
            text-shadow: 0 2px 5px rgba(255,255,255,0.5); 
        }

        .nav-btn:hover {
            color: #a52a2a; 
            transform: translateY(-50%) scale(1.1); 
        }

        .prev-btn { left: 0px; }
        .next-btn { right: 0px; }

        .detail-row { margin-bottom: 10px; text-align: left; border-bottom: 1px solid #eee; padding-bottom: 8px; }
        .detail-label { font-weight: bold; color: #8B0000; display: block; margin-bottom: 3px; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* --- Responsive --- */
        @media (max-width: 1024px) {
            .metropolitans-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .metropolitans-grid { grid-template-columns: 1fr; }
            .card-img-header.patriarch-size { height: 450px; }
            .card-img-header.catholicos-size { height: 350px; }
            .leader-wrapper-patriarch, .leader-wrapper-catholicos { max-width: 100%; }
            .modal-img-container { height: 300px; }
            
            .nav-btn { font-size: 30px; padding: 10px; }
        }